Skip to content

M
mallapp
Commit 35cd5e0e authored by Mac's avatar Mac
Browse files
Options

司导分享

parent ba522e62
Hide whitespace changes
Inline Side-by-side
Showing with 3096 additions and 16 deletions
pages.json
View file @ 35cd5e0e
......@@ -331,6 +331,8 @@
"path":"order-commit"
},{
"path":"order-commit-detail"
},{
"path":"components/guidecarDraw"
}]
},
{
......
pages/guidecar/components/draw/style1.vue 0 → 100644
View file @ 35cd5e0e
<template>
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas canvas-id="firstCanvas" class="sty-box" @error="canvasIdErrorCallback"></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0"
},
images: {
type: Array,
default: []
},
bgType: {
type: Number,
default: 0
},
bgColor: {
type: String,
default: ""
},
info: {
type: Object,
default: {}
}
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: []
},
ctx: null,
tempPic: "",
qrcodepic: ""
};
},
watch: {
images: {
handler: function(val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true
},
bgType: {
handler: function(val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true
},
bgColor: {
handler: function(val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true
},
info: {
handler: function(val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true
}
},
mounted() {
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function(e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报"
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: res => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报"
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: "保存成功"
});
},
fail: function(err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
uni.authorize({
scope:'scope.writePhotosAlbum',
success: (res) => {
console.log('11111');
},
fail: (res) => {
uni.showModal({
content:'检测到您没打开保存到相册权限，是否去设置打开？',
confirmText: "确认",
cancelText:'取消',
success: (res) => {
if(res.confirm){
uni.openSetting({
success: (res) => {
console.log(res);
if(res.authSetting['scope.writePhotosAlbum']){
that.saveImage()
}
}
})
}else{
console.log('取消');
}
}
})
}
})
}else{
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300"
});
}
},
complete: function() {
uni.hideLoading();
}
});
},
fail: function(e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300"
});
}
},
this
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报"
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function(image) {
that.drawBg(ctx);
that.info.avatar_loca = image.path;
that.drawAvatar(ctx);
that.drawTitle(ctx);
that.drawGoodPicture(ctx);
}
});
} else {
this.drawBg(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
console.log(this.config.images);
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(24 + 45, 95 + 45, 45, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 24, 95, 90, 90);
ctx.restore();
},
drawTitle(ctx) {
let text = this.info.nickname + "向您推荐一个好物";
this.roundRect(
ctx,
24 + 90 + 20,
95 + 20,
text.length * 22 + 20,
55,
55,
"#f5f5f5"
);
ctx.fillStyle = "#000000";
ctx.font = "20px 'microsoft yahei'";
ctx.fillText(text, 24 + 134, 95 + 55);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
let that = this;
if (this.qrcodepic == "") {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function(image) {
that.qrcodepic=image.path
ctx.drawImage(image.path, 480, 975, 215, 215);
that.finishPic(ctx);
}
});
} else {
ctx.drawImage(that.qrcodepic, 480, 975, 215, 215);
that.finishPic(ctx);
}
},
finishPic(ctx) {
let that = this;
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0,
destHeight: 1344.0,
canvasId: "firstCanvas",
success: res => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
}
},
that
);
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function(image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 24, 95 + 130, 702, 702);
that.otherDraw(ctx);
}
});
} else {
ctx.drawImage(this.config.loca_images[0], 24, 95 + 130, 702, 702);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function(image) {
console.log(image);
that.config.loca_images.push(image);
that.drawTowPic(ctx);
}
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(24, 95 + 130, 702, 351);
var imgRect = this.coverImg(
702,
351,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
24,
95 + 130,
702,
351
);
ctx.fillStyle = "#000";
ctx.fillRect(24, 95 + 481, 702, 351);
var imgRect = this.coverImg(
702,
351,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
24,
95 + 481,
702,
351
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function(image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
}
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(24, 95 + 130, 702, 351);
var imgRect = this.coverImg(
702,
351,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
24,
95 + 130,
702,
351
);
ctx.drawImage(this.config.loca_images[1].path, 24, 95 + 481, 351, 351);
ctx.drawImage(
this.config.loca_images[2].path,
24 + 351,
95 + 481,
351,
351
);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function(image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
}
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 24, 95 + 130, 351, 351);
ctx.drawImage(
this.config.loca_images[1].path,
24 + 351,
95 + 130,
351,
351
);
ctx.drawImage(this.config.loca_images[2].path, 24, 95 + 481, 351, 351);
ctx.drawImage(
this.config.loca_images[3].path,
24 + 351,
95 + 481,
351,
351
);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function(image) {
console.log(image);
that.config.loca_images.push(image);
that.drawFivePic(ctx);
}
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 24, 95 + 130, 351, 351);
ctx.drawImage(this.config.loca_images[1].path, 24, 95 + 481, 351, 351);
ctx.fillStyle = "#000";
ctx.fillRect(375, 225, 351, 234);
var imgRect = this.coverImg(
351,
234,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
225,
351,
234
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 459, 351, 234);
imgRect = this.coverImg(
351,
234,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
459,
351,
234
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 693, 351, 234);
imgRect = this.coverImg(
351,
234,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
693,
351,
234
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight
};
},
otherDraw(ctx) {
let x = 24;
let y = 797 + 130;
let w = 702;
let h = 310;
let r = 20;
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = "#FFF";
// ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x, y);
ctx.lineTo(x + w, y);
//ctx.lineTo(x + w, y + r);
//ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
//ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x, y);
ctx.fill();
ctx.closePath();
this.showGoodName(ctx);
this.showGoodPrice(ctx);
this.showTips(ctx);
this.drawQrCode(ctx);
},
showGoodPrice(ctx) {
ctx.fillStyle = "#fc4a3b";
ctx.font = "26px 'microsoft yahei'";
let x = 54;
let y = 797 + 235 + 80;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#fc4a3b";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, x + 30, y);
},
showTips(ctx) {
ctx.fillStyle = "gray";
ctx.font = "24px 'microsoft yahei'";
let x = 54;
let y = 1194;
ctx.fillText("长按识别小程序码进入", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#000000";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 360;
let n = this.info.goods_name;
let lines = 2;
let x = 54;
let y = 797 + 185;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > 360) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y + 55);
}
},
roundRect(ctx, x, y, w, h, r, c = "#fff") {
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},
canvasIdErrorCallback: function(e) {
console.error(e.detail.errMsg);
}
}
};
</script>
<style>
.draw-style1 {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
z-index: 2;
}
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -2000px;
left: -1500px;
}
</style>
pages/guidecar/components/draw/style2.vue 0 → 100644
View file @ 35cd5e0e
<template>
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas
canvas-id="firstCanvas"
class="sty-box"
@error="canvasIdErrorCallback"
></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0",
},
images: {
type: Array,
default: [],
},
bgType: {
type: Number,
default: 0,
},
bgColor: {
type: String,
default: "",
},
info: {
type: Object,
default: {},
},
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: [],
},
ctx: null,
tempPic: "",
qrcodepic:""
};
},
watch: {
images: {
handler: function (val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true,
},
bgType: {
handler: function (val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true,
},
bgColor: {
handler: function (val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true,
},
info: {
handler: function (val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true,
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function (e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
uni.authorize({
scope:'scope.writePhotosAlbum',
success: (res) => {
console.log('11111');
},
fail: (res) => {
uni.showModal({
content:'检测到您没打开保存到相册权限，是否去设置打开？',
confirmText: "确认",
cancelText:'取消',
success: (res) => {
if(res.confirm){
uni.openSetting({
success: (res) => {
console.log(res);
if(res.authSetting['scope.writePhotosAlbum']){
that.saveImage()
}
}
})
}else{
console.log('取消');
}
}
})
}
})
}else{
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300"
});
}
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function (image) {
that.drawBg(ctx);
that.drawGoodPicture(ctx);
that.info.avatar_loca = image.path;
},
});
} else {
this.drawBg(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
console.log(this.config.images);
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(99, 1150, 45, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 54, 1105, 90, 90);
ctx.restore();
ctx.fillStyle = "#000000";
ctx.font = "20px 'microsoft yahei'";
ctx.fillText(this.info.nickname, 54+90+20, 1160);
},
drawTitle(ctx) {
let text = "长按识别小程序码进入";
this.roundRect(ctx, 54, 1210, 280, 52, 52, "#f5f5f5");
ctx.fillStyle = "#000000";
ctx.font = "24px 'microsoft yahei'";
ctx.fillText(text, 74, 1244);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
let that = this;
if (this.qrcodepic == "") {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function(image) {
that.qrcodepic=image.path
ctx.drawImage(image.path, 458, 1063, 215, 215);
that.finishPic(ctx);
}
});
} else {
ctx.drawImage(that.qrcodepic, 458, 1063, 215, 215);
that.finishPic(ctx);
}
},
finishPic(ctx) {
let that = this;
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0,
destHeight: 1344.0,
canvasId: "firstCanvas",
success: res => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
}
},
that
);
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function (image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 0, 0, 750, 750);
that.otherDraw(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0], 0, 0, 750, 750);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawTowPic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 750, 375);
var imgRect = this.coverImg(
750,
375,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
0,
0,
750,
375
);
ctx.fillStyle = "#000";
ctx.fillRect(0, 375, 750, 375);
var imgRect = this.coverImg(
750,
375,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
0,
375,
750,
375
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 750, 375);
var imgRect = this.coverImg(
750,
375,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
0,
0,
750,
375
);
ctx.drawImage(this.config.loca_images[1].path, 0, 375, 375, 375);
ctx.drawImage(this.config.loca_images[2].path, 375, 375, 375, 375);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 0, 0, 375, 375);
ctx.drawImage(this.config.loca_images[1].path, 375, 0, 375, 375);
ctx.drawImage(this.config.loca_images[2].path, 0, 375, 375, 375);
ctx.drawImage(this.config.loca_images[3].path, 375, 375, 375, 375);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFivePic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 0, 0, 375, 375);
ctx.drawImage(this.config.loca_images[1].path, 0, 375, 375, 375);
ctx.fillStyle = "#000";
ctx.fillRect(375, 0, 375, 250);
var imgRect = this.coverImg(
375,
250,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
0,
375,
250
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 250, 375, 250);
imgRect = this.coverImg(
375,
250,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
250,
375,
250
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 500, 375, 250);
imgRect = this.coverImg(
375,
250,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
500,
375,
250
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
},
otherDraw(ctx) {
if (!this.config.twostyle) {
let that = this;
uni.getImageInfo({
src:
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/style-two-end.png",
success: function (image) {
that.config.twostyle = image.path;
ctx.drawImage(that.config.twostyle, 24, 707, 702, 600);
that.showGoodName(ctx);
that.showGoodPrice(ctx);
//that.showTips(ctx);
that.drawQrCode(ctx);
that.drawAvatar(ctx);
that.drawTitle(ctx);
},
});
} else {
ctx.drawImage(this.config.twostyle, 24, 707, 702, 600);
this.showGoodName(ctx);
this.showGoodPrice(ctx);
//this.showTips(ctx);
this.drawQrCode(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
}
},
showGoodPrice(ctx) {
ctx.fillStyle = "#fc4a3b";
ctx.font = "26px 'microsoft yahei'";
let x = 54;
let y = 900;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#fc4a3b";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, x + 30, y);
},
showTips(ctx) {
ctx.fillStyle = "gray";
ctx.font = "24px 'microsoft yahei'";
let x = 54;
let y = 1194;
ctx.fillText("长按识别小程序码进入", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#000000";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 646;
let n = this.info.goods_name;
let lines = 2;
let x = 54;
let y = 780;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > maxWidth) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y + 55);
}
},
roundRect(ctx, x, y, w, h, r, c = "#fff") {
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
},
};
</script>
<style>
.draw-style1 {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
z-index: 2;
}
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -2000px;
left: -1500px;
}
</style>
pages/guidecar/components/draw/style3.vue 0 → 100644
View file @ 35cd5e0e
<template>
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas
canvas-id="firstCanvas"
class="sty-box"
@error="canvasIdErrorCallback"
></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0",
},
images: {
type: Array,
default: [],
},
bgType: {
type: Number,
default: 0,
},
bgColor: {
type: String,
default: "",
},
info: {
type: Object,
default: {},
},
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: [],
},
ctx: null,
tempPic: "",
qrcodepic:""
};
},
watch: {
images: {
handler: function (val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true,
},
bgType: {
handler: function (val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true,
},
bgColor: {
handler: function (val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true,
},
info: {
handler: function (val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true,
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function (e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
uni.authorize({
scope:'scope.writePhotosAlbum',
success: (res) => {
console.log('11111');
},
fail: (res) => {
uni.showModal({
content:'检测到您没打开保存到相册权限，是否去设置打开？',
confirmText: "确认",
cancelText:'取消',
success: (res) => {
if(res.confirm){
uni.openSetting({
success: (res) => {
console.log(res);
if(res.authSetting['scope.writePhotosAlbum']){
that.saveImage()
}
}
})
}else{
console.log('取消');
}
}
})
}
})
}else{
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300"
});
}
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function (image) {
that.info.avatar_loca = image.path;
uni.getImageInfo({
src:
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/three-love.png",
success: function (bxImg) {
that.drawBg(ctx);
that.config.bixin = bxImg.path;
that.drawAvatar(ctx);
that.drawTitle(ctx);
that.drawGoodPicture(ctx);
},
});
},
});
} else {
this.drawBg(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
console.log(this.config.images);
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(85, 90, 50, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 35, 40, 100, 100);
ctx.restore();
},
drawTitle(ctx) {
ctx.fillStyle = "#333333";
ctx.font = "24px 'microsoft yahei'";
ctx.fillText("我看上了这款商品", 165, 64);
ctx.fillText("帮我看看咋样啊~", 165, 103);
ctx.fillText("比心~", 165, 147);
ctx.drawImage(this.config.bixin, 235, 125, 24, 24);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
let that = this;
if (this.qrcodepic == "") {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function(image) {
that.qrcodepic=image.path
ctx.drawImage(image.path, 50, 1085, 232, 232);
that.finishPic(ctx);
}
});
} else {
ctx.drawImage(that.qrcodepic, 50, 1085, 232, 232);
that.finishPic(ctx);
}
},
finishPic(ctx) {
let that = this;
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0,
destHeight: 1344.0,
canvasId: "firstCanvas",
success: res => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
}
},
that
);
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function (image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 36, 176, 678, 678);
that.otherDraw(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0], 36, 176, 678, 678);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawTowPic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(36, 176, 678, 339);
var imgRect = this.coverImg(
678,
339,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
36,
176,
678,
339
);
ctx.fillStyle = "#000";
ctx.fillRect(36, 515, 678, 339);
var imgRect = this.coverImg(
678,
339,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
36,
515,
678,
339
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(36, 176, 678, 339);
var imgRect = this.coverImg(
678,
339,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
36,
176,
678,
339
);
ctx.drawImage(this.config.loca_images[1].path, 36, 515, 339, 339);
ctx.drawImage(this.config.loca_images[2].path, 375, 515, 339, 339);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 36, 176, 339, 339);
ctx.drawImage(this.config.loca_images[1].path, 375, 176, 339, 339);
ctx.drawImage(this.config.loca_images[2].path, 36, 515, 339, 339);
ctx.drawImage(this.config.loca_images[3].path, 375, 515, 339, 339);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawFivePic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 36, 176, 339, 339);
ctx.drawImage(this.config.loca_images[1].path, 36, 515, 339, 339);
ctx.fillStyle = "#000";
ctx.fillRect(375, 176, 339, 226);
var imgRect = this.coverImg(
339,
226,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
176,
339,
226
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 402, 339, 226);
imgRect = this.coverImg(
339,
226,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
402,
339,
226
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 628, 339, 226);
imgRect = this.coverImg(
339,
226,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
628,
339,
226
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
},
otherDraw(ctx) {
this.showGoodName(ctx);
this.showGoodPrice(ctx);
this.showTips(ctx);
this.drawQrCode(ctx);
},
showGoodPrice(ctx) {
ctx.fillStyle = "#333";
ctx.font = "26px 'microsoft yahei'";
let x = 285;
let y = 990;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#333";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, 315, y);
ctx.beginPath();
ctx.fillStyle = "#FFF";
ctx.fillRect(36, 1055, 678, 2);
},
showTips(ctx) {
ctx.fillStyle = "#333";
ctx.font = "24px 'microsoft yahei'";
let x = 320;
let y = 1225;
ctx.fillText("长按识别小程序码 即可查看~", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#333333";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 618;
let n = this.info.goods_name;
let lines = 1;
let x = 60;
let y = 910;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > maxWidth) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y);
}
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
},
};
</script>
<style>
.draw-style1 {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
z-index: 2;
}
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -2000px;
left: -1500px;
}
</style>
pages/guidecar/components/draw/style4.vue 0 → 100644
View file @ 35cd5e0e
<template>
<view class="draw-style1">
<u-top-tips ref="uTips"></u-top-tips>
<img :src="tempPic" mode="widthFix" :style="{ width: 750 * zoom + 'px' }" />
<canvas
canvas-id="firstCanvas"
class="sty-box"
@error="canvasIdErrorCallback"
></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0",
},
images: {
type: Array,
default: [],
},
bgType: {
type: Number,
default: 0,
},
bgColor: {
type: String,
default: "",
},
info: {
type: Object,
default: {},
},
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: [],
},
ctx: null,
tempPic: "",
qrcodepic:""
};
},
watch: {
images: {
handler: function (val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true,
},
bgType: {
handler: function (val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true,
},
bgColor: {
handler: function (val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true,
},
info: {
handler: function (val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true,
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function (e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
uni.authorize({
scope:'scope.writePhotosAlbum',
success: (res) => {
console.log('11111');
},
fail: (res) => {
uni.showModal({
content:'检测到您没打开保存到相册权限，是否去设置打开？',
confirmText: "确认",
cancelText:'取消',
success: (res) => {
if(res.confirm){
uni.openSetting({
success: (res) => {
console.log(res);
if(res.authSetting['scope.writePhotosAlbum']){
that.saveImage()
}
}
})
}else{
console.log('取消');
}
}
})
}
})
}else{
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300"
});
}
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
drawCtx() {
uni.showLoading({
title: "正在生成海报",
});
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function (image) {
that.drawBg(ctx);
that.info.avatar_loca = image.path;
that.drawAvatar(ctx);
that.drawTitle(ctx);
that.drawGoodPicture(ctx);
},
});
} else {
this.drawBg(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
this.roundRect(ctx, 25, 138, 700, 1182, 15, "#fff");
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(74, 58, 50, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 24, 8, 100, 100);
ctx.restore();
},
drawTitle(ctx) {
let text = this.info.nickname + "向您推荐一个好物";
this.roundRect(ctx, 144, 34, text.length * 22+20, 55, 55, "#f5f5f5");
ctx.fillStyle = "#333";
ctx.font = "20px 'microsoft yahei'";
ctx.fillText(text, 165, 70);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
let that = this;
if (this.qrcodepic == "") {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function(image) {
that.qrcodepic=image.path
ctx.drawImage(image.path, 306, 1097, 138, 138);
that.finishPic(ctx);
}
});
} else {
ctx.drawImage(that.qrcodepic, 306, 1097, 138, 138);
that.finishPic(ctx);
}
},
finishPic(ctx) {
let that = this;
ctx.draw(false, () => {
uni.canvasToTempFilePath(
{
x: 0,
y: 0,
width: 750,
height: 1344,
destWidth: 750.0,
destHeight: 1344.0,
canvasId: "firstCanvas",
success: res => {
console.log(res);
uni.hideLoading();
that.tempPic = res.tempFilePath;
},
fail(e) {
console.log(e);
}
},
that
);
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function (image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 50, 407, 650, 650);
that.otherDraw(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0], 50, 407, 650, 650);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawTowPic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(50, 407, 650, 325);
var imgRect = this.coverImg(
650,
325,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
50,
407,
650,
325
);
ctx.fillStyle = "#000";
ctx.fillRect(50, 732, 650, 325);
var imgRect = this.coverImg(
650,
325,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
50,
732,
650,
325
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(50, 407, 650, 325);
var imgRect = this.coverImg(
650,
325,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
50,
407,
650,
325
);
ctx.drawImage(this.config.loca_images[1].path, 50, 732, 325, 325);
ctx.drawImage(this.config.loca_images[2].path, 375, 732, 325, 325);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 50, 407, 325, 325);
ctx.drawImage(this.config.loca_images[1].path, 375, 407, 325, 325);
ctx.drawImage(this.config.loca_images[2].path, 50, 732, 325, 325);
ctx.drawImage(this.config.loca_images[3].path, 375, 732, 325, 325);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawFivePic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 50, 407, 325, 325);
ctx.drawImage(this.config.loca_images[1].path, 50, 732, 325, 325);
ctx.fillStyle = "#000";
ctx.fillRect(375, 407, 325, 216);
var imgRect = this.coverImg(
325,
216,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
407,
325,
216
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 623, 325, 217);
imgRect = this.coverImg(
325,
217,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
623,
325,
217
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 840, 325, 217);
imgRect = this.coverImg(
325,
217,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
840,
325,
217
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
},
otherDraw(ctx) {
this.showGoodName(ctx);
this.showGoodPrice(ctx);
this.showTips(ctx);
this.drawQrCode(ctx);
},
showGoodPrice(ctx) {
ctx.fillStyle = "#fc4a3b";
ctx.font = "26px 'microsoft yahei'";
let x = 55;
let y = 308;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#fc4a3b";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, 85, y);
},
showTips(ctx) {
ctx.fillStyle = "gray";
ctx.font = "24px 'microsoft yahei'";
let x = 262;
let y = 1271;
ctx.fillText("长按识别小程序码进入", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#000000";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 616;
let n = this.info.goods_name;
let lines = 2;
let x = 55;
let y = 200;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > maxWidth) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y + 55);
}
},
roundRect(ctx, x, y, w, h, r, c = "#fff") {
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
},
};
</script>
<style>
.draw-style1 {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
z-index: 2;
}
.draw-style1 .sty-box {
width: 750px;
height: 1344px;
position: absolute;
top: -2000px;
left: -1500px;
}
</style>
pages/guidecar/components/guidecarDraw.vue 0 → 100644
View file @ 35cd5e0e
<template>
<view class="guidecarDraw" v-if="!loading">
<view class="show-box">
<view class="ad-box" :style="{ width: adWidth + 'px' }">
<style1
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '1'"
></style1>
<style2
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '2'"
></style2>
<style3
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '3'"
></style3>
<style4
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '4'"
></style4>
</view>
</view>
<view class="op-box">
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">样式</view>
<view class="content">
<view
class="item"
v-for="(x, i) in config.poster_style"
:key="i"
:style="[i == chosens.style ? activeStyle : {}]"
@click="changeChosenHandler('style', i)"
>
样式{{ x }}
<view
class="chosen"
:style="[i == chosens.style ? chosenStyle : {}]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">排版</view>
<view class="content">
<view
class="item"
v-for="(x, i) in config.image_style"
:key="i"
:style="[i == chosens.image ? activeStyle : {}]"
@click="changeChosenHandler('image', i)"
>
<view class="fill">&nbsp;</view>
<text>{{ x }}张图</text>
<view
class="chosen"
v-if="i == chosens.image"
:style="[chosenStyle]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">类型</view>
<view class="content">
<view
class="item"
v-for="(x, i) in types"
:key="i"
:style="[i == chosens.type ? activeStyle : {}]"
@click="changeChosenHandler('type', i)"
>
<view :class="[x.clsName]"></view>
<text>{{ x.name }}</text>
<view
class="chosen"
v-if="i == chosens.type"
:style="[chosenStyle]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">颜色</view>
<view class="content">
<view>
<view class="color-box">
<view
class="color-item"
v-for="(x, i) in config.color"
:key="i"
:style="{ background: x }"
@click="changeChosenHandler('color', i)"
>
&nbsp;
<view
class="chosen"
v-if="i == chosens.color"
:style="[chosenStyle]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<view style="margin: 0 5vw; margin-bottom: 20rpx;">
<u-button
@click="gerenalPicHandler"
:ripple="true"
:hair-line="false"
:custom-style="btn2"
>保存图片</u-button
>
</view>
</view>
</view>
</template>
<script>
import style1 from './draw/style1';
import style2 from "./draw/style2";
import style3 from "./draw/style3";
import style4 from "./draw/style4";
export default {
components: { style1, style2, style3, style4 },
data() {
return {
mainColor: "",
activeStyle: {},
chosenStyle: {},
id: 0,
config: {},
info: {},
loading: true,
chosens: {
style: 0,
image: 0,
color: 0,
type: 0,
},
generterConfig: {
bgColor: "",
bgType: 1,
images: [],
themeSty: "1",
},
types: [
{
clsName: "fill",
name: "纯色",
},
{
clsName: "change",
name: "渐变",
},
],
btn2: {
flex: 1,
height: "100%",
borderRadius: "40px",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
adWidth: 10,
adHeight: 0,
address:'',
Pickcar:'',
StartTime:'',
EndTime:'',
};
},
onLoad(option) {
uni.setNavigationBarTitle({
title: "商品海报",
});
this.mainColor = this.$uiConfig.mainColor;
this.activeStyle = {
background: "#FFF",
border: "2rpx solid " + this.mainColor,
color: this.mainColor,
};
this.chosenStyle = {
background: this.mainColor,
color: "#FFF",
};
this.id = option.id || 56978;
if(option && option.address){
this.address = option.address
}
if(option && option.Pickcar){
this.Pickcar = option.Pickcar
}
if(option && option.StartTime){
this.StartTime = option.StartTime
}
if(option && option.EndTime){
this.EndTime = option.EndTime
}
this.btn2.background = this.mainColor;
this.init();
},
onShow() {
setTimeout(() => {
this.queryHeight();
}, 1000);
},
methods: {
gerenalPicHandler() {
this.$refs.shareImageContent.saveImage();
},
queryHeight() {
let that = this;
let info = uni.createSelectorQuery().select(".ad-box");
info
.boundingClientRect(function (data) {
that.adHeight = data.height;
that.adWidth = data.height * 0.5622;
})
.exec();
},
changeChosenHandler(k, v) {
this.chosens[k] = v;
if (k == "style") {
this.generterConfig.themeSty = this.config.poster_style[v];
} else if (k == "color") {
this.generterConfig.bgColor = this.config.color[v];
} else if (k == "image") {
let temp = parseInt(this.config.image_style[v]);
this.generterConfig.images = [];
for (let i = 0; i < temp; i++) {
this.generterConfig.images.push(this.info.multi_map[i]);
}
} else if (k == "type") {
this.generterConfig.bgType = this.types[v].clsName == "fill" ? 1 : 2;
}
},
// init() {
// let h = this.apiheader();
// this.request(
// {
// url: "",
// header: h,
// data: {
// r: "plugin/quick_share/api/poster/config",
// goods_id: this.id,
// },
// },
// (res) => {
// this.config = res.data.config;
// this.info = res.data.info;
// this.loading = false;
// this.generterConfig.bgColor = this.config.color[0];
// let temp = parseInt(this.config.image_style[0]);
// for (let i = 0; i < temp; i++) {
// this.generterConfig.images.push(this.info.multi_map[i]);
// }
// this.newInit();
// }
// );
// },
init() {
let u = uni.getStorageSync("mall_UserInfo");
let SmallShopId = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").SmallShopId
: 0;
if (SmallShopId == 0) {
//如果微店id为0 去找所属微店id
SmallShopId = uni.getStorageSync("mall_UserInfo")
? uni.getStorageSync("mall_UserInfo").UserSmallShopId
: 0;
}
this.request2(
{
url: "/api/Mall/GetGoosPoster",
data: {
goodsId: this.id,
// path: "/pages/goods/goods?id=" + this.id + "&user_id=" + u.UserId,
path: "/pages/index/index?id=" + this.id + "&user_id=" + u.UserId+ "&SmallShopId=" + SmallShopId
+'&address='+this.address
+'&Pickcar='+this.Pickcar
+'&StartTime='+this.StartTime
+'&EndTime='+this.EndTime
+'&JumpType=3',
},
},
(res) => {
this.config = res.data.config;
this.info = res.data.info;
this.loading = false;
this.generterConfig.bgColor = this.config.color[0];
let temp = parseInt(this.config.image_style[0]);
this.info.qrcode_url=this.host2+this.info.qrcode_url
console.log(this.info.qrcode_url)
for (let i = 0; i < temp; i++) {
this.generterConfig.images.push(this.info.multi_map[i]);
}
}
);
},
},
};
</script>
<style>
.guidecarDraw {
height: 100vh;
display: flex;
flex-direction: column;
font-family: "a";
}
.guidecarDraw .show-box {
background: #f5f5f5;
flex: 1;
height: 1rpx;
padding: 40rpx;
}
.ad-box {
height: 100%;
width: 56%;
margin: 0 auto;
}
.guidecarDraw .op-box {
padding: 20rpx 20rpx 40rpx 20rpx;
background: #fff;
}
.guidecarDraw .op-box .filed {
margin-bottom: 17rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.guidecarDraw .op-box .filed .sty {
width: 20rpx;
height: 20rpx;
border: 5rpx solid transparent;
border-radius: 20rpx;
margin-right: 20rpx;
overflow: hidden;
}
.guidecarDraw .op-box .filed .name {
width: 60rpx;
margin-right: 20rpx;
font-size: 24rpx;
color: #000;
}
.guidecarDraw .op-box .filed .content {
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
width: 1rpx;
padding-top: 13rpx;
overflow: auto;
}
.guidecarDraw .op-box .filed .content .item {
padding: 10rpx 14rpx;
background: #f5f5f5;
color: #000;
position: relative;
font-size: 26rpx;
margin-right: 30rpx;
border-radius: 4rpx;
}
.guidecarDraw .op-box .filed .content .item .fill {
display: inline-block;
height: 24rpx;
width: 24rpx;
vertical-align: middle;
background: #ddd;
margin-right: 10rpx;
}
.guidecarDraw .op-box .filed .content .item .change {
display: inline-block;
height: 24rpx;
width: 24rpx;
vertical-align: middle;
background: linear-gradient(to bottom, #ddd, transparent);
margin-right: 10rpx;
}
.guidecarDraw .op-box .filed .content .chosen {
border-radius: 26rpx;
height: 28rpx;
width: 28rpx;
position: absolute;
top: -13rpx;
right: -13rpx;
text-align: center;
line-height: 30rpx;
}
.guidecarDraw .op-box .filed .content .color-box {
display: block;
white-space: nowrap;
}
.guidecarDraw .op-box .filed .content .color-box .color-item {
position: relative;
margin-right: 30rpx;
border-radius: 4rpx;
width: 58rpx;
height: 58rpx;
display: inline-block;
}
</style>
pages/guidecar/components/guidecarShare.vue
View file @ 35cd5e0e
......@@ -78,6 +78,22 @@ export default {
type: Number,
default: 0,
},
address: {
type: String,
default: "",
},
pickcar: {
type: String,
default: "",
},
startTime: {
type: String,
default: "",
},
endTime: {
type: String,
default: "",
},
goodName: {
type: String,
default: "",
......@@ -112,8 +128,12 @@ export default {
},
genernalHandler() {
//this.goodId
console.log(this.address,this.pickcar,this.startTime,this.endTime)
uni.navigateTo({
url: "/pages/goods/draw?id="+this.goodId,
url: "/pages/guidecar/components/guidecarDraw?id="+this.goodId
+'&StartTime='+this.startTime
+'&EndTime='+this.endTime
});
},
sendQuanHandler() {
......
pages/guidecar/guidecarGoodsdetails.vue
View file @ 35cd5e0e
......@@ -219,6 +219,10 @@
</view>
<share
:good-id="GoodsId"
:address='address'
:pickcar='Pickcar'
:startTime='StartTime'
:endTime='EndTime'
v-if="showShare"
:good-name="g.name"
:images="g.pic_url"
......
pages/guidecar/guidedetails.vue
View file @ 35cd5e0e
......@@ -59,17 +59,18 @@
:interval="1000"
style="height:170px;width: 300px;"
>
<block v-for="(item, index) in g.pic_url" :key="index">
<block v-for="(item, index) in guidecar.PicList" :key="index">
<swiper-item>
<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item"
:autoplay="false" loop muted show-play-btn :enable-progress-gesture="true"
:controls="true" :show-progress="true" :show-mute-btn="true" objectFit="cover"></video>
<image @click="previewImage(index)" style="width:100%;height:100%;" v-else :src="item.pic_url" mode=""></image>
<image @click="previewImage(index)" style="width:100%;height:100%;" v-else :src="item" mode=""></image>
</swiper-item>
</block>
</swiper>
</view>
<view style="margin-top: 15px ;font-size: 16px;" >
<view style="margin-top: 15px ;font-size: 16px;display: flex;flex-direction: row;align-items: center" >
<image :src="carModel.CarLogo" mode="aspectFill" style="width: 25px;height: 25px;margin-right: 10px;"></image>
{{carModel.CarBrand!=''?carModel.CarBrand:'无'}}
</view>
<view style="margin-top: 5px;" >
......@@ -87,11 +88,11 @@
<view class="guide-info">
<view class="guide-info-item">
<span class='info-text'>购买年限：</span>
<span>{{carModel.car_buyyear}}</span>
<span>{{g.car_buyyear}}年</span>
</view>
<view class="guide-info-item">
<span class='info-text'>颜色：</span>
<span>{{carModel.carcolor_name}}</span>
<span>{{guidecar.ColorName}}</span>
</view>
<view class="guide-info-item">
<span class='info-text'>座位数：</span>
......@@ -101,10 +102,12 @@
<span class='info-text'>分类：</span>
<span>{{carModel.CarClassStr}}</span>
</view>
<view class="guide-info-item">
<span class='info-text'>型号：</span>
<span>{{carModel.CarType}}</span>
</view>
</view>
</view>
</view>
</template>
......@@ -127,6 +130,7 @@ export default {
imgs:[],
carModel:{},
guideModel:{},
guidecar:{},
};
},
......@@ -152,6 +156,10 @@ export default {
this.g.pic_url.forEach((x) => {
this.imgs.push(x.pic_url);
});
let richtext = this.g.guide_introduction;
setTimeout(()=>{
this.detailContent = richtext;
},10)
......@@ -180,10 +188,8 @@ getGuideCarGuideModel(){//根据导游id获取导游信息
},
(res) => {
this.guideModel = res.data;
let richtext = this.guideModel.Introduction;
setTimeout(()=>{
this.detailContent = richtext;
},10)
}
);
......@@ -199,7 +205,11 @@ getGuideCarModel(){
},
(res) => {
this.carModel = res.data;
console.log(this.guideModel)
this.carModel.ColorList.forEach(x=>{
if(x.ID==this.g.carcolor_id){
this.guidecar = x
}
})
}
);
},
......
pages/guidecar/index.vue
View file @ 35cd5e0e
......@@ -225,13 +225,32 @@
obj.day = myDate.getDate(); //日
obj.hour = myDate.getHours(); //时
obj.minute = myDate.getMinutes(); //分
let days = myDate.getDay();
obj.week = this.getweek(days)//星期几
let day = myDate.getDay();
obj.week = this.getweek(day)//星期几
this.STime = obj;
this.ETime = obj;
this.msg.StartTime = obj.year+'-'+obj.month+'-'+obj.day+' '+obj.hour+':'+obj.minute+':00';
this.msg.EndTime = obj.year+'-'+obj.month+'-'+obj.day+' '+obj.hour+':'+obj.minute+':10';
let startTime = new Date(this.msg.StartTime); // 开始时间
let endTime = new Date(this.msg.EndTime); // 结束时间
let usedTime = endTime - startTime; // 相差的毫秒数
let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
if(days>0){
if(leavel>0){
this.intervalDay=days+1+'天'
}else{
this.intervalDay=days+'天'
}
}else{
if(hours>=6){
this.intervalDay='1天'
}else{
this.intervalDay='半天'
}
}
},
onLoad(options){
this.init()//获取司导首页配置
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment