uniapp-app/pages_app/buyUpan/buyUpan.vue

<template>
	<navBar :title="'U盘在线兑换'" />
	
	<view class="buy-upan-page">
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 商品信息卡片 -->
			<view class="product-card">
				<!-- 商品描述 -->
				<view class="product-title">超实用~肝胆相照知识U盘(2026年版)</view>
				
				<!-- 兑换信息 -->
				<view class="exchange-info">
					<text class="info-left">免费兑换剩余{{ remainingCount }}个</text>
					<text class="info-right">已兑换{{ exchangedCount }}件</text>
				</view>
			</view>
			
			<!-- 兑换数量选择器 -->
			<view class="quantity-section">
				<text class="quantity-label">兑换数量</text>
				<view class="quantity-selector">
					<view 
						class="quantity-btn minus-btn" 
						:class="{ disabled: quantity <= 1 }"
						@click="decreaseQuantity"
					>
						<text class="btn-text">—</text>
					</view>
					<view class="quantity-display">
						<text class="quantity-value">{{ quantity }}</text>
					</view>
					<view 
						class="quantity-btn plus-btn" 
						:class="{ disabled: quantity >= remainingCount }"
						@click="increaseQuantity"
					>
						<text class="btn-text">+</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部兑换按钮 -->
		<view class="bottom-actions">
			<view class="exchange-btn" @click="handleExchange">
				<text class="btn-text">我要兑换</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import navBar from '@/components/navBar/navBar.vue';
	import api from '@/api/api';
    import navTo from '@/utils/navTo';
     const goodsUuid = ref('');
	 

	// 商品信息
	const remainingCount = ref(2); // 剩余数量
	const exchangedCount = ref(1129); // 已兑换数量
	const quantity = ref(1); // 当前选择的数量
	const goodsInfo = ref({});

	// 增加数量
	const increaseQuantity = () => {
		if (quantity.value < remainingCount.value) {
			quantity.value += 1;
		}
	};

	// 减少数量
	const decreaseQuantity = () => {
		if (quantity.value > 1) {
			quantity.value -= 1;
		}
	};

	// 处理兑换
	const handleExchange = () => {
		if (quantity.value <= 0) {
			uni.showToast({
				title: '请选择兑换数量',
				icon: 'none'
			});
			return;
		}
		
		if (quantity.value > remainingCount.value) {
			uni.showToast({
				title: '兑换数量不能超过剩余数量',
				icon: 'none'
			});
			return;
		}

		// TODO: 调用兑换接口
		navTo({
			url:'/pages_app/buyUpan/address?goodsUuid='+goodsUuid.value+'&goodsNum='+quantity.value
		})
	};

	// 获取U盘福利剩余数量
	const getUpanWelfareCount = () => {
		api.getUGoods().then(res => {
			console.log(res);
			if (res.code == 1 || res.code == 200) {
				// 根据实际接口返回的数据结构更新
				console.log(33);
				console.log(res.data);
				if (res.data) {
					//remainingCount.value = res.data.remainingCount;
					exchangedCount.value = res.data.times;
					goodsUuid.value = res.data.uuid;
				}
			}
		}).catch(err => {
			console.error('获取U盘福利数量失败:', err);
		});
	};

	onLoad((options) => {
		remainingCount.value = options.restNum;
		// 可选：获取实时剩余数量
		getUpanWelfareCount();
	});
</script>

<style scoped lang="scss">
	// 变量定义
	$bg-color: #ffffff;
	$text-primary: #333333;
	$text-secondary: #666666;
	$text-light: #999999;
	$border-color: #e5e5e5;
	$white: #ffffff;
	$teal-color: #00cbc0;
	$light-teal: #e6f7f6;
	$page-bg: #f5f6f7;

	// 混合器
	@mixin flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	@mixin flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buy-upan-page {
		
        overflow: hidden;
		background-color: $page-bg;
		margin-top: calc(var(--status-bar-height) + 44px);
		 // 为底部按钮留出空间
	}

	.main-content {
		padding: 40rpx 30rpx;
	}

	// 商品信息卡片
	.product-card {
		background-color: $white;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 40rpx;

		.product-title {
			font-size: 32rpx;
			color: $text-primary;
			font-weight: 500;
			margin-bottom: 30rpx;
			line-height: 1.5;
		}

		.exchange-info {
			@include flex-between;
			font-size: 28rpx;

			.info-left {
				color: $text-secondary;
			}

			.info-right {
				color: $text-secondary;
			}
		}
	}

	// 数量选择器区域
	.quantity-section {
		background-color: $white;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;

		.quantity-label {
			font-size: 32rpx;
			color: $text-primary;
			margin-bottom: 30rpx;
			display: block;
		}

		.quantity-selector {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 20rpx;

			.quantity-btn {
				width: 60rpx;
				height: 60rpx;
				border: 2rpx solid $teal-color;
				border-radius: 8rpx;
				@include flex-center;
				background-color: $white;
				cursor: pointer;
				transition: all 0.3s ease;

				.btn-text {
					font-size: 36rpx;
					color: $teal-color;
					font-weight: 500;
					line-height: 1;
				}

				&.disabled {
					opacity: 0.5;
					border-color: $border-color;
					cursor: not-allowed;

					.btn-text {
						color: $text-light;
					}
				}

				&:not(.disabled):active {
					background-color: $light-teal;
				}
			}

			.quantity-display {
				min-width: 120rpx;
				height: 80rpx;
				background-color: $teal-color;
				border-radius: 8rpx;
				@include flex-center;
				margin: 0 10rpx;

				.quantity-value {
					font-size: 40rpx;
					color: $white;
					font-weight: 500;
				}
			}
		}
	}

	// 底部操作按钮
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.exchange-btn {
			background-color: $teal-color;
			height: 88rpx;
			@include flex-center;
			cursor: pointer;
			transition: all 0.3s ease;

			&:active {
				opacity: 0.8;
			}

			.btn-text {
				color: $white;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>