huxuejian/ykt-wxapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化图片附件功能

Browse Source
This commit is contained in:
Jafeng 2026-05-21 09:27:42 +08:00
parent b95f57f1c1
commit bacbffa2c2
1 changed files with 24 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
pages/message/common-phrases.vue
View File

@ -179,21 +179,14 @@
></textarea> ></textarea>
<view class="char-count">{{ phraseForm.content.length }}/500</view> <view class="char-count">{{ phraseForm.content.length }}/500</view>
<view class="form-label content-label">图片附件</view> <form-files
<view class="image-grid"> class="phrase-files-cell"
<view :form="phraseForm"
v-for="(file, index) in phraseForm.files" title="files"
:key="file.url || index" name="图片附件"
class="image-item" :max="9"
@click="previewFiles(phraseForm.files, index)" @change="handlePhraseFilesChange"
> />
<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>
<view class="popup-actions"> <view class="popup-actions">
<button class="cancel-btn" @click="closePopup">取消</button> <button class="cancel-btn" @click="closePopup">取消</button>
@ -276,7 +269,8 @@ import { ref, computed, onMounted } from "vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import api from "@/utils/api"; import api from "@/utils/api";
import useAccountStore from "@/store/account"; 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()); const { doctorInfo } = storeToRefs(useAccountStore());
@ -491,18 +485,8 @@ const previewFiles = (files, index = 0) => {
uni.previewImage({ urls, current: urls[index] || urls[0] }); uni.previewImage({ urls, current: urls[index] || urls[0] });
}; };
const addPhraseImage = async () => { const handlePhraseFilesChange = ({ value }) => {
if (phraseForm.value.files.length >= 9) { phraseForm.value.files = normalizeFiles(value);
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 savePhrase = async () => { const savePhrase = async () => {
@ -1334,54 +1318,21 @@ $border-color: #edf0f5;
margin: -14rpx 0 32rpx; margin: -14rpx 0 32rpx;
} }
.image-grid { .phrase-files-cell {
display: flex; display: block;
flex-wrap: wrap;
gap: 16rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
}
.image-item, :deep(.files-wrap) {
.image-add { padding: 0;
position: relative; border-bottom: 0;
width: 142rpx; background: transparent;
height: 142rpx; }
border-radius: 12rpx;
overflow: hidden;
background: #f7f8fb;
}
.image-thumb { :deep(.files-label) {
width: 100%; color: $text-main;
height: 100%; font-size: 28rpx;
} font-weight: 500;
}
.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;
} }
.phrase-textarea { .phrase-textarea {