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" 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 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 v-if="detail.shopNames" @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 v-for="(v,index) in detail.shopNames.split(',')" v-if="index<5">
						<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 style="font-size: 20rpx;" 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.state==0">
				<view class="useBtn" @click="hxHide">去使用</view>
			</view>
				
	<!-- 核销码 -->
	<view class="authorizBox" v-if="hxShow" @click="hxclose">
		<view class="hxBox" @click.stop="">
			<view class="chBox">
				<img src="../../static/timg/chahao.png" alt="" class="chahaoImg" @click="hxclose"/>
			</view>
			<view class="hxName">{{detail.actName}}</view>
			<view class="hxTime" v-if="detail.startTime">
				有效期：{{detail.startTime.slice(0,10)}}至{{detail.endTime.slice(0,10)}}</view>
			<view class="hxTime" v-else>有效期：领取后{{detail.endOffsetDays}}天</view>
			<view style="display: flex;justify-content: center;padding-top:50rpx;">
				<tki-qrcode cid="qrcode1" ref="qrcode" :val="detail.couponCode" :size="400" :unit="unit"
					:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
					:loadMake="loadMake" :usingComponents="true" @result="qrR" />
				
			</view>
			<view class="couponCode">{{detail.couponCode}}</view>
			<view class="couponCodeTs">请到店出示券码即可开始服务</view>
			
		</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 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>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode,
		},
		data() {
			return {
				id: '',
				detail: {},
				themeColor:'',
				type:'',
				userInfo:'',
				ext:'',
				wxOpenData:'',
				authorizShow:false,
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				val: '二维码', // 要生成的二维码值
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#262637', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				src: '', // 二维码生成后的图片地址或base64
				hxShow:false,
				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();
			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: {
			spShopHide(){
				this.spShopShow=false;
			},
			spShopS(){
				this.spShopShow=true;
			},
			hxHide(){
				this.hxShow=true;
			},
			hxclose(){
				this.hxShow=false;
			},
			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();
					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;


				})
			},
		}
	}
</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;
	}
	.titleBox span{
		font-size: 12px;
	}
.centerB{
	padding-top: 10rpx;
}
.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;
}
.hxBox{
	width: 750rpx;
	height: 70vh;
	margin-top: 30vh;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
}
.couponCode{
	font-weight: 500;
	color: #333333;
	font-size: 30rpx;
	padding-top: 40rpx;
	text-align: center;
}
.couponCodeTs{
	color: #666666;font-size: 24rpx;
	text-align: center;padding-top: 10rpx;
}
.hxName{
	font-weight: 500;
	color: #333333;
	line-height: 42rpx;
	font-size: 30rpx;
	text-align: center;
	padding-top: 26rpx;
}
.hxTime{
	color: #3C3C3C;font-size: 24rpx;	text-align: center;padding-top: 16rpx;
	padding-bottom: 50rpx;
	border-bottom: 1px dashed #C3C3C3;
}
.chahaoImg{
	width: 36rpx;height: 36rpx;
}
.chBox{
	text-align: right;
	padding-top: 33rpx;
	padding-right: 24rpx;
}
.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 {
        text-align: center;
		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 {
line-height: 42rpx;
		font-size: 30rpx;
display: flex;
		font-weight: 500;
		color: #333333;
	}

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