uniapp-app/pages_app/myAnswer/myAnswer.vue

<template>
	<view class="my-answer-page">
		<navBar title="我的意见" />

		<scroll-view scroll-y class="content-scroll">
			<!-- 文本输入 -->
			<view class="card">
				<view class="card-title">我的意见 <text class="required">*</text></view>
				<view class="textarea-wrap">
					<textarea
						v-model="form.note"
						class="textarea"
						:maxlength="300"
						placeholder="请依据患者的个人信息、疾病资料及患者所咨询的问题详细解答患者的问题（信息仅提问患者及医生可见，最多输入300个字）"
						placeholder-class="ph"
						auto-height
					/>
					
				</view>
			</view>

			<!-- 图片上传 -->
			<view class="card">
				<view class="card-title">相关图片</view>
				<view class="sub-tip">可以用部分科普或文献来协助回答问题，最多6张</view>
				<view class="img-grid">
					<view
                       v-if="imgList.length>0"
						v-for="(img, index) in imgList"
						:key="index"
						class="img-item"
						@click="preview(index)"
					>
						<image :src="docUrl+img" mode="aspectFill" class="img" />
						<view class="del" @click.stop="remove(index)">×</view>
					</view>
					<view v-if="imgList.length < maxImages" class="img-item add" @click="addImages">
						<view class="plus">＋</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部提交 -->
		<view class="bottom-fixed">
			<view class="submit-btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import navBar from '@/components/navBar/navBar.vue'
import api from '@/api/api'
import docUrl from '@/utils/docUrl'
import { onLoad,onShow } from '@dcloudio/uni-app'
const  uuid=ref('');
const maxImages = 6;
const imgList = ref([]);
const form = ref({
	note: '',
	images: []
})
onLoad((options) => {
	uuid.value = options.uuid || ''
})
const getInterrogation=()=>{
  api.getInterrogation({
	uuid:uuid.value
  }).then(res=>{
	console.log(res)
	if(res.code === '200' && res.data) {
        let user=uni.getStorageSync('userInfo');
		let arr=res.data.AnswerList.filter(item=>{
			return user.uuid == item.expert_uuid 
		})
		
        form.value= arr[0];
        imgList.value= form.value.imgs?form.value.imgs.split(','):[];
	}
  })
}
const updateInterrogationAnswer=()=>{
    let imgobj={};
    if(imgList.value.length>0){
        let count=0;
       imgList.value.forEach(item=>{
            imgobj['img'+count]=docUrl+item;
        })
    }
        api.updateInterrogationAnswer({
            answer_uuid: answer_uuid.value,
            note: form.value.note,
            imgsBean: imgobj
        }).then(res=>{
            if(res.code == 200){
            uni.showToast({title: '提交成功', icon: 'none'})
            uni.navigateBack()
        }
        })
}
const addInterrogationAnswer=()=>{
    api.addInterrogationAnswer({
        note: form.value.note,
        imgsBean: imgobj
    }).then(res=>{
        if(res.code == 200){
            uni.showToast({title: '提交成功', icon: 'none'})
            uni.navigateBack()
        }
    })
}
onShow(()=>{
	getInterrogation()
})
function addImages(){
	const remain = maxImages - form.value.images.length
	if(remain <= 0){
		uni.showToast({title: '最多6张', icon: 'none'})
		return
	}
	uni.chooseImage({
		count: remain,
		sizeType: ['compressed'],
		sourceType: ['album','camera'],
		success: (res)=>{
			const paths = (res.tempFilePaths || res.tempFiles?.map(f=>f.path) || [])
			imgList.value = imgList.value.concat(paths).slice(0, maxImages)
		}
	})
}

function preview(index){
	uni.previewImage({
		urls:imgList.map(path=> docUrl + path),
		current: index
	})
}

function remove(index){
	imgList.valuesplice(index, 1)
}

function submit(){
	if(!form.value.note.trim()){
		uni.showToast({title:'请输入意见', icon:'none'})
		return
	}
	if(answer_uuid.value){
		updateInterrogationAnswer()
	}else{
		addInterrogationAnswer()
	}
}
</script>

<style lang="scss" scoped>
.my-answer-page{
	background-color: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.content-scroll{
	flex: 1;
	position: fixed;
	top: 135rpx;
	left: 0;
	right: 0;
	bottom: 160rpx;
	padding: 24rpx 24rpx 0;
	box-sizing: border-box;
}

.card{
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
}
.card-title{
	font-size: 32rpx;
	color: #8B2316;
	font-weight: 500;
	margin-bottom: 16rpx;
}
.required{ color: #ff4d4f; }

.textarea-wrap{
	position: relative;
	background: #f7f7f7;
	border-radius: 12rpx;
	padding: 16rpx 88rpx 16rpx 16rpx;
}
.textarea{
	min-height: 180rpx;
	width: 100%;
	font-size: 28rpx;
	color: #333;
}
.ph{ color:#999; }
.voice-btn{
	position: absolute;
	right: 16rpx;
	bottom: 16rpx;
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	background: #b90f0f;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.sub-tip{
	font-size: 26rpx;
	color: #999;
	margin-bottom: 16rpx;
}

.img-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16rpx;
}
.img-item{
	position: relative;
	width:150rpx;
	height: 150rpx;
	border-radius: 12rpx;
	overflow: hidden;
	background: #f0f0f0;
}
.img{ width: 100%; height: 100%; }
.add{ display:flex; align-items:center; justify-content:center; }
.plus{ font-size: 80rpx; color:#c0c0c0; line-height: 1; }
.del{
	position: absolute;
	top: 8rpx;
	right: 8rpx;
	width: 44rpx;
	height: 44rpx;
	border-radius: 22rpx;
	background: rgba(0,0,0,.5);
	color: #fff;
	text-align: center;
	line-height: 44rpx;
	font-size: 28rpx;
}

.bottom-fixed{
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: #fff;
	padding: 24rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,.06);
}
.submit-btn{
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #00bcd4;
	color: #fff;
	font-size: 32rpx;
	border-radius: 16rpx;
}
</style>