完成50%

pages/profile/m04-change-password.vue

@@ -2,7 +2,7 @@
 <template>
   <view class="password-page" :class="{ 'password-state--ready': passwordState === 'ready', 'password-state--saving': passwordState === 'saving' }">
     <ModulePageBackground module="profile" />
-    <view class="page-layer"><PageHeader title="修改密码" /></view>
+    <view class="page-layer"><PageHeader title="修改密码" custom-back @back="requestBack" /></view>
     <view class="page-content page-layer">
       <view class="security-tip"><text>设置安全密码</text><text>建议使用 8–32 位字母与数字组合，不要与其他应用共用。</text></view>
       <view class="form-panel">
@@ -15,18 +15,34 @@
           <text v-if="errors[field.key]" class="field-error">{{ errors[field.key] }}</text>
         </view>
       </view>
-      <AppButton block :disabled="passwordState === 'saving'" :label="passwordState === 'saving' ? '正在修改' : '确认修改'" @click="savePassword" />
+      <AppButton block :disabled="passwordState === 'saving'" :label="passwordState === 'saving' ? '正在校验' : '校验新密码（不提交）'" @click="savePassword" />
     </view>
     <AppToast :visible="toastVisible" :message="toastMessage" />
+    <AppDialog
+      :visible="discardVisible"
+      :close-on-mask="false"
+      eyebrow="放弃确认"
+      title="放弃密码填写？"
+      message="当前密码和新密码尚未提交服务器。"
+      confirm-text="确认放弃"
+      cancel-text="继续填写"
+      show-cancel
+      @confirm="confirmDiscard"
+      @cancel="cancelDiscard"
+    />
   </view>
 </template>
 
 <script setup>
-import { onUnmounted, reactive, ref } from "vue";
+import { computed, reactive, ref } from "vue";
+import { onBackPress, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
+import AppDialog from "@/components/AppDialog.vue";
 import AppToast from "@/components/AppToast.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
+import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { handleBackPress, runBackGuard } from "@/utils/navigation.js";
 import {
   PASSWORD_POLICY_MESSAGE,
   validatePassword,
@@ -36,12 +52,22 @@ const passwordForm = reactive({ current: "", next: "", confirm: "" });
 const passwordVisible = reactive({ current: false, next: false, confirm: false });
 const errors = reactive({ current: "", next: "", confirm: "" });
 const passwordState = ref("ready");
+const discardVisible = ref(false);
 const passwordFields = [
   { key: "current", label: "当前密码", placeholder: "请输入当前密码" },
   { key: "next", label: "新密码", placeholder: "8–32 位字母与数字" },
   { key: "confirm", label: "确认新密码", placeholder: "请再次输入新密码" },
 ];
 const toastVisible = ref(false); const toastMessage = ref(""); let timer = null;
+const formSnapshot = computed(() => JSON.stringify(passwordForm));
+const baseline = ref(formSnapshot.value);
+const isDirty = computed(() => formSnapshot.value !== baseline.value);
+const discardConfirmation = createDiscardConfirmation((visible) => {
+  discardVisible.value = visible;
+});
+const requestDiscardConfirmation = discardConfirmation.request;
+const confirmDiscard = discardConfirmation.confirm;
+const cancelDiscard = discardConfirmation.cancel;
 const showToast = (message) => { toastMessage.value = message; toastVisible.value = true; clearTimeout(timer); timer = setTimeout(() => (toastVisible.value = false), 1800); };
 const togglePassword = (key) => { passwordVisible[key] = !passwordVisible[key]; };
 const validateForm = () => {
@@ -56,9 +82,25 @@ const validateForm = () => {
 const savePassword = () => {
   if (!validateForm() || passwordState.value === "saving") return;
   passwordState.value = "saving";
-  timer = setTimeout(() => { passwordState.value = "ready"; passwordForm.current = ""; passwordForm.next = ""; passwordForm.confirm = ""; showToast("密码已修改，请妥善保管新密码"); }, 500);
+  timer = setTimeout(() => {
+    passwordState.value = "ready";
+    showToast("本地校验通过，尚未提交服务器");
+  }, 500);
 };
-onUnmounted(() => clearTimeout(timer));
+const requestBack = () =>
+  runBackGuard({
+    transientOpen: discardVisible.value,
+    dirty: isDirty.value,
+    submitting: passwordState.value === "saving",
+    "close-transient": cancelDiscard,
+    "block-submitting": () => true,
+    "confirm-discard": requestDiscardConfirmation,
+  });
+onBackPress((event) => handleBackPress(event, requestBack));
+onUnload(() => {
+  clearTimeout(timer);
+  discardConfirmation.dispose();
+});
 </script>
 
 <style scoped lang="scss">