douhuo-h5/pages/user/coupon.vue

<template>
    <view class="content">
    	<view class="tab">
			<view class="tab-item" :class="{active : status == 'init'}" @click="tabClick('init')">
				未使用
			</view>
			<view class="tab-item" :class="{active : status == 'used'}" @click="tabClick('used')">
				已使用
			</view>
			<view class="tab-item" :class="{active : status == 'overdue'}" @click="tabClick('overdue')">
				已过期
			</view>
    	</view>
		<view class="list" v-if="listsArr.length > 0">
			<view class="list-item" :class="{active : status != 'init'}" v-for="(item, index) in listsArr" :key="index">
				<view class="list-number" :class="{active : status != 'init'}">
					{{item.price}}<text>元</text>
				</view>
				<view class="list-text">
					{{item.title}}
				</view>
				<view class="list-btn">
					<image v-if="status == 'init'" class="list-img" src="@/static/imgs/couponImg.png" mode="heightFix"></image>
					<view class="list-see">
						<view class="list-go" :class="{active : status != 'init'}">
							<text @click="$Router.push({name: 'indexIntroduce'})" v-if="status == 'init'">去使用</text>
							<text v-else-if="status == 'used'">已使用</text>
							<text v-else>已过期</text>
						</view>
						<view class="list-time" :class="{active : status != 'init'}">
							<block v-if="status == 'overdue'">已过期</block>
							<block v-else>{{item.time.end_at}} 过期</block>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="list-item active">
				<view class="list-number active">
					9.9<text>元</text>
				</view>
				<view class="list-text active">
					抵扣券
				</view>
				<view class="list-btn">
					<view class="list-see">
						<view class="list-go active">
							已使用
						</view>
						<view class="list-time active">
							2022-11-10过期
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="pack-center pages-hint" v-else>
		    <image src="/static/imgs/Noevaluate.png"></image>
		    <view>暂无优惠券</view>
		</view>
    </view>
</template>

<script>
	import { coupons } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
				
    			status  : 'init', // tab状态 init 未使用 used 已使用 overdue 已过期
				listsArr: [], // 列表
    		};
    	},
		
        onShow() {
        	// 获取基础信息
        	this.couponsInfo();
        },
		
		methods: {
			// 基础信息
			couponsInfo() {
				coupons({
					type	: 2,
					status	: this.status
				}).then(res => {
					this.listsArr = res.lists
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// tab选择
			tabClick(e) {
				this.status = e
				// 获取基础信息
				this.couponsInfo();
			}
		}
    }
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f7f9fa;
		// height: calc(100vh - 44px);
		height: 100vh;
		overflow-y: scroll;
	}
	.tab {
		position: fixed;
		left: 0;
		top: 44px;
		width: 100%;
		height: 90rpx;
		z-index: 99;
		display: flex;
		background-color: #ffffff;
		.tab-item {
			flex: 2;
			line-height: 90rpx;
			text-align: center;
			font-size: $title-size-lg;
			color: #80818e;
			position: relative;
			&::after {
				position: absolute;
				content: '';
				left: calc(50% - 20rpx);
				bottom: 0;
				background-color: transparent;
				width: 40rpx;
				height: 6rpx;
			}
			&.active {
				color: #0e1a2f;
			}
			&.active::after {
				background-color: #0e1a2f;
			}
		}
	}
	
	.list {
		padding: $padding;
		box-sizing: border-box;
		margin-top: 90rpx;
		.list-item {
			box-sizing: border-box;
			background-color: #ff4835;
			color: #ffffff;
			border-radius: $radius;
			margin-bottom: $margin;
			display: flex;
			height: 180rpx;
			position: relative;
			overflow: hidden;
			width: 100%;
			&.active {
				background-color: #fceff1;
				color: #eb4e3d;
			}
			.list-number {
				font-size: $title-size + 20;
				width: 200rpx;
				line-height: 180rpx;
				text-align: center;
				border-right: 2rpx dashed #f09789;
				text {
					font-size: $title-size-m;
					padding-left: 10rpx;
				}
				&.active {
					border-color: #f3b0a8;
				}
			}
			.list-text {
				line-height: 180rpx;
				font-weight: 600;
				width: calc(100% - 440rpx);
				padding: 0 $padding;
				box-sizing: border-box;
				&.active {
					color: #000000;
				}
			}
			.list-btn {
				text-align: center;
				width: 320rpx;
				height: 180rpx;
				position: relative;
				.list-img {
					position: absolute;
					width: 100%;
					height: 180rpx;
					left: 0;
					top: 0;
				}
				.list-see {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					z-index: 2;
					padding-left: $padding;
					box-sizing: border-box;
					.list-go {
						background-color: #ffffff;
						border-radius: $radius-m;
						color: #ff4835;
						display: inline-block;
						font-size: $title-size-m;
						font-weight: 600;
						line-height: 58rpx;
						padding: 0 $padding;
						margin: $margin + 10 0 15rpx;
						border: 2rpx solid #e54d37;
						&.active {
							border-color: #c9c9c9;
							color: #c9c9c9;
						}
					}
					.list-time {
						color: #f4c745;
						font-size: $title-size-sm;
						&.active {
							color: #aca9aa;
						}
					}
				}
			}
		}
	}
</style>