feat(aigc): add template, recharge & points pages
This commit adds the full AIGC feature set including template usage flow, points recharge and transaction ledger pages, along with all supporting components, styles and data files. It also updates the home page navigation and registers all new pages in the project's pages configuration.
This commit is contained in:
117
src/pages-aigc/recharge/recharge.vue
Normal file
117
src/pages-aigc/recharge/recharge.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view class="aigc-recharge-page">
|
||||
<TopNavBar
|
||||
title="积分充值"
|
||||
title-align="left"
|
||||
background="transparent"
|
||||
title-color="#172033"
|
||||
back-icon-color="#172033"
|
||||
:align-with-menu-button="true"
|
||||
:z-index="3"
|
||||
@back="handleBack"
|
||||
/>
|
||||
|
||||
<view class="aigc-recharge-content">
|
||||
<BalanceCard
|
||||
:balance="balance"
|
||||
@ledger="handleOpenLedger"
|
||||
/>
|
||||
|
||||
<RechargePackageList
|
||||
:packages="packages"
|
||||
:selected-id="selectedId"
|
||||
@select="handleSelectPackage"
|
||||
/>
|
||||
|
||||
<CustomAmountCard
|
||||
v-model="customAmount"
|
||||
:selected="selectedId === customId"
|
||||
@select="handleSelectCustom"
|
||||
/>
|
||||
|
||||
<RechargeFooter
|
||||
:points="payPoints"
|
||||
:price="payPrice"
|
||||
@pay="handlePay"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||||
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";
|
||||
import { rechargeBalance, rechargePackages } from "./data/packages.js";
|
||||
|
||||
const customId = "custom";
|
||||
const balance = rechargeBalance;
|
||||
const packages = rechargePackages;
|
||||
const selectedId = ref("points-3000");
|
||||
const customAmount = ref("2");
|
||||
|
||||
const selectedPackage = computed(() =>
|
||||
packages.find((item) => item.id === selectedId.value)
|
||||
);
|
||||
|
||||
const customPrice = computed(() => {
|
||||
const amount = Number.parseInt(customAmount.value || "0", 10);
|
||||
return Number.isNaN(amount) ? 0 : amount;
|
||||
});
|
||||
|
||||
const payPoints = computed(() => {
|
||||
if (selectedId.value === customId) {
|
||||
return customPrice.value * 100;
|
||||
}
|
||||
|
||||
return selectedPackage.value?.points || 0;
|
||||
});
|
||||
|
||||
const payPrice = computed(() => {
|
||||
if (selectedId.value === customId) {
|
||||
return customPrice.value;
|
||||
}
|
||||
|
||||
return selectedPackage.value?.price || 0;
|
||||
});
|
||||
|
||||
const showPlaceholderToast = (title) => {
|
||||
uni.showToast({
|
||||
title,
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenLedger = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages-aigc/pointsDetails/pointsDetails",
|
||||
fail: () => showPlaceholderToast("积分明细"),
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectPackage = (item) => {
|
||||
selectedId.value = item.id;
|
||||
};
|
||||
|
||||
const handleSelectCustom = () => {
|
||||
selectedId.value = customId;
|
||||
};
|
||||
|
||||
const handlePay = () => {
|
||||
showPlaceholderToast(`支付 ¥${payPrice.value}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user