298 lines
6.0 KiB
Vue
298 lines
6.0 KiB
Vue
<template>
|
|
<navBar :title="'U盘在线兑换'" />
|
|
|
|
<view class="buy-upan-page">
|
|
<!-- 主要内容区域 -->
|
|
<view class="main-content">
|
|
<!-- 商品信息卡片 -->
|
|
<view class="product-card">
|
|
<!-- 商品描述 -->
|
|
<view class="product-title">{{ goodsInfo.name }}</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 { onShow } from '@dcloudio/uni-app';
|
|
import navBar from '@/components/navBar/navBar.vue';
|
|
import api from '@/api/api';
|
|
import goods_api from '@/api/goods_api';
|
|
import navTo from '@/utils/navTo';
|
|
const goodsUuid = ref('');
|
|
|
|
|
|
// 商品信息
|
|
const remainingCount = ref(0); // 剩余数量
|
|
const exchangedCount = ref(1129); // 已兑换数量
|
|
const quantity = ref(1); // 当前选择的数量
|
|
const goodsInfo = ref({});
|
|
|
|
// 增加数量
|
|
const increaseQuantity = () => {
|
|
if (quantity.value < remainingCount.value) {
|
|
quantity.value += 1;
|
|
}
|
|
};
|
|
const getUpanCount = async () => {
|
|
const res = await goods_api.getUpanWelfareCount()
|
|
if (res.code == 200) {
|
|
remainingCount.value=res.data;
|
|
};
|
|
}
|
|
// 减少数量
|
|
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);
|
|
goodsInfo.value = 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);
|
|
});
|
|
};
|
|
|
|
onShow((options) => {
|
|
//remainingCount.value = options.restNum;
|
|
// 可选：获取实时剩余数量
|
|
//getUGoods();
|
|
getUpanWelfareCount();
|
|
getUpanCount();
|
|
});
|
|
</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);
|
|
// 为底部按钮留出空间
|
|
}
|
|
|
|
|
|
// 商品信息卡片
|
|
.product-card {
|
|
background-color: $white;
|
|
|
|
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: red;
|
|
}
|
|
|
|
.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>
|