his_user_miniapp/pages_order/inquiryOrderDetails.vue

<template>
	<view class="content">
		<view class="cont">
			<view class="other-info" v-if="order!=null">
				<view class="title">付款详情</view>
				<view class="item">
					<view class="left">
						<text class="label">订单类型：</text>
						<text class="text">{{$getDictLabelName(inquiryTypeOptions,order.inquiryType)}}</text>
						<text class="text">-{{$getDictLabelName(orderTypeOptions,order.orderType)}}</text>
					</view>
					<view class="status red" v-if="order.status==1">
						{{$getDictLabelName(orderStatusOptions,order.status)}}
					</view>
					<view class="status red" v-if="order.status==2">
						{{$getDictLabelName(orderStatusOptions,order.status)}}
					</view>
					<view class="status green" v-if="order.status==3">
						{{$getDictLabelName(orderStatusOptions,order.status)}}
					</view>
					<view class="status green" v-if="order.status==4">
						{{$getDictLabelName(orderStatusOptions,order.status)}}
					</view>
					<view class="status gray" v-if="order.status<0">
						{{$getDictLabelName(orderStatusOptions,order.status)}}
					</view>
				</view>
				 
			</view>
			<view class="doc-box" v-if="doctor!=null">
				<view class="title">医生详情</view>
				<view class="doc-name-box">
					<view class="doc-name">
						{{doctor.doctorName}}
					</view>
					<view class="doc-star">
						<u-rate activeColor="#ffc603" count="5" readonly v-model="doctor.pingStar"></u-rate>
					</view>
				</view>
				<view class="doc-dept-box">
					{{department.deptName}}|{{doctor.position}}
				</view>
				<view class="doc-his-box">
					{{hospital.hospitalName}}
				</view>
				<view class="doc-spec-box">
					<view class="left">
						<view class="title">擅长:</view>
						<view class="spec">{{doctor.speciality}}</view>
					</view>
					<view class="right">
						<view class="btn" @click="navTo('/pages_doctor/doctorDetails?doctorId='+doctor.doctorId)" >详情</view>
					</view>
				</view>
			</view>
			<view class="other-info" v-if="patient!=null&&order.inquiryType==1">
				<view class="title">咨询内容</view>
				<view class="item">
					<view class="left">
						<text class="label">患者信息：</text>
						<text class="text">{{patient.patientName}} {{patient.sex==1?"男":"女"}} {{patient.age}}岁</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">病情描述：</text>
						<text class="text">{{patient.title}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">患病时间：</text>
						<text class="text">{{patient.duration}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">就诊情况：</text>
						<text class="text">{{patient.isVisit}}</text>
					</view>
				</view>
			</view>
			<view class="other-info" v-if="patient!=null&&order.inquiryType==2">
				<view class="title">咨询内容</view>
				<view class="item">
					<view class="left">
						<text class="label">患者信息：</text>
						<text class="text">{{patient.patientName}} {{patient.sex==1?"男":"女"}} {{patient.age}}岁</text>
					</view>
				</view>
				<!-- <view class="item">
					<view class="left">
						<text class="label">身高(CM)：</text>
						<text class="text">{{patient.height}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">体重(KG)：</text>
						<text class="text">{{patient.weight}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">联系电话：</text>
						<text class="text">{{patient.mobile}}</text>
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="left">
						<text class="label">学习进度：</text>
						<text class="text">{{patient.study}}</text>
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="left">
						<text class="label">用药情况：</text>
						<text class="text">{{patient.medication}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">期望会诊方式：</text>
						<text class="text">{{patient.usage}}</text>
					</view>
				</view> -->
				<view class="item">
					<view class="left">
						<text class="label">病情描述：</text>
						<text class="text">{{patient.title}}</text>
					</view>
				</view>
				<!-- <view class="item">
					<view class="left">
						<text class="label">正在服用药品：</text>
						<text class="text">{{patient.drugs}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">本次患病时间：</text>
						<text class="text">{{patient.duration}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">是否就诊过：</text>
						<text class="text">{{patient.isVisit}}</text>
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="left">
						<text class="label">舌苔照片：</text>
					</view>
					 
				</view>
				<view>
					<u-album :urls="tongueImages"></u-album>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">面部照片：</text>
					</view>
					 
				</view>
				<view>
					<u-album :urls="faceImages"></u-album>
				</view> -->
			 
				<view class="item">
					<view class="left">
						<text class="label">检测报告或患处照片：</text>
					</view>
					 
				</view>
				<view>
					<u-album :urls="reportImages"></u-album>
				</view>
			</view>
			<view class="other-info" v-if="patient!=null&&order.inquiryType==3">
				<view class="title">咨询内容</view>
				<view class="item">
					<view class="left">
						<text class="label">患者信息：</text>
						<text class="text">{{patient.patientName}} {{patient.sex==1?"男":"女"}} {{patient.age}}岁</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">病情描述：</text>
						<text class="text">{{patient.title}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">正在服用药品：</text>
						<text class="text">{{patient.drugs}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">本次患病时间：</text>
						<text class="text">{{patient.duration}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">是否就诊过：</text>
						<text class="text">{{patient.isVisit}}</text>
					</view>
				</view>
				 
				 
				 
				<view class="item">
					<view class="left">
						<text class="label">检测报告或患处照片：</text>
					</view>
					 
				</view>
				
				<view>
					<u-album :urls="reportImages"></u-album>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">舌苔照片：</text>
					</view>
					 
				</view>
				<view>
					<u-album :urls="tongueImages"></u-album>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">面部照片：</text>
					</view>
					 
				</view>
				<view>
					<u-album :urls="faceImages"></u-album>
				</view>
			</view>
			<!-- <view class="other-info" v-if="report!=null&&order.status>=3"  >
				<view class="title">体检信息</view>
				<view class="item"  v-for="(item) in forms">
					<view class="left">
						<text class="label">{{item.title}}：</text>
						<text class="text">
							<u-tag  size="mini" plain type="success" style="margin-right: 5rpx;margin-bottom: 5rpx;" v-for="(tag) in item.option" :text="tag"></u-tag>
						</text>
					</view>
				</view>
			</view> -->
			<view class="other-info" v-if="order!=null">
				<view class="title">订单信息</view>
				<view class="item">
					<view class="left">
						<text class="label">订单号码：</text>
						<text class="text">{{order.orderSn}}</text>
					</view>
					<view class="item-btn" @click="copyOrderSn">复制</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">下单时间：</text>
						<text class="text">{{order.createTime}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">订单金额：</text>
						<text class="text">{{order.money.toFixed(2)}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">优惠金额：</text>
						<text class="text">{{order.discountMoney.toFixed(2)}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">支付金额：</text>
						<text class="text">{{order.payMoney.toFixed(2)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box" v-if="order!=null">
			<view class="btn" v-if="report!=null&&order.status>=3" @click="navTo('/pages_order/inquiryOrderReport?orderId='+order.orderId)"  >查看报告</view>
			<view class="btn" v-if="order.status==3" @click="toIM()"  >去问诊</view>
			<view class="btn" v-if="order.status==1" @click="pay()">去支付</view>
			<view class="btn" v-if="order.status==2" @click="cancel()">取消订单</view>
			<view class="btn" v-if="order.status==4&&order.isPing==0" @click="ping()">去评价</view>
		</view>
	</view>
</template>
 
<script  >
	import store from "@/store";
	import {getMyInquiryOrderById,cancel} from '@/api/inquiryOrder.js'
	import {getDictByKey} from '@/api/common.js'
	export default {
		data() {
			return {
				report:null,
				patient:null,
				hospital:null,
				department:null,
				doctor:null,
				order:null,
				orderId:null,
				orderStatusOptions:[],
				orderTypeOptions:[],
				inquiryTypeOptions:[],
				reportImages: [],
				tongueImages:[],
				faceImages:[],
				// forms:[],
			}
		},
		 
		onLoad(options) {
			this.orderId=options.orderId;
			this.getDictByKey("sys_inquiry_order_type");
			this.getDictByKey("sys_inquiry_type");
			this.getDictByKey("sys_inquiry_status");
		},
		onShow() {
			this.getMyInquiryOrderById();
		},
		methods: {
			cancel(){
				var that=this;
				uni.showModal({
					title:"提示",
					content:"确认取消订单吗?",
					showCancel:true,
					cancelText:'取消',
					confirmText:'确定',
					success:res=>{
						if(res.confirm){
							// 用户点击确定
							var data={orderId:this.orderId}
							cancel(data).then(
								res => {
									if(res.code==200){
										that.getMyInquiryOrderById()
										uni.showToast({
										 	icon:'success',
										 	title: "操作成功",
										});
									}else{
										uni.showToast({
											icon:'none',
											title: res.msg,
										});
									}
								},
								rej => {}
							);
														
						}else{
							// 否则点击了取消  
						}
					}
				})
			},
			ping(){
				uni.navigateTo({
					url: "/pages_order/pingOrder?orderId="+this.orderId+"&doctorId="+this.order.doctorId
				})
			},
			pay(){
				uni.navigateTo({
					url: "/pages_order/inquiryPay?orderId="+this.orderId
				})
			},
			toIM(){
				var that=this;
				var id="C2CD-"+this.doctor.doctorId;
				store.commit("timStore/setType","startInquiry");
				store.commit("timStore/setOrderType",this.order.orderType);
				store.commit("timStore/setOrderId",this.order.orderId);
				store.commit("timStore/setFollowId", 0);
				store.commit("timStore/setImType", 1);
				store.commit("timStore/setConversationID", id);
				uni.$TUIKit.TUIConversationServer.setMessageRead(id);
				uni.$TUIKit.TUIConversationServer.getConversationProfile(id)
				  .then((res) => {
						uni.$TUIKit.TUIConversationServer.setConversationValue(id,that.orderId)
							.then((res) => {
							  console.log("更新order")
						})
						.catch((err) => {
							   
						});
						console.log(res)
						//通知 TUIChat 关闭当前会话
						const { conversation } = res.data;
						store.commit("timStore/setConversation", conversation);
						let url = "/pages/TUIKit/TUIPages/TUIChat/index";
						const { nick: name } = conversation.userProfile;
						url = `${url}?conversationName=${
							conversation.userProfile.nick?.nick ||
							conversation.userProfile.userID
						}`;
						uni.redirectTo({ url });
				})
				.catch((err) => {
				    console.warn("获取 group profile 异常 = ", err);
				});
			},
			navTo(url){
				uni.navigateTo({
					url: url
				})
			},
			copyOrderSn() {
				uni.setClipboardData({
					data: this.order.orderSn,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				})
			},
			getMyInquiryOrderById(){
				var that=this;
				var data={orderId:this.orderId}
				getMyInquiryOrderById(data).then(
					res => {
						if(res.code==200){
							this.order=res.data.order;
							this.report=res.data.report;
							this.patient=JSON.parse(res.data.order.patientJson);
							// if(this.report!=null&&this.report.formJson!=null){
							//  	this.forms=JSON.parse(this.report.formJson)
							// }
							if(that.patient.reportImages!=null){
								that.reportImages=that.patient.reportImages.split(",");
							}
							if(that.patient.tongueImages!=null){
								that.tongueImages=that.patient.tongueImages.split(",");
							}
							if(that.patient.faceImages!=null){
								that.faceImages=that.patient.faceImages.split(",");
							}
							this.doctor=res.data.doctor;
							this.department=res.data.department;
							this.hospital=res.data.hospital;
						}
					},
					err => {
					}
				);
				
			},
			getDictByKey(key){
				var data={key:key}
				getDictByKey(data).then(
					res => {
						if(res.code==200){
							if(key=="sys_inquiry_order_type"){
								this.orderTypeOptions=res.data;
							}
							if(key=="sys_inquiry_type"){
								this.inquiryTypeOptions=res.data;
							}
							if(key=="sys_inquiry_status"){
								this.orderStatusOptions=res.data;
							}
						}
					},
					err => {
					}
				);
				
			},
			navTo(url){
				uni.navigateTo({
					url: url
				})
			} 
		}
	}
</script>
<style lang="scss">
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.content{
		position: relative;
		.cont{
			position: relative;
			padding: 0rpx 20rpx 120rpx;
			z-index: 999;
			width: 100%;
			display: flex;
			flex-direction: column;
		}
		.doc-box{
			margin: 20rpx 0rpx 0rpx;
			padding: 0rpx 30rpx;
			background-color: #fff;
			border-radius: 20upx;
			.title{
				height: 80upx;
				line-height: 80upx;
				font-size: 30upx;
				color: #000;
				font-weight: bold;
				border-bottom: 2upx solid #eeeeee;
			}
			.doc-name-box{
				margin-top: 15rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.doc-name{
					font-size: 38rpx;
					font-weight: bold;
				}
				.doc-star{
					margin-left: 10rpx;
				}
				
				
			}
			.doc-dept-box{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: 15rpx;
				font-size: 28upx;
				font-family: PingFang SC;
				color: #2d2b36;
				 
			}
			.doc-his-box{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: 15rpx;
				font-size: 28upx;
				font-family: PingFang SC;
				color: #9a9a9c;
				 
			}
			.doc-spec-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.title{
						font-size: 28upx;
						font-family: PingFang SC;
						color: #9a9a9c;
					}
					.spec{
						margin-left: 10rpx;
						font-size: 28upx;
						font-family: PingFang SC;
						color: #9a9a9c;
					}
				}
				.right{
					.btn{
						font-size: 28upx;
						font-family: PingFang SC;
						color: #C39A58;
					}
				}
				
			}
		}
		 
		.other-info{
			margin-top: 20upx;
			background-color: #fff;
			border-radius: 20upx;
			padding: 0 30upx;
			.title{
				height: 80upx;
				line-height: 80upx;
				font-size: 30upx;
				color: #000;
				font-weight: bold;
				border-bottom: 2upx solid #eeeeee;
			}
			.item{
				min-height: 80upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&:last-child{
					border-bottom: none;
				}
				.left{
					flex: 1;
					display: flex;
					align-items: center;
					.label{
						min-width: 140rpx;
						font-size: 28upx;
						color: #000;
					}
					.text{
						font-size: 28upx;
						color: #1b1b1b;
					}
				}
				.status{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: bold;
				}
				.red{
					color: #db5053;
				}
				.green{
					color: #C39A58;
				}
				.gray{
					color: #9c9c9c;
				}
				.item-btn{
					max-width: 200rpx;
					padding: 0rpx 15rpx;
					height: 48upx;
					border-radius: 24upx;
					line-height: 48upx;
					font-size: 24upx;
					color: #000;
					border: 1upx solid #d8d8d8;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.btn-box{
		 	height: 100rpx;
		 	z-index: 9999;
		 	width: 100%;
		 	padding: 0rpx 30upx;
		 	position: fixed;
		 	bottom: 0;
		 	left: 0;
		 	box-sizing: border-box;
		 	background-color: #ffffff;
		 	display: flex;
		 	align-items: center;
		 	justify-content: flex-end;
		 	.btn{
				padding: 15rpx 30rpx;
				margin-left: 10rpx;
		 		text-align: center;
		 		font-size: 28upx;
		 		font-family: PingFang SC;
		 		color: #FFFFFF;
		 		background: #C39A58;
		 		border-radius: 45upx;
		 	}
		 }
	}
</style>