179crm_user_app/pages_health/ConsultationDetails.vue

<template>
	<view>
		<u-alert type="warning" :description='description'></u-alert>
		<view class="p20 column">
			<view class="bg-white p30 radius16">
				<view class="justify-between align-center">
					<view class="bold">咨询人<text class="color-price">*</text></view>
					<view class="justify-start align-center">
						<image src="/static/images/health/add_modify.png" class="w24 h24"></image>
						<view class="fs24 ml8">添加/修改</view>
					</view>
				</view>
				<scroll-view :scroll-x="true" class="peoplebox">
					<view class="scroll-content ">
						<view v-for="(item,index) in peoplelist" :key="index" @click="actpeople(item,index)"
						:class="actitem==index?'act-box':'noact-box'" class="item-list ">
							<image :src="item.sex=='男'?maleurl:famaleurl" class="w72 h72 radius36 "></image>
							<view class="ml12">
								<view class="fs26 bold">{{item.name}}</view>
								<view class="justify-start align-center color-text2 fs24">
									<text>{{item.sex}}</text>
									<text class="ml4">{{item.age}}岁</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="justify-start align-center center ptb20" v-if="peoplelist.length==0">
					<u-icon name="plus-circle"></u-icon>
					<text class="fs28 color-text1">用药人列表为空，请添加</text>
				</view>
			</view>
			<view class="bg-white p30 radius16 mt30">
				<view class="bold">您最想咨询的问题是什么<text class="color-price">*</text></view>
				<view class="textinput">
					<textarea  auto-height maxlength='500' placeholder="请输入内容" :value='consulting' @input='lookvalue'/>
				</view>
				<view class="justify-between align-center">
					<image src="/static/images/health/voice_icon.png" class="w48 h48"></image>
					<text class="fs24 color-text1">{{consultingNum}}/500</text>
				</view>
			</view>
			<view class="bg-white p30 radius16 mt30">
				<view class="bold">此次病情是否去线下就诊过<text class="color-price">*</text></view>
				<view class="justify-start align-center mt20">
					<view v-for="(item,index) in seedoctor" :key="index" :class="actsee==index?'bg-color color-white':'bg-light'"
					@click="selectsee(item,index)" class="ptb20 plr30 mr20 radius12" >{{item.name}}</view>
				</view>
			</view>
			<view class="bg-white p30 radius16 mt30">
				<view class="bold">上传检测报告或患处照片<text class="color-price">*</text></view>
				<view class="justify-start align-center mt20" @click="showImg()">
					<view v-for="(item,index) in imagelist" :key="index" @click="actpeople"
					class="justify-start align-center ml20">
						<image :src="item" class="w120 h120 radius8 " mode="aspectFill" @click="showImg(item)"></image>
					</view>
					<view class="column align-center bg-light w120 h120 radius8 center" v-if="imagelist.length<=4">
						<u-icon name="plus" ></u-icon>
						<view class="fs24">上传报告</view>
					</view>
				</view>
				<view class="justify-between fs24 color-text1 mt20">
					<view>最多上传4张图片</view>
					<view><text>0</text>/4</view>
				</view>
			</view>
			<view class="h200"></view>
		</view>
		<view class="footer center">
			<view class="bg-color radius44 color-white h88 lh88 center" style="width: 90%;"
			@click="submit">生成方案</view>
		</view>
	</view>
</template>

<script>
	import {getuserlist,submitconsult} from '@/api/health.js'
	export default {
		data() {
			return {
				description:'为了您的健康，请认真填写以下内容，以便药师为您更好的分析，提供患有针对性的解决方案!',
				peoplelist:[
					{
						name:'任继峰',
						sex:'男',
						age:'55',
						id:0
					},
					{
						name:'任继峰',
						sex:'男',
						age:'55',
						id:1
					},
					{
						name:'朱丽君',
						sex:'女',
						age:'55',
						id:2
					},
					{
						name:'朱丽君',
						sex:'女',
						age:'55',
						id:3
					}
				],
				famaleurl:"/static/images/health/female_profile.png",
				maleurl:"/static/images/health/male_profile.png",
				actitem:null,
				userid:null,
				consulting:null,
				consultingNum:0,
				seedoctor:[
					{
						name:'就诊过',
						value:0
					},
					{
						name:'未就诊',
						value:1
					}
				],
				actsee:null,
				imagelist:[]
			}
		},
		methods: {
			submit(){
				if(this.userid==null){
					uni.showToast({
						icon:'none',
						title:'请选择咨询人！',
					});
					return
				}
				if(this.consulting==null){
					uni.showToast({
						icon:'none',
						title:'请输入咨询内容！',
					});
					return
				}
				if(this.actsee==null){
					uni.showToast({
						icon:'none',
						title:'请选择是否线下就诊过！',
					});
					return
				}
				if(this.actsee==0){
					if(this.imagelist.length==0){
						uni.showToast({
							icon:'none',
							title:'如果在线下就诊过，请上传检测报告！',
						});
						return
					}
				}
				const data={
					id:this.userid,
					doctor:this.actsee,
					imgurl:this.imagelist
				}
				submitconsult().then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title:'提交成功',
						});
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg,
						});
					}
				})
			},
			actpeople(item,index){
				this.actitem=index
				this.userid=item.id
			},
			lookvalue(e){
				this.consulting=e.detail.value
				this.consultingNum=e.detail.cursor
				if(this.consultingNum==500){
					uni.showToast({
						icon:'none',
						title:'最大输入500字符！',
					});
				}
			},
			selectsee(item,index){
				this.actsee=item.value
			},
			showImg(img) {
				if(img!=null){
					var imgs=[];
					imgs.push(img)
					//预览图片
					uni.previewImage({
						urls: imgs,
						current: imgs[0]
					});
				}
				else{
					//预览图片
					uni.previewImage({
						urls: this.imagelist,
						current: this.imagelist[0]
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.peoplebox{
	  white-space: nowrap;
	  margin-top: 30rpx;
	  ::-webkit-scrollbar {
	    display: none;
	  }
	 .scroll-content{
		  display: flex;
		flex-wrap: nowrap;
	 }
	.item-list{
		padding: 20rpx 28rpx;
		width: fit-content;
		display: flex;
		justify-content: start;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}
	.noact-box{
		background-color: #F5F7FA;
	}
	.act-box{
		background-color: #F0FAFF;
		border: 2rpx solid #008FD3;
	}
}
.textinput{
	margin-top: 30rpx;
	height:200rpx;
	overflow-y: scroll;
}
.footer{
	padding: 40rpx 0; 
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #fff;
}
</style>