wxThird/pages/index/receiveCoupon.vue

<template>
	<view class="content">
		<view class="top"></view>
		<view class="lineBOx">
			<view class="line" v-for="(item,index) in list">
				<view class="lineLeft">
					<view class="lineName">{{item.actName}}</view>
					<view class="moneyBox">
						<span class="moneyBs">￥</span>
						<span class="moneyNum">{{item.actMoney}}</span>
						<span class="mdsky">{{item.whereMoney!==0?'满'+item.whereMoney+'可用':'无限制'}}</span>
					</view>
					<view class="endOffsetDays">
						<span v-if="item.endOffsetDays">领取后{{item.endOffsetDays}}天有效</span>
						<span v-else>{{item.startTime|dateformat}} - {{item.endTime|dateformat}}</span>
					</view>
				</view>
				<view class="lineRight">
					<view class="receiveBtn" @click="receive(item.id)">领取</view>
				</view>
			</view>
		</view>
		<!-- 领取说明 -->
		<view class="illustrateBox" v-if="comment">
			<view class="illustratex"></view>
			<view class="illustrate">领取说明</view>
			<view class="illustratex"></view>
		</view>
		<view class="comment" v-html="comment"> </view>
		<!-- 一键领取 -->
	<!-- 	<view class="oneClick">一键领取</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 {
				list:[],
				comment:'',
				authorizShow:false,
				userInfo:'',
				ext:'',
				wxOpenData:'',
			}
		},
		onLoad(opt) {
            this.userInfo=this.$store.state.userInfo;
            this.ext=this.$common.getExtStoreId();
			//scene=2E03F5108B434EFABD70F2D208890209
			if(this.userInfo){
				this.getCouponCenterList()
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					this.getCouponCenterList()
					if(!this.userInfo){
						this.authorizShow=true
					}
					
				})
			}
		},
		filters:{
			dateformat(val){
				return val.slice(0,10)
			}
		},
		methods: {
			receive(id){
				uni.showLoading({
					title: '领取中'
				})
				this.$http('opencoupon/getCoupons', {
				      id: id,
				}, 'GET').then(res => {
					//uni.hideLoading();
					if(res.code==0){
						uni.showToast({
							 title: '领取成功',
							 icon:'none',
							 duration: 3000
						});
					}
					
					this.getCouponCenterList();
					
				
				})
			},
			getCouponCenterList(){
				var params={}
				this.$http('opencoupon/getCouponCenterList', params, 'GET').then(res => {
					//uni.hideLoading();
					this.list = res.data.list;
					this.comment=res.data.comment;
				
				})
			},
             authorizShowno(){
             	this.authorizShow=false
             },
             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.getCouponCenterList()
             			}	
             		  })
             },
		}
	}
</script>

<style scoped>
	.comment{
		padding: 0 24rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}
	.oneClick{
		width: 368rpx;height: 82rpx;text-align: center;line-height: 82rpx;
		background: url('http://dmsphoto.66km.com.cn/thFiles/D810AED4-98B9-49DB-87E6-42C015BAD016.png');
		background-size: 100% 100%;font-weight: 500;
        color: #FF0000;font-size: 30rpx;
		margin: 0 auto;
		margin-top: 80rpx;
	}
	.content{
		min-height: 100vh;
		background:#FD5300 ;
	}
	.top{
		height: 272rpx;
		background: url('http://dmsphoto.66km.com.cn/thFiles/8CE54BE7-E78E-4BC5-98B7-6320CE691301.png');
		background-size: 100% 100%;
	}
	.line{
		background: url('http://dmsphoto.66km.com.cn/thFiles/47158ED0-1F6C-4C6D-840B-D92AADFED33D.png');
		background-size: 100% 100%;
		margin-top: 20rpx;
		height: 200rpx;display: flex;justify-content: space-between;
	}
	.lineBOx{
		padding: 0 24rpx;
	}
	.lineLeft{
		padding-left: 20rpx;padding-top: 24rpx;
	}
	.lineName{
		font-weight: 500;font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
	}
	.moneyBox{
	  padding-top: 8rpx;display: flex;
	}
	.moneyBs{
		font-weight: 500;font-size: 28rpx;
		color: #FF0000;padding-top: 20rpx;
	}
	.moneyNum{
		font-weight: 500;font-size: 48rpx;
		color: #FF0000;
	}
	.mdsky{
		font-weight: 400;font-size: 24rpx;
		color: #666666;padding-top: 24rpx;padding-left: 2rpx;
	}
	.endOffsetDays{
		font-weight: 400;font-size: 24rpx;
		color: #666666;padding-top: 10rpx;
	}
	
	.receiveBtn{
		width: 150rpx;
		height: 56rpx;
		background: #FF502D;
		border-radius: 36rpx;
		text-align: center;
		line-height: 56rpx;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.lineRight{
		display: flex;
		align-items: center;
		padding-right: 30rpx;
	}
	.illustrateBox{
		display: flex;padding: 30rpx 0;
		justify-content: center;
	}
	.illustratex{
		width: 34rpx;height: 5rpx;background: #FFFFFF;margin-top: 18rpx;
	}
	.illustrate{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;padding: 0 16rpx;
		line-height: 40rpx
	}
	.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>