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
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user