zx_flk_app/pages/coupon/coupon.vue

<template>
	<view class="container">
		<view class="select-top flex-row">
			<view @tap="bindSelectStatus" :class="'select-item ' + (selectedStatus == 0 ? 'selected-item' : '')" data-status="0">
				待使用
				<view :class="selectedStatus == 0 ? 'select-circle' : 'circle'"></view>
			</view>
			<view @tap="bindSelectStatus" :class="'select-item ' + (selectedStatus == 1 ? 'selected-item' : '')" data-status="1">
				已使用
				<view :class="selectedStatus == 1 ? 'select-circle' : 'circle'"></view>
			</view>
			<view @tap="bindSelectStatus" :class="'select-item ' + (selectedStatus == 2 ? 'selected-item' : '')" data-status="2">
				已过期
				<view :class="selectedStatus == 2 ? 'select-circle' : 'circle'"></view>
			</view>
		</view>
		
		<view class="card-box">
			<view class="card-item">
				<view class="card-top flex-row">
					<view class="top-left top-left-r flex-row">
						<view>2</view>
						<view>满减券(元)</view>
					</view>
					<view class="top-center">
						<view>电动车租借优惠券</view>
						<view>满3元可用</view>
						<view>有效期至 :<text style="font-weight: bold;">2024.02.02</text></view>
					</view>
					<view class="top-right">
						<view>去使用</view>
					</view>
				</view>
				<view class="card-bottom">
					这里是关于优惠券的补充说明
				</view>
			</view>
		</view>
		<view class="card-box">
			<view class="card-item">
				<view class="card-top flex-row">
					<view class="top-left top-left-b flex-row">
						<view>9.8</view>
						<view>折扣券(折)</view>
					</view>
					<view class="top-center">
						<view>电动车租借优惠券</view>
						<view>不限额</view>
						<view>有效期至 :<text style="font-weight: bold;">2024.02.02</text></view>
					</view>
					<view class="top-right">
						<view>去使用</view>
					</view>
				</view>
				<view class="card-bottom">
					这里是关于优惠券的补充说明
				</view>
			</view>
		</view>
		
		<view class="bottom-item flex-row">
			<view>
				<img class="bottom-img" src="https://qiniu.bms16.com/FraQFeDfWQzkVDKDVpq7FdYBh1RM" />
				<text>兑换券码</text>
			</view>
			<view class="bottom-border"></view>
			<view>
				<img class="bottom-img" src="https://qiniu.bms16.com/Fnnjpusujfwes2qZbVc5nw5Dqh7Q" />
				<text>买点好券</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedStatus: 0,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			
		},
		methods: {
			bindSelectStatus(e) {
				const status = e.target.dataset.status;
				this.setData({
					selectedStatus: status
				});
			},
			
			// navToPage(e) {
			// 	const url = e.currentTarget.dataset.url;
			// 	if (!url) {
			// 	    return;
			// 	}
			// 	uni.navigateTo({
			// 	    url: url
			// 	});
			// },
		}
	};
</script>

<style>
	@import './coupon.css';
</style>