yijianbao_user_uniapp/pages_user/registerDoctor.vue

<template>
	<view class="content">
		<view class="content">
			
			<view class="inner">
				<view class="bg">
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/74645f3b57bc45b08b35e2449fdf90c7.jpg"></image>
					<view v-if="form.doctorType==1" class="title">医生注册</view>
					<view v-if="form.doctorType==1" class="desc">请填写医生资料</view>
					<view v-if="form.doctorType==2" class="title">药师注册</view>
					<view v-if="form.doctorType==2" class="desc">请填写药师资料</view>
				</view>
				<view class="my-form"  >
					<u-form   :rules="rules" :model="form" ref="uForm" labelPosition="left" errorType="toast">
						<u-form-item labelWidth="180rpx"  borderBottom label="真实姓名" prop="doctorName">
							<u-input border="none" placeholder="请输入真实姓名" v-model="form.doctorName" />
						</u-form-item>
						<u-form-item labelWidth="180rpx"  borderBottom label="身份证号" prop="idCard">
							<u-input border="none" placeholder="请输入身份证号" v-model="form.idCard" />
						</u-form-item>
						<u-form-item labelWidth="180rpx" borderBottom label="性别" prop="sex">
							 <u-radio-group
								placement="row"
							    v-model="form.sex"
							  >
							    <u-radio
								activeColor="#2583EB"
								 :customStyle="{marginRight: '8px'}"
							      key="1"
							      label="男"
							      name="1"
							    >
								</u-radio>
								<u-radio
								activeColor="#2583EB"
								  key="2"
								  label="女"
								  name="2"
								>
							    </u-radio>
							  </u-radio-group>
						</u-form-item>
						
						
						<u-form-item labelWidth="180rpx" prop="cityIds" @click="cityShow=true"  borderBottom label="所在城市">
							<u-input
								v-model="form.cityName"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择所在城市"
								border="none"
							></u-input>
							<template #right>
								<u-icon
									name="arrow-right"
								></u-icon>
							</template>
							 
						</u-form-item>
						<template v-if="form.doctorType==1">
							<!-- <u-form-item labelWidth="180rpx" prop="hospitalId" @click="hospitalShow=true"  borderBottom label="就职医院">
								<u-input
									v-model="form.hospitalName"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择医院"
									border="none"
								></u-input>
								<template #right>
									<u-icon
										name="arrow-right"
									></u-icon>
								</template>
							</u-form-item> -->
							<u-form-item labelWidth="180rpx" prop="deptId" @click="deptShow=true"  borderBottom label="所属科室">
								<u-input
									v-model="form.deptName"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择科室"
									border="none"
								></u-input>
								<template #right>
									<u-icon
										name="arrow-right"
									></u-icon>
								</template>
							</u-form-item>
						</template>
						<u-form-item labelWidth="180rpx" prop="position" @click="positionShow=true"  borderBottom label="职称">
							<u-input
								v-model="form.position"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择职称"
								border="none"
							></u-input>
							<template #right>
								<u-icon
									name="arrow-right"
								></u-icon>
							</template>
						</u-form-item>
						<u-form-item labelWidth="180rpx" prop="position" @click="storeShow=true"  borderBottom label="药店">
							<u-input
								v-model="form.storeName"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择药店"
								border="none"
							></u-input>
							<template #right>
								<u-icon
									name="arrow-right"
								></u-icon>
							</template>
						</u-form-item>
						<template v-if="form.doctorType==1">
							<u-form-item labelWidth="180rpx" borderBottom label="擅长领域" prop="">
								<u--textarea v-model="form.speciality" placeholder="请输入擅长领域" count ></u--textarea>
							</u-form-item>
							<u-form-item labelWidth="180rpx" borderBottom label="个人简介" prop="introduction">
								<u--textarea v-model="form.introduction" placeholder="请输入个人简介" count ></u--textarea>
							</u-form-item>
						</template>
						<u-form-item labelWidth="180rpx" borderBottom :label="`${typeName}照片`" prop="avatar">
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="1"
							>
							</u-upload>
						</u-form-item>
						<u-form-item labelWidth="180rpx" borderBottom label="身份证照片(正反面)" prop="idCardFrontUrl">
							<u-upload
								:fileList="fileList2"
								@afterRead="afterRead"
								@delete="deletePic"
								name="2"
								multiple
								:maxCount="2"
							>
							</u-upload>
						</u-form-item>
						<template v-if="form.doctorType==1">
							<u-form-item labelWidth="180rpx"  borderBottom label="资质证编号" prop="certificateCode">
								<u-input border="none" placeholder="请输入资质证编号" v-model="form.certificateCode" />
							</u-form-item>
							<u-form-item labelWidth="180rpx" borderBottom label="资质证书" prop="certificateImages">
								<u-upload
									:fileList="fileList3"
									@afterRead="afterRead"
									@delete="deletePic"
									name="3"
									:maxCount="3"
								></u-upload>
							</u-form-item>
						</template>
						<u-form-item labelWidth="180rpx"  borderBottom label="执业证编号" prop="practiseCode">
							<u-input border="none" placeholder="请输入执业证编号" v-model="form.practiseCode" />
						</u-form-item>
						<u-form-item labelWidth="180rpx" borderBottom label="执业证书" prop="certificateImages">
							<u-upload
								:fileList="fileList4"
								@afterRead="afterRead"
								@delete="deletePic"
								name="4"
								:maxCount="3"
							></u-upload>
						</u-form-item>
						<u-form-item labelWidth="180rpx" borderBottom label="联系电话" prop="mobile">
							<u-input  border="none"  placeholder="请输入联系电话" v-model="form.mobile" />
						</u-form-item>
						<u-form-item labelWidth="180rpx" borderBottom label="登录帐号" prop="account">
							<u-input border="none"  placeholder="请输入登录帐号" v-model="form.account" />
						</u-form-item>
						<u-form-item  labelWidth="180rpx" label="登录密码" prop="password">
							<u-input border="none" type="password"  placeholder="请输入登录密码" v-model="form.password" />
						</u-form-item>
					</u-form>
				</view>
				<view class="agree">
					<u-checkbox-group
					            v-model="checked"
					            placement="column"
					        >
						<u-checkbox
						activeColor="#2583EB"
							:customStyle="{marginRight: '8px'}"
							:key="1"
							label="同意"
							:name="1"
						>
						</u-checkbox>
					</u-checkbox-group>
					<text class="text" @click="openContent('doctorRegister')" >{{`《${typeName}注册协议》`}}</text>
					<text class="text" @click="openContent('doctorFiling')" >{{`《${typeName}多机构备案协议》`}}</text>
				</view>
				<u-picker ref="cityPicker" @cancel="cityShow = false"  keyName="n" @confirm="citySelect" @change="cityChangeHandler"  :show="cityShow" :columns="citys"></u-picker>
				<u-picker ref="deptPicker" @cancel="deptShow = false"  keyName="deptName" @confirm="deptSelect"   :show="deptShow" :columns="depts"></u-picker>
				<u-picker  @cancel="hospitalShow = false"  keyName="hospitalName" @confirm="hospitalSelect"    :show="hospitalShow" :columns="hospitals"></u-picker>
				<u-picker ref="positionPicker" @cancel="positionShow = false"  keyName="dictLabel" @confirm="positionSelect"   :show="positionShow" :columns="positions"></u-picker>
				<u-picker ref="storePicker" @cancel="storeShow = false"  keyName="storeName" @confirm="storeSelect"   :show="storeShow" :columns="stores"></u-picker>		
			</view>
			<view class="btn-box">
				<view class="sub-btn" @click="submit()">提交</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import {getDictByKey,getHospitalList,getDepartmentList,sendSmsCode,uploadOSS,getCitys} from '@/api/common.js'
