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.shopList.length" @click="spShopS" style="color: #666666;font-size: 24rpx;line-height: 24rpx;display: flex;">
							{{detail.shopList.length}}家门店通用
							<image src="../../static/img/little_rightArrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
						    </view>
					</view> 
				    
					 <view v-if="detail.shopList.length">
						<view class="shopline" >
							<view class="newdistance" v-if="detail.shopList[0].distance&&detail.shopList[0].distance!= '0.00'">
								 <image src="../../static/img2/dh.png" mode="" class="dhImg"></image>
								<view style="padding-top: 6rpx;"><span >{{detail.shopList[0].distance}}km</span></view>
							</view>
							<view class="shoplineLeft">
								<image :src="detail.shopList[0].doorImg1" mode="" class="shopImg" v-if="detail.shopList[0].doorImg1"></image>
								<image :src="detail.shopList[0].doorImg2" mode="" class="shopImg" v-else-if="detail.shopList[0].doorImg2"></image>
								<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
							</view>
							<view class="shopright">
								<view style="width: 410rpx;">
									<view class="shopTop">
										<view class="shopName">{{detail.shopList[0].shopName}}</view>
									</view>
									
								</view>
								
								<view class="shopTime">营业时间:<span v-if="detail.shopList[0].startTime">{{detail.shopList[0].startTime}}</span> - <span
										v-if="detail.shopList[0].endTime">{{detail.shopList[0].endTime}}</span> </view>
								<view class="shopBottomLeft">
									<span class="shopaddress"
										v-if="detail.shopList[0].address">{{detail.shopList[0].provinceName}}{{detail.shopList[0].cityName}}{{detail.shopList[0].areaName}}{{detail.shopList[0].address}}</span>
								<!-- 	<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span> -->
								</view>
							</view>
						
						</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: #EC0F0A;
	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: #EC0F0A;
	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: #EC0F0A;
	}
	.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: #EC0F0A;
	}

	.use2 {

		font-size: 40rpx;
		font-weight: 500;
		color: #EC0F0A;
		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: #EC0F0A;
			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%;
			}
	.shopline {
		margin: 0rpx 24rpx 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	    position: relative;
		display: flex;
	}
.newdistance{
		position: absolute;top: 22rpx;right: 18rpx;
		text-align: center;
		font-size: 22rpx;
		color: #666666;
	}
.shopbox {
		padding: 0 16rpx;
	}



	.shopImg {
		width: 146rpx;
		height: 146rpx;
		border-radius: 10rpx;
	}

	.shopCallImg {
		width: 38rpx;
		height: 46rpx;
	}

	.shopTop {
		display: flex;
		justify-content: space-between;
		width: 510rpx;
	}

	.shopright {
		padding-left: 20rpx;
	}

	.shopName {
		
		width: 450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shopScore1 {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF4F00;
		height: 50rpx;
		line-height: 50rpx;
	}

	.shopScore11 {
		font-size: 22rpx;
		color: #FF4F00;
		margin-right: 14rpx;

	}

	.shopScore2 {
		font-size: 22rpx;
		color: #666666;
		margin-right: 14rpx;
		padding: 8rpx 0;
	}

	.shopScore3 {
		font-size: 22rpx;
		color: #333333;
		padding-left: 20rpx;
	}
.shopaddress {
		width: 400rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #999999;
	}
.shopCont {
		padding-left: 22rpx;
		width: 520rpx;
	}

	.shopName {
		    font-size: 32rpx;
		    font-weight: bold;
		    color: #222222;
			line-height: 40rpx;
			width: 450rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			
	}
.shopTime {
		color: #666666;
		font-size: 26rpx;
		padding-top: 4rpx;
	}

	.addressBox {
		color: #666666;
		font-size: 22rpx;
	}
	.shopaddress {
		width: 400rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #999999;
	}
</style>