mz/pages/userinfo/doctor.vue

<template>
	<view class="content">
		<view class="content_box">
			<view class="row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" v-model="name"  placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="row b-b" @tap="handleTap1('picker2')">
				<text class="tit">性别</text>
				<input class="input" type="text"  disabled="disabled" v-model="gender" placeholder="请选择性别" placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker2"
			  mode="selector"
			  :list="genderList"
			  @change="handleChange1"
			  @confirm="handleConfirm1"
			  @cancel="handleCancel1">
			</lb-picker>
			<view class="row b-b">
				<text class="tit">联系方式</text>
				<input class="input" type="text"  v-model="mobile" placeholder="请输入联系方式" placeholder-class="placeholder" />
			</view>
			<view class="row b-b" @tap="showPicker('region')">
				<text class="tit">省市区</text>
				<input class="input" disabled="disabled" v-model="addr" placeholder="请选择省市区"></input>
			</view>
			<w-picker mode="region"  :value="defaultRegion" default-type="value"  @confirm="onConfirm($event,'region')" @cancel="handleCancel" ref="region" ></w-picker>
		</view>
		<view class="content_box">
			<view class="row b-b" @tap="Toshow">
				<text class="tit">医院名称</text>
				<input class="input" type="text" disabled="disabled" v-model="hospital" placeholder="请选择医院名称" placeholder-class="placeholder" />
			</view>
			<zhilin-picker
				v-model="show"
				:title="title"
				:data="list"
				:initSelected="initSelected"
				:showSearch="true"
				@change="onChange"
				@searchInput='onSearchInput'
				@confirm="onConfirm1"
			/>
			<view class="row b-b" @tap="handleTap2('picker3')">
				<text class="tit">职称</text>
				<input class="input" type="text" disabled="disabled"  v-model="doctor_level" placeholder="请选择职称" placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker3"
			  mode="selector"
			  :list="levelList"
			  @change="handleChange2"
			  @confirm="handleConfirm2"
			  @cancel="handleCancel">
			</lb-picker>
			<view class="row b-b" @tap="handleTap2('picker4')">
				<text class="tit">专业</text>
				<input class="input" type="text" disabled="disabled"  v-model="zyname" placeholder="请选择专业" placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker4"
			  mode="selector"
			  :list="zyList"
			  @change="handleChange4"
			  @confirm="handleConfirm4"
			  @cancel="handleCancel">
			</lb-picker>
  		</view>
		<view class="content_box">
			<view class="row b-b">
				<view class="row-1">
					<checkbox-group @change="checkboxChange1">
						<label>
							<checkbox value="isConsult" color="#FFCC33" style="transform:scale(0.7)" checked="ischeckConsult"/>
						</label>
					</checkbox-group>
					<text class="tit">咨询/次</text>
					<input class="input" @input="inputnum(price)" type="text"  v-model="price"  placeholder="请输入咨询费用" placeholder-class="placeholder" />
					<text class="titi">元</text>
				</view>
				<view class="row-2" v-if="ischeckConsult">
					<text >仅提供咨询，10次图文交互后结束</text>
				</view>
				
			</view>
			<view class="row b-b">
				<view class="row-1">
					<checkbox-group @change="checkboxChange2">
						<label>
							<checkbox value="isOrder" color="#FFCC33" style="transform:scale(0.7)" checked="ischeckOrder"/>
						</label>
					</checkbox-group>
					<text class="tit">预约/次</text>
					<input class="input" @input="inputnum1(private_price)" type="text"  v-model="private_price" placeholder="请输入出诊费用" placeholder-class="placeholder" />
					<text class="titi">元</text>
				</view>
				<view class="row-2" v-if="ischeckOrder">
					<text >提供3个月内无限次咨询，及技术服务1次</text>
				</view>
			</view>
			<view class="row b-b">
				<view class="row-1">
					<checkbox-group @change="checkboxChange3">
						<label>
							<checkbox value="isMore" color="#FFCC33" style="transform:scale(0.7)" checked="ischeckMore"/>
						</label>
					</checkbox-group>
					<text class="tit">外出服务/次</text>
					<input class="input" @input='inputnum2(out_price)' type="text"  v-model="out_price" placeholder="请输入私人医生费用" placeholder-class="placeholder" />
					<text class="titi">元</text>
				</view>
				<view class="row-2" v-if="ischeckMore">
					<text >外出其他单位提供咨询指导及技术服务1次</text>
				</view>
			</view>
		</view>
		<!-- <view class="content_box">
			<view class="checkbox">
				 <view class="examine_name">工作日选择</view>
				 <checkbox-group @change="checkboxChange" class="checklist flex_item">
					<label class="uni-list-cell uni-list-cell-pd list-item" v-for="item in items" :key="item.value">
						<view class="tip">
							<checkbox :value="item.value" :checked="item.checked" />
						</view>
						<view class="tip top-bottom">{{item.name}}</view>
					</label>
				 </checkbox-group>
			</view>
		</view> -->
		<view class="content_box">
			<view class="examine_list"> 
				<view class="examine_name">个人简介</view>
				<view class="textarea-box">
					<textarea  class="textarea" v-model="introduction" maxlength="-1"  placeholder-style="color:#999999" placeholder="如：学历、毕业学校、工作经验、学术兼职、荣誉称号" 
					@blur="bindTextAreaBlur" auto-height />
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="examine_list"> 
				<view class="examine_name">擅长领域</view>
				<view class="textarea-box">
					<textarea  class="textarea" v-model="good_at" maxlength="-1"  placeholder-style="color:#999999" placeholder="如：擅长什么手术、擅长什么疾病的治疗、对某某领域有研究、擅长什么操作。" 
					@blur="bindTextAreaBlur1" auto-height />
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="">
				<view class="examine_name">头像(一寸照)</view>
				<view class="examine_img">
					<image class="image1" :src="photo" @click="scImg" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="add-btn" @click="confirm">提交</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import wPicker from "@/components/w-picker/w-picker.vue"
