mz/pages/public/PatRegister.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="handleCancel"></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" @focus='outFocus' v-model="addr" placeholder="请选择省市区"/>
			</view>
			<w-picker mode="region"  :value="defaultRegion" default-type="value"  @confirm="onConfirm($event,'region')" @cancel="handleCancel" ref="region" ></w-picker>
			<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>
		<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 LbPicker from '@/components/lb-picker/index.vue';
import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
import { upload, getHospitalList, setPatient } from '@/api/index.js';
import { getUserInfo } from '@/api/login.js';
export default {
	components: {
		uniList,
		uniListItem,
		wPicker,
		LbPicker,
		zhilinPicker
	},
	data() {
		return {
			checked:false,
			loading: false,
			region:'',
			defaultRegion:[],
			defaultRegion1:[],
			options:[],
			name: '', //姓名
			gender: '', //性别
			gender_id: '', //性别id
			genderList: [{
				id:1,
				name:'男'
			},{
				id:2,
				name:'女'
			},{
				id:0,
				name:'其他'
			}],
			mobile: '', //联系方式
			addr: '', //省市区
			code: '', //省市区行政编码
			province: '',
			province_id: '',
			city: '',
			city_id: '',
			district: '',
			district_id: '',
			searchVal:'',//搜索医院
			list: [],//医院列表
			show: false,
			initSelected: [],
			title: '选择医院',
			hospital: '', //医院
			hospital_id: '' //医院id
		};
	},
	onLoad() {
		this.ListDate();
	},
	watch:{
		list(newValue, oldValue) {
			if(newValue != oldValue){
				this.hospital = ''
			}
		},
		searchVal(){
			console.log(222)
			this.ListDate();
		},
	},
	methods: {
		...mapMutations(['setUserInfo']),
		TOprivacy() {
			uni.navigateTo({
				url: '/pages/public/uagreement'
			})
		},
		//阅读并同意
		Getcheckbox() {
			let obj = this;
			obj.checked = !obj.checked;
		},
		//省市区弹窗
		showPicker(type){
			this.$refs[type].show();
		},
		//取消弹窗
		handleCancel(){
			
		},
		outFocus(e){
			event.target.blur()
		},
		// 省市区选择确定
		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)
		},
		onSearchInput(val){
			this.searchVal = val;
			console.log(this.searchVal)
		},
		//机构列表
		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)
			});
		},
		//性别选择
		handleTap1(name) {
			this.$refs[name].show();
		},
		//性别选择
		handleChange1(item) {},
		//性别选择
		handleConfirm1(item) {
			let obj = this;
			obj.gender = item.item.name;
			obj.gender_id = item.item.id;
		},
		//提交
		confirm() {
			let obj = this;
			if(obj.loading) {
				return
			}
			if(!obj.name){
				obj.$api.msg('请填写姓名！');
				return;
			}
			if(!obj.gender_id){
				obj.$api.msg('请选择姓别！');
				return;
			}
			if(!obj.mobile){
				obj.$api.msg('请输入联系方式！');
				return;
			}
			if(!obj.hospital_id){
				obj.$api.msg('请选择医院！');
				return;
			}
			if(obj.checked == false){
				this.$api.msg('阅读并同意《预约平台用户协议》');
				return;
			}
			setPatient({
				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
			})
				.then(function(e) {
					obj.loading = false
					obj.$api.msg(e.msg);
					//注册病人完成后更新用户信息
					obj.userInfo();
					setTimeout(function() {
						// uni.switchTab({
						// 	url: '/pages/index/home'
						// })
						//安卓手机
						// document.addEventListener(
						// 	"WeixinJSBridgeReady",
						// 	function() {
						// 		WeixinJSBridge.call("closeWindow");
						// 	},
						// 	false
						// );
						// //ios手机
						// WeixinJSBridge.call("closeWindow");
						uni.navigateTo({
							url: '/pages/public/erweima'
						})
					}, 2000);
				})
				.catch(e => {
					obj.loading = false
					console.log(e);
				});
		},
		//选择身份后更新用户信息
		userInfo() {
			getUserInfo({}).then(function(e) {
				uni.setStorageSync('userInfo', e.data);
			})
			.catch(function(e) {
				console.log(e);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	min-height: 100%;
	padding-top: 25rpx;
}
.content_box {
	background-color: #ffffff;
	width: 92%;
	border-radius: 15rpx;
	margin: 0rpx auto;
	.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;
}
.examine_img image {
	width: 200rpx;
	height: 200rpx;
}
.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>