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">
					<view v-for="(item,index) in imgList" :key="index"  @tap="viewImage" :data-url="imgList[index]"
					class="img-box justify-start align-center mr20">
						<image :src="item" class="w120 h120 radius8 " mode="aspectFill" @click="showImg(item)"></image>
						<image class="close-img" src="@/static/images/close32.png" mode="" @tap.stop="delImg" :data-index="index"></image>
					</view>
					<view class="column align-center bg-light w120 h120 radius8 center" @tap="chooseImage" v-if="imgList.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>{{imgList.length}}</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,
				imgList:[],
				photos:[]
			}
		},
		methods: {
			// 选择上传的图片
			chooseImage() {
				console.log('图片')
				var that = this;
				uni.showActionSheet({
					itemList: ['相册', '拍照'],
					success: function(res) {
						if (res.tapIndex == 0) {
							//从相册选择
							that.chooseImageFunction('album')
						} else if (res.tapIndex == 1) {
							//拍照
							that.chooseImageFunction('camera')
						}
					},
					fail: function(res) {
						
					}
				});
			},
			chooseImageFunction: function(type) {
				var that = this;
				uni.chooseImage({
					count: 4, // 默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [type],
					success: (res) => {
						uni.uploadFile({
							url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'  // 上传附带参数
							},
							success: (uploadFileRes) => {
								// 根据接口具体返回格式   赋值具体对应url
								if (this.imgList.length != 0) {
									this.imgList = this.imgList.concat(res.tempFilePaths)
								} else {
									this.imgList = res.tempFilePaths
									
								}
						 
								this.photos = this.photos.concat(JSON.parse(uploadFileRes.data).url)
							}
						});
						 
					}
				});
			},
			// 查看图片
			viewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			// 删除上传的图片
			delImg(e) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.imgList.splice(e.currentTarget.dataset.index, 1)
							this.photos.splice(e.currentTarget.dataset.index, 1);
						}
					},
				})
			},
			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;
	}
}
.img-box{
	position: relative;
}
.close-img{
		width: 32upx;
		height: 32upx;
		position: absolute;
		top:2upx;
		right: 2upx;
	}
.textinput{
	margin-top: 30rpx;
	height:200rpx;
	overflow-y: scroll;
}
.footer{
	padding: 40rpx 0; 
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #fff;
}
</style>