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.
2026-07-05 19:34:55 +08:00
parent f47f68e19b
commit b381c712df
37 changed files with 1840 additions and 1 deletions
--- a/src/pages-aigc/useTemplate/useTemplate.vue
+++ b/src/pages-aigc/useTemplate/useTemplate.vue
@@ -0,0 +1,136 @@
+<template>
+  <view class="aigc-use-template-page">
+    <AigcTopBar
+      :points="pointBalance"
+      recharge-label="充值"
+      @back="handleBack"
+      @history="handleHistory"
+      @recharge="handleRecharge"
+    />
+
+    <view
+      class="aigc-use-template-content"
+      :class="{ 'is-upload-guide': currentStep !== 'version' }"
+    >
+      <template v-if="currentStep === 'version'">
+        <TemplateVersionHero :template="currentTemplate" />
+
+        <VersionOptionList
+          :options="versionOptions"
+          :selected-value="selectedVersion"
+          @select="handleSelectVersion"
+        />
+
+        <text class="aigc-use-template-note">
+          动效视频版会先生成图片底图，再升级为 5秒内动效视频。
+        </text>
+      </template>
+
+      <template v-else>
+        <UploadTemplatePreview
+          :template="currentTemplate"
+          :version="currentVersion"
+        />
+        <PhotoGuidePanel
+          v-if="currentStep === 'uploadGuide'"
+          :avatar-src="guideAvatar"
+          :positive-examples="positiveExamples"
+          :negative-examples="negativeExamples"
+          @close="handleCloseGuide"
+          @confirm="handleConfirmGuide"
+        />
+        <PhotoPickDrawer
+          v-else
+          @close="handleCloseGuide"
+          @camera="handlePickCamera"
+          @album="handlePickAlbum"
+        />
+      </template>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import AigcTopBar from "@/pages-aigc/components/AigcTopBar/index.vue";
+import { aigcTemplates } from "@/pages-aigc/home/data/templates.js";
+import guideAvatar from "./assets/xiaoqi-avatar.png";
+import PhotoGuidePanel from "./components/PhotoGuidePanel/index.vue";
+import PhotoPickDrawer from "./components/PhotoPickDrawer/index.vue";
+import TemplateVersionHero from "./components/TemplateVersionHero/index.vue";
+import UploadTemplatePreview from "./components/UploadTemplatePreview/index.vue";
+import VersionOptionList from "./components/VersionOptionList/index.vue";
+import { negativeExamples, positiveExamples } from "./data/photoGuideExamples.js";
+import { versionOptions } from "./data/versionOptions.js";
+
+const pointBalance = ref(0);
+const templateId = ref("");
+const selectedVersion = ref("image");
+const currentStep = ref("version");
+
+const currentTemplate = computed(() => {
+  return aigcTemplates.find((item) => item.id === templateId.value) || aigcTemplates[0] || {};
+});
+
+const currentVersion = computed(() => {
+  return versionOptions.find((item) => item.value === selectedVersion.value) || versionOptions[0] || {};
+});
+
+onLoad((query = {}) => {
+  templateId.value = query.templateId || "";
+});
+
+const showPlaceholderToast = (title) => {
+  uni.showToast({
+    title,
+    icon: "none",
+  });
+};
+
+const handleBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+  }
+};
+
+const handleHistory = () => {
+  uni.navigateTo({
+    url: "/pages-aigc/record/record",
+    fail: () => showPlaceholderToast("最近任务"),
+  });
+};
+
+const handleRecharge = () => {
+  uni.navigateTo({
+    url: "/pages-aigc/recharge/recharge",
+    fail: () => showPlaceholderToast("积分充值"),
+  });
+};
+
+const handleSelectVersion = (option) => {
+  selectedVersion.value = option.value;
+  currentStep.value = "uploadGuide";
+};
+
+const handleCloseGuide = () => {
+  currentStep.value = "version";
+};
+
+const handleConfirmGuide = () => {
+  currentStep.value = "photoPick";
+};
+
+const handlePickCamera = () => {
+  showPlaceholderToast("拍照");
+};
+
+const handlePickAlbum = () => {
+  showPlaceholderToast("相册");
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>