feat: add mini-program privacy auth, update oss urls and refine photo guide

update oss static resource urls to oss.nianxx.cn refactor privacy component to be reusable, add wechat mini-program privacy authorization check before image picking add image urls to photo guide examples, refine photo guide ui styles and remove unused avatarSrc prop
2026-07-13 20:14:49 +08:00
parent 29bf6afe55
commit b5952961fe
6 changed files with 123 additions and 150 deletions
--- a/src/pages-aigc/useTemplate/components/PhotoGuidePanel/index.vue
+++ b/src/pages-aigc/useTemplate/components/PhotoGuidePanel/index.vue
@@ -1,56 +1,42 @@
 <template>
-  <uni-popup
-    ref="popupRef"
-    type="bottom"
-    background-color="transparent"
-    mask-background-color="rgba(0, 0, 0, 0)"
-    :safe-area="false"
-    :is-mask-click="false"
-  >
+  <uni-popup ref="popupRef" type="bottom" background-color="transparent" mask-background-color="rgba(0, 0, 0, 0)"
+    :safe-area="false" :is-mask-click="false">
    <view class="photo-guide-panel">
-    <view class="photo-guide-close" @tap="emit('close')">
-      <uni-icons type="closeempty" size="30" color="#8fa2ba" />
-    </view>
+      <view class="photo-guide-close" @tap="emit('close')">
+        <uni-icons type="closeempty" size="30" color="#8fa2ba" />
+      </view>

-    <text class="photo-guide-title">选图说明</text>
+      <text class="photo-guide-title">选图说明</text>

-    <view class="photo-guide-section">
-      <text class="photo-guide-section-title">正确照片示例</text>
-      <view class="photo-guide-grid">
-        <view
-          v-for="item in positiveExamples"
-          :key="item.id"
-          class="photo-example-card is-positive"
-          :class="`example-${item.variant}`"
-        >
-          <view class="photo-example-thumb">
-            <image class="photo-example-image" :src="avatarSrc" mode="aspectFill" />
+      <view class="photo-guide-section">
+        <text class="photo-guide-section-title">正确照片示例</text>
+        <view class="photo-guide-grid">
+          <view v-for="item in positiveExamples" :key="item.id" class="photo-example-card is-positive"
+            :class="`example-${item.variant}`">
+            <view class="photo-example-thumb">
+              <image class="photo-example-image" :src="item.imageUrl" mode="aspectFill" />
+            </view>
+            <text class="photo-example-caption">{{ item.label }}</text>
          </view>
-          <text class="photo-example-caption">{{ item.label }}</text>
        </view>
      </view>
-    </view>

-    <view class="photo-guide-section">
-      <text class="photo-guide-section-title">错误照片示例</text>
-      <view class="photo-guide-grid">
-        <view
-          v-for="item in negativeExamples"
-          :key="item.id"
-          class="photo-example-card is-negative"
-          :class="`example-${item.variant}`"
-        >
-          <view class="photo-example-thumb">
-            <image class="photo-example-image" :src="avatarSrc" mode="aspectFill" />
+      <view class="photo-guide-section">
+        <text class="photo-guide-section-title">错误照片示例</text>
+        <view class="photo-guide-grid">
+          <view v-for="item in negativeExamples" :key="item.id" class="photo-example-card is-negative"
+            :class="`example-${item.variant}`">
+            <view class="photo-example-thumb">
+              <image class="photo-example-image" :src="item.imageUrl" mode="aspectFill" />
+            </view>
+            <text class="photo-example-caption">{{ item.label }}</text>
          </view>
-          <text class="photo-example-caption">{{ item.label }}</text>
        </view>
      </view>
-    </view>

-    <view class="photo-guide-primary" @tap="emit('confirm')">
-      我已了解，开始选图
-    </view>
+      <view class="photo-guide-primary" @tap="emit('confirm')">
+        我已了解，开始选图
+      </view>
    </view>
  </uni-popup>
 </template>
