wxThird/pages/index/couponShare.vue

<template>
	<view class="box">
		<view style="width: 750rpx;height: 172rpx;" class="boxtop"  :style="{background:'#'+themeColor}"></view>

		<view class="detailBg">
			<view class="detailTop">
				<view class="leftB">
					<view class="use">￥<span class="use2">{{detail.actMoney}}</span></view>
					<!-- <view class="used" v-else>￥<span class="used2">{{detail.actMoney}}</span></view> -->
					<view class="tiaojian">{{detail.whereMoney!==0?'满'+detail.whereMoney+'元可用':'满任意金额可用'}}</view>
				</view>
				<view class="centerB">
					<view class="name">{{detail.actName}}</view>
					<view class="time" v-if="detail.startTime">
						有效期：{{detail.startTime.slice(0,10)}}-{{detail.endTime.slice(0,10)}}</view>
					<view class="time" v-else>有效期：</view>
				</view>

			</view>
		</view>


		<view class="comtentBox">
			<view style="margin-bottom: 30rpx;">
				<!-- <view class="titleBox">
					
					<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
					<view class="title">可用次数</view>
				</view>
				<view class="content">{{detail.avaQty}}次</view> -->

			</view>
			<view style="margin-bottom: 30rpx;">
				<view class="titleBox">
					<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
					<view class="title">适用门店</view>
					</view>

					<view v-for="(v,index) in detail.shopNames.split(',')">
						<view class="content">{{v}}</view>
					</view>

				
			</view>

			<view>
				<view class="titleBox">
					<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
					<view class="title">使用说明</view>
					</view>
					<view v-if="detail.couContent" v-html="detail.couContent"></view>
					<view v-else class="content">暂无</view>
				</view>


			</view>

        <view class="bottomBtn" :style="{background:'#'+themeColor}" @click="receive">领取</view>

		<!-- 手机号授权 -->
		<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
			<view class="authorizCont" @click.stop="">
				<view class="authorizName">{{wxOpenData.miniAppName}}</view>
				<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
				<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
			</view>
			<view style="text-align: center;padding-top: 56rpx;">
				<image src="../../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {},
				themeColor:'',
				type:'',
				authorizShow:false,
				userInfo:'',
				ext:'',
				wxOpenData:'',
			}
		},
		onLoad(opt) {
			this.themeColor = uni.getStorageSync("themeColor");
			this.id = opt.id;
			this.type=opt.type;
			this.userInfo=this.$store.state.userInfo;
			this.ext=this.$common.getExtStoreId();
			if(this.userInfo){
				this.getData();
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					this.getData();
					if(!this.userInfo){
						this.authorizShow=true
					}
					
				})
			}
			
		},
		methods: {
			receive(id){
				uni.showLoading({
					title: '领取中'
				})
				this.$http('opencoupon/getCoupons', {
				      id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					uni.showToast({
						 title: '领取成功',
						 icon:'none',
						 duration: 3000
					});
					this.getData();
					
				
				})
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});
                if(this.type==2){
					var url='opencoupon/detailsCouponDetails';
					var params={
						id: this.id,
						custId:this.$store.state.wxOpenData.loginInfo.customerInfo.id
					}
				}else{
					var url='opencoupon/detailsCoupon'
					var params={
						id: this.id,
					}
				}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					this.detail = res.data;


				})
			},
			decryptPhoneNumber: function(e) {
			  console.log(e);
			  this.code=e.detail.code
			  this.wxPhoneLogin()
			  this.authorizShow=false;
			},
			wxPhoneLogin(){
					 var that=this;
					 this.$http('miniApp2/sys/wxPhoneLogin', {
					   appId:this.ext.appId,
					   unionId:this.ext.unionId,
					   code:this.code,
					   openId:this.wxOpenData.openid
					  },'POST').then(res => {
						var data = res.data;
						if(data.loginInfo){
							this.userInfo=data.loginInfo.openUser;
							this.wxOpenData=data.loginInfo;
							this.$store.commit('mutationswxOpenData', data)
							this.$store.commit('mutationsuserInfo', this.userInfo)
						    this.getData()
						}	
					  })
			},
		}
	}
</script>

<style scoped>
	.bottomBtn{
		width:704rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 80rpx;
		border-radius: 44rpx;
	}
	.boxtop{
		background: #FF0000;
	}
	.box {
		min-height: 100vh;
		background: #F4F5F7;
	}

	.detailBg {
		margin: -100rpx 24rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
	}

	.detailTop {
		display: flex;
		justify-content: flex-start;
		
	}

	.use {

		font-size: 26rpx;
		color: #FF0000;
	}

	.use2 {

		font-size: 40rpx;
		font-weight: 500;
		color: #FF0000;
		line-height: 56rpx;
	}

	.used {

		font-size: 26rpx;
		color: #666666;
	}

	.used2 {

		font-size: 40rpx;
		font-weight: 500;
		color: #666666;
		line-height: 56rpx;
	}

	.tiaojian {

		font-size: 24rpx;

		color: #666666;

	}

	.name {

		font-size: 30rpx;

		font-weight: 500;
		color: #333333;
		line-height: 56rpx;
	}

	.time {
		font-size: 24rpx;

		color: #666666;
		
	}

	.leftB {
		margin-right: 15rpx;
	}

	.comtentBox {
		margin: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.titleBox {
		display: flex;
		align-items: center;
	}

	.redPoint {
		width: 18rpx;
		height: 18rpx;
		margin-right: 10rpx;
	}

	.title {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.content {
		font-size: 26rpx;
		color: #666666;
		margin-top: 16rpx;
		margin-left: 28rpx;
	}
</style>