You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
693 lines
18 KiB
693 lines
18 KiB
<template>
|
|
<view>
|
|
<canvas canvas-id="poster" class="poster_canvas"></canvas>
|
|
<canvas canvas-id="qrImg" class="poster_qr"></canvas>
|
|
<swiper v-if="dataInfo.recommendCodeGoods" class="poster_swiper" previous-margin="110rpx" :current="swiperIndex"
|
|
next-margin="110rpx" @change="onSwiperChange">
|
|
<swiper-item v-for="(item, index) of dataInfo.headImgs" :key="index">
|
|
<view class="goods_info_box" :class="{ active: swiperIndex == index }">
|
|
<image class="goods_image" :src="item" mode="aspectFit"></image>
|
|
<view class="goods_info">
|
|
<view class="goods_name">{{dataInfo.goodsName}}</view>
|
|
<view class="price_box">
|
|
<view class="price">{{dataInfo.goodsPrice}}</view>
|
|
<view class="store_price">{{dataInfo.priceShop}}</view>
|
|
</view>
|
|
<view class="poster_info">
|
|
<view class="info">
|
|
<view>长按识别二维码访问</view>
|
|
<text>{{platformName}}</text>
|
|
</view>
|
|
|
|
<image class="poster_code_image" :src="dataInfo.recommendCodeGoods" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="share_save_box" v-if="dataInfo.recommendCodeGoods">
|
|
<view class="b-con" @click="onSaveImg">
|
|
<!-- <button class="onSave" > -->
|
|
<image src="/physical-merchants/static/img/ic_weixin.png" mode="aspectFit"></image>
|
|
<text class="mart5">保存图片</text>
|
|
<!-- </button> -->
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<!-- -->
|
|
<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
|
|
<image :src="h5SaveImg" mode="widthFix"></image>
|
|
<button class="download">长按图片保存图片</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const qrCode = require('./weapp-qrcode.js');
|
|
export default {
|
|
data() {
|
|
return {
|
|
swiperIndex: 0,
|
|
posterImgs: [],
|
|
dataInfo: {
|
|
// priceShop: "¥699.0", //原价
|
|
// headImgs: [
|
|
// "http://qn.kemean.cn/file/upload/202005/21/1590043402088i2jxb79n.jpg?imageView2/0/w/800",
|
|
// "http://qn.kemean.cn/file/upload/202005/21/1590043404759qml3zmlm.jpg?imageView2/0/w/800",
|
|
// ],
|
|
// goodsName: "冰希黎巴黎红精粹沙龙香水50ml",
|
|
// goodsPrice: "¥299.0", //现价
|
|
recommendCodeGoods: "", //小程序码
|
|
},
|
|
platformName: "嗨森逛",
|
|
h5SaveImg: "",
|
|
settingWritePhotosAlbum: false
|
|
|
|
};
|
|
},
|
|
//第一次加载
|
|
onLoad(e) {
|
|
|
|
if (e.obj) {
|
|
this.dataInfo = JSON.parse(decodeURIComponent(e.obj));
|
|
}
|
|
},
|
|
mounted() {
|
|
this.couponQrCode()
|
|
},
|
|
//方法
|
|
methods: {
|
|
// 轮播图变化
|
|
onSwiperChange(e) {
|
|
this.swiperIndex = e.detail.current;
|
|
},
|
|
async couponQrCode() {
|
|
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
var that = this;
|
|
/* if (this.quality == 'L') {
|
|
this.level = qrCode.CorrectLevel.L
|
|
} else if (this.quality == 'M') {
|
|
this.level = qrCode.CorrectLevel.M
|
|
} else if (this.quality == 'Q') {
|
|
this.level = qrCode.CorrectLevel.Q
|
|
} else if (this.quality == 'H') {
|
|
this.level = qrCode.CorrectLevel.H
|
|
} else {
|
|
this.level = qrCode.CorrectLevel.L
|
|
} */
|
|
console.log(that.dataInfo, " that.dataInfo")
|
|
let qrcode = await new qrCode('qrImg', {
|
|
text: that.dataInfo.goLink,
|
|
width: 100,
|
|
height: 100,
|
|
showLoading: true, // 是否显示loading
|
|
loadingText: '二维码生成中', // loading文字
|
|
colorDark: '#000000', //二维码暗部颜色
|
|
colorLight: '#ffffff', //二维码亮部颜色
|
|
correctLevel: qrCode.CorrectLevel.L, //二维码质量L/M/Q/H
|
|
// usingIn: this //在自定义组件下，第二个参数传入组件实例this
|
|
})
|
|
// 把当前画布指定区域的内容导出生成图片，并返回文件路径。
|
|
uni.canvasToTempFilePath({
|
|
canvasId: 'qrImg',
|
|
success: (res) => {
|
|
uni.hideLoading()
|
|
// 在H5平台下，tempFilePath 为 base64
|
|
// console.log('yz-qr图片路径:', res)
|
|
this.dataInfo.recommendCodeGoods = res.tempFilePath;
|
|
qrcode = null;
|
|
/* uni.getFileSystemManager().readFile({
|
|
filePath: res.tempFilePath, //选择图片返回的相对路径
|
|
encoding: 'base64', //编码格式
|
|
success: res => {
|
|
// 成功的回调
|
|
let base64 = 'data:image/jpeg;base64,' + res.data;
|
|
this.dataInfo.recommendCodeGoods = base64;
|
|
}
|
|
}); */
|
|
|
|
},
|
|
fail: (err) => {
|
|
uni.hideLoading();
|
|
qrcode = null;
|
|
console.log(err)
|
|
}
|
|
}, this);
|
|
|
|
// console.log('绘制完成');
|
|
},
|
|
// 创建海报
|
|
createPoster() {
|
|
let that = this;
|
|
return new Promise((resolve, reject) => {
|
|
uni.showLoading({
|
|
title: '海报生成中'
|
|
});
|
|
const ctx = uni.createCanvasContext('poster');
|
|
ctx.fillRect(0, 0, 375, 673);
|
|
ctx.setFillStyle("#FFF");
|
|
ctx.fillRect(0, 0, 375, 673);
|
|
uni.downloadFile({
|
|
url: this.dataInfo.headImgs[this.swiperIndex],
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
ctx.drawImage(res.tempFilePath, 0, 0, 375, 375);
|
|
|
|
if (res.statusCode === 200) {
|
|
// 商品标题
|
|
ctx.setFontSize(21);
|
|
ctx.setFillStyle('#333');
|
|
let drawtextList = that.drawtext(this.dataInfo
|
|
.goodsName, 341);
|
|
let textTop = 0;
|
|
drawtextList.forEach((item, index) => {
|
|
if (index < 2) {
|
|
textTop = 380 + (index + 1) *
|
|
28;
|
|
ctx.fillText(item.content, 17,
|
|
textTop);
|
|
}
|
|
});
|
|
// 商品价格
|
|
ctx.setFontSize(26);
|
|
ctx.setFillStyle('#f00');
|
|
ctx.fillText(this.dataInfo.goodsPrice, 17,
|
|
textTop + 47);
|
|
// 商品门市价
|
|
ctx.setFontSize(18);
|
|
ctx.setFillStyle('#999');
|
|
let textLeft = 38 + (this.dataInfo.goodsPrice
|
|
.length * 13)
|
|
ctx.fillText(this.dataInfo.priceShop, textLeft,
|
|
textTop + 45);
|
|
// 商品门市价横线
|
|
ctx.beginPath();
|
|
ctx.setLineWidth(1);
|
|
ctx.moveTo(textLeft - 1, textTop + 38);
|
|
ctx.lineTo((textLeft + 5 + this.dataInfo
|
|
.priceShop.length * 9), textTop +
|
|
38);
|
|
ctx.setStrokeStyle('#999');
|
|
ctx.stroke();
|
|
// 商品分割线
|
|
ctx.beginPath();
|
|
ctx.setLineWidth(1);
|
|
ctx.moveTo(17, textTop + 70);
|
|
ctx.lineTo(358, textTop + 70);
|
|
ctx.setStrokeStyle('#eee');
|
|
ctx.stroke();
|
|
// 长按识别二维码访问
|
|
ctx.setFontSize(19);
|
|
ctx.setFillStyle('#333');
|
|
ctx.fillText("长按识别二维码访问", 17, textTop + 136);
|
|
// 平台名称
|
|
ctx.setFontSize(16);
|
|
ctx.setFillStyle('#999');
|
|
ctx.fillText(this.platformName, 17, textTop +
|
|
170);
|
|
// 二维码
|
|
ctx.drawImage(this.dataInfo.recommendCodeGoods, 238, textTop +
|
|
88, 120, 120);
|
|
ctx.draw(true, () => {
|
|
// canvas画布转成图片并返回图片地址
|
|
uni.canvasToTempFilePath({
|
|
canvasId: 'poster',
|
|
width: 375,
|
|
height: 673,
|
|
success: (res) => {
|
|
/* if (this.posterImgs[this.swiperIndex]){
|
|
this.posterImgs[this.swiperIndex].temporary=res.tempFilePath;
|
|
} else {
|
|
this.posterImgs[this.swiperIndex] = {temporary: res.tempFilePath};
|
|
} */
|
|
// console.log(
|
|
// "海报制作成功！"
|
|
// );
|
|
resolve(res
|
|
.tempFilePath
|
|
);
|
|
},
|
|
fail: () => {
|
|
uni.hideLoading();
|
|
reject();
|
|
}
|
|
})
|
|
});
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '海报制作失败，图片下载失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '海报制作失败，图片下载失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
fail: err => {
|
|
console.log(err, "err")
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '海报制作失败，图片下载失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
},
|
|
// 保存图片
|
|
async onSaveImg() {
|
|
let imgUrl = await this.createPoster();
|
|
/* if (this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary) {
|
|
imgUrl = await this.posterImgs[this.swiperIndex].temporary;
|
|
} else {
|
|
imgUrl = await this.createPoster();
|
|
} */
|
|
|
|
// console.log(imgUrl, "imgUrl")
|
|
|
|
// #ifdef H5
|
|
this.h5SaveImg = imgUrl;
|
|
uni.hideLoading();
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
uni.showLoading({
|
|
title: '海报下载中'
|
|
});
|
|
// if (this.settingWritePhotosAlbum) {
|
|
uni.getSetting({
|
|
success: res => {
|
|
if (res.authSetting['scope.writePhotosAlbum']) {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: imgUrl,
|
|
success: () => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '保存成功'
|
|
});
|
|
},
|
|
fail() {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请先在设置页面打开“保存相册”使用权限',
|
|
confirmText: '去设置',
|
|
cancelText: '算了',
|
|
success: data => {
|
|
if (data.confirm) {
|
|
|
|
uni.openSetting();
|
|
}
|
|
uni.hideLoading();
|
|
},
|
|
fail() {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
fail() {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
// } else {
|
|
// this.settingWritePhotosAlbum = true;
|
|
// uni.authorize({
|
|
// scope: 'scope.writePhotosAlbum',
|
|
// success: () => {
|
|
// uni.saveImageToPhotosAlbum({
|
|
// filePath: imgUrl,
|
|
// success: () => {
|
|
// uni.hideLoading();
|
|
// uni.showToast({
|
|
// title: '保存成功'
|
|
// });
|
|
// },
|
|
// fail(){
|
|
// uni.hideLoading();
|
|
// }
|
|
// });
|
|
// },
|
|
// fail(){
|
|
// uni.hideLoading();
|
|
// }
|
|
// });
|
|
// }
|
|
// #endif
|
|
|
|
},
|
|
// 文字换行
|
|
drawtext(text, maxWidth) {
|
|
let textArr = text.split("");
|
|
let len = textArr.length;
|
|
// 上个节点
|
|
let previousNode = 0;
|
|
// 记录节点宽度
|
|
let nodeWidth = 0;
|
|
// 文本换行数组
|
|
let rowText = [];
|
|
// 如果是字母，侧保存长度
|
|
let letterWidth = 0;
|
|
// 汉字宽度
|
|
let chineseWidth = 21;
|
|
// otherFont宽度
|
|
let otherWidth = 10.5;
|
|
for (let i = 0; i < len; i++) {
|
|
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
|
|
if (letterWidth > 0) {
|
|
if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) {
|
|
rowText.push({
|
|
type: "text",
|
|
content: text.substring(previousNode, i)
|
|
});
|
|
previousNode = i;
|
|
nodeWidth = chineseWidth;
|
|
letterWidth = 0;
|
|
} else {
|
|
nodeWidth += chineseWidth + letterWidth * otherWidth;
|
|
letterWidth = 0;
|
|
}
|
|
} else {
|
|
if (nodeWidth + chineseWidth > maxWidth) {
|
|
rowText.push({
|
|
type: "text",
|
|
content: text.substring(previousNode, i)
|
|
});
|
|
previousNode = i;
|
|
nodeWidth = chineseWidth;
|
|
} else {
|
|
nodeWidth += chineseWidth;
|
|
}
|
|
}
|
|
} else {
|
|
if (/\n/g.test(textArr[i])) {
|
|
rowText.push({
|
|
type: "break",
|
|
content: text.substring(previousNode, i)
|
|
});
|
|
previousNode = i + 1;
|
|
nodeWidth = 0;
|
|
letterWidth = 0;
|
|
} else if (textArr[i] == "\\" && textArr[i + 1] == "n") {
|
|
rowText.push({
|
|
type: "break",
|
|
content: text.substring(previousNode, i)
|
|
});
|
|
previousNode = i + 2;
|
|
nodeWidth = 0;
|
|
letterWidth = 0;
|
|
} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {
|
|
letterWidth += 1;
|
|
if (nodeWidth + letterWidth * otherWidth > maxWidth) {
|
|
rowText.push({
|
|
type: "text",
|
|
content: text.substring(previousNode, i + 1 - letterWidth)
|
|
});
|
|
previousNode = i + 1 - letterWidth;
|
|
nodeWidth = letterWidth * otherWidth;
|
|
letterWidth = 0;
|
|
}
|
|
} else {
|
|
if (nodeWidth + otherWidth > maxWidth) {
|
|
rowText.push({
|
|
type: "text",
|
|
content: text.substring(previousNode, i)
|
|
});
|
|
previousNode = i;
|
|
nodeWidth = otherWidth;
|
|
} else {
|
|
nodeWidth += otherWidth;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (previousNode < len) {
|
|
rowText.push({
|
|
type: "text",
|
|
content: text.substring(previousNode, len)
|
|
});
|
|
}
|
|
return rowText;
|
|
},
|
|
|
|
savePic(Url) {
|
|
Url = this.dialogImgUrl //图片路径，也可以传值进来
|
|
var triggerEvent = "touchstart"; //指定下载方式
|
|
var blob = new Blob([''], {
|
|
type: 'application/octet-stream'
|
|
}); //二进制大型对象blob
|
|
var url = URL.createObjectURL(blob); //创建一个字符串路径空位
|
|
var a = document.createElement('a'); //创建一个 a 标签
|
|
a.href = Url; //把路径赋到a标签的href上
|
|
//正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
|
|
a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
|
|
/* var e = document.createEvent('MouseEvents'); //创建事件（MouseEvents鼠标事件）
|
|
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
|
|
|
|
//代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）
|
|
var e = new MouseEvent('click', (true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
|
|
//派遣后，它将不再执行任何操作。执行保存到本地
|
|
a.dispatchEvent(e);
|
|
//释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
|
|
URL.revokeObjectURL(url);
|
|
/*
|
|
//这段好像并不影响，所以我不用，注释掉
|
|
var imgs = document.getElementsByTagName("img");
|
|
for(var i = 0,o;o = imgs[i];i++){
|
|
|
|
o.addEventListener(triggerEvent,function(){
|
|
var newurl = this.getAttribute("src");
|
|
saveAs(newurl);
|
|
},false);
|
|
} */
|
|
|
|
},
|
|
},
|
|
|
|
//用户点击分享
|
|
// onShareAppMessage(e) {
|
|
// let dataInfo = this.dataInfo;
|
|
// let shareInfo = {
|
|
// path: "/pages/home/shop/goodsDetail?objId="+dataInfo.objId,
|
|
// title: dataInfo.share.shareTitle,
|
|
// imageUrl: dataInfo.share.shareImg
|
|
// };
|
|
// if(this.userInfo.token){
|
|
// shareInfo.path += "&recommendCode=" + this.userInfo.uid;
|
|
// }
|
|
// return shareInfo;
|
|
// }
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// 背景图片地址和大小
|
|
@mixin bis($url, $size: cover) {
|
|
background-image: url($url);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: $size;
|
|
}
|
|
|
|
// 多行省略号
|
|
@mixin bov($num: 2) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: $num;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.poster_qr {
|
|
width: 100px;
|
|
height: 100px;
|
|
position: absolute;
|
|
top: -999px;
|
|
left: -999px;
|
|
}
|
|
|
|
.poster_page {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.poster_canvas {
|
|
width: 750rpx;
|
|
height: 1334rpx;
|
|
position: fixed;
|
|
top: -10000rpx;
|
|
left: 0rpx;
|
|
}
|
|
|
|
.poster_swiper {
|
|
height: 950rpx;
|
|
width: 100%;
|
|
|
|
swiper-item {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.goods_info_box {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: scale(0.88);
|
|
transition: all 0.4s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: #FFFFFF;
|
|
|
|
&.active {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.goods_image {
|
|
width: 100%;
|
|
height: calc(100vw - 220rpx);
|
|
}
|
|
|
|
.goods_info {
|
|
padding: 24rpx;
|
|
|
|
.goods_name {
|
|
color: #333;
|
|
font-size: 30rpx;
|
|
// @include bov(2);
|
|
}
|
|
|
|
.price_box {
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.price {
|
|
font-size: 38rpx;
|
|
color: red;
|
|
}
|
|
|
|
.store_price {
|
|
margin-left: 30rpx;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.poster_info {
|
|
border-top: 2rpx solid #f1f1f1;
|
|
padding-top: 24rpx;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
view {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
text {
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.poster_code_image {
|
|
width: 170upx;
|
|
height: 170upx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.share_save_box {
|
|
position: fixed;
|
|
// bottom: calc((100vh - 950rpx - 240rpx) / 4);
|
|
bottom: 10px;
|
|
left: 0;
|
|
z-index: 6;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.b-con {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.h5_press_save {
|
|
background-color: #000;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 100;
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
|
|
.download {
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
position: absolute;
|
|
padding: 5rpx 30rpx;
|
|
border-radius: 40rpx;
|
|
bottom: 30rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
&:before {
|
|
content: '';
|
|
@include bis('../../static/img/icon_download.png');
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |