jinNiucourseMall_uniapp/pages/shopping/prescribe.vue

<template>
	<view class="content">
		<view class="fixed-top-box">
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="back-box" @click="back">
				<image src="https://kntobs.jnmyunl.com/shop/images/back_white.png" mode=""></image>
				<text class="title">填写处方信息</text>
				<text></text>
			</view>
		</view>
		<view class="inner">
			<view :style="{height: statusBarHeight}"></view>
			<!-- 步骤 -->
			<view class="steps-box">
				<view class="item active">填写信息</view>
				<image class="arrow" src="https://kntobs.jnmyunl.com/shop/images/arrow4.png" mode=""></image>
				<view class="item">医生开方</view>
				<image class="arrow" src="https://kntobs.jnmyunl.com/shop/images/arrow4.png" mode=""></image>
				<view class="item">支付订单</view>
				<image class="arrow" src="https://kntobs.jnmyunl.com/shop/images/arrow4.png" mode=""></image>
				<view class="item">厂家发货</view>
			</view>
			<!-- 提示 -->
			<view class="tip-box">
				<view class="top">
					<image src="https://kntobs.jnmyunl.com/shop/images/safe2.png" mode=""></image>
					<text class="text">依据国家规定、处方药需凭处方购买</text>
				</view>
				<view class="time-tip">填写问诊人信息、处方信息</view>
			</view>
			<view class="info-box">
				<!-- 选择问诊人 -->
				<view class="chose-people">
					<view class="title-box">
						<text class="title">选择问诊人</text>
						<view class="add-box" @click="addPeople()">
							<image src="https://kntobs.jnmyunl.com/shop/images/add26.png" mode=""></image>
							<text >添加</text>
						</view>
					</view>
					<view class="peop-list" v-if="patient.length>0">
						<view v-for="(item,index) in patient" :key="index" :class="patientId == item.patientId?'item active':'item'" @click="chosePatient(item)">
							<view class="name">{{ item.patientName }}</view>
							<view class="info">
								<text class="sex" v-if="item.gender==1">男</text>
								<text class="sex" v-if="item.gender==2">女</text>
								<text class="ege">{{utils.getAge(item.birthday)}}岁</text>
							</view>
							<!-- 选中的对号角标 -->
							<image v-if="patientId == item.patientId" class="active-img" src="https://kntobs.jnmyunl.com/shop/images/sel_right50.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="text-content">
					<view class="title">
						<text class="black">主诉</text>
						<text class="gray">(选填)</text>
					</view>
					<textarea class="textArea" maxlength="200" @input="chiefComplaintInput" placeholder="请填写主诉内容"></textarea>
				</view>
				<view class="text-content">
					<view class="title">
						<text class="black">既往病史</text>
						<text class="gray">(选填)</text>
					</view>
					<textarea class="textArea" maxlength="200" @input="historyIllnessInput" placeholder="请填写既往病史内容"></textarea>
				</view>
				<view class="img-content">
					<view class="title">
						<text class="black">复诊凭证</text>
						<text class="gray">(选填) {{imgList.length}}/4</text>
					</view>
					<view class="upload-img">
						<view class="img" v-for="(item,index) in imgList" :key="index"  >
							<image :src="item" mode="aspectFill"  @click="previewImage(index)"></image>
							<view class="del" @click="delImg(index)" >
								<image src="https://kntobs.jnmyunl.com/shop/images/del2.png"></image>
							</view>
						</view>
						<view class="chose-img" @tap="chooseImage(1)" v-if="imgList.length<4">
							<image src="https://kntobs.jnmyunl.com/shop/images/adds.png"></image>
						</view>
					</view>
					
					 
				</view>
				<!-- 疾病选择 -->
				<!-- <view class="disease-select">
					<view class="title">
						<text class="black">本次用药的确诊疾病</text>
						<text class="gray">(可多选)</text>
					</view>
					<view class="dise-list">
						<view 
							v-for="(item,index) in diseaseList" 
							:key="index" 
							:class="activeDise == index?'item active':'item'"
							@click="choseDise(index)"
						>
							{{ item }}
						</view>
					</view>
				</view> -->
				<!-- 是否使用过此药 -->
				<view class="check-box">
					<view class="left">
						<image src="https://kntobs.jnmyunl.com/shop/images/yao.png" mode=""></image>
						<text class="text">是否有过敏史</text>
					</view>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio value="1" :checked="isAllergic==true" style="margin-right: 16upx;" />
							<text class="my-radio-text">是</text>
						</label>
						<label>
							<radio value="0" :checked="isAllergic==false" style="margin-right: 16upx;" />
							<text class="my-radio-text">否</text>
						</label>
					</radio-group>
				</view>
				<view class="check-box">
					<view class="left">
						<image src="https://kntobs.jnmyunl.com/shop/images/yao.png" mode=""></image>
						<text class="text">肝功能是否异常</text>
					</view>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio value="1" :checked="isLiver==true" style="margin-right: 16upx;" />
							<text class="my-radio-text">是</text>
						</label>
						<label>
							<radio value="0" :checked="isLiver==false" style="margin-right: 16upx;" />
							<text class="my-radio-text">否</text>
						</label>
					</radio-group>
				</view>
				<view class="check-box">
					<view class="left">
						<image src="https://kntobs.jnmyunl.com/shop/images/yao.png" mode=""></image>
						<text class="text">肾功能是否异常</text>
					</view>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio value="1" :checked="isRenal==true" style="margin-right: 16upx;" />
							<text class="my-radio-text">是</text>
						</label>
						<label>
							<radio value="0" :checked="isRenal==false" style="margin-right: 16upx;" />
							<text class="my-radio-text">否</text>
						</label>
					</radio-group>
				</view>
				<view class="check-box">
					<view class="left">
						<image src="https://kntobs.jnmyunl.com/shop/images/yao.png" mode=""></image>
						<text class="text">是否是备孕/怀孕/哺乳期</text>
					</view>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio value="1" :checked="isLactation==true" style="margin-right: 16upx;" />
							<text class="my-radio-text">是</text>
						</label>
						<label>
							<radio value="0" :checked="isLactation==false" style="margin-right: 16upx;" />
							<text class="my-radio-text">否</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="submit()">去开处方</view>
		</view>
	</view>
</template>

<script>
	import {getStoreOrderById} from '@/api/storeOrder'
	import {getWeixinPrescribeTemps} from '@/api/common'
	import {doPrescribe} from '@/api/prescribe'
	import {getPatientList,delPatient} from '@/api/patient'
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				order:null,
				temps:[],
				imgList: [],  
				orderId:null,
				patient:[],
				patientId:null,
				pickPatient:null,
				// 疾病列表
				// diseaseList: ['消化不良','心血管','呼吸系统','感染病','皮肤病','口腔','妇科','耳鼻喉'],
				// 选中的疾病
				// activeDise: 0,
				isAllergic: false,
				isLiver: false,
				isRenal: false,
				isLactation: false,
				chiefComplaint:null,
				historyIllness:null
			}
		},
		onLoad(option) {
			this.orderId=option.orderId
			this.getPatientList();
			uni.$on('refreshPatient', () => {
				this.getPatientList()
			})
			this.getWeixinPrescribeTemps();
			this.getStoreOrderById();
		},
		onShow() {
			this.getPatientList();
		},
		computed: {
			...mapGetters(['logoimg']),
		},
		watch: {
		    logoimg: {
		      immediate: true,          // 页面一进入就检查一次
		      handler(val) {
				  return val
		      }
		    },
		},
		//发送给朋友
		onShareAppMessage(res) {
			if(this.utils.isLogin()){
				var user=JSON.parse(uni.getStorageSync('userInfo'))
				return {
					title: "填写处方信息",
					path: "/pages/shopping/prescribe?orderId="+this.orderId,
					imageUrl: this.logoimg //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
		},
		methods: {
			back(){
			  // uni.showToast({
			  // 	icon:'none',
			  // 	title: "请填写资料提交处方，否则将无法发货"
			  // });
			  uni.navigateBack();
			},
			getStoreOrderById:function(){
				var data={orderId:this.orderId}
				getStoreOrderById(data).then(
					res => {
						if(res.code==200){
							this.order=res.order
						}else{
							 
						}
					},
					rej => {}
				);
			},
			getWeixinPrescribeTemps:function(){
				getWeixinPrescribeTemps().then(
					res => {
						if(res.code==200){
							this.temps=res.temp
							console.log(this.temps)
						}else{
							 
						}
					},
					rej => {}
				);
			},
			chiefComplaintInput(e) {
				this.chiefComplaint = e.detail.value
			},
			historyIllnessInput(e) {
				this.historyIllness = e.detail.value
			},
			// 选择图片
			chooseImage(type) {
				var that=this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.uploadFile({
							url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								that.imgList.push(JSON.parse( res.data).url)
							}
						});
					}
				});
			},
			//图片预览
			previewImage(index){
				//预览图片
				uni.previewImage({
					urls: this.imgList,
					current: this.imgList[index]
				});
			},
			delImg(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(index, 1);
						}
					}
				})
			},
			submit(){
				var that=this;
				if(this.patientId==null){
					uni.showToast({
						icon:'none',
						title: "请选择患者"
					});
					return;
				}
				if(this.pickPatient.isAuth==0){
					uni.showToast({
						icon:'none',
						title: "该问诊人未实名认证"
					});
					return;
				}
				 
				uni.showLoading({
					title:"正在处理中"
				})
				var data={
					patientId:this.patientId,
					orderId:this.orderId,
					isAllergic:this.isAllergic,
					isLiver:this.isLiver,
					isRenal:this.isRenal,
					isLactation:this.isLactation,
					chiefComplaint:this.chiefComplaint,
					historyIllness:this.historyIllness,
					recordPic:this.imgList.toString()
				}
				 doPrescribe(data).then(
				 	res => {
				 		if(res.code==200){
							 uni.hideLoading()
				 			 uni.showToast({
				 			 	icon:'success',
				 			 	title:res.msg,
				 			 });
							 var order =res.order;
							 uni.requestSubscribeMessage({
							 	tmplIds: this.temps,
							 	success(res) {
									setTimeout(function(){
										if(order.paid!=1){
											uni.redirectTo({
												url: './paymentOrder?orderId='+that.order.id
											})
										}
										else{
											uni.navigateBack({  
												delta: 1
											});
											
										}
										
									},500);
							 	},
							 	fail(res) {
							 		setTimeout(function(){
										if(order.paid!=1){
											uni.redirectTo({
												url: './paymentOrder?orderId='+that.order.id
											})
										}
										else{
											uni.navigateBack({  
												delta: 1
											});
											
										}
							 			 
							 		},500);
							 	}
							 })
							 
				 			
				 		}else{
				 			uni.showToast({
								icon:'none',
				 				title: res.msg,
				 			});
				 		}
				 	},
				 	rej => {}
				 );
				
			},
			getPatientList(){
			 	uni.showLoading({
			 		title:"正在加载中"
			 	})
			 	getPatientList().then(
			 		res => {
			 			uni.hideLoading()
			 			if(res.code==200){
			 				this.patient=res.data;
			 			}else{
			 				uni.showToast({
			 					icon:'none',
			 					title: "请求失败",
			 				});
			 			}
			 		},
			 		rej => {}
			 	);
			},
			// 选中问诊人
			chosePatient(item) {
				this.patientId = item.patientId;
				this.pickPatient=item;
			},
			// 添加问诊人
			addPeople() {
				uni.navigateTo({
					url:"/pages_user/user/patient"
				})
			},
			// 疾病选择
			choseDise(index) {
				this.activeDise = index
			}
		}
	}
