parent
08ef214596
commit
c5aa40893e
@ -0,0 +1,274 @@ |
||||
<template> |
||||
<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent" |
||||
:style="{backgroundColor: backgroundColor}"> |
||||
<view class="mask-content" @click.stop.prevent="stopPrevent" :style="[{ |
||||
height: config.height, |
||||
transform: transform |
||||
}]"> |
||||
<!----> |
||||
<view class="view-content "> |
||||
<view class="share-header"> |
||||
分享内容 |
||||
</view> |
||||
<view class="share-list"> |
||||
<view v-for="(item, index) in shareList" :key="index" class="share-item" |
||||
@click="shareToFriend(item)"> |
||||
<template v-if="item.type==3"> |
||||
|
||||
<!-- #ifdef MP-WEIXIN --> |
||||
<button open-type="share"> |
||||
<image :src="item.icon" mode=""></image> |
||||
<text>{{item.text}}</text> |
||||
</button> |
||||
<!-- #endif --> |
||||
<!-- #ifdef H5 --> |
||||
<image :src="item.icon" mode=""></image> |
||||
<text>{{item.text}}</text> |
||||
<!-- #endif --> |
||||
|
||||
</template> |
||||
<template v-else> |
||||
<image :src="item.icon" mode=""></image> |
||||
<text>{{item.text}}</text> |
||||
</template> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view style="height: 92rpx;"> |
||||
|
||||
</view> |
||||
<view class="bottom border-t" @click="toggleMask">取消</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
transform: 'translateY(50vh)', |
||||
timer: 0, |
||||
backgroundColor: 'rgba(0,0,0,0)', |
||||
show: false, |
||||
config: {}, |
||||
}; |
||||
}, |
||||
props: { |
||||
contentHeight: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
//是否是tabbar页面 |
||||
hasTabbar: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
shareList: { |
||||
type: Array, |
||||
default: function() { |
||||
return []; |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
const height = uni.upx2px(this.contentHeight) + 'px'; |
||||
this.config = { |
||||
height: height, |
||||
transform: `translateY(${height})`, |
||||
backgroundColor: 'rgba(0,0,0,.4)', |
||||
} |
||||
this.transform = this.config.transform; |
||||
}, |
||||
methods: { |
||||
toggleMask() { |
||||
//防止高频点击 |
||||
if (this.timer == 1) { |
||||
return; |
||||
} |
||||
this.timer = 1; |
||||
setTimeout(() => { |
||||
this.timer = 0; |
||||
}, 500) |
||||
|
||||
if (this.show) { |
||||
this.transform = this.config.transform; |
||||
this.backgroundColor = 'rgba(0,0,0,0)'; |
||||
setTimeout(() => { |
||||
this.show = false; |
||||
this.hasTabbar && uni.showTabBar(); |
||||
}, 200) |
||||
return; |
||||
} |
||||
|
||||
this.show = true; |
||||
//等待mask重绘完成执行 |
||||
if (this.hasTabbar) { |
||||
uni.hideTabBar({ |
||||
success: () => { |
||||
setTimeout(() => { |
||||
this.backgroundColor = this.config.backgroundColor; |
||||
this.transform = 'translateY(0px)'; |
||||
}, 10) |
||||
} |
||||
}); |
||||
} else { |
||||
setTimeout(() => { |
||||
this.backgroundColor = this.config.backgroundColor; |
||||
this.transform = 'translateY(0px)'; |
||||
}, 10) |
||||
} |
||||
}, |
||||
//防止冒泡和滚动穿透 |
||||
stopPrevent() {}, |
||||
|
||||
//分享操作 |
||||
shareToFriend(type) { |
||||
|
||||
this.$emit("click", type); |
||||
this.toggleMask(); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang='scss'> |
||||
/* 文字尺寸 */ |
||||
|
||||
$font-base: 28upx; |
||||
|
||||
/*文字颜色*/ |
||||
$font-color-dark: #303133; |
||||
$font-color-base: #606266; |
||||
|
||||
/* 边框颜色 */ |
||||
/* $border-color-dark: #DCDFE6; */ |
||||
$border-color-base: #E4E7ED; |
||||
/* $border-color-light: #EBEEF5; */ |
||||
/* 图片加载中颜色 */ |
||||
/* $image-bg-color: #eee; */ |
||||
/* 行为相关颜色 */ |
||||
/* $uni-color-primary:#fa436a; |
||||
$uni-color-success: #4cd964; |
||||
$uni-color-warning: #f0ad4e; |
||||
$uni-color-error: #dd524d; */ |
||||
|
||||
.mask { |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: flex-end; |
||||
z-index: 998; |
||||
transition: .3s; |
||||
|
||||
.bottom { |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 90upx; |
||||
background: #fff; |
||||
z-index: 9; |
||||
font-size: $font-base + 2upx; |
||||
color: $font-color-dark; |
||||
} |
||||
} |
||||
|
||||
.mask-content { |
||||
width: 100%; |
||||
/* height: 580upx; */ |
||||
transition: .3s; |
||||
background: #fff; |
||||
|
||||
&.has-bottom { |
||||
padding-bottom: 90upx; |
||||
} |
||||
|
||||
.view-content { |
||||
/* height: 100%; */ |
||||
} |
||||
} |
||||
|
||||
.share-header { |
||||
height: 110upx; |
||||
font-size: $font-base+2upx; |
||||
color: font-color-dark; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-top: 10upx; |
||||
|
||||
&:before, |
||||
&:after { |
||||
content: ''; |
||||
width: 240upx; |
||||
heighg: 0; |
||||
border-top: 1px solid $border-color-base; |
||||
transform: scaleY(.5); |
||||
margin-right: 30upx; |
||||
} |
||||
|
||||
&:after { |
||||
margin-left: 30upx; |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
.share-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
.share-list button { |
||||
min-width: 25%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 180rpx; |
||||
background-color: #fff; |
||||
padding: 0; |
||||
line-height: inherit; |
||||
margin: 0; |
||||
width: 100%; |
||||
font-weight: normal; |
||||
border-radius: none; |
||||
border: none; |
||||
} |
||||
|
||||
.share-list button::after { |
||||
border: none !important; |
||||
padding: 0 !important; |
||||
margin: 0 !important; |
||||
} |
||||
|
||||
|
||||
.share-item { |
||||
min-width: 25%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 180upx; |
||||
|
||||
image { |
||||
width: 80upx; |
||||
height: 80upx; |
||||
margin-bottom: 16upx; |
||||
} |
||||
|
||||
text { |
||||
font-size: $font-base; |
||||
color: $font-color-base; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,693 @@ |
||||
<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> |
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in new issue