完成50%

pages/records/r10-memo-list.vue

@@ -1,246 +1,251 @@
-<!-- 页面编号：R-10；用途：家族备忘列表、完成状态与同页新增。 -->
+<!-- 页面编号：R-10；用途：当前家谱备忘列表与不写库的本地预览。 -->
 <template>
   <view class="memo-page" :class="stateClasses">
     <ModulePageBackground module="records" />
     <view class="page-header">
-      <PageHeader title="家族备忘" action="新增" @action="createMemo" />
-    </view>
-    <view v-if="memoState === 'loading'" class="page-loading">
-      <AppLoading
-        text="正在读取家族备忘"
-        description="请稍候，正在整理待办事项。"
+      <PageHeader
+        title="家族备忘"
+        :action="hasValidContext ? '填写预览' : ''"
+        custom-back
+        @back="requestBack"
+        @action="startMemoPreview"
       />
     </view>
+    <view v-if="memoState === 'loading'" class="page-loading">
+      <AppLoading text="正在读取家族备忘" description="请稍候，正在核对当前家谱的备忘记录。" />
+    </view>
     <view v-else class="page-content">
+      <view v-if="localMemoPreview" class="preview-card">
+        <text>本地预览 · 尚未提交</text>
+        <text>{{ localMemoPreview.memoTitle }}</text>
+        <text>{{ localMemoPreview.remindTime || "提醒时间未填写" }}</text>
+        <text>{{ localMemoPreview.memoContent || "内容未填写" }}</text>
+      </view>
       <template v-if="memoState === 'ready' && memos.length">
-        <view
-          v-for="memo in memos"
-          :key="memo.id"
-          class="memo-card"
-          :class="{ 'memo-card--done': memo.done }"
-          @click="toggleMemo(memo)"
-        >
+        <view v-for="memo in memos" :key="memo.memoId" class="memo-card">
           <view>
-            <text>{{ memo.done ? "已完成" : "待办理" }}</text>
-            <text>{{ memo.due }}</text>
+            <text>{{ memo.completedLabel }}</text>
+            <text>{{ memo.remindTime || "未设置提醒" }}</text>
           </view>
-          <text>{{ memo.title }}</text>
-          <text>{{ memo.description }}</text>
-          <text>{{ memo.done ? "点击恢复待办" : "点击标记完成" }}</text>
+          <text>{{ memo.memoTitle }}</text>
+          <text>{{ memo.memoContent || "暂无备忘内容" }}</text>
+          <text>状态仅展示，线上切换接口尚未确认</text>
         </view>
-        <AppButton block label="新增备忘" @click="createMemo" />
+        <AppButton block label="填写备忘预览" @click="startMemoPreview" />
       </template>
       <view v-else class="state-card">
-        <text>
-          {{ memoState === "error" ? "家族备忘暂不可用" : "还没有备忘" }}
-        </text>
-        <text>
-          {{
-            memoState === "error"
-              ? "请稍后重新查看，已有备忘不会受到影响。"
-              : "把需要家人共同记住的事情写在这里。"
-          }}
-        </text>
+        <text>{{ stateCopy.title }}</text>
+        <text>{{ stateCopy.copy }}</text>
         <AppButton
-          :type="memoState === 'error' ? 'secondary' : 'primary'"
+          :type="memoState === 'empty' ? 'primary' : 'secondary'"
           block
-          :label="memoState === 'error' ? '重新查看' : '新增备忘'"
-          @click="memoState === 'error' ? (memoState = 'ready') : createMemo()"
+          :label="stateCopy.action"
+          @click="handleStateAction"
         />
       </view>
     </view>
     <AppDialog
       :visible="dialogVisible"
+      :close-on-mask="false"
       eyebrow="家族备忘"
-      title="新增一项备忘"
-      confirm-text="保存备忘"
+      title="填写一份备忘预览"
+      confirm-text="生成预览"
       cancel-text="取消"
       show-cancel
