mall-laonong/components/share-coupon/share-coupon.vue

126 lines
2.8 KiB
Vue
Raw Normal View History

2022-07-31 02:14:22 +00:00
<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(){
2022-09-29 02:13:28 +00:00
if(this.$toolAll.tools.judgeAuth()) {
// 已授权
uni.navigateTo({
url:`/pagesA/coupon/coupon?index=1`
})
}
2022-07-31 02:14:22 +00:00
},
// 分享到微信
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>