weCom/pages/index/coupon.vue

<template>
	<view class="content">
		
		<view style="margin-top: -26rpx;"></view>
		<view class="topbox" v-show="!nodataShow">
			<view class="top">
				<view class="topLine">
					<view class="topTxt1">{{levelName}}</view>
					<view class="topTxt2">客户等级</view>
				</view>
				<view class="topx"></view>
				<view class="topLine">
					<view class="topTxt1">{{list.length}}</view>
					<view class="topTxt2">可用优惠券</view>
				</view>
				<view class="topx"></view>
				<view class="topLine">
					<view class="topTxt1">{{integral}}</view>
					<view class="topTxt2">可用积分</view>
				</view>
			</view>
		</view>
		<view  class="nodataBox" v-show="nodataShow||list.length==0">
			<image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png" mode="widthFix" class="nodataImg"></image>
			<view class="noTxt">暂无数据</view>
		</view>
		<view class="cBox"  v-show="!nodataShow&&list.length!=0">
			<view class="line" v-for="(item,index) in list">
				<view class="lineTop">
					<view class="nameBox">
						<view class="type" v-if="item.discountType==1">满减券</view>
						<view class="type" v-if="item.discountType==2">商品券</view>
						<view class="type" v-if="item.discountType==3">服务券</view>
						<view class="name">{{item.ActName}}</view>
					</view>
					<view class="lprice" v-if="item.discountType==1">
						 <span class="price1">￥</span>
						 <span class="price2">{{item.ActMoney}}</span>
						 <span class="price3">{{item.WhereMoney}}</span>
					</view>
					<view style="display: flex;">
							<view class="chepai" v-if="item.applyCarPlateNumber">限{{item.applyCarPlateNumber}}使用</view>
							<view class="chepai" v-else>不限车牌</view>
					</view>
				
					<view class="time" v-if="item.StartTime">{{item.StartTime.slice(0,10)}}至{{item.EndTime.slice(0,10)}}</view>
					<view class="time" v-else>有效期：领取后{{item.EndOffsetDays}}天有效</view>
				</view>
				<view class="lineBottom">
					 {{item.overlyType == 0 ? '[不可叠加]' : '[可叠加]'}} 
					 {{item.shopLimit == 0 ? '[不限门店]' : '[限门店]'}}
					 <span v-if="item.CouContent" @click="couFn(item.CouContent)"> [使用说明]</span>
					<!-- <span v-else>[使用说明]</span> -->
					
				</view>
				
				
			</view>
			<view style="height: 40rpx;"></view>
		</view>
	
	 
		<view class="tkBox" v-if="couShow" @click="couHide">
			<view class="popupBox" @click.stop="">
				<view class="popupTitleBox">
				  <view  class="chaImg"></view>
				  <view class="popupTitle">使用说明</view>
				  <image src="../../static/img/cha.png" mode="" class="chaImg" @click="couHide"></image>
				</view>
				<view>
				<rich-text :nodes="txt"></rich-text>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 customerId:'',
				 list:[],
				 integral:'',
				 levelName:'',
				 nodataShow:false,
				 couShow:false,
				 txt:'',
			}
		},
		onLoad() {

		},
		methods: {
		  couFn(txt){
			this.txt=txt;
			console.log(this.txt)
			this.couShow=true;
		  },
		  couHide(){
			  this.couShow=false;
		  },
           getdata(){
			   var that=this;
			   this.customerId=uni.getStorageSync('customerId')
			   this.integral=uni.getStorageSync('integral')
			   this.levelName=uni.getStorageSync('levelName')
			   if(!this.customerId){
			   	this.nodataShow=true
			   }else{
				   uni.showLoading({
				    	title: '加载中'
				   }); 
				   this.$http('enterprise/wechat/listIntegralInfo', {
				     id:this.customerId,
				   }, 'GET').then(res => {
					   uni.hideLoading();
				       this.list=res.data
				   	
				   })
			   }
			  
		   }
		}
	}
</script>

<style scoped>
.topbox{
	padding: 24rpx;background: #fff;
}
.top{
	width: 702rpx;
	height: 156rpx;
	background: linear-gradient( 132deg, #FFF0DF 0%, #FED28F 100%);
	border-radius: 10rpx;
}
.top{
	display: flex;justify-content: space-around;
}
.topx{
	opacity: 0.19;
    height: 49rpx;
	width: 1px;
	background: #2D2417;
	margin-top: 54rpx;
}
.topLine{
	text-align: center;
	padding-top: 37rpx;
}
.topTxt1{
	font-weight: 500;
	font-size: 35rpx;
	color: #2D2417;
}
.topTxt2{
	font-size: 26rpx;
	color: #50402A;
	padding-top: 10rpx;
}
.cBox{
	padding: 0 24rpx;
}
.line{
	padding: 30rpx 0rpx 16rpx 0;background: #FFFFFF;
border-radius: 10rpx;margin-top: 20rpx;
}
.nameBox{
	display: flex;
}
.type{
	font-size: 24rpx;
	color: #2B2219;
	/* padding-top: 2rpx;
	padding-bottom: 2rpx; */
	background: linear-gradient( 128deg, #FFE4C5 0%, #FDC692 100%);
	border-radius: 4rpx;
	width: 82rpx;
	text-align: center;
	line-height: 38rpx;
	height: 36rpx;
	
}
.name{
	line-height: 38rpx;padding-left: 10rpx;font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.lineTop{
	padding: 0 24rpx;
	border-bottom: 1px dashed #DDDDDD;
}
.price1{
	font-weight: 500;
	font-size: 26rpx;
	color: #FF3B30;
}
.price2{
	font-weight: 500;
font-size: 40rpx;
color: #FF0000;
}
.price3{
font-weight: 400;
font-size: 26rpx;
color: #666666;
}
.chepai{
	/* height: 36rpx; */
	background:rgba(255, 129, 19, 0.1);
	border-radius: 4rpx;
	font-size: 22rpx;
	color: #FF8113;
	/* line-height: 38rpx; */
	padding: 4rpx 10rpx;
	margin-top: 10rpx;
}
.time{
	font-size: 26rpx;
	color: #666666;padding-top: 10rpx;
	padding-bottom: 15rpx;
}
.lineBottom{
	font-size: 26rpx;
	color: #666666;
	padding: 15rpx 24rpx;
	padding-bottom: 0;
}
.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 32rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;background: #fff;
	}
	.tkBox{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.5);
	}
	.popupBox{
			width: 750rpx;
			height: 60vh;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: absolute;
			bottom: 0;
		}
		.popupTitleBox{
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
		}
		.popupTitle{
			font-size: 30rpx;
			color: #3C3C3C;
			line-height: 42rpx;
			font-weight: 600;
		}
		.chaImg{
			width: 27rpx;height: 27rpx;margin-top: 9rpx;
		}
.lprice{
	padding-top: 10rpx;
}
.price3{
	padding-left: 16rpx;
}
</style>