import {registerDoctor} from '@/api/user.js'
import { getStoreList } from '@/api/store.js'

export default {
 	data() {
 		return {
			cityIndex1:0,
			cityIndex2:0,
			allCitys:[],
			citys:[[],[],[]],
			cityShow:false,
			depts:[[]],
			deptShow:false,
			hospitals:[[]],
			hospitalShow:false,
			positions:[[]],
			positionShow:false,
			fileList1:[],
			fileList2:[],
			fileList3:[],
			fileList4:[],
			checked:0,
			form:{
				sex:"1",
				introduction: '',
				speciality:''
			},
			rules: {
				doctorName: [
					{ 
						required: true, 
						message: '请输入真实姓名', 
					}
				],
				idCard: [
					{ 
						required: true, 
						message: '请输入身份证号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				position: [
					{ 
						required: true, 
						message: '请选择职务',
					}
				],
				cityIds: [
					{ 
						required: true, 
						message: '请选择所在城市', 
					}
				],
				account: [
					{ 
						required: true, 
						message: '请输入帐号', 
					}
				],
				password: [
					{ 
						required: true, 
						message: '请输入密码', 
					}
				],
				mobile: [
					{ 
						required: true, 
						message: '请输入手机号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				practiseCode : [
					{ 
						required: true, 
						message: '请输入执业证编号',
						trigger: ['change','blur'],
					}
				]
			},
			typeName: '',
			storeShow: false,
			stores: [[]]
 		}
 	},
	onLoad(options) {
		this.form.doctorType=options.type;
		this.typeName= options.type==1 ? '医生':options.type==2 ? '药师' : ''
		uni.setNavigationBarTitle({
			title: options.type==1 ? '医生注册':options.type==2 ? '药师注册' : ''
		})
		this.getCitys()
		this.getHospitalList();
		this.getDepartmentList();
		this.getStoreList()
		if(options.type==1) {
			
		}
		this.getDictByKey();
	},
	onShow() {
		
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		
	},
 	methods: {
		hospitalSelect(e){
			this.form.hospitalId=this.hospitals[0][e.indexs[0]].hospitalId;
			this.form.hospitalName=this.hospitals[0][e.indexs[0]].hospitalName;
			this.hospitalShow=false;
		},
		deptSelect(e){
			console.log(e)
			this.form.deptId=this.depts[0][e.indexs[0]].deptId;
			this.form.deptName=this.depts[0][e.indexs[0]].deptName;
			this.deptShow=false;
		},
		positionSelect(e){
			console.log(e)
			this.form.position=this.positions[0][e.indexs[0]].dictLabel;
			this.positionShow=false;
		},
		storeSelect(e){
			this.form.storeName=this.stores[0][e.indexs[0]].storeName;
			this.form.storeId=this.stores[0][e.indexs[0]].storeId;
			this.storeShow=false;
		},
		getDictByKey(key){
			var data={key:this.form.doctorType==2?"sys_pharmacist_position":"sys_doc_position"}
			getDictByKey(data).then(
				res => {
					if(res.code==200){
						this.positions[0]=res.data;
					}
				},
				err => {
				}
			);
			
		},
		openContent(type){
			uni.navigateTo({
				url:"agreement?type="+type
			})
		},
		cityChangeHandler(e) {
			const {
				columnIndex,
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.cityPicker
			} = e
			if(columnIndex==0){
				this.cityIndex1=index
				console.log(this.cityIndex1)
				//获取第二列数据
				var citys1 = this.allCitys[this.cityIndex1].c;
				console.log(citys1)
				picker.setColumnValues(1,citys1)
				this.cityIndex2=0
				var citys2 = this.allCitys[this.cityIndex1].c[this.cityIndex2].c;
				picker.setColumnValues(2,citys2)
			}
			if(columnIndex==1){
				this.cityIndex2=index
				//获取第三列数据
				var citys = this.allCitys[this.cityIndex1].c[this.cityIndex2].c;
				console.log(citys)
				picker.setColumnValues(2,citys)
			}
			
		},
		citySelect(e){
			console.log(e)
			this.form.cityName=e.value[0].n+">"+e.value[1].n+">"+e.value[2].n
			this.form.cityIds=e.value[0].v+","+e.value[1].v+","+e.value[2].v;
			this.cityShow=false;
		},
	 
		getCitys(){
			var that=this;
			var data={}
			getCitys(data).then(
				res => {
					if(res.code==200){
						that.allCitys=res.data;
						that.citys=[[],[],[]];
						that.citys[0]=that.allCitys;
						that.citys[1]=that.allCitys[0].c;
						that.citys[2]=that.allCitys[0].c[0].c;
						console.log(that.citys)
					}
				},
				err => {
					 
				}
			);
		},
		getHospitalList(){
			var that=this;
			var data={}
			getHospitalList(data).then(
				res => {
					if(res.code==200){
						that.hospitals[0]=res.data;
						console.log(111)
						console.log(that.hospitals)
						
					}
				},
				err => {
					 
				}
			);
		},
		getDepartmentList(){
			var that=this;
			var data={}
			getDepartmentList(data).then(
				res => {
					if(res.code==200){
						that.depts[0]=res.data;
					}
				},
				err => {
					 
				}
			);
		},
		getStoreList(){
			var that=this;
			var data={}
			getStoreList(data).then(
				res => {
					if(res.code==200){
						that.stores[0]=res.data;
					}
				},
				err => {
					 
				}
			);
		},
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS',  
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							// console.log(JSON.parse(res.data).url)
							resolve(JSON.parse(res.data).url)
						}, 1000)
					}
				});
			})
		},
		register(){
			registerDoctor(this.form).then(
				res => {
					console.log(res)
					if(res.code==200){
						 uni.showToast({
						 	icon:'none',
						 	title:res.msg,
						 });
						 setTimeout(function() {
							 uni.navigateBack({
								 delta: 1
							 })
						 }, 2000);
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				},
				rej => {
					console.log(rej)
				}
			);
		},
 		submit(){
 			var that=this;
			if(this.fileList1.length>0){
				this.form.avatar=this.fileList1[0].url
			}
			if(this.fileList2.length>0){
				var images=[]
				that.fileList2.forEach(function(item) {
					images.push(item.url)
				});
				if(images.length!=2){
					uni.showToast({
						icon:'none',
						title:"请上传身份证照片(正反面)",
					});
					return
				}
				this.form.idCardFrontUrl=images[0];
				this.form.idCardBackUrl=images[1];
			}
			if(this.fileList3.length>0){
				var images=[]
				that.fileList3.forEach(function(item) {
					images.push(item.url)
				});
				this.form.certificateImages=images.toString();
			}
			if(this.fileList4.length>0){
				var images=[]
				that.fileList4.forEach(function(item) {
					images.push(item.url)
				});
				this.form.practiseImages=images.toString();
			} else {
				uni.showToast({
					icon:'none',
					title:"请上传职业证书",
				});
				return
			}
			if(this.checked!=1){
				uni.showToast({
					icon:'none',
					title:"请同意协议",
				});
				return
			}
			console.log(this.form)
			// deptId: [
			// 	{ 
			// 		required: true, 
			// 		message: '请选择部门'
			// 	}
			// ],
			// hospitalId: [
			// 	{ 
			// 		required: true, 
			// 		message: '请选择医院'
			// 	}
			// ],
 			this.$refs.uForm.validate().then(res => {
				if(that.form.doctorType == 1&& !that.form.deptId) {
					uni.showToast({
						title: '请选择科室',
						icon: 'none'
					})
					return
				}
				if(that.form.doctorType == 1&&!that.form.speciality) {
					uni.showToast({
						title: '请输入擅长领域',
						icon: 'none'
					})
					return
				}
				if(!that.form.storeId) {
					uni.showToast({
						title: '请选择药店',
						icon: 'none'
					})
					return
				}
 				that.register()
 			}).catch(errors => {
				console.log(errors)
 			})
 		},
 	}
}
 
 
</script>


<style scoped lang="scss">
 
	.content{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		
		.inner{
			padding: 20upx 20rpx 120rpx;
			.bg{
				width: 100%;
				height: 300rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				image{
					position: absolute;
					border-radius: 30rpx 30rpx 0rpx 0rpx;
					width: 100%;
					height: 100%;
				}
				.title{
					z-index: 999;
					padding: 0rpx 30rpx;
					font-size: 40upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
				.desc{
					z-index: 999;
					padding: 0rpx 30rpx;
					margin-top: 20rpx;
					font-size: 28upx;
					opacity: 0.5;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
			.my-form{
				z-index: 1;
				background-color: #FFFFFF;
				padding: 0 30upx;
				input{
					text-align: right;
				}
			}
			 
		}
		.agree{
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.label{
				font-size: 24rpx;
			}
			.text{
				margin-left: 10rpx;
				color: royalblue;
				font-size: 24rpx;
			}
		}
		.btn-box{
			z-index: 9999;
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			.sub-btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #2583EB;
				border-radius: 44upx;
			}
		}
	}
	 

</style>