weCom/pages/index/coupon.vue

<template>
	<view class="content">
		<view class="topbox">
			<view class="top">
				<view class="topLine">
					<view class="topTxt1">默认等级</view>
					<view class="topTxt2">客户等级</view>
				</view>
				<view class="topx"></view>
				<view class="topLine">
					<view class="topTxt1">18</view>
					<view class="topTxt2">可用优惠券</view>
				</view>
				<view class="topx"></view>
				<view class="topLine">
					<view class="topTxt1">19</view>
					<view class="topTxt2">可用积分</view>
				</view>
			</view>
		</view>
		<view class="cBox">
			<view class="line" v-for="(item,index) in list">
				<view class="lineTop">
					<view class="nameBox">
						<view class="type">代金券</view>
						<view class="name">{{item.ActName}}</view>
					</view>
					<view class="lprice">
						 <span class="price1">￥</span>
						 <span class="price2">4566</span>
						 <span class="price3">满10000元可用</span>
					</view>
					<view style="display: flex;">
							<view class="chepai">限鲁A9JK32使用</view>
					</view>
				
					<view class="time">2021.02.21 至 2021.03</view>
				</view>
				<view class="lineBottom">
					[不可叠加] [限门店] [使用说明]
				</view>
				
				
			</view>
		</view>
	 
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 customerId:'',
				 list:[]
			}
		},
		onLoad() {

		},
		methods: {
           getdata(){
			   var that=this;
			   this.customerId=uni.getStorageSync('customerId')
			   this.$http('enterprise/wechat/listIntegralInfo', {
			     id:this.customerId,
			   }, 'GET').then(res => {
			       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: 24rpx;
	color: #50402A;
	padding-top: 8rpx;
}
.cBox{
	padding: 0 24rpx;
}
.line{
	padding: 30rpx 0rpx;background: #FFFFFF;
border-radius: 10rpx;margin-top: 20rpx;
}
.nameBox{
	display: flex;
}
.type{
	font-size: 24rpx;
	color: #2B2219;
	height: 36rpx;
	background: linear-gradient( 128deg, #FFE4C5 0%, #FDC692 100%);
	border-radius: 4rpx;
	width: 82rpx;
	text-align: center;
	line-height: 36rpx;
}
.name{
	line-height: 36rpx;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: 22rpx;
color: #666666;
}
.chepai{
	height: 36rpx;
	background:rgba(255, 129, 19, 0.1);
	border-radius: 4rpx;
	font-size: 22rpx;
	color: #FF8113;
	line-height: 36rpx;
	padding: 0 10rpx;
	margin-top: 10rpx;
}
.time{
	font-size: 22rpx;
	color: #666666;padding-top: 10rpx;
	padding-bottom: 15rpx;
}
.lineBottom{
	font-size: 22rpx;
	color: #666666;
	padding: 15rpx 24rpx;
}
</style>