From 29bf6afe5517cd4e6336b0faa2bbc1eb1567fc1d Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Mon, 13 Jul 2026 10:27:03 +0800
Subject: [PATCH] feat(recharge): add recharge package selection flow

- add new getRechargeOptions API endpoint in AigcApi
- replace CustomAmountCard with RechargePackageList component
- implement fetching and selection logic for recharge packages
- update UI to use correct recharge data fields
- add validation for selected recharge option
---
 .../components/RechargePackageList/index.vue  | 14 ++---
 src/pages-aigc/recharge/recharge.vue          | 54 +++++++++++++++----
 src/request/api/AigcApi.js                    |  5 ++
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/pages-aigc/recharge/components/RechargePackageList/index.vue b/src/pages-aigc/recharge/components/RechargePackageList/index.vue
index 7310550..2cd7530 100644
--- a/src/pages-aigc/recharge/components/RechargePackageList/index.vue
+++ b/src/pages-aigc/recharge/components/RechargePackageList/index.vue
@@ -5,16 +5,16 @@
     <view class="package-list">
       <view
         v-for="item in packages"
-        :key="item.id"
-        :class="['package-card', { 'is-selected': item.id === selectedId }]"
+        :key="getPackageKey(item)"
+        :class="['package-card', { 'is-selected': getPackageKey(item) === selectedKey }]"
         @tap="emit('select', item)"
       >
         <view class="package-copy">
-          <text class="package-points">{{ item.points }}积分</text>
-          <text class="package-origin">原价 ¥{{ item.originalPrice }} · {{ item.discount }}</text>
+          <text class="package-points">{{ item.rechargePoints }}积分</text>
+          <text class="package-origin">充值金额</text>
         </view>
 
-        <text class="package-price">¥{{ formatPrice(item.price) }}</text>
+        <text class="package-price">¥{{ formatPrice(item.rechargeAmount) }}</text>
       </view>
     </view>
   </view>
@@ -26,7 +26,7 @@ defineProps({
     type: Array,
     default: () => [],
   },
-  selectedId: {
+  selectedKey: {
     type: String,
     default: "",
   },
@@ -35,6 +35,8 @@ defineProps({
 const emit = defineEmits(["select"]);
 
 const formatPrice = (price) => Number(price).toLocaleString("zh-CN");
+
+const getPackageKey = (item) => `${item?.rechargeAmount ?? ""}-${item?.rechargePoints ?? ""}`;
 </script>
 
 <style scoped lang="scss">
diff --git a/src/pages-aigc/recharge/recharge.vue b/src/pages-aigc/recharge/recharge.vue
index a7469b5..54d2c36 100644
--- a/src/pages-aigc/recharge/recharge.vue
+++ b/src/pages-aigc/recharge/recharge.vue
@@ -17,8 +17,10 @@
         @ledger="handleOpenLedger"
       />
 
-      <CustomAmountCard
-        v-model="customAmount"
+      <RechargePackageList
+        :packages="rechargeOptions"
+        :selected-key="selectedRechargeKey"
+        @select="handleSelectRechargeOption"
       />
 
       <RechargeFooter
@@ -32,21 +34,30 @@
 
 <script setup>
 import { computed, ref } from "vue";
-import { onShow } from "@dcloudio/uni-app";
+import { onLoad, onShow } from "@dcloudio/uni-app";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import { useCurrentCredit } from "@/pages-aigc/hooks/useCurrentCredit.js";
-import { rechargeCredit } from "@/request/api/AigcApi.js";
+import { getRechargeOptions, rechargeCredit } from "@/request/api/AigcApi.js";
 import BalanceCard from "./components/BalanceCard/index.vue";
-import CustomAmountCard from "./components/CustomAmountCard/index.vue";
 import RechargeFooter from "./components/RechargeFooter/index.vue";
+import RechargePackageList from "./components/RechargePackageList/index.vue";
 
 const { pointBalance: balancePoints, fetchCurrentCredit } = useCurrentCredit();
-const customAmount = ref("1");
+const rechargeOptions = ref([]);
+const selectedRechargeOption = ref(null);
 const paying = ref(false);
 
+const getRechargeOptionKey = (option) => {
+  if (!option) return "";
+
+  return `${option.rechargeAmount ?? ""}-${option.rechargePoints ?? ""}`;
+};
+
+const selectedRechargeKey = computed(() => getRechargeOptionKey(selectedRechargeOption.value));
+
 const payPrice = computed(() => {
-  const amount = Number.parseInt(customAmount.value || "0", 10);
-  return Number.isNaN(amount) ? 0 : amount;
+  const amount = Number(selectedRechargeOption.value?.rechargeAmount);
+  return Number.isFinite(amount) ? amount : 0;
 });
 
 const showToast = (title) => {
@@ -56,6 +67,22 @@ const showToast = (title) => {
   });
 };
 
+const fetchRechargeOptions = async () => {
+  try {
+    const res = await getRechargeOptions();
+    if (res?.code === 0 && Array.isArray(res.data)) {
+      rechargeOptions.value = res.data;
+      selectedRechargeOption.value = res.data[0] || null;
+    }
+  } catch (error) {
+    console.error("获取积分充值档位失败", error);
+  }
+};
+
+onLoad(() => {
+  fetchRechargeOptions();
+});
+
 onShow(() => {
   fetchCurrentCredit();
 });
@@ -74,6 +101,10 @@ const handleOpenLedger = () => {
   });
 };
 
+const handleSelectRechargeOption = (option) => {
+  selectedRechargeOption.value = option;
+};
+
 const requestWechatPay = (payData) => {
   const { nonceStr, packageVal, paySign, signType, timeStamp } = payData || {};
 
@@ -107,9 +138,14 @@ const requestWechatPay = (payData) => {
 const handlePay = async () => {
   if (paying.value) return;
 
+  if (!selectedRechargeOption.value) {
+    showToast("请选择充值档位");
+    return;
+  }
+
   const rechargeAmount = payPrice.value;
   if (!Number.isInteger(rechargeAmount) || rechargeAmount <= 0) {
-    showToast("请输入正确的充值金额");
+    showToast("充值档位金额错误，请重试");
     return;
   }
 
diff --git a/src/request/api/AigcApi.js b/src/request/api/AigcApi.js
index b110c84..f61a033 100644
--- a/src/request/api/AigcApi.js
+++ b/src/request/api/AigcApi.js
@@ -20,6 +20,10 @@ function getCurrentCredit() {
   return request.get("/hotelBiz/credit/current", {});
 }
 
+function getRechargeOptions() {
+  return request.get("/hotelBiz/credit/recharge/options", {});
+}
+
 function rechargeCredit(args) {
   return request.post("/hotelBiz/credit/recharge", args);
 }
@@ -30,5 +34,6 @@ export {
   getAigcGeneratorTaskList,
   createAigcGeneratorTask,
   getCurrentCredit,
+  getRechargeOptions,
   rechargeCredit,
 };