123 lines
2.8 KiB
Vue
123 lines
2.8 KiB
Vue
<template>
|
|
<view class="share-coupon pad-all20 border-box">
|
|
<view class="coupon radius100 flex" @tap="goCoupon">
|
|
<view class="icon flex">
|
|
<image src="/static/icon/icon-coupon.png" mode="widthFix"></image>
|
|
<text class="font24 color-ff">领券</text>
|
|
</view>
|
|
</view>
|
|
<view class="share radius100 flex" @tap="shareImgEv(spuId)">
|
|
<view class="icon flex">
|
|
<image src="/static/icon/icon-share.png" mode="widthFix"></image>
|
|
<text class="font24 color-ff">分享给好友</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { base64ToPath } from '@/jsFile/base64-src.js';
|
|
export default {
|
|
name:'share-coupon',
|
|
props:{
|
|
spuId:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
footBarList:[], //底部列表
|
|
shareFlag:true, //是否可分享
|
|
};
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods:{
|
|
// 领券
|
|
goCoupon(){
|
|
uni.navigateTo({
|
|
url:`/pagesA/coupon/coupon?index=1`
|
|
})
|
|
},
|
|
// 分享到微信
|
|
shareImgEv(id){
|
|
this.$toolAll.tools.showToast('分享图生成中...','none',10000);
|
|
if(this.shareFlag){
|
|
this.shareFlag = false;
|
|
this.$requst.post('/api/spu/share-img',{spu_id:id}).then(res=>{
|
|
console.log(base64ToPath(res.data.poster),'分享图片')
|
|
base64ToPath(res.data.poster).then(path=>{
|
|
uni.hideToast();
|
|
this.$toolAll.tools.showToast('正在调起分享...');
|
|
wx.showShareImageMenu({
|
|
path: path,
|
|
success:(res=>{
|
|
this.shareFlag = true;
|
|
}),
|
|
fail:(err=>{
|
|
this.shareFlag = true;
|
|
})
|
|
})
|
|
})
|
|
})
|
|
} else {this.$toolAll.tools.showToast('请勿重复点击');}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.share-coupon{
|
|
width: 164rpx;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 188rpx;
|
|
z-index: 99;
|
|
}
|
|
.coupon{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 124rpx;
|
|
height: 124rpx;
|
|
background-color: #febf00;
|
|
box-shadow: 0 0 20rpx rgba(254,191,0,.4);
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.coupon image{
|
|
width: 47rpx;
|
|
height: 47rpx;
|
|
}
|
|
.coupon text{
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
margin-top: 10rpx;
|
|
}
|
|
.share{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 124rpx;
|
|
height: 124rpx;
|
|
background-color: #00b809;
|
|
box-shadow: 0 0 20rpx rgba(0,184,9,.4);
|
|
line-height: 1.6;
|
|
}
|
|
.share image{
|
|
width: 56rpx;
|
|
height: 46rpx;
|
|
}
|
|
.share text{
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
margin-top: 8rpx;
|
|
transform: scale(.84);
|
|
}
|
|
.coupon .icon,
|
|
.share .icon{
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
</style>
|