</script>

<style lang="scss">
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.fixed-top-box{
			width: 100%;
			background: linear-gradient(135deg, #66b2ef 0%, #2BC7B9 100%);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				image{
					width: 40upx;
					height: 40upx;
				}
				.title{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.inner{
			margin-top: 88rpx;
			.steps-box{
				height: 88upx;
				background: #FFFFFF;
				padding: 0 48upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					&.active{
						font-weight: bold;
						color: #2BC7B9;
					}
				}
				.arrow{
					width: 12upx;
					height: 22upx;
				}
			}
			.tip-box{
				box-sizing: border-box;
				height: 130upx;
				background: #FFF4E6;
				padding: 26upx 0 30upx 50upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.top{
					display: flex;
					align-items: center;
					image{
						width: 26upx;
						height: 31upx;
						margin-right: 10upx;
					}
					.text{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #EF8A07;
						line-height: 1;
					}
				}
				.time-tip{
					padding-left: 40upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 1;
				}
			}
			.info-box{
				padding: 20upx;
				.chose-people{
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 30upx;
					.title-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.title{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
						}
						.add-box{
							display: flex;
							align-items: center;
							image{
								width: 26upx;
								height: 26upx;
								margin-right: 11upx;
							}
							text{
								font-size: 28upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
							}
						}
					}
					.peop-list{
						display: flex;
						flex-wrap: wrap;
						margin-top: 30upx;
						.item{
							box-sizing: border-box;
							padding: 18upx 30upx;
							width: 31.28%;
							height: 110upx;
							background: #F7F7F7;
							border-radius: 16upx;
							margin: 0 20upx 10upx 0;
							border: 2upx solid #F7F7F7;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							&:nth-child(3n){
								margin-right: 0;
							}
							&.active{
								background: rgba(230, 250, 247, 0);
								border: 2upx solid #2BC7B9;
								position: relative;
							}
							.active-img{
								width: 50upx;
								height: 50upx;
								position: absolute;
								right: -2upx;
								bottom: -2upx;
							}
							.name{
								font-size: 30upx;
								line-height: 1;
								font-family: PingFang SC;
								font-weight: bold;
								color: #111111;
							}
							.info{
								display: flex;
								align-items: center;
								.sex,
								.ege{
									font-size: 26upx;
									font-family: PingFang SC;
									line-height: 1;
									font-weight: 500;
									color: #666666;
								}
								.ege{
									margin-left: 19upx;
								}
							}
						}
					}
				}
				.disease-select{
					box-sizing: border-box;
					min-height: 286upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 22upx;
					margin-top: 20upx;
					.title{
						display: flex;
						align-items: center;
						align-items: flex-end;
						.black{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
							margin-left: 10upx;
						}
						.gray{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999999;
							line-height: 1;
							margin-left: 10upx;
						}
					}
					.dise-list{
						display: flex;
						flex-wrap: wrap;
						margin-top: 26upx;
						.item{
							box-sizing: border-box;
							height: 64upx;
							line-height: 64upx;
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #2BC7B9;
							background: #F5FFFE;
							border: 1px solid #8AD5CE;
							padding: 0 20upx;
							border-radius: 32upx;
							margin: 0 20upx 20upx 0;
							&.active{
								background: #2BC7B9;
								border: 1px solid #2BC7B9;
								color: #FFFFFF;
							}
						}
					}
				}
				.text-content{
					box-sizing: border-box;
					min-height: 286upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 22upx;
					margin-top: 20upx;
					.title{
						display: flex;
						align-items: center;
						align-items: flex-end;
						.black{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
							margin-left: 10upx;
						}
						.gray{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999999;
							line-height: 1;
							margin-left: 10upx;
						}
					}
					.textArea{
						margin: 30rpx 0rpx 0rpx 0rpx;
						width: 100%;
					}
					 
					
					 
				}
				.img-content{
					box-sizing: border-box;
					min-height: 286upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 22upx;
					margin-top: 20upx;
					margin-bottom: 20upx;
					.title{
						display: flex;
						align-items: center;
						align-items: flex-end;
						.black{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
							margin-left: 10upx;
						}
						.gray{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999999;
							line-height: 1;
							margin-left: 10upx;
						}
					}
					.textArea{
						margin: 30rpx 0rpx 0rpx 0rpx;
						width: 100%;
					}
					.upload-img{
						margin: 30rpx 0rpx 0rpx 0rpx;
						width: 100%;
						display: flex;
						align-items: flex-start;
						.img{
							margin-right: 10rpx;
							width: 100rpx;
							height: 100rpx;
							position: relative;
							image{
								width: 100%;
								height: 100%;
							}
							.del{
								right:0rpx;
								top:0rpx;
								position: absolute;
								image{
									width: 30rpx;
									height:30rpx;
								}
							}
						}
						.chose-img{
							border-radius: 5rpx;
							border: 1px solid #eee;
							padding: 5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100rpx;
							height: 100rpx;
							image{
								width: 50rpx;
								height: 50rpx;
							}
							
						}
					}
					
					 
				}

				.check-box{
					height: 88upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 0 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							width: 21upx;
							height: 27upx;
							margin-right: 20upx;
						}
						.text{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}
					}
					.my-radio-text{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 30upx;
					}
				}
			}
		}
		.btn-box{
			height: 120upx;
			padding: 30upx;
			// background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				background: #2BC7B9;
				border-radius: 44upx;
			}
		}
	}
	
</style>