mabaoDoctor/pages/zixun/xiangqing.vue

<template>
	<view style="width: 100%;height: 100%;background-color: #F6F6F6;">
		<!-- 表单弹窗 -->
		<u-popup v-model="formshow" mode="center" border-radius="14" :closeable="false">
			<view style="width: 75vw;height: 60vh">
				<view class="flex justify-center align-center" style="height: 20%;font-size: 32rpx;font-weight: 500;">填写意见单</view>
				<view style="height: 60%;padding: 0 40rpx;">
					<!-- 病症 -->
					<view class="flex align-center" style="padding-bottom: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #999999;">
						<text style="margin-right: 20rpx;font-weight: 500;font-size: 28rpx;">病症:</text>
						<input placeholder="请填写病症名称" @input="bzblur"/>
					</view>
					<!-- 病因-->
					<view class="flex align-center" style="padding-bottom: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #999999;">
						<text style="margin-right: 20rpx;font-weight: 500;font-size: 28rpx;">病因:</text>
						<input placeholder="请填写患病因素" @input="byblur"/>
					</view>
					<!-- 结论 -->
					<view>
						<view style="margin-bottom: 20rpx;font-weight: 500;font-size: 28rpx;">结论因素:</view>
						<u-input v-model="jl" type="textarea" :auto-height="true" placeholder="请填写病情情况、建议等"
						 :clearable="false" height='139' :border="true" borderColor="#C0C0C0"/>
					</view>
				</view>
				<!-- 两个按钮 -->
				<view style="height: 20%;display: flex;justify-content: center;align-items: center">
					<view style="display:flex;justify-content: center;align-items: center;width: 50%;">
						<u-button shape="shape" size="medium" @click="formshow = false">取消</u-button>
					</view>
					<view style="display:flex;justify-content: center;align-items: center ;width: 50%;">
						<u-button shape="shape" size="medium" type="primary" @click="qr">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<view style="padding: 20rpx 28rpx;background-color: #FFFFFF;">
			<!-- 头部 -->
			<view class="flex align-center" style="font-weight: bold;font-size: 30rpx;margin:30rpx 0;">
				<view style="width: 25%;">订单号:</view>
				<view style="width: 50%;">{{orderID}}</view>
				<view style="width: 25%;" class="flex justify-center">
					<view class="but" v-if="zl ==1 ">电话咨询</view>
					<view class="but" v-else-if="zl ==2 ">图文咨询</view>
				</view>
			</view>
			<!-- 线 -->
			<u-line color="#EFEFEF" />
			<!-- 中部内容 -->
			<view style="font-size: 26rpx;background-color: #FFFFFF;">
				<view class="nr">
					<view class="left">患者:</view>
					<view class="right">{{name}}</view>
				</view>
				<view class="nr">
					<view class="left">年龄:</view>
					<view class="right">{{age}}</view>
				</view>
				<view class="nr">
					<view class="left">身份证号:</view>
					<view class="right">{{ID}}</view>
				</view>
				<!-- 这里需要判断咨询类型   图文咨询：病情描述，图片  电话咨询：拨打时间  -->
				<view class="nr" v-if="zl == 1">
					<view class="left">拨打时间:</view>
					<view class="right">{{callTime}}</view>
				</view>
				<view class="nr" v-if="zl == 2">
					<view class="left">病情描述:</view>
					<view class="right">{{ms}}</view>
				</view>
				<view class="nr" v-if="zl ==2">
					<view class="left">图片:</view>
					<view class="right" v-for="(item,index) in potolList" :key="index" style="width: auto;">
						<image style="width: 124rpx;height: 124rpx;margin-right: 10rpx;" :src="item" @click="TanPreviewImage(item)"></image>
					</view>
				</view>
			</view>
		</view>

		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 客户资料 -->
		<view class="" style="background-color: #FFFFFF;padding: 10rpx 28rpx;">
			<view class="nr">
				<view class="left">下单时间:</view>
				<view class="right">{{placeTime}}</view>
			</view>
			<view class="nr">
				<view class="left">下单客户:</view>
				<view class="right">{{xiadankh}}</view>
			</view>
			<view class="nr">
				<view class="left">接单时间:</view>
				<view class="right">{{receivingTime}}</view>
			</view>
			<view class="nr">

				<view class="left">订单状态:</view>
				<view class="right" v-if="zt==1">未支付</view>
				<view class="right" v-else-if="zt==2">待接单</view>
				<view class="right" v-else-if="zt==3">进行中</view>
				<view class="right" v-else-if="zt==4">已完成</view>
				<view class="right" v-else>已取消</view>
			</view>
		</view>
		<!-- 上面都是相同的 电话咨询下面需要添加通话记录 且已经接单-->
		<view v-if="zl == 1&&!(zt==1)" style="margin-bottom: 100rpx;">
			<view class="" style="background-color: #FFFFFF;padding: 10rpx 28rpx;" v-for="item,index in callList " :key='index'>
				<view class="nr">
					<view class="left" style="font-weight: bold;">{{item.frequency}}</view>
					<view class="right"></view>
				</view>
				<view class="nr">
					<view class="left">拨打时间:</view>
					<view class="right">{{item.start}}</view>
				</view>
				<view class="nr">
					<view class="left">结束时间:</view>
					<view class="right">{{item.end}}</view>
				</view>
				<view class="nr">
					<view class="left">通话时长:</view>
					<view class="right">{{item.duration}}</view>
				</view>
			</view>
		</view>
		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 底部按钮 -->
		<!-- 当订单状态为未接单  zt==1 -->
		<view class="bottomButton" v-if="zt == 2">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" :value="pageid" @click="queren">确认订单</u-button>
				</view>
			</view>
		</view>
		<!-- 当订单状态为  zt==1 -->
		<view class="bottomButton" v-else-if="zl == 2 && zt == 3">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="bStyle" @click="huihu">发起会话</u-button>
				</view>
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="formshow = true">完成订单</u-button>
				</view>
			</view>
		</view>

		<!-- 状态是进行中并且是电话咨询 -->
		<view class="bottomButton" v-else-if="zl == 1 && zt==3">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="bStyle" @click="phone">拨打电话</u-button>
				</view>
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="formshow = true">完成订单</u-button>
				</view>
			</view>
		</view>



		<view class="bottomButton" v-else-if="zt ==4">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b" v-if="zl == 2">
					<u-button shape="circle" :custom-style="bStyle" @click="huihua">会话记录</u-button>
				</view>
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="ckyj">查看意见</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		import IMService from "../../common/goeasyimutil.js"
	export default {
		onLoad(options) {
			console.log('获取ID：', options.data);
			this.pageid = options.data
			this.getInfo(options.data);
			
			// 心跳三次
			var i = 0;
			while(i<3){
				console.log('我是i',i);
				if(typeof getApp().globalData.imService =='undefined'){
					 let res = uni.getStorageSync('user');
						getApp().globalData.imService = new IMService();
						let loginResult = getApp().globalData.imService.login({
							uuid: res.data.flag,
							name: res.data.name,
							avatar: res.data.avatar
						});
						if (loginResult) {
							//连接IM
							getApp().globalData.imService.connectIM();
						}
				}else{
					break;
				}
				i++;			
			}
		},
		mounted() {

		},
		data() {
			return {
				user_id:'',
				pageid: '',
				patient_id: '',
				/**********************      图文咨询，包括某些电话咨询      *********************/
				// 上部数据
				orderID: '', //订单号
				zl: 1, //种类  1电话咨询 2图文咨询

				//中部数据
				name: '', //名字
				age: '', //年龄
				ID: '', //身份证
				//病情描述
				ms: '',
 
				potolList:[],
				
				xphone:'',
 
				//下部数据
				placeTime: '', //下单时间
				receivingTime: '', //接单时间
				xiadankh: '', //下单客户
				zt: 1, // 状态
				// 1未接单	
				// 2进行中   显示未会话
				// 3已完成	
				// 4已取消
				//底部按钮样式
				/*********************     电话咨询必要数据          *****************************/
				callTime: '', //拨打时间
				callList: [],

				//下部按钮样式
				bStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
				},
				btStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#0B73B9',
					backgroundColor: '#FFFFFF'
				},
				//表单
				formshow: false, //提交表单弹窗
				bz: '', //病症
				by: '', //病因
				jl: '', //结论
				info: "",
				placeholderStyle: "color：'#00ff00'"
			}
		},
		methods: {
			//图片预览
			 TanPreviewImage(imageUrl){ 
			        console.log(imageUrl) // http://192.168.100.251:8970/6_1597822634094.png
			        var images = [];
			        images.push(imageUrl);
			        console.log(images)  // ["http://192.168.100.251:8970/6_1597822634094.png"]
			        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
			            current:0,
			            urls:images,
			            longPressActions: {  //长按保存图片到相册
			                itemList: ['保存图片'],
			                success: (data)=> {
			                    console.log(data);
			                    uni.saveImageToPhotosAlbum({ //保存图片到相册
			                        filePath: payUrl,
			                        success: function () {
			                            uni.showToast({icon:'success',title:'保存成功'})
			                        },
			                        fail: (err) => {
			                            uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
			                        }
			                    });
			                },
			                fail: (err)=> {
			                    console.log(err.errMsg);
			                }
			        }
			        });
			    },
			//
			phone:async function(){
				let res = await this.$request.post("patient/callPhones",{'order_id':this.orderID,'user_id':this.user_id});
				if(res.status==0){
					let phone = res.data;
					// 去拨打电话即可
					uni.makePhoneCall({
					 	// 手机号
					    phoneNumber: phone, 
						// 成功回调
						success: (res) => {
							console.log('调用成功!')	
						},
						// 失败回调
						fail: (res) => {
							uni.showModal({
								title:"拨打电话调用失败",
							})
						}
					  });
					console.log(res);
				}else{
					uni.showToast({
						title:res.message,
						icon:'none',
						duration:3000
					})
				}
			},
			getInfo:async function(id){
				let res = await this.$request.post("patient/orderPatientDetail",{'patient_id':id});		
				if(res.status==0){
					
					let list = res.data;
					this.info = res.data
					this.user_id = list.user_id
					this.orderID = list.order_sn;
					this.patient_id = list.patient_id;
					this.zl = list.product_type;
					this.name = list.name;
					this.age = list.numbirthday;
					this.ID = list.card_number;
					this.placeTime = list.created_at;
					this.xiadankh = list.nickname;
					this.receivingTime = list.receiving_time
					

					if (list.product_type == 2) {
						// 图文咨询：
						this.ms = list.symptoms;
						this.potolList = list.medical_imgs;
						this.potolList = this.potolList.split(",")
						for (let a = 0; a < this.potolList.length; a++) {
							this.potolList[a] = this.potolList[a].replace(/\"/g, "");
							this.potolList[a] = this.potolList[a].replace("[", "");
							this.potolList[a] = this.potolList[a].replace("]", "");
						}
						console.log("处理后图片数组",this.potolList)
					} else {
						this.callTime = list.one_call;
						this.callList = list.call_list;
						 
						this.xphone = list.secret_no;
					}
					this.zt = list.order_status;

				}
			},
			// 确认订单
			queren: async function(e) {
				let that = this;
				let order_id = that.pageid
				let res = await that.$request.post('patient/putOrderPatient', {
					'order_id': order_id
				});
				if (res.status == 0) {
					uni.showModal({
						title: "提示",
						content: "接单成功！",
						confirmText: "确定",
						showCancel: false,
						success() {
							that.getInfo(order_id)
						}
					})
				}
				that.zt = 2
			},
			//完成订单
			wancheng(e) {
				this.zt = 3
				
				
				
			},
			//发起会话
			huihu(e) {
				console.log("1111")
				console.log(this.info);
				uni.navigateTo({
					url: "../conversation/conversationWindow?patient=" + JSON.stringify(this.info) + "&type=1"
				})
			},
			huihua(e) {
				console.log("222")
				uni.navigateTo({
					url: "../conversation/conversationWindow?patient=" + JSON.stringify(this.info) + "&type=2"
				})
			},
			//查看意见
			ckyj(e) {
				uni.navigateTo({
					url: '/pages/opinion/opiniondetails?id=' + this.pageid + '&type=2'
				})
			},
			//首页
			home(e) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//病症提交
			bzblur(e) {
				this.bz = e.detail.value
			},
			byblur(e) {
				this.by = e.detail.value
			},
			jlblur(e) {
				this.jl = e.detail.value
			},
			//意见单  确认
			qr: async function(e) {
				let that = this;
				let order_id = that.pageid

				if(that.bz!=''){
					if(that.by!=''){
						if(that.jl!=''){
							that.formshow = false
							let bingzheng=that.bz;
							let bingyin=that.by;
							let jianyi=that.jl;
							let datas = {'order_id':order_id,'symptoms':bingzheng,'pathogen':bingyin,'suggest':jianyi,'patient_id':that.patient_id};
							if(this.zl==1){
								datas['xphone'] = this.xphone;
							}
					 
						
							let res = await that.$request.post('patient/orderPatientok',datas);
							if(res.status==0){
								uni.showToast({
									title: "操作成功",
									duration: 3000,
									success() {
										that.getInfo(order_id)
									}
								})
								this.zt=  4
							}else{
								uni.showToast({
									title: "操作失败",
									duration: 3000,
									success() {
										that.getInfo(order_id)
									}
								})
							}
							

						} else {
							uni.showToast({
								title: '请填写结论',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请填写病因',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请填写病症',
						icon: 'none'
					})
				}
			},
			//意见单  取消

		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.but {
		padding: 16rpx 30rpx;
		border-radius: 20rpx;
		background-color: #eaeaea;
		height: 50rpx;
		color: b1b1b1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
	}

	.nr {
		margin: 28rpx 0;
		display: flex;

		.left {
			width: 25%;
			color: #666666;
		}

		.right {
			width: 75%;
		}
	}

	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		background-color: #FFFFFF;
		z-index: 1;

		.b {
			/*按钮样式*/
			margin-right: 30rpx;
			padding: 20rpx 0rpx;
			height: 100%;
			width: 150rpx;
		}
	}
</style>