feat: 优化图片附件功能

pages/message/common-phrases.vue

@@ -179,21 +179,14 @@
         ></textarea>
         <view class="char-count">{{ phraseForm.content.length }}/500</view>
 
-        <view class="form-label content-label">图片附件</view>
-        <view class="image-grid">
-          <view
-            v-for="(file, index) in phraseForm.files"
-            :key="file.url || index"
-            class="image-item"
-            @click="previewFiles(phraseForm.files, index)"
-          >
-            <image class="image-thumb" :src="file.url" mode="aspectFill" />
-            <view class="image-remove" @click.stop="removePhraseImage(index)">×</view>
-          </view>
-          <view v-if="phraseForm.files.length < 9" class="image-add" @click="addPhraseImage">
-            <text class="image-add-icon">+</text>
-          </view>
-        </view>
+        <form-files
+          class="phrase-files-cell"
+          :form="phraseForm"
+          title="files"
+          name="图片附件"
+          :max="9"
+          @change="handlePhraseFilesChange"
+        />
 
         <view class="popup-actions">
           <button class="cancel-btn" @click="closePopup">取消</button>
@@ -276,7 +269,8 @@ import { ref, computed, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import api from "@/utils/api";
 import useAccountStore from "@/store/account";
-import { chooseAndUploadImage, normalizeFileUrl } from "@/utils/file";
+import formFiles from "@/components/form-template/form-cell/form-files.vue";
+import { normalizeFileUrl } from "@/utils/file";
 
 const { doctorInfo } = storeToRefs(useAccountStore());
 
@@ -491,18 +485,8 @@ const previewFiles = (files, index = 0) => {
   uni.previewImage({ urls, current: urls[index] || urls[0] });
 };
 
-const addPhraseImage = async () => {
-  if (phraseForm.value.files.length >= 9) {
-    uni.showToast({ title: "最多上传9张图片", icon: "none" });
-    return;
-  }
-  const url = await chooseAndUploadImage({ count: 1 });
-  if (!url) return;
-  phraseForm.value.files.push({ type: "image", url: normalizeFileUrl(url), name: "图片" });
-};
-
-const removePhraseImage = (index) => {
-  phraseForm.value.files.splice(index, 1);
+const handlePhraseFilesChange = ({ value }) => {
+  phraseForm.value.files = normalizeFiles(value);
 };
 
 const savePhrase = async () => {
@@ -1334,54 +1318,21 @@ $border-color: #edf0f5;
   margin: -14rpx 0 32rpx;
 }
 
-.image-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16rpx;
+.phrase-files-cell {
+  display: block;
   margin-bottom: 30rpx;
-}
 
-.image-item,
-.image-add {
-  position: relative;
-  width: 142rpx;
-  height: 142rpx;
-  border-radius: 12rpx;
-  overflow: hidden;
-  background: #f7f8fb;
-}
+  :deep(.files-wrap) {
+    padding: 0;
+    border-bottom: 0;
+    background: transparent;
+  }
 
-.image-thumb {
-  width: 100%;
-  height: 100%;
-}
-
-.image-remove {
-  position: absolute;
-  top: 6rpx;
-  right: 6rpx;
-  width: 34rpx;
-  height: 34rpx;
-  line-height: 34rpx;
-  text-align: center;
-  color: #fff;
-  font-size: 26rpx;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.55);
-}
-
-.image-add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #98a2b3;
-  border: 1px dashed #cfd3dc;
-  box-sizing: border-box;
-}
-
-.image-add-icon {
-  font-size: 52rpx;
-  line-height: 52rpx;
+  :deep(.files-label) {
+    color: $text-main;
+    font-size: 28rpx;
+    font-weight: 500;
+  }
 }
 
 .phrase-textarea {