pet-front-order/pages/personalCenter/coupon.vue

<template>
	<view class="personal-coupon" >
		<u-subsection :list="list" 
		active-color="#ffaa48"
		bg-color="#fff"
		inactive-color="#aaaaaa"
		font-size="16"
		:current="curNow" 
		@change="sectionChange" ></u-subsection>
		<view v-if="curNow==0">
			<view v-for="(item,index) in sendedList" style="padding:14px 18px 0;" :key="index">
				<view class="card">
					<view class="card-left">{{switchType(item.stockType)}}</view>
					<view class="card-right">
						<view class="card-content">
							<view class="card-info">{{item.stockName}}</view>
							<view class="card-time">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
						</view>
						<view style="width: 20%;">
							<u-button shape="circle" size="mini" color="#ffaa48" text="去使用" @click="useCoupon()"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="curNow==1">
			<view v-for="(item,index) in usedList" style="padding:14px 18px 0;" :key="index">
				<view class="card">
					<view class="card-left" style="color: #aaaaaa;">{{switchType(item.stockType)}}</view>
					<view class="card-right">
						<view class="card-content">
							<view class="card-info" style="color: #aaaaaa;">{{item.stockName}}</view>
							<view class="card-time" style="color: #aaaaaa;">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
						</view>
						<view class="card-icon">
							<image src="./../../static/images/personal/used.png" alt="used" style="width: 60px;height: 60px;"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="curNow==2">
			<view v-for="(item,index) in exporedList" style="padding:14px 18px 0;" :key="index">
				<view class="card">
					<view class="card-left" style="color: #aaaaaa;">{{switchType(item.stockType)}}</view>
					<view class="card-right">
						<view class="card-content" >
							<view class="card-info" style="color: #aaaaaa;">{{item.stockName}}</view>
							<view class="card-time" style="color: #aaaaaa;">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
						</view>
						<view class="card-icon">
							<image src="./../../static/images/personal/invalid.png" alt="invalid" style="width: 60px;height: 60px;"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>
<script>
	import {getCouponList} from "@/api/system/personal.js"
	export default{
		data(){
			return{
				list: ['未使用', '已使用', '已失效'],
				curNow: 0,
				sendedList:[],
				usedList:[],
				exporedList:[]
			}
		},
		onLoad() {
			// this.openIdStr = this.$globalData.openIdStr;
			this.getCouponList()
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			getCouponList() {
				getCouponList().then(res=>{
					let rows = res.rows
					console.log(rows)
					this.sendedList=rows.filter(item=>item.couponState=="SENDED")
					this.usedList=rows.filter(item=>item.couponState=="USED")
					this.exporedList=rows.filter(item=>item.couponState=="EXPORED")
				})
			},
			switchType(type){
				if(type=='PNORMAL'){
					return '满减券'
				}
				if(type=='PDISCOUNT'){
					return '折扣券'
				}
				if(type=='PTRAIL'){
					return '体验券'
				}
				return '优惠券'
				
			},
			useCoupon(){
				this.$globalData.newOrderData={
					currentAddress:{},
					currentPets:[],
					totalPrice:0,
					needPreFamiliarize:[]
				}
				uni.navigateTo({
					url: `/pages/newOrder/serviceNew`
				});
			}
		}
	}
</script>

<style lang="scss">
	.personal-coupon{
		.card{
		  display: flex;
		  align-items: center;
		  width: 100%;
		  padding: 10px 0;
		  background: #fff;
		  border-radius: 8px;
		  -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, #d8d8d8 4.5px),radial-gradient(closest-side circle at 50%, #d8d8d8 99%, transparent 100%);
		  -webkit-mask-size: 100%, 2px 4px;
		  -webkit-mask-repeat: repeat, repeat-y;
		  -webkit-mask-position: 0 -4px, 87px;
		  -webkit-mask-composite: source-out;
		  mask-composite: subtract;
		  // background: linear-gradient(45deg, orange, red);
		}
		.card-left{
		  width: 88px;
		  text-align: center;
		  font-size: 18px;
		  color: #333333;
		  
		}
		.card-right{
		  padding: 0px 12px;
		  display: flex;
		  flex: 1;
		  /* flex-direction: column; */
		  justify-content: space-between;
		  align-items: center;
		  height: 60px;s
		  .card-content {
			  width: 80%;
		  }
		  .card-icon{
		  			position: relative;
		  			right: -10px;
		  			top: -10px;
		  }
		}
		.card-info{
		  margin: 0;
		  font-size: 14px;
		  line-height: 20px;
		  color:#333333;
		}
		.card-time{
		  font-size: 12px; 
		  line-height: 16px;
		  font-weight: normal;
		  color: #aaaaaa;
		  margin-top: 4px;
		}
	}
	
</style>