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" v-if="detail.discountType==1">
					<view class="use">￥<span class="use2">{{detail.actMoney}}</span></view>
					<view class="tiaojian">{{detail.whereMoney!==0?'满'+detail.whereMoney+'元可用':'满任意金额可用'}}</view>
				</view>
				<view v-if="detail.discountType!=1" class="leftB" style="display: flex;align-items: center;justify-content: center;">
					<image src="http://dmsphoto.66km.com.cn/thFiles/5340A784-FEE2-43FA-8ED1-C509FADFDBED.png"
					 mode="" style="width: 77rpx;height:48rpx;"></image>
				</view>
				<view class="centerB">
					<view class="name">
						<span class="djq" v-if="detail.discountType==1">代金券</span>
						<span class="djq" v-if="detail.discountType==2">商品券</span>
						<span class="djq" v-if="detail.discountType==3">服务券</span>
						<span>{{detail.actName}}</span>
					</view>
					<view class="time" v-if="detail.startTime">
						有效期：{{detail.startTime.slice(0,10)}}-{{detail.endTime.slice(0,10)}}</view>
					<view class="time" v-else>有效期：领取后{{detail.endOffsetDays}}天有效</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 style="display: flex;justify-content: space-between;">
					<view class="titleBox">
							<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
							<view class="title">适用门店</view>
					</view>
						<view @click="spShopS" style="color: #666666;font-size: 24rpx;line-height: 24rpx;display: flex;">
						{{detail.shopNames.split(',').length}}家门店通用
						<image src="../../static/img/little_rightArrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
					    </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="" @click="hideSq" class="authorizCloseImg"></image>
			</view>
		</view>
		
		<!-- 适用门店 -->
		<view class="authorizBox" v-if="spShopShow" @click="spShopHide">
			<view class="syShopBox"  @click.stop="">
				<view class="chBox2">
					<view class="syShopTitle">适用门店</view>
					<img src="../../static/timg/chahao.png" alt="" class="chahaoImg" @click="spShopHide"/>
				</view>
				<view class="spShopLineBox">
					<view class="spShopLine" v-for="(item,index) in detail.shopNames.split(',')">{{item}}</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {},
				themeColor:'',
				type:'',
				authorizShow:false,
				userInfo:'',
				ext:'',
				wxOpenData:'',
				scene:'',
				spShopShow:false,
			}
		},
		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();
			//scene=2E03F5108B434EFABD70F2D208890209
			if(this.userInfo){
				if(opt.scene&&opt.scene!='undefined'){
					this.scene=opt.scene;
					this.getShareParams()
				}else{
				 this.getData();
				}
				
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					if(opt.scene&&opt.scene!='undefined'){
						this.scene=opt.scene;
						this.getShareParams()
					}else{
					 this.getData();
					}
					if(!this.userInfo){
						this.authorizShow=true
					}
					
				})
			}
			
		},
		methods: {
			spShopHide(){
				this.spShopShow=false;
			},
			spShopS(){
				this.spShopShow=true;
			},
			hideSq(){
				this.authorizShow=false;
			},
			getShareParams(){
				this.$http('openMall/getShareParamsCache', {
				  scene:this.scene,
				 },'GET').then(res => {
					 var data= JSON.parse(res.data) ;
					 console.log(data)
					 this.id=data.couponId;
					 this.getData(); 
				 })
			},
			receive(id){
				uni.showLoading({
					title: '领取中'
				})
				this.$http('opencoupon/getCoupons', {
				      id: this.id,
				}, 'GET').then(res => {
					/* uni.hideLoading();
					uni.showToast({
						 title: '领取成功',
						 icon:'none',
						 duration: 3000
					}); */
					if(res.code==0){
						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/detailsCouponDetails'
					var params={
						id: this.id,
					}
				}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					if(res.data.couContent){
						res.data.couContent=res.data.couContent.replaceAll('font-size:15px', 'font-size:12px');
						res.data.couContent=res.data.couContent.replaceAll('font-size: 15px', 'font-size:12px');
						res.data.couContent=res.data.couContent.replaceAll('font-size:14px', 'font-size:12px');
					}
					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>
	.djq{
		background: linear-gradient(128deg, #FFE4C5 0%, #FDC692 100%);
		border-radius: 4rpx;
		height: 34rpx;
		width: 76rpx;
		line-height: 34rpx;
		text-align: center;
		color: #2B2219;
		font-size: 20rpx;
		margin-top: 4rpx;
		margin-right: 10rpx;
	}
	.centerB{
		padding-top: 10rpx;
	}
	.chahaoImg{
		width: 36rpx;height: 36rpx;
	}
	.titleBox span{
		font-size: 12px;
	}
	.syShopBox{
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		width: 750rpx;
		height: 80vh;
		margin-top: 20vh;
	}
	.spShopLineBox{
		height: calc(80vh - 90rpx);
		overflow-y: scroll;
	}
	.spShopLine{
		color: #333333;font-size: 26rpx;
		padding: 26rpx 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.chBox2{
		display: flex;justify-content: space-between;
		padding-left: 30rpx;
		padding-top: 30rpx;
		padding-right: 24rpx;
		padding-bottom: 10rpx;
	}
	.syShopTitle{
		font-weight: 500;
		color: #333333;
		font-size: 30rpx;
		line-height: 42rpx;
	}
	.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;
	}
	.authorizBox{
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
		}
		.authorizCont{
			margin-top: 30vh;
			width: 564rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-left: 93rpx;
			position: relative;
		}
		.authorizCloseImg{
			width: 62rpx;
			height: 62rpx;
		}
		.sqLogoBox{
			width: 180rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 90rpx;
			text-align: center;
			position: absolute;
			top: -50rpx;
			left: 192rpx;
		}
		.authorizName{
			color: #333333;
			line-height: 42rpx;
			font-size: 30rpx;
			text-align: center;
			padding-top: 58rpx;
		}
		.authorizMs{
			color: #999999;
			line-height: 36rpx;
			font-size: 26rpx;
			width: 452rpx;
			padding-top: 24rpx;
			text-align: center;
			margin-left: 56rpx;
		}
		.authorizContbutton{
			width: 422rpx;
			height: 88rpx;
			background: #D53533;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size:30rpx;
			color: #FFFFFF;
			margin-top: 62rpx;
			margin-left:71rpx;
		}
</style>