qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 部分功能，新增附件上传功能，优化登录页面，修复bug。

Browse Source
This commit is contained in:
tianyongbao
2026-06-25 21:40:42 +08:00
parent 8f38ff8185
commit cdba9f6569
12 changed files with 833 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/pages/health/doctorRecord/addEdit.vue
View File

@@ -70,6 +70,23 @@
<u-form-item label="备注" prop="remark" labelPosition="top">
<u--textarea v-model="form.remark" height="40rpx" placeholder="请填写备注" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('remark')"></u--textarea>
</u-form-item>
<u-form-item label="附件图片" prop="attachment" labelPosition="top">
<view class="upload-wrap">
<view class="img-list">
<view class="img-item" v-for="(img, index) in attachmentList" :key="index">
<image :src="img" class="img-preview" mode="aspectFill" @click="previewImage(index)"></image>
<view class="img-del" @click="deleteImage(index)">
<uni-icons type="clear" size="20" color="#f5576c"></uni-icons>
</view>
</view>
<view class="img-add" v-if="attachmentList.length < 9" @click="chooseImage">
<uni-icons type="plusempty" size="28" color="#667eea"></uni-icons>
<text class="img-add-text">上传图片</text>
</view>
</view>
<view class="upload-tip">最多上传9张图片，支持 jpg/png/jpeg 等格式</view>
</view>
</u-form-item>
</u--form>
<view class="form-btn">
<u-button type="primary" text="提交" @click="submit"></u-button>
@@ -95,7 +112,8 @@
</template>
<script setup>
import { getDoctorRecord, addDoctorRecord, updateDoctorRecord } from '@/api/health/doctorRecord'
import { getDoctorRecord, addDoctorRecord, updateDoctorRecord, uploadFile } from '@/api/health/doctorRecord'
import config from '@/config'
import { listPerson } from '@/api/health/person'
import { listHealthRecord } from '@/api/health/healthRecord'
const { proxy } = getCurrentInstance()
@@ -113,6 +131,9 @@ const personList = ref([])
const typeList = ref([])
const showType = ref(false)
const flag = ref('add')
// 附件图片列表（存储完整URL，用于预览和提交）
const attachmentList = ref([])
const uploading = ref(false)
const data = reactive({
form: {
id: null,
@@ -131,7 +152,8 @@ form: {
personId: null,
totalCost: 0,
partner: null,
costDetail: null
costDetail: null,
attachment: null
},
queryPersonParams: {
pageNum: 1,
@@ -205,6 +227,15 @@ const getTextareaStyle = (field) => {
return errorFields.value.includes(field) ? textareaErrorStyle : textareaBaseStyle
}
function normalizeAttachmentUrl(url) {
if (!url) return ''
if (url.startsWith('http')) return url
// 附件是后端静态资源直链（如 /fileUrl/...、/profile/upload/...）
// 需要用域名拼接，不能带网关前缀 prod-api（否则会 404）
const origin = config.baseUrl.replace(/^(https?:\/\/[^/]+).*$/, '$1')
return origin + url
}
onLoad((option) => {
form.value.id = option.id
@@ -246,6 +277,10 @@ function getData() {
})
})
form.value = res.data
// 加载已有附件到列表
if (form.value.attachment) {
attachmentList.value = form.value.attachment.split(',').filter(url => url).map(normalizeAttachmentUrl)
}
// 就医类型
getDicts('doctor_type').then(result => {
typeList.value =[result.data]
@@ -351,6 +386,8 @@ function datePickConfirm(e) {
datePickShow.value = false
}
function submit() {
// 提交前同步附件字段（逗号分隔的URL字符串）
form.value.attachment = attachmentList.value.join(',')
proxy.$refs['uForm'].validate().then(() => {
if (form.value.id != null) {
if(flag.value==null){
@@ -388,6 +425,69 @@ function submit() {
proxy.$modal.msgError('请填写完整信息')
})
}
// 选择图片并上传
function chooseImage() {
if (uploading.value) {
proxy.$refs['uToast'].show({ message: '正在上传中，请稍候', type: 'warning' })
return
}
uni.chooseImage({
count: 9 - attachmentList.value.length,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
uploadImages(res.tempFilePaths, 0)
}
})
}
// 递归上传图片
function uploadImages(paths, index) {
if (index >= paths.length) {
uploading.value = false
return
}
uploading.value = true
uni.showLoading({ title: `上传中 ${index + 1}/${paths.length}`, mask: true })
uploadFile({
filePath: paths[index],
name: 'file'
}).then(res => {
const url = (res.data && res.data.url) || res.fileName || res.url
if (url) {
attachmentList.value.push(normalizeAttachmentUrl(url))
}
uni.hideLoading()
uploadImages(paths, index + 1)
}).catch(() => {
uni.hideLoading()
uploading.value = false
proxy.$refs['uToast'].show({ message: `第 ${index + 1} 张上传失败`, type: 'error' })
})
}
// 删除图片
function deleteImage(index) {
uni.showModal({
title: '提示',
content: '确定删除这张图片吗？',
confirmColor: '#f5576c',
success: (modalRes) => {
if (modalRes.confirm) {
attachmentList.value.splice(index, 1)
}
}
})
}
// 预览图片
function previewImage(index) {
uni.previewImage({
urls: attachmentList.value,
current: attachmentList.value[index]
})
}
</script>
<style lang="scss" scoped>
@@ -446,6 +546,82 @@ page {
z-index: 10;
}
}
// 附件上传区域
.upload-wrap {
width: 100%;
.img-list {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-bottom: 12rpx;
}
.img-item {
position: relative;
width: 180rpx;
height: 180rpx;
border-radius: 12rpx;
overflow: hidden;
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.15);
.img-preview {
width: 100%;
height: 100%;
background: #f5f7fa;
}
.img-del {
position: absolute;
top: 4rpx;
right: 4rpx;
width: 36rpx;
height: 36rpx;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
&:active {
transform: scale(0.9);
}
}
}
.img-add {
width: 180rpx;
height: 180rpx;
border-radius: 12rpx;
border: 2rpx dashed rgba(102, 126, 234, 0.4);
background: rgba(102, 126, 234, 0.06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8rpx;
transition: all 0.2s ease;
&:active {
transform: scale(0.96);
background: rgba(102, 126, 234, 0.12);
}
.img-add-text {
font-size: 22rpx;
color: #667eea;
font-weight: 500;
}
}
.upload-tip {
font-size: 22rpx;
color: #909399;
line-height: 1.4;
}
}
}
}
</style>
@@ -479,4 +655,4 @@ page {
border: 2rpx solid #f56c6c !important;
background: #fef0f0 !important;
}
</style>
</style>