charge_miniapp/pages/coupons/coupons.vue

<template>
	<ax-body title="">
		<view class="tabs-body">
			<view class="tabs-box">
				<view class="item-tabs" :class="{active:currentIndex===item.id}" v-for="item in tabsList" :key="item.id" @click="handleTabClick(item)">{{item.text}}({{item.id}})</view>
			</view>
			<view style="height: 100rpx;"></view>
			<view class="list-body">
				<view class="coupons-list-box" :style="{opacity:`${currentIndex===3?'0.5':''}`}" v-for="item in 3">
					<image class="coupons-bg-img" src="../../static/img/coupons-new.png" mode=""></image>
					<view class="coupons-content-box">
						<view class="coupons-left">
							<view class="left-price">10<text>元</text></view>
							<view class="left-rules">满100元可用</view>
						</view>
						<view class="coupons-center">
							<view class="coupons-title">优惠券名称优惠券名称</view>
							<view class="coupons-valid">有效期：领取后60天</view>
							<view class="coupons-range">平台所有充电桩可用</view>
						</view>
						<view class="coupons-right">
							<view class="coupons-dayrules" v-if="currentIndex===0">每日限领一次</view>
							<view class="coupons-getbtn" v-if="currentIndex===0">立即领取</view>
							<view class="coupons-getbtn" v-if="currentIndex===2">查看订单</view>
						</view>
					</view>
					<view class="ribbon" :style="{backgroundColor:`${currentIndex===3?'#e8e8e8':''}`,color:`${currentIndex===3?'#8c8c8c':''}`}">{{tabsList[currentIndex].text}}</view>
				</view>
			</view>
		</view>
	</ax-body>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0 ,// 默认选中第一个选项卡
				tabsList:[{
					text:'待领取',
					id:0
				},{
					text:'待使用',
					id:1
				},{
					text:'已使用',
					id:2
				},{
					text:'已过期',
					id:3
				},]
			};
		},
		methods: {
			// 处理选项卡点击
			handleTabClick(e) {
				this.currentIndex = e.id;
			}
		}
	};
</script>

<style>
	@import url("coupons");
</style>