mabao/pages/doctor_related/info_write.vue

<template>
	<view class="main">
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view class="cu-avatar round lg" :style="'background-image:url('+doctor.avatar+');'"></view>
				<view class="content">
					<view class="text-grey">{{doctor.name}}</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut">
							{{doctor.office.name}} {{doctor.qualification.name}}
						</text>
					</view>
				</view>
				<view class="action">

				</view>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item arrow" v-if="type==1||type==2||type==3" @click="openhuanzhe">
				<view class="content">
					<text class="text-grey">{{type==3?'预约患者':'咨询患者'}}</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{value}}</text>
				</view>
			</view>
			<view class="cu-item arrow" v-if="type==1" @click="openphone">
				<view class="content">
					<text class="text-grey">接听号码</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{phonenum}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="type==1">
				<view class="content">
					<text class="text-grey">咨询时间</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{doctor.phone_minutes}}分钟</text>
				</view>
			</view>
			<view class="cu-item" v-if="type==1||type==2">
				<view class="content">
					<text class="text-grey">咨询费用</text>
				</view>
				<view class="action">
					<text class="text-red text-sm">￥{{type==1?doctor.phone_price/100:type==2?doctor.chat_price/100:doctor.appoint_price/100}}元</text>
				</view>
			</view>
			<view class="cu-item" v-if="type==3">
				<view class="content">
					<text class="text-grey">门诊医院</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{hospital}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="type==3">
				<view class="content">
					<text class="text-grey">预约时间</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{time}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="type==3">
				<view class="content">
					<text class="text-grey">身份证</text>
				</view>
				<view class="action">
					<input type="text" v-model="idcrad" placeholder="请输入身份证号码" placeholder-style="text-align:right" />
				</view>
			</view>
			<view class="cu-item" v-if="type==2">
				<view class="content">
					<text class="text-grey">症状描述</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">查看范例</text>
				</view>
			</view>
			<textarea v-if="type==2" v-model="zhengzhuang" value="" class="textareasty" placeholder="我有病,我还病得不轻" />
			</view>
			<view class="" v-if="type==2">
				<view class="cu-bar bg-white margin-top">
					<view class="action text-lg text-black text-bold">
						病情照片
					</view>
					<view class="action">
						{{imgList.length}}/4
					</view>
				</view>
				<view class="bg-white padding-sm text-gray">
					请上传病例照片，若是皮肤或外伤问题，请建议对准患处拍摄清晰照片（照片仅自己和医生可见）
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" :data-url="imgList[index]">
							<image :src='imgList[index]' mode='aspectFill'></image>
							<view class="cu-tag bg-red" @click="DelImg" :data-index="index">
								<text class="cuIcon-close"></text>
							</view>
						</view>
						<view class="solids" @click="ChooseImage" v-if="imgList.length<4">
							<text class="cuIcon-cameraadd"></text>
						</view>
					</view>
				</view>
			</view>
		<view class="cu-bar bg-white tabbar" style="position: fixed;bottom: 0;width: 100%;">
			<view class="submit" style="background-color: #0B73B9;color: white;" @click="gotopay">
				立即咨询
			</view>
		</view>

		<!-- 选择就诊人 -->
		<!-- model控制开关 mode控制显示方向-->
		<u-popup v-model="showpeople" mode="bottom" border-radius="14" length="50%">
			<view class="popup_title">
				<view class="popup_title_text">选择就诊人</view>
			</view>
			<scroll-view style="height: 70%;" scroll-y="true">
				<view class="popup_list" v-for="(item, index) in patientList" :key="index" :data-index="index" @click="xuanzehuanzhe(item)">
					<view class="popup_list_title">
						<view class="title">{{item.name}}</view>
						<view class="body">
							{{item.sex==1?'男':'女'}}
						</view>
					</view>
					<view class="popup_list_button flex align-center">
						<u-radio-group v-model="value">
							<u-radio @change="peopleRadioChange" :key="index" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</scroll-view>
			<u-gap height="10" bg-color="#f9f9f9"></u-gap>
			<view class="popup_button">
				<image style="width: 32rpx;height: 32rpx;margin-right: 15rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/addjiu.png"
				 mode=""></image>
				<view class="" @click="addPeople">
					添加就诊人档案
				</view>
			</view>
		</u-popup>

		<!-- 选择手机号 -->
		<u-popup v-model="showphone" mode="bottom" border-radius="14" length="50%">
			<view class="popup_title">
				<view class="popup_title_text">选择接听号码</view>
			</view>
			<scroll-view style="height: 70%;" scroll-y="true">
				<view class="phone" v-for="(item, index) in phoneList">
					<view class="list" @click="xuanzephone(item)">
						<view class="title">{{item.name}}</view>
						<view class="phone">{{item.num}}</view>
						<view class="button">
							<u-radio-group v-model="phoneValue">
								<u-radio @change="phoneRadioChange" :key="index" :name="item.name" :disabled="item.disabled">
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<view style="padding: 0 50rpx;">
					<input class="padding-lr-sm" v-model="phonedata" style="border: 2rpx solid #efefef; height:90rpx;" v-if="phoneValue==showinput"
					 type="number" placeholder="请输入手机号" />
				</view>
			</scroll-view>
			<u-gap height="10" bg-color="#f9f9f9"></u-gap>
			<view style="padding: 0 10%; height: 100rpx;  ">
				<u-button type="primary" shape="circle" @click="confirmphone">确认</u-button>
			</view>
		</u-popup>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import store from '@/store'
	export default {
		onLoad(options) {
			this.phoneList[0].num = store.getters['getusers'].phone
			this.phonenum = this.phoneList[0].num
			this.doctor = JSON.parse(options.doctor)
			this.type = options.type
			this.time=options.time
			this.hospital = options.hospital
			this.jigouid = options.jigou
			this.year =  options.year
			this.yearid = options.yearid
			if(options.type==1){
				this.price = this.doctor.phone_price
			}else if(options.type==2){
				this.price = this.doctor.chat_price
			}else{
				this.price = this.doctor.appoint_price
			}
		},
		onShow() {
			this.getarchives()
		},
		data() {
			return {
				/* 就诊人 */
				showpeople: false,
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				/* 接听号码 */
				showphone: false,
				phoneList: [{
						name: '默认手机号',
						id: '0',
						num: '',
						disabled: false
					},
					{
						name: '其他手机号',
						id: '1',
						num: '',
						disabled: false
					}
				],
				idcrad:"",//身份证
				zhengzhuang:"", //症状
				phoneValue: '',
				showinput: '其他手机号',
				phonenum: "",
				phonedata: "",
				patientList: [],
				doctor: {},
				imgList:[],
				type:"",//咨询状态
				time:"",
				huanzheID:"",
				price:"",
				hospital:"",
				jigouid:"",
				year:"",
				yearid:""
			}
		},
		methods: {
			//点击咨询患者
			openhuanzhe() {
				this.showpeople = true
			},
			//点击联系号码
			openphone() {
				this.showphone = true
			},
			// 选中某个单选框时，由radio时触发
			peopleRadioChange(e) {
				console.log(e);
			},
			phoneRadioChange(e) {
				console.log(e);
			},
			xuanzephone(item){
				this.phoneValue=item.name
				this.phonenum = item.num
			},
			xuanzehuanzhe(item){
				this.huanzheID = item.id
				this.value=item.name
				this.showpeople=false
			},
			//添加就诊人
			addPeople(e) {
				uni.navigateTo({
					url:"../archives/add_archives"
				})
			},
			confirmphone() {
				if(this.phoneValue=="其他手机号"){
					this.phonenum = this.phonedata
				}else{
					this.phonedata = ""
				}
				
				this.showphone = !this.showphone
			},
			getarchives: async function() {
				let res = await this.$request.post("/api/v1/patient/patientList")
				if (res.status == 0) {
					this.patientList = res.data.data
				}
			},
			gotopay:async function() {
				if(this.type==1){
					if(this.value!=""&&this.phonenum!=""&&this.$util.isPhoneNumber(this.phonenum)){
						let obj={
							doctorname:this.doctor.name,
							product_type:this.type,
							docter_id:this.doctor.id,
							patient_id:this.huanzheID,
							total_amount:this.price/100,
							phone:this.phonenum,
							phone_minutes:this.doctor.phone_minutes,
							payment_type:2
						}
						uni.navigateTo({
							url:"../order/payment?data="+JSON.stringify(obj)
						})
					}else{
						uni.showToast({
							title:"请选择完整",
							icon:"none"
						})
					}
				}else if(this.type==2){
					if(this.value!=""&&this.zhengzhuang!=""&&this.imgList.length!=0){
						let obj={
							doctorname:this.doctor.name,
							product_type:this.type,
							docter_id:this.doctor.id,
							patient_id:this.huanzheID,
							total_amount:this.price/100,
							symptoms:this.zhengzhuang,
							medical_imgs:this.imgList,
							payment_type:2
						}
						uni.navigateTo({
							url:"../order/payment?data="+JSON.stringify(obj)
						})
					}else{
						uni.showToast({
							title:"请选择完整",
							icon:"none"
						})
					}
				}else if(this.type==3){
					if(this.value!=""&&this.idcrad!=""){
						let obj={
							doctorname:this.doctor.name,
							product_type:this.type,
							docter_id:this.doctor.id,
							patient_id:this.huanzheID,
							total_amount:this.price/100,
							organization_id:this.jigouid,
							schedule_date:this.year,
							time_period_id:this.yearid,
							payment_type:2
						}
						uni.navigateTo({
							url:"../order/payment?data="+JSON.stringify(obj)
						})
					}else{
						uni.showToast({
							title:"请选择完整",
							icon:"none"
						})
					}
				}
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
			
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.imgList = this.imgList
						}
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.popup_title {
		height: 15%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #f9f9f9;
	}
	.textareasty{
		background-color: white;
		border: 1px solid #efefef;
		border-radius: 16rpx;
		padding: 15rpx;
		margin: 15rpx auto;
	}

	.popup_title_text {
		width: auto;
		height: auto;
		font-size: 34rpx;
		font-weight: 540;
	}

	.popup_list {
		display: flex;
		height: 10vh;
		width: auto;
		border-bottom: 1rpx solid #f9f9f9;
	}

	.popup_list_title {
		height: 100%;
		width: 90%;
		display: inline-block;
		padding: 0 0 0 30rpx;

		.title {
			height: 50%;
			width: auto;
			font-size: 32rpx;
			font-weight: 500;
			padding: 20rpx 0 0 0;
		}

		.body {
			height: 50%;
			color: #a1a1a1;
			height: auto;
			width: auto;
			font-size: 30rpx;
			padding: 10rpx 0 0 0;
		}
	}

	.popup_button {
		height: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		view {
			color: #0b73ba;
			font-weight: 500;
		}
	}

	/**选择号码的样式和选择患者不同
	需要更改样式*/
	.phone {
		height: 20%;
		width: 100%;

		.list {
			height: 100%;
			width: 100%;
			display: flex;
			padding: 0 10rpx 0 30rpx;


			.title {
				height: 100%;
				width: 65%;
				font-size: 32rpx;
				color: #7d7d7d;
				display: flex;

				align-items: center;
			}

			.phone {
				height: 100%;
				width: 30%;
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.button {
				height: 100%;
				width: 5%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}
	}
</style>