<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>
