JP-ChargeTeam51/pages/user/coupon/myCoupon.vue

<template>
	<view >
		<ujp-navbar title="我的优惠券"><view class="exchange oldTextjp2" oldstyle="font-size: 16px;" @click="toConversion">兑换</view></ujp-navbar>
		<view class="tab" >
			<u-tabs :font-size="elderStatus ? 36 : 30" :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
		</view>
		<view class="carNone" v-if="myCouponList.length == 0">
			<img src="@/assets/static/img/暂无数据-缺省页.png" alt="">
			<p>暂无优惠券</p>
		</view>
		<view class="workable" :style="current == 0 ? '' : 'opacity: 0.6'">
			<view class="list-item" v-for="(item,index) in myCouponList" :key="index">
	
				<view class="voucher" v-if="item.classify == '4'||item.classify == '5'">月卡优惠券</view>
				<view class="voucher" v-else>优惠券</view>
				
				<view class="content" @click="gotoUrl('pages/user/coupon/couponDetails?id=' + item.id)">
					<view class="content-left">
						<view class="text oldTextjp" oldstyle="font-size: 18px;">{{item.couponName}}</view>
						<view class="useful-life oldTextjp2" oldstyle="font-size: 16px;" v-if="item.status==5">
							有效期<br/>{{item.startDate&&item.startDate.slice(0,10)}}至{{item.endDate&&item.endDate.slice(0,10)}}
						</view>	
						<view class="useful-life oldTextjp2" oldstyle="font-size: 16px;" v-else>
							有效期至{{item.endDate&&item.endDate.slice(0,10)}}
						</view>	
						
					</view>
					<view class="content-right">

						<view class="price2" v-if="item.classify == '2'">
							
							<span style="font-size: 24rpx;" v-if="item.value">服务费</span>
							
															<span v-if="item.value"> {{item.value}}<span style="font-size: 24rpx;">折</span></span>
															<span v-else>免服务费</span>
							
							</view>
						<view class="price" v-else >{{item.value}}<span style="font-size: 24rpx;">元</span></view>
						
						
						<view class="price-condition oldTextjp2" oldstyle="font-size: 16px;">
							{{item.threshold > 0 ? '满'+item.threshold+'元可用' : '无门槛'}}
						</view>
					</view>
				</view>
				
				<view class="limit">
					<view class="limit-text">
							<view :class="more==index&&readMoreStatus ? 'limit-text2' : 'limit-text1'">
								<span>{{item.useScopeText}}</span>		
							</view>
							<view class="iconfont arrows" @click="readMore(index)">{{more==index&&readMoreStatus ? '&#xe607;' : '&#xe62c;'}}</view>
					</view>
					<view class="use-button2" v-if="current == '0'&&item.status==5" >未生效</view>
					<view class="use-button" v-else-if="current == '0'" @click="toIndex">去使用</view>
					<view class="have-used" v-if="current == '1'"><img src="@/assets/static/img/haveused.png" alt=""></view>
					<view class="have-used" v-if="current == '2'"><img src="@/assets/static/img/overdue.png" alt=""></view>
				</view>
			</view>
		</view>
		<u-divider  v-if="myCouponList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px;background-color: #F2F4F4;">已经到底了</u-divider>
		
	</view>	
</template>

