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