feat: 完成前端业务闭环与后端联调

pages/records/relative-records.vue

@@ -6,7 +6,7 @@
         title="贺礼簿"
         :action="valid ? '新建' : ''"
         custom-back
-        @back="returnToFamily"
+        @back="requestBack"
         @action="createRelative"
     /></view>
     <view class="page-content">
@@ -32,12 +32,20 @@
       <view v-else class="record-list">
         <text v-if="deleteError" class="delete-error">{{ deleteError }}</text>
         <view v-for="item in records" :key="item.id" class="record-card" role="button" :aria-label="`查看${item.name}的往来详情`" @click="openRecordDetail(item)">
+          <image
+            v-if="item.mediaFiles?.[0]?.accessUrl"
+            class="record-card__cover"
+            :src="item.mediaFiles[0].accessUrl"
+            mode="aspectFill"
+            aria-hidden="true"
+          />
           <view
             ><text>{{ item.name }}</text
             ><text
               >{{ item.relation
               }}{{ item.event ? ` · ${item.event}` : "" }}</text
             ><text v-if="item.time">{{ item.time }}</text
+            ><text v-if="item.createTime">创建于 {{ formatMinuteTimestamp(item.createTime) }}</text
             ><text v-if="item.content">{{ item.content }}</text></view
           >
           <view class="record-card__amount">
@@ -76,6 +84,7 @@
           <text>关系：{{ detailTarget?.relation || "未填写" }}</text>
           <text>事项：{{ detailTarget?.event || "未填写" }}</text>
           <text>时间：{{ detailTarget?.time || "未填写" }}</text>
+          <text v-if="detailTarget?.createTime">创建时间：{{ formatMinuteTimestamp(detailTarget.createTime) }}</text>
           <text>金额：{{ detailTarget?.amount ? `¥${detailTarget.amount}` : "未填写" }}</text>
           <text class="detail-content__body">{{ detailTarget?.content || "未填写记录内容" }}</text>
           <view v-if="detailTarget?.mediaFiles?.length" class="detail-media">
@@ -86,9 +95,9 @@
     </AppDialog>
     <AppDialog
       :visible="deleteConfirmationVisible"
-      title="删除这条亲友往来？"
-      message="删除后无法恢复，请确认当前内容不再需要。"
-      confirm-text="确认删除"
+      title="将这条亲友往来移至回收站？"
+      message="移入回收站后不再展示，家谱管理员可在保留期内恢复。"
+      confirm-text="移至回收站"
       cancel-text="保留记录"
       show-cancel
       :close-on-mask="false"
@@ -100,7 +109,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
+import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppDialog from "@/components/AppDialog.vue";
 import AppLoading from "@/components/AppLoading.vue";
@@ -112,7 +121,8 @@ import {
 } from "@/services/api/request-controller.js";
 import { lifeRecordApi } from "@/services/api/life-record-service.js";
 import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
-import { goBack, openPage, returnTo } from "@/utils/navigation/gateway.js";
+import { formatMinuteTimestamp } from "@/utils/display-time.js";
+import { goBack, handleBackPress, openPage, returnTo } from "@/utils/navigation/gateway.js";
 
 const genealogyId = ref("");
 const records = ref([]);
@@ -200,6 +210,18 @@ const closeDeleteConfirmation = () => {
   deleteConfirmationVisible.value = false;
   deleteTarget.value = null;
 };
+const requestBack = () => {
+  if (deleting.value || detailState.value === "loading") return true;
+  if (deleteConfirmationVisible.value) {
+    closeDeleteConfirmation();
+    return true;
+  }
+  if (detailTarget.value) {
+    closeRecordDetail();
+    return true;
+  }
+  return returnToFamily();
+};
 const deleteRecord = async () => {
   const record = deleteTarget.value;
   if (!record?.canDelete || deleting.value) return;
@@ -234,6 +256,7 @@ onUnload(() => {
   relativeRecordDeleteController.abort();
   relativeRecordDetailController.abort();
 });
+onBackPress((event) => handleBackPress(event, requestBack));
 </script>
 
 <style scoped lang="scss">
@@ -249,11 +272,13 @@ onUnload(() => {
   z-index: 1;
 }
 .page-content {
-  padding: 18rpx 24rpx 72rpx;
+  flex: 1;
+  padding: 18rpx 24rpx calc(72rpx + env(safe-area-inset-bottom));
 }
 .state-card,
 .record-card {
   @include adaptive-records-content;
+  background-color: rgba($paper, 0.82);
 }
 .state-card {
   display: flex;
@@ -273,7 +298,7 @@ onUnload(() => {
 .record-list {
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
+  gap: 20rpx;
 }
 .record-card {
   display: flex;
@@ -310,6 +335,12 @@ onUnload(() => {
   align-items: center;
   gap: 10rpx;
 }
+.record-card__cover {
+  width: 100%;
+  height: 240rpx;
+  border-radius: 10rpx;
+  background: rgba(128, 89, 49, 0.12);
+}
 .record-card__amount > text {
   margin-right: auto;
   color: $brand-red;
@@ -317,7 +348,7 @@ onUnload(() => {
 }
 .record-card__amount .app-button {
   width: 140rpx;
-  min-height: 68rpx;
+  min-height: 80rpx;
 }
 .delete-error {
   display: block;