import LbPicker from '@/components/lb-picker/index.vue'
import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
import { upload,getHospitalList,setDoctorExt } from '@/api/index.js';
import { getUserInfo } from '@/api/login.js';
import { getDocterTypeList } from '@/api/doctor.js'
export default {
	components: {
		uniList,
		uniListItem,
		wPicker,
		LbPicker,
		zhilinPicker
	},
	data() {
		return {
			isConsult:'',
			isOrder:'',
			isMore:'',
			ischeckConsult: true,
			ischeckOrder:true,
			ischeckMore:true,
			region:'',
			defaultRegion:[],
			defaultRegion1:[],
			options:[],
			checked:'',
			ext_info:[],//病人信息
			name:'',//姓名
			gender:'',//性别
			gender_id:'',//性别id
			genderList: [{
				id:2,
				name:'女'
			},{
				id:1,
				name:'男'
			},{
				id:0,
				name:'其他'
			}],//医院列表
			mobile:'',//联系方式
			addr:'',//省市区
			code:'',//省市区行政编码
			province:'',
			province_id:'',
			city:'',
			city_id:'',
			district:'',
			district_id:'',
			list: [],//医院列表
			show: false,
			initSelected: [],
			title: '选择医院',
			hospital:'',//医院
			hospital_id:'',//医院id
			// 1医师2主治医师3副主任医师4主任医师
			levelList:[{
				id:1,
				name:'初级'
			},{
				id:2,
				name:'中级'
			},{
				id:3,
				name:'副高级'
			},{
				id:4,
				name:'正高级'
			}],
			doctor_level:'',//职称
			level_id:'',////职称id
			introduction:'',//个人简介
			good_at:'',//擅长领域
			price:'',//普通费用
			out_price:'',//出诊费用
			private_price:'',//私人费用
			work_date:{},//	工作日
			 items: [{
					value: '1',
					name: '星期一'
				},
				{
					value: '2',
					name: '星期二',
				},
				{
					value: '3',
					name: '星期三'
				},
				{
					value: '4',
					name: '星期四'
				},
				{
					value: '5',
					name: '星期五'
				},
				{
					value: '6',
					name: '星期六'
				},
				{
					value: '7',
					name: '星期日'
				}
			],
			photo:'',
			searchVal:'',
			zyList: [],
			zyname: '',
			zyid: ''
		};
	},
	watch:{
		searchVal(){
			this.ListDate();
		},
		price(newValue, oldValue) {
			
		},
		out_price(newValue, oldValue) {
			
		},
		private_price(newValue, oldValue) {
			
		},
	},
	onShow() {
		let obj = this;
		obj.ext_info = obj.userInfo.ext_info;
		this.getDocterTypeList()
		console.log(obj.ext_info,88)
		obj.addr = obj.ext_info.province+ obj.ext_info.city + obj.ext_info.district;
		obj.name = obj.ext_info.name;
		obj.mobile = obj.ext_info.mobile;
		if(obj.ext_info.gender == 1){
			obj.gender = '男'
		}
		if(obj.ext_info.gender == 2){
			obj.gender = '女'
		}
		if(obj.ext_info.gender == 0){
			obj.gender = '其他'
		}
		obj.province = obj.ext_info.province;
		obj.city = obj.ext_info.city;
		obj.district = obj.ext_info.district;
		obj.province_id = obj.ext_info.province_id;
		obj.city_id = obj.ext_info.city_id;
		obj.district_id = obj.ext_info.district_id;
		obj.ListDate();
		obj.hospital = obj.ext_info.hospital_name;
		obj.hospital_id = obj.ext_info.hospital;
		if(obj.ext_info.doctor_level == 1){
			obj.doctor_level = '初级'
		}
		if(obj.ext_info.doctor_level == 2){
			obj.doctor_level = '中级'
		}
		if(obj.ext_info.doctor_level == 3){
			obj.doctor_level = '副高级'
		}
		if(obj.ext_info.doctor_level == 4){
			obj.doctor_level = '正高级'
		}
		obj.level_id = obj.ext_info.doctor_level;
		obj.gender_id = obj.ext_info.gender;
		obj.introduction = obj.ext_info.introduction;
		obj.good_at = obj.ext_info.good_at;
		obj.photo = obj.ext_info.photo;
		obj.price = obj.ext_info.price;
		obj.out_price = obj.ext_info.out_price;
		obj.private_price = obj.ext_info.private_price;
		//渲染工作日数据
		let values = obj.ext_info.work_date;
		obj.work_date = values;
		let items = obj.items;
		for (let i = 0, lenI = items.length; i < lenI; ++i) {
			let item = items[i]
			if(values.includes(item.value)){
				obj.$set(item,'checked',true)
			}else{
				obj.$set(item,'checked',false)
			}
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapMutations(['setUserInfo']),
		getDocterTypeList() {
			getDocterTypeList().then(res => {
				console.log(res)
				this.zyList = res.data.data.map(item => {
					
					item.name = item.text
					if(item.id == this.ext_info.type_id) {
						this.zyname = item.text
						this.zyid = item.id
					}
					return item
				})
				console.log(this.ext_info.type_id,'this.zyList')
				
			})
		},
		handleConfirm4(item) {
			let obj = this;
			obj.zyname = item.item.name;
			obj.zyid = item.item.id;
			console.log(obj.zyname,obj.zyid)
		},
		handleChange4() {
			
		},
		inputnum(value){
			let obj = this;
			console.log(value,11)
			let val = value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
			let num = 0;
			val = value.replace(/\./g,($1,index) => {
				if(num==0){
					num++; 
					return  $1
				}else{
					return ''
				}
			}); //清除"数字"和"."以外的字符
			const  index = val.indexOf('.');
			val = val.substring(0,index+3);
			this.$nextTick(function(){
				setTimeout((e) => {
					obj.price = val;
				},5)
			})
		},
		// 11111
		checkboxChange1(e){
			let obj = this
			console.log('咨询/次',e)
			if (e.detail.value == ''){
				obj.ischeckConsult = false,
				obj.isConsult = -1
			} else {
				obj.isConsult =e.detail.value[0]
				obj.ischeckConsult = true
				console.log('obj.ischeckConsult：',obj.ischeckConsult)
			}
		},
		checkboxChange2(e){
			let obj = this
			if (e.detail.value == ''){
				obj.ischeckOrder = false
				obj.isOrder = -1

			} else {
				obj.isOrder =e.detail.value[0]
				obj.ischeckOrder = true
			}
		},
		checkboxChange3(e){
			let obj = this
			if (e.detail.value == ''){
				obj.ischeckMore = false
				obj.isMore = -1
			} else {
				obj.isMore =e.detail.value[0]
				obj.ischeckMore = true
			}
		},
		inputnum1(value){
			let obj = this;
			console.log(value,11)
			let val = value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
			let num = 0;
			val = value.replace(/\./g,($1,index) => {
				if(num==0){
					num++; 
					return  $1
				}else{
					return ''
				}
			}); //清除"数字"和"."以外的字符
			const  index = val.indexOf('.');
			val = val.substring(0,index+3);
			this.$nextTick(function(){
				setTimeout((e) => {
					obj.private_price = val;
				},5)
			})
		},
		inputnum2(value){
			let obj = this;
			console.log(value,11)
			let val = value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
			let num = 0;
			val = value.replace(/\./g,($1,index) => {
				if(num==0){
					num++; 
					return  $1
				}else{
					return ''
				}
			}); //清除"数字"和"."以外的字符
			const  index = val.indexOf('.');
			val = val.substring(0,index+3);
			this.$nextTick(function(){
				setTimeout((e) => {
					obj.out_price = val;
				},5)
			})
		},
		//省市区弹窗
		showPicker(type){
			this.$refs[type].show();
		},
		//取消弹窗
		handleCancel(){
			
		},
		//工作日选择
		checkboxChange(e) {
			let obj = this;
			let items = this.items,
				values = e.detail.value;
				console.log(values)
			for (let i = 0, lenI = items.length; i < lenI; ++i) {
				let item = items[i]
				if(values.includes(item.value)){
					this.$set(item,'checked',true)
				}else{
					this.$set(item,'checked',false)
				}
			}
			this.work_date = values.join(',');
			console.log(this.work_date)
		},
		//省市区选择确定
		onConfirm(res,type){
			let obj = this;
			obj.result=res;
			obj.addr = res.result;
			if(res.name){
				obj.province = res.name[0];
				obj.city = res.name[1];
				obj.district = res.name[2];
			}else{
				obj.province = '北京市';
				obj.city = '北京市';
				obj.district = '东城区';
			}
			obj.province_id = res.value[0];
			obj.city_id = res.value[1];
			obj.district_id = res.value[2];
			obj.hospital = '';//重置医院
			obj.ListDate();
		},
		//医院
		Toshow(){
			this.show = true;
		},
		onChange(val){
			let obj = this;
			console.log(val,'onChange')
			let arr = val.split(',');
			obj.hospital = arr[1];
			obj.hospital_id = arr[0];
			obj.city = arr[2];
			obj.city_id = arr[3];
			obj.district = arr[4];
			obj.district_id = arr[5];
			obj.province = arr[6];
			obj.province_id = arr[7];
			obj.addr = obj.province + obj.city + obj.district;
			console.log(obj.hospital,obj.hospital_id)
			console.log(obj.city,obj.city_id)
			console.log(obj.district,obj.district_id)
			console.log(obj.province,obj.province_id)
		},
		onConfirm1(val){
		},
		onSearchInput(val){
			this.searchVal = val;
		},
		ListDate(){
			let obj = this;
			let data = '';
			// console.log(obj.searchVal)
			if(!obj.searchVal){
				data={
					keyword:'',
					province_id:obj.province_id,
					city_id:obj.city_id,
					district_id:obj.district_id,
					sort:'id desc',
					page:1,
					limit:1500,
				}
			}else{
				data={
					keyword:obj.searchVal,
					sort:'id desc',
					page:1,
					limit:1500,
				}
			}
			getHospitalList(data).then(e => {
				obj.list = e.data.list;
			}).catch((e) => {
				console.log(e)
			});
		},
		//上传图片
		scImg() {
			let obj = this;
			upload({
				file: ''
			}).then(e => {
				obj.photo = e[0].url;
			}).catch((e) => {
				
			});
		},
		//文本输入框
		 bindTextAreaBlur: function (e) {
			 this.introduction = e.detail.value
		},
		bindTextAreaBlur1: function (e) {
			 this.good_at = e.detail.value
		},
		//提交
		confirm() {
			let obj = this;
			let price1 = obj.price;
			let price2 = obj.out_price;
			let price3 = obj.private_price;
			if ( obj.isConsult == -1 || obj.isConsult == ''){
				obj.price1 = -1
			}
			if ( obj.isOrder == -1 || obj.isOrder == ''){
				obj.price2 = -1
			}
			if ( obj.isMore == -1 || obj.isMore == ''){
				obj.price3 = -1
			}
			setDoctorExt({	
				name:obj.name,
				mobile:obj.mobile,
				province:obj.province,
				province_id:obj.province_id,
				city:obj.city,
				city_id:obj.city_id,
				district:obj.district,
				district_id:obj.district_id,
				hospital:obj.hospital_id,
				gender:obj.gender_id,
				doctor_level:obj.level_id,
				introduction:obj.introduction,
				good_at:obj.good_at,
				photo:obj.photo,
				price:price1,
				out_price:price2,
				private_price:price3,
				work_date:obj.work_date,
				type: obj.zyid
			}).then(function(e) {
				obj.GetUser();
				obj.$api.msg(e.msg);
				setTimeout(function() {
					uni.switchTab({
						url:'/pages/user/user'
					})
				  }, 500);
			}).catch(e => {
					console.log(e)
				});
		},
		//选择身份后更新用户信息
		GetUser() {
			let obj = this;
			getUserInfo({})
				.then(function(e) {
					obj.setUserInfo(e.data);
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		//性别选择
		handleTap1(name) {
			this.$refs[name].show()
		},
		//性别选择
		handleChange1 (item) {
		},
		//性别选择
		handleConfirm1 (item) {
			let obj = this;
			obj.gender = item.item.name;
			obj.gender_id = item.item.id;
		},
		//职称选择
		handleTap2(name) {
			this.$refs[name].show()
		},
		//职称选择
		handleChange2(item) {
		},
		//职称选择
		handleConfirm2 (item) {
			let obj = this;
			obj.doctor_level = item.item.name;
			obj.level_id = item.item.id;
			console.log(obj.doctor_level,obj.level_id)
		},
		// toagreement(){
		// 	uni.navigateTo({
		// 		url: '/pages/public/agreement'
		// 	});
		// },
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	min-height: 100%;
	.content{
		min-height: 100%;
		// padding-bottom: 120rpx;
	}
}
.content_box {
	background-color: #ffffff;
	padding: 0rpx 25rpx;
	width: 92%;
	margin: 25rpx auto;
	border-radius: 15rpx;
	.examine_list{
		width: 100%;
		border-bottom: 2rpx solid #f0f0f0;
		.textarea-box{
			width: 95%;
			margin: 25rpx auto;
			.textarea{
				width: 100%;
				font-size: 28rpx;
				min-height: 150rpx;
			}
		}
	}
}
.checkbox{
	padding: 25rpx 0rpx;
}
.checklist{
	flex-wrap: wrap;
}
.list-item{
	width: 150rpx;
	text-align: center;
	.tip{
		width: 150rpx;
		font-size: 26rpx;
		padding-bottom: 15rpx;
	}
	.top-bottom{
		padding-bottom:35rpx;
	}
}
.row {
	// display: flex;
	align-items: center;
	justify-content: space-between;
	// position: relative;
	padding: 24rpx 30rpx 22rpx 30rpx;
	// height: 110rpx;
	background: #fff;
	border-bottom: 1rpx solid #f8f6f6;
	.row-1{
		display: flex;
		align-items: center;
		.titi {
			font-size: 28rpx;
		}
		.input {
			padding-right: 10rpx;
		}
	}
	.row-2{
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #C0C4CC;
		text-align: center;
	}
	.tit {
		flex-shrink: 0;
		width: 180rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		text-align: right;
		padding-right: 24rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.examine_name {
	color: #171717;
	font-size: 28rpx;
	padding: 25rpx 25rpx;
}
.examine_img {
	width: 100%;
	text-align: center;
	padding-bottom: 25rpx;
	.image{
		width: 150rpx;
		height: 150rpx;
	}
	.image1{
		min-width: 150rpx;
		max-width: 100%;
		min-height: 150rpx;
	}
}
.default-row {
	margin-top: 16rpx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16rpx) scale(0.9);
	}
}
.add-btn {
	// position: fixed;
	// bottom: 0rpx;
	width: 100%;
	height: 100rpx;
	font-size: $font-lg;
	color: #fff;
	background-color: #6786FB;
	line-height: 100rpx;
	text-align: center;
}
.img_box {
	padding: 35rpx 35rpx;
	width: 250rpx;
	height: 250rpx;
}
.img_box image {
	width: 100%;
	height: 100%;
}
.alert-box {
	background-color: #ffffff;
}
.b-b:after {
	position: relative !important;
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 20rpx;
	padding-bottom: 150rpx;
	text{
		color: #6786FB;
	}
}

</style>