mz/pages/public/DocRegister.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" @focus='outFocus' v-model="gender" placeholder="请选择性别"
					placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker2" mode="selector" :list="genderList" @change="handleChange1"
				@confirm="handleConfirm1" @cancel="handleCancel1" @touchmove.prevent>
			</lb-picker>
			<!-- <view class="row b-b">
				<text class="tit">身份证号</text>
				<input class="input" type="text"  v-model="id_card" placeholder="请输入身份证号" placeholder-class="placeholder" />
			</view> -->
			<view class="row b-b">
				<text class="tit">联系方式</text>
				<input class="input" type="number" v-model="mobile" placeholder="请输入联系方式"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b" @tap="showPicker('region')">
				<text class="tit">省市区</text>
				<input class="input" @focus='outFocus' v-model="addr" placeholder="请选择省市区"></input>
			</view>
			<w-picker mode="region" @touchmove.prevent :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" @focus='outFocus' 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" @focus='outFocus' v-model="doctor_level" placeholder="请选择职称"
					placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker3" mode="selector" :list="levelList" @change="handleChange2" @touchmove.prevent
				@confirm="handleConfirm2" @cancel="handleCancel">
			</lb-picker>
			<view class="row b-b" @tap="handleTap1('picker4')">
				<text class="tit">专业</text>
				<input class="input" type="text" @focus='outFocus' v-model="zyname" placeholder="请选择专业"
					placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker4" mode="selector" :list="zyList" @change="handleChange4" @confirm="handleConfirm4"
				@cancel="handleCancel4" @touchmove.prevent>
			</lb-picker>
		</view>
		<view class="check_box flex_item">
			<view>
				<radio style="transform: scale(0.75)" @click="Getcheckbox" color="#6786FB" :checked="checked" />
			</view>
			<view class="">我已阅读并同意<text @click="TOprivacy">《预约平台用户协议》</text></view>
		</view>
		<view class="check_box flex_item" style="font-size: 26rpx;">
			<view class="">注册完成后，务必关注公众号<text style="color:#6786FB ;">【共享预约平台】</text>，否则无法接收到消息推送！</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 zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
	import LbPicker from '@/components/lb-picker/index.vue'
	import {
		upload,
		getHospitalList,
		setDoctor
	} 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 {
				loading: false,
				region: '',
				defaultRegion: [],
				defaultRegion1: [],
				options: [],
				checked: false,
				name: '', //姓名
				gender: '', //性别
				gender_id: '', //性别id
				genderList: [{
						id: 1,
						name: '男'
					}, {
						id: 2,
						name: '女'
					},
					{
						id: 0,
						name: '其他'
					}
				],
				zyList: [],
				zyListR: [],
				zyname: '',
				zyid: 0,
				id_card: '', //身份证
				mobile: '', //联系方式
				addr: '', //省市区
				code: '', //省市区行政编码
				province: '',
				province_id: '',
				city: '',
				city_id: '',
				district: '',
				district_id: '',
				searchVal: '', //搜索医院
				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
				utype: '',
			};
		},
		onLoad(option) {
			this.ListDate();
			this.getDocterTypeList()
			let ysinfo = uni.getStorageSync('ysinfo') || ''
			console.log(ysinfo,'ysinfo6++++')
			if (ysinfo) {
				this.name = ysinfo.name
				this.mobile = ysinfo.mobile
				this.province = ysinfo.province
				this.province_id = ysinfo.province_id
				this.city = ysinfo.city
				this.city_id = ysinfo.city_id
				this.district = ysinfo.district
				this.district_id = ysinfo.district_id
				this.hospital_id = ysinfo.hospital_id
				this.hospital = ysinfo.hospital
				this.gender = ysinfo.gender
				this.gender_id = ysinfo.gender_id,
				this.doctor_level = ysinfo.doctor_level
				this.level_id = ysinfo.level_id
				this.zyname = ysinfo.zyname
				this.zyid = ysinfo.zyid
				this.addr = ysinfo.addr
			}
		},
		watch: {
			// list(newValue, oldValue) {
			// 	if (newValue != oldValue) {
			// 		this.hospital = ''
			// 	}
			// },
			searchVal() {
				this.ListDate();
			},
		},
		methods: {
			...mapMutations(['setUserInfo']),
			getDocterTypeList() {
				getDocterTypeList().then(res => {
					console.log(res)
					this.zyListR = res.data.data
					this.zyList = res.data.data.map(item => {
						return item.text
					})
					console.log(this.zyList, 'this.zyList')
				})
			},
			handleChange4() {

			},
			handleCancel4(item) {
				// console.log(item,'ddd')
			},
			handleConfirm4(item) {
				this.zyname = item.value
				this.zyid = this.zyListR[item.index].id
				console.log(this.zyname, this.zyid)
			},
			outFocus(e) {
				console.log(event.target)
				event.target.blur()
			},
			//省市区弹窗
			showPicker(type) {
				this.$refs[type].show();
			},
			TOprivacy() {
				uni.navigateTo({
					url: '/pages/public/uagreement'
				})
			},
			//取消弹窗
			handleCancel() {

			},
			//省市区选择确定
			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)
				});
			},
			//阅读并同意
			Getcheckbox() {
				let obj = this;
				obj.checked = !obj.checked;
			},
			//提交
			confirm() {
				let obj = this;
				if (obj.loading) {
					return
				}
				if (obj.name == '') {
					this.$api.msg('请填写姓名！');
					return;
				}
				if (obj.gender_id == '') {
					this.$api.msg('请选择姓别！');
					return;
				}
				if (obj.mobile == '') {
					this.$api.msg('请输入联系方式！');
					return;
				}
				if (obj.hospital_id == '') {
					this.$api.msg('请选择医院！');
					return;
				}
				if (obj.level_id == '') {
					this.$api.msg('请选择职称！');
					return;
				}
				if (obj.zyid == '') {
					this.$api.msg('请选择专业！');
					return;
				}
				if (obj.checked == false) {
					this.$api.msg('阅读并同意医生《入驻协议》');
					return;
				}
				obj.loading = true
				setDoctor({
					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,
					// id_card:obj.id_card,
					doctor_level: obj.level_id,
					type: obj.zyid
				}).then(function(e) {
					obj.loading = false
					//注册医生完成后更新用户信息
					obj.userInfo();
					uni.navigateTo({
						url: '/pages/public/DocRegisterIndex'
					})
					uni.setStorageSync('ysinfo', {
						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,
						hospital_id: obj.hospital_id,
						gender_id: obj.gender_id,
						gender: obj.gender,
						doctor_level: obj.doctor_level,
						level_id: obj.level_id,
						zyid: obj.zyid,
						zyname: obj.zyname,
						addr : obj.province + obj.city + obj.district
					})
					
				}).catch(e => {
					obj.loading = false
					console.log(e)
				});
			},
			//选择身份后更新用户信息
			userInfo() {
				let obj = this;
				getUserInfo({})
					.then(function(e) {
						uni.setStorageSync('userInfo', 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) {},
			//
			handleChange3(item) {
				console.log(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)
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		min-height: 100%;
	}

	.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;
				}
			}
		}
	}

	.row {
		display: flex;
		align-items: center;
		// position: relative;
		padding: 0 30rpx;
		height: 110rpx;
		background: #fff;
		border-bottom: 1rpx solid #f8f6f6;

		.tit {
			flex-shrink: 0;
			width: 180rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			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;
		}
	}

	.add-img-box {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 50rpx;
	}

	.add-img-item {
		border-radius: 24rpx;
		position: relative;
		margin-bottom: 25rpx;

		.add-img {
			min-width: 150rpx;
			max-width: 100%;
			min-height: 150rpx;
		}
	}

	.add-img-del {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 20rpx;
		// bottom: 155rpx;
		//background-color: rgba(238, 0, 0, 1);
		border-radius: 20rpx;
	}

	.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: 28rpx;

		text {
			color: #6786FB;
		}
	}
</style>