@@ -59,10 +45,6 @@
 import { nextTick, onMounted, ref } from "vue";

 defineProps({
-  avatarSrc: {
-    type: String,
-    default: "",
-  },
  positiveExamples: {
    type: Array,
    default: () => [],
--- a/src/pages-aigc/useTemplate/components/PhotoGuidePanel/styles/index.scss
+++ b/src/pages-aigc/useTemplate/components/PhotoGuidePanel/styles/index.scss
@@ -50,7 +50,7 @@
 .photo-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  gap: 12px;
 }

 .photo-example-card {
@@ -59,34 +59,29 @@
 }

 .photo-example-thumb {
-  width: 74px;
-  height: 74px;
+  width: 80px;
+  height: 80px;
  display: block;
  overflow: hidden;
  margin: 0 auto;
-  border-radius: 12px;
+  border: 2px solid transparent;
+  border-radius: 14px;
  background: #f2f4f7;
+  box-sizing: border-box;
 }

 .photo-example-image {
-  width: 98px;
-  height: 150px;
+  width: 100%;
+  height: 100%;
  display: block;
-  margin: -24px 0 0 -12px;
 }

-.example-scene .photo-example-image,
-.example-group .photo-example-image {
-  width: 112px;
-  margin-left: -18px;
+.is-positive .photo-example-thumb {
+  border-color: rgba(22, 191, 118, 0.34);
 }

-.example-blur .photo-example-image {
-  filter: blur(1.6px);
-}
-
-.example-cover .photo-example-image {
-  transform: translateY(8px) scale(1.08);
+.is-negative .photo-example-thumb {
+  border-color: rgba(255, 80, 79, 0.34);
 }

 .photo-example-caption {
--- a/src/pages-aigc/useTemplate/data/photoGuideExamples.js
+++ b/src/pages-aigc/useTemplate/data/photoGuideExamples.js
@@ -3,16 +3,19 @@ export const positiveExamples = [
    id: "portrait",
    label: "单人正脸",
    variant: "portrait",
+    imageUrl: "https://oss.nianxx.cn/mp/static/xiaoqi/1.png",
  },
  {
    id: "smile",
    label: "表情自然",
    variant: "smile",
+    imageUrl: "https://oss.nianxx.cn/mp/static/xiaoqi/2.png",
  },
  {
    id: "scene",
    label: "背景干净",
    variant: "scene",
+    imageUrl: "https://oss.nianxx.cn/mp/static/xiaoqi/3.png",
  },
 ];

@@ -21,15 +24,18 @@ export const negativeExamples = [
    id: "blur",
    label: "非清晰正脸",
    variant: "blur",
+    imageUrl: "https://oss.nianxx.cn/mp/static/xiaoqi/4.png",
  },
  {
    id: "cover",
    label: "面部有遮挡",
    variant: "cover",
+    imageUrl: "https://oss.nianxx.cn/mp/static/xiaoqi/5.png",
  },
  {
    id: "group",
    label: "多人合照",
    variant: "group",
+    imageUrl: "https://oss.nianxx.cn/mp/static/xiaoqi/6.png",
  },
 ];
--- a/src/pages-aigc/useTemplate/useTemplate.vue
+++ b/src/pages-aigc/useTemplate/useTemplate.vue
@@ -1,37 +1,20 @@
 <template>
  <view class="aigc-use-template-page">
-    <AigcTopBar
-      :points="pointBalance"
-      recharge-label="充值"
-      @back="handleBack"
-      @history="handleHistory"
-      @recharge="handleRecharge"
-    />
+    <AigcTopBar :points="pointBalance" recharge-label="充值" @back="handleBack" @history="handleHistory"
+      @recharge="handleRecharge" />

    <view class="aigc-use-template-body">
      <view class="aigc-use-template-content">
        <TemplateVersionHero :template="currentTemplate" />

-        <GenerateConfirmPanel
-          v-if="currentStep === 'generateConfirm'"
-          :cost="currentCost"
-          :balance="pointBalance"
-          @generate="handleGenerate"
-          @recharge="handleRecharge"
-        />
-        <GeneratingProgressPanel
-          v-else-if="currentStep === 'generating'"
-          :cost="currentCost"
-          :progress="8"
-          @complete="handleGenerateComplete"
-        />
+        <GenerateConfirmPanel v-if="currentStep === 'generateConfirm'" :cost="currentCost" :balance="pointBalance"
+          @generate="handleGenerate" @recharge="handleRecharge" />
+        <GeneratingProgressPanel v-else-if="currentStep === 'generating'" :cost="currentCost" :progress="8"
+          @complete="handleGenerateComplete" />

        <template v-else>
-          <VersionOptionList
-            :options="templateItems"
-            :selected-value="selectedTemplateItemId"
-            @select="handleSelectTemplateItem"
-          />
+          <VersionOptionList :options="templateItems" :selected-value="selectedTemplateItemId"
+            @select="handleSelectTemplateItem" />

          <text class="aigc-use-template-note">
            动效视频版会先生图，再升级为 5 秒内动效视频。
@@ -41,42 +24,28 @@
    </view>

    <view v-if="currentStep === 'uploadGuide'" class="aigc-use-template-popup-host">
-      <PhotoGuidePanel
-        :avatar-src="guideAvatar"
-        :positive-examples="positiveExamples"
-        :negative-examples="negativeExamples"
-        @close="handleCloseGuide"
-        @confirm="handleConfirmGuide"
-      />
+      <PhotoGuidePanel :positive-examples="positiveExamples" :negative-examples="negativeExamples"
+        @close="handleCloseGuide" @confirm="handleConfirmGuide" />
    </view>
    <view v-if="currentStep === 'photoPick'" class="aigc-use-template-popup-host">
-      <PhotoPickDrawer
-        :loading="isUploading"
-        @close="handleCloseGuide"
-        @camera="handlePickCamera"
-        @album="handlePickAlbum"
-      />
+      <PhotoPickDrawer :loading="isUploading" @close="handleCloseGuide" @camera="handlePickCamera"
+        @album="handlePickAlbum" />
    </view>
    <view v-if="currentStep === 'photoConfirm'" class="aigc-use-template-popup-host">
-      <PhotoConfirmDrawer
-        :avatar-src="selectedImageLocalPath || guideAvatar"
-        @close="handleClosePhotoConfirm"
-        @confirm="handleConfirmPhoto"
-      />
+      <PhotoConfirmDrawer :avatar-src="selectedImageLocalPath || guideAvatar" @close="handleClosePhotoConfirm"
+        @confirm="handleConfirmPhoto" />
    </view>
-    <PointInsufficientDialog
-      v-if="pointDialogVisible"
-      :cost="currentCost"
-      :balance="pointBalance"
-      @cancel="handleClosePointDialog"
-      @recharge="handlePointRecharge"
-    />
+    <PointInsufficientDialog v-if="pointDialogVisible" :cost="currentCost" :balance="pointBalance"
+      @cancel="handleClosePointDialog" @recharge="handlePointRecharge" />
+    <Privacy :visible="privacyVisible" :contract-name="privacyContractName" @agree="handlePrivacyAgree"
+      @disagree="handlePrivacyDisagree" />
  </view>
 </template>

 <script setup>
 import { computed, ref } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
+import Privacy from "@/components/Privacy/index.vue";
 import AigcTopBar from "@/pages-aigc/components/AigcTopBar/index.vue";
 import { useCurrentCredit } from "@/pages-aigc/hooks/useCurrentCredit.js";
 import {
@@ -108,6 +77,9 @@ const currentStep = ref("version");
 const pointDialogVisible = ref(false);
 const isUploading = ref(false);
 const isCreatingTask = ref(false);
+const privacyVisible = ref(false);
+const privacyContractName = ref("隐私保护指引");
+const pendingImageSourceType = ref("");

 const currentTemplate = computed(() => {
  return templates.value.find((item) => item.templateId === templateId.value) || templates.value[0] || {};
@@ -294,9 +266,47 @@ const chooseImageWithSource = (sourceType) => {
 };

 const chooseAndUploadImage = (sourceType) => {
-  if (isUploading.value) return;
+  if (isUploading.value || pendingImageSourceType.value) return;

+  // #ifdef MP-WEIXIN
+  pendingImageSourceType.value = sourceType;
+  wx.getPrivacySetting({
+    success: (res) => {
+      if (res?.needAuthorization) {
+        privacyContractName.value = res.privacyContractName || "隐私保护指引";
+        privacyVisible.value = true;
+        return;
+      }
+
+      pendingImageSourceType.value = "";
+      chooseImageWithSource(sourceType);
+    },
+    fail: (error) => {
+      pendingImageSourceType.value = "";
+      console.warn("检查微信隐私授权失败", error);
+      showPlaceholderToast("隐私授权检查失败");
+    },
+  });
+  // #endif
+
+  // #ifndef MP-WEIXIN
  chooseImageWithSource(sourceType);
+  // #endif
+};
+
+const handlePrivacyAgree = () => {
+  const sourceType = pendingImageSourceType.value;
+  privacyVisible.value = false;
+  pendingImageSourceType.value = "";
+
+  if (sourceType) {
+    chooseImageWithSource(sourceType);
+  }
+};
+
+const handlePrivacyDisagree = () => {
+  privacyVisible.value = false;
+  pendingImageSourceType.value = "";
 };

 const handlePickCamera = () => {