完成80%

pages/genealogy/g03-create-genealogy.vue

@@ -2,7 +2,7 @@
 <template>
   <view class="create-page">
     <GenealogyPageBackground />
-    <PageHeader title="创建家谱" custom-back @back="backToGenealogies" />
+    <PageHeader title="创建家谱" custom-back @back="requestBack" />
 
     <view class="page-content">
       <view class="create-card">
@@ -111,19 +111,34 @@
         </view>
       </view>
     </view>
+
+    <AppDialog
+      :visible="discardDialogVisible"
+      eyebrow="尚未保存"
+      title="要放弃本次创建吗"
+      message="返回后，本次填写的家谱信息不会保留。"
+      cancel-text="继续填写"
+      confirm-text="放弃并返回"
+      show-cancel
+      :close-on-mask="false"
+      @cancel="cancelDiscard"
+      @confirm="confirmDiscard"
+    />
   </view>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
-import { onUnload } from "@dcloudio/uni-app";
+import { computed, onMounted, reactive, ref } from "vue";
+import { onBackPress, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
+import AppDialog from "@/components/AppDialog.vue";
 import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
 import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
+import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
 import { GENEALOGY_ACCESS_PRESET, GENEALOGY_ACCESS_PRESET_OPTIONS, toApiGenealogyAccess } from "@/utils/genealogy-contracts.js";
 import { isImagePickCancelled, pickAndUploadImage, toConsumerOssId } from "@/utils/resumable-image-upload.js";
-import { finishPage, returnTo } from "@/utils/navigation.js";
+import { finishPage, handleBackPress, runBackGuard } from "@/utils/navigation.js";
 
 const form = reactive({
   surname: "",
@@ -150,8 +165,22 @@ const regionPickerIndexes = ref([0]);
 const regionPickerError = ref("");
 const regionLoading = ref(false);
 const regionPickerOpen = ref(false);
+const discardDialogVisible = ref(false);
 const regionPickerIndicatorStyle = "height: 104rpx; border-top: 1px solid rgba(159, 23, 15, .46); border-bottom: 1px solid rgba(159, 23, 15, .46); background: rgba(159, 23, 15, .08);";
 let pageActive = true;
+const hasDraft = computed(() =>
+  Object.entries(form).some(([key, value]) =>
+    key === "accessPreset"
+      ? value !== GENEALOGY_ACCESS_PRESET.MEMBER_ONLY
+      : String(value).trim(),
+  ) || Boolean(selectedRegion.value?.regionCode) || Boolean(coverOssId.value),
+);
+const discardConfirmation = createDiscardConfirmation((visible) => {
+  discardDialogVisible.value = visible;
+});
+const requestDiscardConfirmation = discardConfirmation.request;
+const confirmDiscard = discardConfirmation.confirm;
+const cancelDiscard = discardConfirmation.cancel;
 
 const clearFieldError = (field) => {
   fieldErrors[field] = "";
@@ -259,9 +288,17 @@ onMounted(() => {
   loadRegionRoot();
 });
 
-const backToGenealogies = () => {
-  if (!isSubmitting.value && !isUploading.value) return returnTo("G01");
-};
+const requestBack = () =>
+  runBackGuard({
+    transientOpen: regionPickerOpen.value || discardDialogVisible.value,
+    dirty: hasDraft.value,
+    submitting: isSubmitting.value || isUploading.value,
+    "close-transient": () => regionPickerOpen.value ? closeRegionPicker() : cancelDiscard(),
+    "block-submitting": () => true,
+    "confirm-discard": requestDiscardConfirmation,
+  });
+
+onBackPress((event) => handleBackPress(event, requestBack));
 
 const uploadCover = async () => {
   if (isUploading.value || isSubmitting.value) return;
@@ -321,6 +358,7 @@ onUnload(() => {
   pageActive = false;
   createController.abort();
   regionController.abort();
+  discardConfirmation.dispose();
 });
 </script>