his_user_miniapp/pages_user/registerDoctor.vue

<template>
	<view class="content">
		<view class="content">
			
			<view class="inner">
				<view class="bg">
					<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/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">
						<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="#C39A58"
								 :customStyle="{marginRight: '8px'}"
							      key="1"
							      label="男"
							      name="1"
							    >
								</u-radio>
								<u-radio
								activeColor="#C39A58"
								  key="2"
								  label="女"
								  name="2"
								>
							    </u-radio>
							  </u-radio-group>
						</u-form-item>
						
						
						<u-form-item labelWidth="180rpx" prop="cityId" @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>
						<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>
						<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" borderBottom label="擅长领域" prop="speciality">
							<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>
						<u-form-item labelWidth="180rpx" borderBottom label="医生照片" 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>
						<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>
						<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="#2BC7B9"
							:customStyle="{marginRight: '8px'}"
							:key="1"
							label="同意"
							:name="1"
						>
						</u-checkbox>
					</u-checkbox-group>
					<text class="text" @click="openContent('doctorRegister')" >《医生注册协议》</text>
					<text class="text" @click="openContent('doctorFiling')" >《医生多机构备案协议》</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>
						
			</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'

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",
			},
			rules: {
				doctorName: [
					{ 
						required: true, 
						message: '请输入医生姓名', 
					}
				],
				idCard: [
					{ 
						required: true, 
						message: '请输入身份证号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				deptId: [
					{ 
						required: true, 
						message: '请选择部门'
					}
				],
				hospitalId: [
					{ 
						required: true, 
						message: '请选择医院'
					}
				],
				position: [
					{ 
						required: true, 
						message: '请选择职务',
					}
				],
				cityIds: [
					{ 
						required: true, 
						message: '请选择所在城市', 
					}
				],
				account: [
					{ 
						required: true, 
						message: '请输入帐号', 
					}
				],
				password: [
					{ 
						required: true, 
						message: '请输入密码', 
					}
				],
				mobile: [
					{ 
						required: true, 
						message: '请输入手机号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				]
				 
			}
 		}
 	},
	onLoad(options) {
		this.form.doctorType=options.type;
		this.getCitys()
		this.getHospitalList();
		this.getDepartmentList();
		this.getDictByKey("sys_doc_position");
	},
	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;
		},
		getDictByKey(key){
			var data={key:key}
			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 => {
					 
				}
			);
		},
		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
					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();
			}
			if(this.checked!=1){
				uni.showToast({
					icon:'none',
					title:"请同意协议",
				});
				return
			}
			console.log(this.form)
 			this.$refs.uForm.validate().then(res => {
 				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: #C39A58;
				border-radius: 44upx;
			}
		}
	}
	 

</style>