xiongmao/pages/my/coupon/coupon.vue

<!-- 卡券 -->
<template>
	<view class="wrap">

		<view class="header">
			<view class="tab-list">
				<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
					:key="index" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>

		<view class="list">
			<view class="item">
				<view class="left-sidebar">
					<text class="num">68</text>
					<text class="name">优惠券(元)</text>
				</view>
				<view class="right-sidebar">
					<view class="right-sidebar-column">
						<view class="full">满68可用</view>
						<view class="time">有效期:2021-11-30 23:59</view>
						<view class="row">
							仅限购买限源预售商品
							<image src="../../../static/open.png" mode="widthFix"></image>
						</view>
					</view>
					<button type="default" class="btn">去使用</button>
				</view>
			</view>
			<view class="item">
				<view class="left-sidebar">
					<image src="../../../static/img-3.png" class="img" mode="heightFix"></image>
					<text class="name">个护299-100券</text>
				</view>
				<view class="right-sidebar">
					<view class="right-sidebar-column">
						<view class="full">￥68满200可用</view>
						<view class="time">
							<text>距开抢:</text>
							<view class="countdown">
								<text>02</text>
								<text>:</text>
								<text>41</text>
								<text>:</text>
								<text>13</text>
							</view>
						</view>
					</view>
					<button type="default" class="btn">提醒我</button>
				</view>
			</view>
			<view class="item">
				<view class="left-sidebar">
					<text class="num gray">68</text>
					<text class="name gray">优惠券(元)</text>
				</view>
				<view class="right-sidebar">
					<view class="right-sidebar-column">
						<view class="full gray">满68可用</view>
						<view class="time">有效期:2021-11-30 23:59</view>
						<view class="row">
							仅限购买限源预售商品
							<image src="../../../static/open.png" mode="widthFix"></image>
						</view>
					</view>
					<button type="default" class="btn gray-bg">去使用</button>
					<image src="../../../static/already.png" class="already" mode="widthFix"></image>
				</view>
			</view>
			<!-- 无内容时显示 -->
			<!-- <view class="normal-box">
				<image src="../../../static/normal-5.png" mode="widthFix"></image>
				暂无优惠券
			</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '未使用',
				}, {
					index: 1,
					title: "已使用",
				}],

			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./coupon.css";
</style>