his_user_miniapp/pages_order/prescribeDetails.vue

<template>
	<view class="content">
		<view class="cont" v-if="prescribe!=null">
			<view class="other-info"  >
				<view class="title">御君方互联网医院处方笺</view>
				<view class="item">
					<view class="left">
						<text class="label">医生姓名：</text>
						<text class="text">{{doctor.doctorName}} </text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">患者姓名：</text>
						<text class="text">{{prescribe.patientName}} </text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">患者年龄：</text>
						<text class="text">{{prescribe.patientAge}}岁 </text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">患者性别：</text>
						<text class="text">{{prescribe.patientGender==1?"男":"女"}} </text>
					</view>
				</view>
				 
			</view>
			<view class="other-info "  >
				<view class="item">
					<view class="left">
						<text class="label">处方单号：</text>
						<text class="text">{{prescribe.prescribeCode}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">开方时间：</text>
						<text class="text">{{prescribe.createTime}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">医生诊断：</text>
						<view class="text">{{prescribe.diagnose}}</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">审核意见：</text>
						<text class="text" v-if="prescribe.status==2">{{prescribe.auditReason}}</text>
					</view>
				</view>
			</view>
			<view class="drug-cont"  >
				<view class="title">药品信息</view>
				<view class="drug-item" v-for="(item) in drugs">
					<view class="drug">
						<view class="left">
							<image :src="item.drugImgUrl==''?'/static/images/drug.svg':item.drugImgUrl"  ></image>
							<view class="name-cont">
								<view class="name-box">
									<!-- <view class="tag" v-if="item.drugType==1">西药</view>
									<view class="tag" v-if="item.drugType==2">中药</view> -->
									<view class="name">{{item.drugName}}</view>
								</view>
								<view class="spec">{{item.drugSpec}}</view>
								<view class="price">
									<view class="left">
										<!-- {{item.drugPrice}}元 -->
									</view>
									<view class="num" v-if="item.drugType==1">X{{item.drugNum}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="drug-use" v-if="item.drugType==1">
						<view class="name">用药频率:{{item.usageFrequencyUnit}}</view>
						<view class="name">单次用量:{{item.usagePerUseCount}}</view>
						<view class="name">用药方法:{{item.usageMethod}}</view>
						<view class="name">备注:{{item.remark}} </view>
					</view>
					
				</view>
			</view>
			<view class="other-info" v-if="prescribe.prescribeType==2" >
				<view class="title left">用药说明</view>
				<view class="item">
					<view class="left">
						<text class="label">用药数量：</text>
						<text class="text"> {{usage.counts}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">用药频率：</text>
						<text class="text"> {{usage.usageFrequencyUnit}}</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">单次用量：</text>
						<text class="text">{{usage.usagePerUseCount}} </text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">用药方法：</text>
						<text class="text">{{usage.usageMethod}} </text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="label">备注：</text>
						<text class="text">{{usage.remark}}  </text>
					</view>
				</view>
				
			</view>
			<view  v-if="prescribe.status==1" class="other-info">
				<view class="sign">
					出方医生签名
					<image :src="prescribe.doctorSignUrl"></image>
				</view>
				<view class="sign">
					处方医生签名
					<image :src="prescribe.prescribeDoctorSignUrl"></image>
				</view>
				<view class="sign">
					药师签名
					<image :src="prescribe.drugDoctorSignUrl"></image>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn pay" v-if="prescribe.storeOrderId!=null&&prescribe.storeOrderId>0&&prescribe.status==1"  @click="navTo('/pages_order/storeOrderDetail?orderId='+prescribe.storeOrderId)">药品订单</view>
			</view>
		</view>
	</view>
</template>
 
<script  >
	import {getPrescribeById} from '@/api/prescribe.js'
	export default {
		data() {
			return {
				doctor:null,
				drugs:[],
				prescribe:null,
				prescribeId:null,
				usage:{}
			}
		},
		 
		onLoad(options) {
			if(options.prescribeId!=null){
				this.prescribeId=options.prescribeId;
			}
			else if (options.hasOwnProperty('q') && options.q) {
				// 通过下面这步解码，可以拿到url的值
				const url = decodeURIComponent(options.q)
				// // 对url中携带的参数提取处理
				const obj = this.$urlToObj(url)
				this.prescribeId=obj.prescribeId;
			}
		},
		onShow() {
			this.getPrescribeById();
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url: url
				})
			},
			copyOrderSn() {
				uni.setClipboardData({
					data: this.order.orderSn,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				})
			},
			getPrescribeById(){
				var data={prescribeId:this.prescribeId}
				getPrescribeById(data).then(
					res => {
						if(res.code==200){
							this.prescribe=res.data.prescribe;
							this.drugs=res.data.drugs;
							this.doctor=res.data.doctor;
							this.usage=JSON.parse(this.prescribe.usageJson)
							
						}
					},
					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;
		}
		 
		 
		.other-info{
			margin-top: 20upx;
			background-color: #fff;
			border-radius: 20upx;
			padding: 0 30upx;
			.title{
				text-align: center;
				height: 80upx;
				line-height: 80upx;
				font-size: 32upx;
				color: #000;
				font-weight: bold;
				
			}
			.left{
				text-align: left;
			}
			.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;
					}
				}
				
			}
			.sign{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin: 15rpx 0rpx;
				color: #9B9B9B;
				font-size: 24rpx;
				image{
					margin-left: 20rpx;
					width: 240rpx;
					height: 100rpx;
				}
			}
		}
		.drug-cont{
			margin-top: 20upx;
			background-color: #fff;
			border-radius: 20upx;
			padding: 0 30upx 30rpx;
			.title{
				height: 80upx;
				line-height: 80upx;
				font-size: 30upx;
				color: #000;
				font-weight: bold;
				border-bottom: 1upx solid #eeeeee;
				margin-bottom: 10rpx;
			}
			.drug-item{
				padding: 15rpx;
				background-color: #f8f8f8;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				margin-bottom: 10rpx;
				&:last-child{
					margin-bottom: 0rpx;
				}
				.drug{
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					.left{
						width:100%;
						display: flex;
						align-items: flex-start;
						justify-content: flex-start;
						image{
							border-radius: 5rpx;
							width:100rpx;
							height:100rpx;
						}
						.name-cont{
							width: calc(100% - 110rpx);
							margin-left: 10rpx;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: space-between;
							.name-box{
								width: 100%;
								display: flex;
								align-items: flex-start;
								justify-content: flex-start;
								.tag{
									width: 80rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: 5rpx;
									font-size: 24rpx;
									border: 1rpx solid #C39A58;
									color: #C39A58;
									background-color: #f6fefb;
								}
								.name{
									width: calc(100% - 85rpx );
									margin-left: 5rpx;
									font-size: 30rpx;
									color: #111;
								}
								
							}
							.spec{
								font-size: 24rpx;
								color: #bfbfbf;
							}
							.price{
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;
								.left{
									font-size: 24rpx;
									color: red;
								}
								.num{
									font-size: 26rpx;
									color: #111;
								}
							}
						}
					}
				
				}
				.drug-use{
					margin: 10rpx 0rpx;
					.name{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #bfbfbf;
					}
				}
				.btns{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.btn{
						margin-left: 10rpx;
						border-radius: 30rpx;
						border: 1rpx solid #C39A58;
						color: #C39A58;
						font-size: 26rpx;
						padding: 5rpx 15rpx;
					}
					.red{
						border: 1rpx solid red;
						color: red;
					}
					.green{
						border: 1rpx solid #C39A58;
						color: #C39A58;
					}
				}
				 
			}
		}
		.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;
		 	}
			.red{
				border: 1rpx solid #db5053;
				background: #db5053;
				color: #FFFFFF;
			}
		}
	}
</style>