martial-arts/pagesA/my-coupon/my-coupon.vue

<template>
	<view>
		<status-container titlet="我的优惠券" returnc="#FFFFFF">
			<view slot="content">
				<view class="posi-sticky" :style="{top:newtop+'px'}" style="margin-top: -20rpx;">
					<swiper-tab id="tab" :ifBetween="false" :ifPadding="true" :list="tabList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
				</view>
				<view class="pad-zy20 mar-s30">
					<view class="bacf radius12 pad-sx20 fon24 mar-x20" v-for="(item,index) in dataList" :key="index">
						<view class="disac">
							<view class="flexs bold col-e42417 dis pad-z20" style="min-width: 180rpx;" :style="{color:current!=0?'#c0c0c0':'#e42417'}">
								<view class="">￥</view>
								<view class="fon66" style="margin-top: -10rpx;">{{item.amount}}</view>
							</view>
							<view class="width100 pad-zy20 posir">
								<view class="disjbac">
									<view class="line-h40">
										<view class="">{{item.name}}</view>
										<view class="fon20" style="color: #747474;" v-if="item.begin_at">有限期：{{item.begin_at.slice(0,10).split('-').join('.')}}-{{item.end_at.slice(0,10).split('-').join('.')}}</view>
									</view>
									<view @tap="goCourse" class="flexs mar-z20 radius26 colf disjcac" style="width: 124rpx;height: 52rpx;" :style="{backgroundColor:current!=0?'#c0c0c0':'#f37717'}">去使用</view>
								</view>
								<!-- <view class="disac fon20 pad-s20" style="color: #747474;">
									<span @tap="lookDetail(index)">详细信息</span>
									<view @tap="lookDetail(index)" class="icon icon-return fon20 mar-z10" :class="item.show?'isshow':'noshow'"></view>
								</view> -->
								<!-- 图标 -->
								<view class="posia" v-if="current!=0" style="position: absolute;right: 120rpx;top: 0rpx;">
									<image v-if="current==1" src="/static/tabbar/icon-used.png" style="width: 90rpx;height: 86rpx;" mode="" lazy-load></image>
									<image v-if="current==2" src="/static/tabbar/icon-overduce.png" style="width: 90rpx;height: 86rpx;" mode="" lazy-load></image>
								</view>
							</view>
						</view>
						<!-- <view v-if="item.show" class="fon20 line-h36 pad-zy20 pad-s20" style="color: #898989;">
							<view class="">时间：2022.07.11 00:00:00 - 2022.07.30 23:59:59</view>
							<view class="">来源：秒杀抢卷所得</view>
							<view class="">渠道：全部渠道可</view>
							<view class="disac">编号：全部渠道可 
								<image class="mar-z10" src="/static/tabbar/icon-bh.png" mode="" style="width: 22rpx;height: 22rpx;" lazy-load></image>
							</view>
						</view> -->
					</view>
				</view>
				<view class="pad-zy20" v-if="loading">
					<pitera :textStr="`${noMore && total > dataList.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
				</view>
			</view>
		</status-container>
	</view>
</template>

<script>
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			swiperTab,
			pitera
		},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				current:0,
				tabList:[
					{title:'待使用'},
					{title:'已使用'},
					{title:'已过期'}
				],
				dataList:[
					// {price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
					// {price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
					// {price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
					// {price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
				],
				status:'normal',
				page:1,
				size:20,
				total:0,
				noMore:false,
				loading:false
			}
		},
		onReachBottom() {
			if(this.total!=this.dataList.length){
				this.page++;
				this.getCouponList();
			}
		},
		onLoad() {
			this.getCouponList();
		},
		methods: {
			// 去使用事件
			goCourse(){
				if(this.status=='normal'){
					uni.reLaunch({
						url:'/pages/tabbar/course/course'
					})
				}
			},
			// tab点击事件
			clickTab(index){
				this.dataList = [];
				this.current = index;
				this.status = ['normal','used','invalid'][this.current];
				this.page = 1;
				this.getCouponList();
			},
			// 去商品详情
			goDetail(id){
				uni.navigateTo({
					url:`/pagesB/shop-detail/shop-detail?id=${id}`
				})
			},
			// 查看优惠券详情
			lookDetail(index){
				if(this.dataList[index].show){
					this.dataList[index].show = false;
				} else {
					this.dataList.forEach(item=>item.show=false);
					this.dataList[index].show = true;
				}
			},
			// 获取优惠券列表
			getCouponList(){
				this.loading = false;
				let params = {
					status:this.status,
					page:this.page,
					size:this.size
				}
				this.$requst.get('/api/user/coupon-list',params).then(res=>{
					if(res.code==0){
						this.total = res.data.total;
						if(this.page==1){this.dataList=[];}
						this.dataList = [...this.dataList,...res.data.list];
						if(this.total==this.dataList.length && this.page!=1){
							this.noMore = true;
						}
						this.loading = true;
					}
				})
			}
		}
	}
</script>

<style>
.noshow{transform: rotate(-90deg);transition: all .3s linear;}
.isshow{transform: rotate(90deg);transition: all .3s linear;}
</style>