feiniao-youwei-uniapp/pages/tabBar/mine/subPages/exchange.vue

<template>
	<view class="sub-base-container">
		<view class="exchange-card">
			<view class="tabs">
				<view :class="['tab-item',{active:active === index}]" @click="handleTab(index)"
					v-for="(item,index) in tabs" :key="index">{{item}}</view>
			</view>
			<view class="list" v-show="active === 0">
				<template v-if="giftData.length">
					<view class="item" v-for="(item,index) in giftData" :key="index">
						<view class="item-info">
							<image class="img" :src="item.icon"></image>
							<view class="cont">
								<up-text bold :text="item.remark"></up-text>
								<up-text size="12" color="#999999"
									:text="`有限期:${item.startDate}至${item.endDate}`"></up-text>
							</view>
						</view>
						<view class="button">去兑换</view>
					</view>
				</template>
				<up-empty v-else mode="list" marginTop="50"></up-empty>
			</view>
			<view class="list" v-show="active === 1">
				<template v-if="couponData.length">
					<view class="item" v-for="(item,index) in couponData" :key="index">
						<view class="item-info">
							<view class="money">
								<view class="sum"><text class="unit">¥</text>50</view>
								<view class="tips">满100可用</view>
							</view>
							<view class="cont">
								<up-text bold text="仙桃荔全场优惠券"></up-text>
								<up-text bold text="满100减50"></up-text>
								<up-text size="12" color="#999999" text="有限期:2025.06.05至2025.06.23"></up-text>
							</view>
						</view>
						<view class="button">去使用</view>
					</view>
				</template>
				<up-empty v-else mode="coupon" marginTop="50"></up-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from "@/api/config.js"
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import MINE from '@/api/mine.js'

	onLoad(({
		type
	}) => {
		active.value = Number(type)
		handleTab(active.value)
	})

	const giftData = ref([])
	const getMyGift = () => {
		MINE.myGift({
			farmId: 766
		}).then((res => {
			giftData.value = res.data.useList.filter(item => item.use === 0)
		}))
	}

	const couponData = ref([])
	const getCouponList = () => {
		MINE.couponList({
			farmId: 766
		}).then((res => {
			couponData.value = res.data || []
		}))
	}

	const active = ref(0)
	const tabs = ["守护兑换", "优惠券"]
	const handleTab = (index) => {
		active.value = index
		if (index) {
			getCouponList()
		} else {
			getMyGift()
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.sub-base-container {
		@include ossBg("subTreePage/exchange-bg.png");
		min-height: 750rpx;

		.exchange-card {
			width: 100%;
			box-sizing: border-box;
			padding: 26rpx 20rpx;
			height: calc(100vh - 14vh);
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
			position: absolute;
			top: 14vh;
			left: 0;

			.tabs {
				display: flex;
				align-items: center;
				justify-content: center;

				.tab-item {
					color: rgba(0, 0, 0, 0.2);
					padding: 10rpx 12rpx;

					&.active {
						font-size: 36rpx;
						color: #000;
						font-weight: 500;
					}
				}

				.tab-item+.tab-item {
					margin-left: 24rpx;
				}
			}

			.button {
				font-size: 24rpx;
				padding: 14rpx 32rpx;
				border-radius: 50rpx;
				background: #FFD95E;
				font-weight: 500;
			}

			.list {
				.item {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-info {
						display: flex;

						.img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
							margin-right: 24rpx;
						}

						.money {
							background-image: linear-gradient(120deg, #ffe3c9, #eebd8f);
							border-radius: 16rpx;
							padding: 20rpx 30rpx 30rpx;
							text-align: center;
							color: #322802;
							margin-right: 24rpx;

							.sum {
								font-size: 64rpx;
								font-weight: bold;

								.unit {
									font-size: 30rpx;
									margin-right: 6rpx;
								}
							}

							.tips {
								color: #000000;
								font-size: 24rpx;
								margin-top: -12rpx;
							}
						}

						.cont {
							line-height: 46rpx;
						}
					}
				}
			}
		}

		/* #ifdef H5 */
		.exchange-card {
			height: calc(100vh - 14vh - 88rpx);
		}

		/* #endif */
	}
</style>