jiapuapp/pages/records/r04-gift-editor.vue

<!-- 页面编号：R-04；用途：按 Apifox 已声明字段创建亲友往来记录。 -->
<template>
  <view class="gift-editor-page" :class="`relative-editor-state--${editorState}`">
    <ModulePageBackground module="records" />
    <view class="page-header"><PageHeader title="新建往来记录" custom-back @back="requestBack" /></view>
    <view class="page-content">
      <view v-if="editorState === 'form'" class="form-card">
        <text>记录一份家人往来</text>
        <text class="form-copy">页面只发送已声明且可映射的字段；媒体需要 `mediaOssIds`，没有上传 owner 时不提交。</text>
        <view v-for="field in fields" :key="field.key" class="field-row">
          <text>{{ field.label }}</text>
          <textarea v-if="field.key === 'recordContent'" v-model="form[field.key]" auto-height :placeholder="`请输入${field.label}`" @input="submitError = ''" />
          <input v-else v-model="form[field.key]" :type="field.key === 'giftAmount' ? 'digit' : 'text'" :placeholder="`请输入${field.label}`" @input="submitError = ''" />
        </view>
        <text v-if="submitError" class="save-error">{{ submitError }}</text>
        <AppButton block :disabled="isSubmitting" :label="isSubmitting ? '正在提交' : '提交往来记录'" @click="saveRelative" />
      </view>
      <view v-else class="state-card">
        <text>{{ resultCopy.title }}</text>
        <text>{{ resultCopy.copy }}</text>
        <AppButton block :label="resultCopy.action" @click="handleResultAction" />
      </view>
    </view>
    <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 { computed, onUnmounted, reactive, ref } from "vue";
import { onBackPress, onLoad } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import AppDialog from "@/components/AppDialog.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";

const genealogyId = ref("");
const editorState = ref("form");
const isSubmitting = ref(false);
const discardVisible = ref(false);
const submitError = ref("");
const form = reactive({ relativeName: "", relationName: "", eventName: "", eventTime: "", giftAmount: "", recordContent: "" });
const fields = [
  { key: "relativeName", label: "亲友姓名" },
  { key: "relationName", label: "关系称谓" },
  { key: "eventName", label: "礼仪事项" },
  { key: "eventTime", label: "事项日期" },
  { key: "giftAmount", label: "礼金金额" },
  { key: "recordContent", label: "往来备注" },
];
const requestController = createRequestController();
const isDirty = computed(() => Object.values(form).some((value) => String(value).trim()));
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
const resultCopy = computed(() => editorState.value === "success"
  ? { title: "往来记录已提交服务端", copy: "服务端已返回成功信封。列表仍缺条目 DTO，返回后不会生成本地记录。", action: "返回贺礼簿" }
  : { title: "往来记录入口无效", copy: "当前只有新建请求可映射；详情和修改缺可靠条目 DTO/记录 ID 来源，页面不从 fixture 进入。", action: "返回上一页" },
);
const discardConfirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
const requestDiscardConfirmation = discardConfirmation.request;
const confirmDiscard = discardConfirmation.confirm;
const cancelDiscard = discardConfirmation.cancel;
onLoad((query) => {
  genealogyId.value = String(query?.genealogyId || "");
  if (!hasValidContext.value || query?.mode !== "create") editorState.value = "invalid";
});
const saveRelative = async () => {
  if (isSubmitting.value || !hasValidContext.value) return;
  const relativeName = form.relativeName.trim();
  const giftAmountText = form.giftAmount.trim();
  if (!relativeName) {
    submitError.value = "请填写亲友姓名";
    return;
  }
  if (giftAmountText && !Number.isFinite(Number(giftAmountText))) {
    submitError.value = "礼金金额必须是数字";
    return;
  }
  isSubmitting.value = true;
  submitError.value = "";
  try {
    await appApi.createRelativeRecord(genealogyId.value, {
      relativeName,
      relationName: form.relationName,
      eventName: form.eventName,
      eventTime: form.eventTime,
      ...(giftAmountText ? { giftAmount: Number(giftAmountText) } : {}),
      recordContent: form.recordContent,
    }, { requestController });
    Object.keys(form).forEach((key) => { form[key] = ""; });
    editorState.value = "success";
  } catch (error) {
    if (!isRequestCancelled(error)) submitError.value = error?.message || "往来记录提交失败，请稍后重试。";
  } finally {
    isSubmitting.value = false;
  }
};
const requestBack = () => runBackGuard({
  transientOpen: discardVisible.value,
  dirty: isDirty.value,
  submitting: isSubmitting.value,
  "close-transient": cancelDiscard,
  "block-submitting": () => true,
  "confirm-discard": requestDiscardConfirmation,
});
const handleResultAction = () => editorState.value === "success"
  ? returnTo("R03", { genealogyId: genealogyId.value })
  : goBack();
onBackPress((event) => handleBackPress(event, requestBack));
onUnmounted(() => { requestController.abort(); discardConfirmation.dispose(); });
</script>

<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.gift-editor-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.page-header, .page-content { z-index: 1; }
.page-content { padding: 18rpx 24rpx 72rpx; }
.form-card, .state-card { box-sizing: border-box; padding: 46rpx; @include adaptive.adaptive-records-content; }
.form-card > text:first-child, .state-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }
.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
.field-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12rpx 20rpx; min-height: 82rpx; margin-top: 14rpx; padding: 14rpx 24rpx; box-sizing: border-box; @include adaptive.adaptive-records-field; }
.field-row > text { color: $ink; font-size: 23rpx; font-weight: 700; }
.field-row input, .field-row textarea { min-width: 0; color: $ink; font-size: 23rpx; text-align: right; }
.field-row textarea { min-height: 72rpx; text-align: left; }
.save-error { display: block; margin-top: 14rpx; color: $brand-red; font-size: 22rpx; }
.form-card .app-button { margin-top: 18rpx; }
.state-card { min-height: 340rpx; padding-top: 80rpx; text-align: center; }
.state-card > text:nth-child(2) { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
.state-card .app-button { margin-top: 28rpx; }
</style>