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 col-e42417 dis pad-z20" style="min-width: 180rpx;" :style="{color:current!=0?'#c0c0c0':'#e42417'}">
								<view class="">￥</view>
								<view class="fon66 bold">{{item.price}}</view>
							</view>
							<view class="width100 pad-zy20 posir">
								<view class="disjbac" style="border-bottom: 2rpx dashed #e4e4e4;">
									<view class="line-h40 pad-x10">
										<view class="">{{item.title}}</view>
										<view class="fon20" style="color: #747474;">有限期：{{item.time}}</view>
									</view>
									<view 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: 60rpx;">
									<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">
					<pitera textStr="上滑加载更多/到底了~~" 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},
				]
			}
		},
		methods: {
			// tab点击事件
			clickTab(index){
				this.current = index;
			},
			// 去商品详情
			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;
				}
			}
		}
	}
</script>

<style>
.used-item{
	border-top: 2rpx solid ;
}
.noshow{transform: rotate(-90deg);transition: all .3s linear;}
.isshow{transform: rotate(90deg);transition: all .3s linear;}
</style>