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:
duanshuwen
2026-07-05 19:34:55 +08:00
parent f47f68e19b
commit b381c712df
37 changed files with 1840 additions and 1 deletions

View 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>