-      @confirm="saveMemo"
-      @cancel="dialogVisible = false"
+      @confirm="createMemoPreview"
+      @cancel="requestCloseEditor"
     >
       <view class="dialog-form">
-        <input v-model="memoForm.title" placeholder="备忘标题" />
-        <input v-model="memoForm.due" placeholder="截止日期或时间" />
-        <textarea
-          v-model="memoForm.description"
-          auto-height
-          placeholder="补充具体事项"
-        />
+        <input v-model="memoForm.memoTitle" placeholder="备忘标题" />
+        <input v-model="memoForm.remindTime" placeholder="提醒时间（选填）" />
+        <textarea v-model="memoForm.memoContent" auto-height placeholder="补充具体事项（选填）" />
         <text v-if="formError">{{ formError }}</text>
       </view>
     </AppDialog>
-    <AppToast :visible="toastVisible" message="备忘已更新" />
+    <AppDialog
+      :visible="discardVisible"
+      :close-on-mask="false"
+      eyebrow="放弃确认"
+      title="放弃当前填写？"
+      message="尚未提交的预览内容将从当前页面清除。"
+      confirm-text="确认放弃"
+      cancel-text="继续填写"
+      show-cancel
+      @confirm="confirmDiscard"
+      @cancel="cancelDiscard"
+    />
+    <AppToast :visible="toastVisible" message="已生成本地预览，尚未保存" />
   </view>
 </template>
