wxThird/pages/index/discountCardDetail.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="comtentBox" v-if="detail.usedState==1">
				<view class="titleBox">
					<image src="../../static/img/icon_youhui_red.png" mode="" class="redPoint"></image>
					<view class="title">使用记录</view>
				</view>
				<view class="couponCodeBox">
					<view class="couponCodeYd"></view>
					<view class="ouponCode">{{detail.couponCode}}</view>
					<view class="couponCodeUse">已使用</view>
				</view>
				<view class="couponCodeLine">
					<view class="couponCodeLeft">核销时间：</view>
					<view class="couponCodeLineRight">{{detail.usedTime}}</view>
				</view>
				<view class="couponCodeLine">
					<view class="couponCodeLeft">核销门店：</view>
					<view class="couponCodeLineRight">{{detail.usedShopName}}</view>
				</view>
				
			</view>
			
			<view style="height: 120rpx;"></view>
			<view class="useBox" v-if="detail.usedState==0">
				<view class="useBtn">去使用</view>
			</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:'',
				userInfo:'',
				ext:'',
				wxOpenData:'',
				authorizShow: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();
			if(this.userInfo){
				if (this.id) {
					this.getData();

				}
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					this.themeColor = uni.getStorageSync("themeColor");
					if (this.id) {
						this.getData();
						
					}
					if(!this.userInfo){
						this.authorizShow=true
					}
				})
			}
			//this.getData();
		},
		methods: {
			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;


				})
			},
		}
	}
</script>

<style scoped>
.couponCodeBox{
	display: flex;
	padding-top: 15rpx;
}
.useBox{
	height: 120rpx;
	width: 750rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 10rpx 0rpx rgba(153,153,153,0.2);
}
.useBtn{
	width: 690rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	font-weight: 500;
	color: #FFFFFF;
	font-size: 30rpx;
	text-align: center;
	line-height: 74rpx;
	margin-top: 23rpx;
	margin-left: 30rpx;
}
.couponCodeYd{
	width: 10rpx;
	height: 10rpx;
	background: #FF0000;
	border-radius: 50%;
	margin-top: 10rpx;
	margin-right: 12rpx;
	
}
.ouponCode{
	color: #666666;
	line-height: 33rpx;
	font-size: 24rpx;
	text-decoration: line-through;
}
.couponCodeUse{
	width: 86rpx;
	height: 32rpx;
	border-radius: 4rpx;
	border: 1rpx solid #DDDDDD;
	color: #999999;
	line-height: 32rpx;
	text-align: center;
	font-size: 22rpx;
	margin-left: 12rpx;
}
.couponCodeLine{
	padding-left: 20rpx;display: flex;
	color: #999999;font-size: 24rpx;
	line-height: 33rpx;padding-top: 8rpx;
}
	.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;
		}
		.shopBoxpt{
			margin-top: 20rpx;
		}
		button::after{
		 	border: none;
		}
		button{
			position: relative;
			display: block;
			margin-left: 0;
			margin-right: 0;
			padding-left: 0px;
			padding-right: 0px;
			box-sizing: border-box;
			// font-size: 18px;
			text-align: center;
			text-decoration: none;
			// line-height: 1;
			line-height: 1.35;
			// border-radius: 5px;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			color: #000000;
			background-color: #fff;
			
			height: 100%;
			}
			
</style>