<script>
	import * as userApi from '@/apis/user.js'
	
	export default{
		data(){
			return{
				tabList: [
					{name: '可使用',type: '0'},
					{name: '已使用',type: '1'},
					{name: '已过期',type: '2'},
				],
				current: 0,
				couponType: '0',
				myCouponList: [],
				pageIndex: 1,
				recordsTotal: 0,
				readMoreStatus: false,
				more: -1,
				moreShow: '',
				elderStatus: false,
			}
		},
		onShow() {
			this.getCouponList(true);
			
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
		},
		onReachBottom() {
			if (this.myCouponList.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods:{
			toConversion() {
				uni.navigateTo({
					url: '/pages/user/coupon/conversion'
				})
			},
			toIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			readMore(index) {
				if(this.more != index && this.readMoreStatus) {
					this.more = index;
					this.readMoreStatus = true;
				} else {
					this.more = index;
					this.readMoreStatus = !this.readMoreStatus;
				}
			},
			getCouponList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.myCouponList = [];
					this.pageIndex = 1;
				}
				userApi.couponList({
					pageIndex: this.pageIndex,
					status: this.couponType
				}).then((res) => {
					uni.hideLoading();
					
					this.myCouponList = [
						...this.myCouponList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
				this.couponType = this.tabList[index].type;
				this.getCouponList(true);
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getCouponList()
			},
		}
	}
</script>
<style>
	page{
		padding-bottom: 50px;
	}
</style>
<style lang="scss" scoped>
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	.exchange{
		margin-left: 85.3%;
		color: rgba(119, 119, 119, 100);
		font-size: 12px
	}
	.tab{
		
		width: 100%;
		
	}
	::v-deep.u-scroll-box{
		width: 80.8%;
		margin: 0 auto;
	    display: flex;
		justify-content: space-between;
	}
	
	.list-item{
		width: 91.4%;
		background-color: #fff;
		margin: 12px auto 0;
		position: relative;
		border-radius:8px;
		.voucher{
			width: 60px;
			height: 20px;
			line-height: 20px;
			border-radius: 8px 0px 8px 0px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 12px;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
		}
		.content{
			   display: flex;
			   justify-content: space-between;
			   padding: 24px 16px;
		}
			   .content-left{
				   .text{
					 
					   
					   line-height: 22px;
					   color: rgba(16, 16, 16, 100);
					   font-size: 16px;
				   }
				
				   .useful-life{
					   
					   line-height: 17px;
					   color: rgba(153, 153, 153, 100);
					   font-size: 12px;
					   margin-top: 4px;
				   }
			   };
			   .content-right{
				   margin-top: -8px;
				   text-align: right;
				   .price{
					 
					   color: rgba(0, 185, 98, 100);
					   font-size: 68rpx;
					   white-space: pre;
					   
				   }
				   .price2{
					   white-space: pre;
				   			 
				   			   color: rgba(0, 185, 98, 100);
				   			 font-size: 48rpx;
				   }
				   .price-condition{
					    
					   color: rgba(102, 102, 102, 100);
					   font-size: 12px;
					   text-align: center;
					   margin-top: 4px;
				   }
			   }
		}
		.limit{
		
			display: flex;
			justify-content: space-between;
			padding: 14px 16px;
			border-top:  1px dotted rgba(227, 227, 227, 100);
			position: relative;
			
			.limit-text{
				color: rgba(153, 153, 153, 100);
								font-size: 12px;
								display: flex;
								
				
				.limit-text1{
					max-width: 51vw;
					line-height: 20px;
					position: relative;
					font-size: 12px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;	
			}
			.limit-text2{
					max-width: 51vw;
					line-height: 20px;
					position: relative;
					font-size: 12px;
					white-space: normal;
					overflow: hidden;
					text-overflow: ellipsis;	
			}
			.arrows{
									   display: inline-block;
								   width: 20px;
								   height: 20px;
						           padding-top: 2px;
								   margin-left: 4px;
								   
								  
				
			
			}
			
		}
		
		
	}
	.use-button2{
		width: 56px;
		height: 24px;
		line-height: 24px;
		border-radius: 4px;
		background-color:red;
		color: rgba(255, 255, 255, 100);
		font-size: 12px;
		text-align: center;
	}
  .use-button{
  	width: 56px;
  	height: 24px;
  	line-height: 24px;
  	border-radius: 4px;
  	background-color: rgba(0, 185, 98, 100);
  	color: rgba(255, 255, 255, 100);
  	font-size: 12px;
  	text-align: center;
  }
  .have-used{
	  
	  width: 64px;
	  height: 64px;
	  position: absolute;
	  top: -12px;
	 right: 0;
	  img{
		  width: 100%;
		  height: 100%;
	  }
  }

</style>