+
 <script setup>
 import { computed, onUnmounted, reactive, ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { onBackPress, onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppDialog from "@/components/AppDialog.vue";
 import AppLoading from "@/components/AppLoading.vue";
 import AppToast from "@/components/AppToast.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
-const memos = ref([
-  {
-    id: 1,
-    title: "修谱资料整理",
-    due: "本月底前",
-    description: "补充老照片中的人物姓名和拍摄时间。",
-    done: false,
-  },
-  {
-    id: 2,
-    title: "重阳敬老活动",
-    due: "10 月 11 日上午",
-    description: "在祠堂集合，并确认接送长辈的车辆。",
-    done: true,
-  },
-]);
+import {
+  getGenealogyFixtureAccess,
+  listMemoFixtures,
+} from "@/data/mock.js";
+import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
+
+const genealogyId = ref("");
+const memos = ref([]);
 const memoState = ref("loading");
 const dialogVisible = ref(false);
+const discardVisible = ref(false);
 const toastVisible = ref(false);
 const formError = ref("");
-const memoForm = reactive({ title: "", due: "", description: "" });
+const localMemoPreview = ref(null);
+const memoForm = reactive({ memoTitle: "", remindTime: "", memoContent: "" });
+const editorBaseline = ref("");
 let timer = null;
+
 const stateClasses = computed(() => ({
   "memo-state--loading": memoState.value === "loading",
   "memo-state--empty": memoState.value === "empty",
   "memo-state--error": memoState.value === "error",
+  "memo-state--invalid": memoState.value === "invalid",
 }));
-onLoad((q) => {
-  memoState.value = ["loading", "empty", "error"].includes(q.state)
-    ? q.state
-    : "ready";
+const hasValidContext = computed(() => ["ready", "empty"].includes(memoState.value));
+const formSnapshot = computed(() => JSON.stringify({ ...memoForm }));
+const memoDraftDirty = computed(() =>
+  dialogVisible.value && formSnapshot.value !== editorBaseline.value,
+);
+const stateCopy = computed(() => ({
+  error: {
+    title: "家族备忘暂不可用",
+    copy: "请稍后重新查看，已有备忘不会受到影响。",
+    action: "重新查看",
+  },
+  invalid: {
+    title: "家族备忘入口无效",
+    copy: "没有找到可访问的成员家谱，页面不会展示其他家谱备忘。",
+    action: "返回上一页",
+  },
+  empty: {
+    title: "还没有备忘",
+    copy: "可以先生成一份本地预览；正式创建仍需等待线上写接口启用。",
+    action: "填写备忘预览",
+  },
+})[memoState.value] || {
+  title: "家族备忘暂不可用",
+  copy: "请返回上一页重新进入。",
+  action: "返回上一页",
 });
-const showToast = () => {
-  toastVisible.value = true;
-  if (timer) clearTimeout(timer);
-  timer = setTimeout(() => (toastVisible.value = false), 1800);
-};
-const toggleMemo = (memo) => {
-  memo.done = !memo.done;
-  showToast();
-};
-const createMemo = () => {
-  Object.assign(memoForm, { title: "", due: "", description: "" });
-  formError.value = "";
-  dialogVisible.value = true;
-};
-const saveMemo = () => {
-  if (!memoForm.title.trim()) {
-    formError.value = "请填写备忘标题";
+
+onLoad((query) => {
+  genealogyId.value = String(query.genealogyId || "");
+  const access = getGenealogyFixtureAccess(genealogyId.value);
+  if (!["owner", "member"].includes(access.accessRole)) {
+    memoState.value = "invalid";
     return;
   }
-  memos.value.unshift({ id: Date.now(), ...memoForm, done: false });
-  memoState.value = "ready";
-  dialogVisible.value = false;
-  showToast();
+  memos.value = listMemoFixtures(genealogyId.value);
+  memoState.value = ["loading", "empty", "error"].includes(query.state)
+    ? query.state
+    : memos.value.length
+      ? "ready"
+      : "empty";
+});
+
+const startMemoPreview = () => {
+  if (!hasValidContext.value) return false;
+  Object.assign(memoForm, { memoTitle: "", remindTime: "", memoContent: "" });
+  formError.value = "";
+  editorBaseline.value = formSnapshot.value;
+  dialogVisible.value = true;
+  return true;
 };
+const createMemoPreview = () => {
+  formError.value = memoForm.memoTitle.trim() ? "" : "请填写备忘标题";
+  if (formError.value) return false;
+  // 正式列表来自只读选择器；预览不生成 ID，也不会改变完成状态或记录数量。
+  localMemoPreview.value = Object.freeze({
+    memoTitle: memoForm.memoTitle.trim(),
+    remindTime: memoForm.remindTime.trim(),
+    memoContent: memoForm.memoContent.trim(),
+  });
+  dialogVisible.value = false;
+  toastVisible.value = true;
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    toastVisible.value = false;
+    timer = null;
+  }, 1800);
+  return true;
+};
+const closeEditor = () => {
+  dialogVisible.value = false;
+  formError.value = "";
+};
+const discardConfirmation = createDiscardConfirmation(
+  (visible) => { discardVisible.value = visible; },
+);
+const confirmDiscard = () => {
+  discardConfirmation.confirm();
+  closeEditor();
+};
+const cancelDiscard = discardConfirmation.cancel;
+const requestCloseEditor = async () => {
+  if (!memoDraftDirty.value) {
+    closeEditor();
+    return true;
+  }
+  const confirmed = await discardConfirmation.request();
+  if (confirmed) closeEditor();
+  return confirmed;
+};
+const restoreMemos = () => {
+  memos.value = listMemoFixtures(genealogyId.value);
+  memoState.value = memos.value.length ? "ready" : "empty";
+};
+const handleStateAction = () => {
+  if (memoState.value === "invalid") return goBack();
+  if (memoState.value === "error") return restoreMemos();
+  return startMemoPreview();
+};
+const requestBack = () => {
+  if (discardVisible.value) {
+    cancelDiscard();
+    return Promise.resolve(true);
+  }
+  if (dialogVisible.value) return requestCloseEditor();
+  return runBackGuard({
+    dirty: Boolean(localMemoPreview.value),
+    "confirm-discard": discardConfirmation.request,
+  });
+};
+onBackPress((event) => handleBackPress(event, requestBack));
 onUnmounted(() => {
   if (timer) clearTimeout(timer);
+  discardConfirmation.dispose();
 });
 </script>
+
 <style scoped lang="scss">
 @use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 
-.memo-page {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  background: $paper;
-}
-.page-header,
-.page-loading,
-.page-content {
-  z-index: 1;
-}
-.page-loading {
-  min-height: calc(100vh - 100rpx);
-}
-.page-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-  padding: 18rpx 24rpx 72rpx;
-}
-.memo-card,
-.state-card {
-  box-sizing: border-box;
-  padding: 34rpx 46rpx;
-  @include adaptive.adaptive-records-content;
-}
-.memo-card > view {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 6rpx 18rpx;
-  color: $brand-red;
-  font-size: 20rpx;
-}
-.memo-card > text,
-.state-card > text {
-  display: block;
-}
-.memo-card > text:nth-child(2) {
-  margin-top: 8rpx;
-  color: $ink;
-  font-size: 31rpx;
-  font-weight: 700;
-}
-.memo-card > text:nth-child(3) {
-  margin-top: 9rpx;
-  color: $ink-muted;
-  font-size: 23rpx;
-  line-height: 1.55;
-}
-.memo-card > text:last-child {
-  margin-top: 10rpx;
-  color: $brand-red;
-  font-size: 20rpx;
-}
-.memo-card--done {
-  opacity: 0.68;
-}
-.state-card {
-  min-height: 340rpx;
-  padding-top: 78rpx;
-  text-align: center;
-}
-.state-card > text:first-child {
-  color: $ink;
-  font-size: 35rpx;
-  font-weight: 700;
-}
-.state-card > text:nth-child(2) {
-  margin-top: 18rpx;
-  color: $ink-muted;
-  font-size: 24rpx;
-  line-height: 1.65;
-}
-.state-card .app-button {
-  margin-top: 28rpx;
-}
-.dialog-form {
-  width: 100%;
-  margin: 18rpx 0;
-}
-.dialog-form input,
-.dialog-form textarea {
-  width: 100%;
-  min-height: 68rpx;
-  margin-top: 9rpx;
-  padding: 13rpx 20rpx;
-  box-sizing: border-box;
-  color: $ink;
-  font-size: 23rpx;
-  @include adaptive.adaptive-records-field;
-}
-.dialog-form text {
-  display: block;
-  margin-top: 8rpx;
-  color: $brand-red;
-  font-size: 20rpx;
-}
+.memo-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
+.page-header,.page-loading,.page-content { z-index: 1; }
+.page-loading { min-height: calc(100vh - 100rpx); }
+.page-content { display: flex; flex-direction: column; gap: 16rpx; padding: 18rpx 24rpx 72rpx; }
+.memo-card,.preview-card,.state-card { box-sizing: border-box; padding: 34rpx 46rpx; @include adaptive.adaptive-records-content; }
+.memo-card > view { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6rpx 18rpx; color: $brand-red; font-size: 20rpx; }
+.memo-card > text,.preview-card > text,.state-card > text { display: block; }
+.memo-card > text:nth-child(2),.preview-card > text:nth-child(2) { margin-top: 8rpx; color: $ink; font-size: 31rpx; font-weight: 700; }
+.memo-card > text:nth-child(3),.preview-card > text:nth-child(n + 3) { margin-top: 9rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.55; }
+.memo-card > text:last-child,.preview-card > text:first-child { margin-top: 10rpx; color: $brand-red; font-size: 20rpx; }
+.state-card { min-height: 340rpx; padding-top: 78rpx; text-align: center; }
+.state-card > text:first-child { color: $ink; font-size: 35rpx; font-weight: 700; }
+.state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
+.state-card .app-button { margin-top: 28rpx; }
+.dialog-form { width: 100%; margin: 18rpx 0; }
+.dialog-form input,.dialog-form textarea { width: 100%; min-height: 68rpx; margin-top: 9rpx; padding: 13rpx 20rpx; box-sizing: border-box; color: $ink; font-size: 23rpx; @include adaptive.adaptive-records-field; }
+.dialog-form text { display: block; margin-top: 8rpx; color: $brand-red; font-size: 20rpx; }
 </style>