shenweishi/pages/addPatient/index.vue

<template>
	<view class="cnt_wrapper">
		<view class="add_wrap">
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="title required">关系</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}
								<van-icon name="arrow-down" />
							</view>
						</picker>
					</view>

				</view>

				<view class="uni-form-item uni-column">
					<view class="title required">身份证号</view>
					<view class="uni-form-item uni-column">
						<input class="uni-input" type="idcard" required='required' maxlength="18" v-model="standing_ID" name="input" placeholder="请输入就诊人身份证卡号" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title required">姓名</view>
					<view class="uni-form-item uni-column">
						<input class="uni-input" required='required' v-model='client_name' name="input" placeholder="请输入就诊人姓名" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">住址</view>
					<view class="uni-form-item uni-column">
						<input class="uni-input" v-model='address' @ch name="input" placeholder="请输入住址" />
					</view>
				</view>
				<view class="divedeline"></view>


				<view class="uni-form-item uni-column" style="padding-right: 0px;width: 652rpx;">
					<view class="title">手机号码</view>
					<view class="uni-form-item uni-column" style="padding: 0rpx;">
						<input class="uni-input" v-model="mobile" name="input" placeholder="请输入您的手机号码" />
						<view class="getCode" @click="getcode" >获取验证码</view>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">验证码</view>
					<!-- <van-field :value="code" placeholder="请输入短信验证码" clearable @change="codeInput" use-button-slot>
						<button slot="button" :disabled="disabled" class="send" @click="send">{{ text }}</button>
					</van-field> -->
					<view class="uni-form-item uni-column">
						<input class="uni-input" v-model='code'  name="input" placeholder="请输入验证码" />
					</view>
				</view>
				<view class="divedeline"></view>
				<view class="uni-btn-v">
					<button form-type="submit">立即绑定</button>
				</view>
			</form>
		</view>
		
		<view class="">

		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import VanIcon from '@/wxcomponents/vant/icon/index'
	import Toast from '@/wxcomponents/vant/toast/toast';
	import { getCode, login, sendCode, bindMobile, getFieldConfig, getDataConfig } from '@/api/api.js';
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				array: ['请选择', '父子', '母子','兄弟','父女','母女'],
				index: 0,
				standing_ID:'',
				client_name:'',
				mobile:'',
				code:'',
				address:''
			}
		},
		onLoad(){
			this.getCode()
		},
		methods: {
			...mapMutations(['setIsBand','setConfigList', 'setFiledList', 'setOrg']),
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			numberInput(event){
				this.mobile = event.detail
			},
			codeInput(event){
				this.code = event.detail
			},
			getcode() {
				if (!this.mobile) return Toast('请填写手机号码');
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.mobile)) return Toast('请输入正确的手机号码')
				this.sendCodes()
			},
			async getCode(){
				let res = await getCode({}, true)
				// console.log(res,'res')
				this.aespass = res.data.data.aespass
				
			},
			async sendCodes(){
				let mobile = this.mobile
				let aespass = this.aespass
				let params = {
					phone: mobile.toString(),
					aespass: aespass
				}
				// this.sendCode()
				let res = await sendCode(params, true)
				console.log(res,'oop')
			},
			
			async formSubmit(){
				let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				// let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
				if(this.index==0){	
					return Toast('关系选项未选择');
				}
				if(this.standing_ID.length==0 ){
					console.log('111111',this.standing_ID);
					return Toast('请输入身份证号');
				}
				if( this.standing_ID.length!=0 && (_IDRe18.test(this.standing_ID)== false)){
					console.log('222222',this.standing_ID);
					return Toast('身份证号输入有误，请重新输入');
				}
				if(this.client_name ==''){
					return Toast('请输入姓名');
				}
				if(this.mobile==''){
					return Toast('请输入手机号码');
				}else if(!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.mobile)){
					return Toast('请输入正确的手机号码');
				}
				
				if (!this.code) return Toast('请填写验证码');
				let params = {
					name: this.client_name,
					id_card_no:this.standing_ID,
					mobile:this.mobile,
					code:this.code,
					openid:'opE6O5ODuaN9U6viDrAlGH87h6yM',
					// relationship:'父子'
					relationship:this.index
				}
				let res = await bindMobile(params ,true)
					console.log('res',res)
					if(res.data.data.result){
						Toast('验证码错误')
					}else{
						if(res.data.data.is_bind == true){
							let data = { 
								is_bind:true,
								userInfo:res.data.data.patient
							}
							this.setIsBand(data)
							// if(res.data.data.patient.id > 0){
							// 	this.getDataConfig(res.data.data.patient.id)
							// 	this.getFieldConfig(res.data.data.patient.id)
							// }
							if(res.data.data.role.patient_id > 0){
								this.getDataConfig(res.data.data.role.patient_id)
								this.getFieldConfig(res.data.data.role.patient_id)
							}
							// if(res.data.data.template_id.id > 0){
							// 	let data = {
							// 		org: res.data.data.template_id
							// 	}
							// 	this.setOrg(data)
							// }
							Toast('绑定成功')
							console.log()
							setTimeout(() => {
								uni.navigateBack()
							},1000)
						}else{
							Toast(res.data.data.msg)
						}
					}
				
				// // return
			},
			
			async getFieldConfig(patient_id){
				let params = {
					patient_id: patient_id
				}
				let res = await getFieldConfig(params)
				let data = {
					filedList:res.data.data
				}
				this.setFiledList(data)
			},
			async getDataConfig(patient_id){
				let params = {
					patient_id: patient_id
				}
				let res = await getDataConfig(params)
				let data = {
					configList:res.data.data.list
				}
				this.setConfigList(data)
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #f3f3f9;
	}

	.cnt_wrapper {
		margin: 0;
		padding: 0;
	}

	.add_wrap {
		background: #fff;
		width: 93vw;
		margin: 10px auto;
		border-radius: 15rpx;
	}

	.uni-form-item {
		height: 100rpx;
		width: 570rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		width: 220rpx;
		white-space: nowrap;
	}
	.required:after{
		content: '*';
		color: red;
	}
	.uni-list-cell-db {
		width: 570rpx;
		padding: 0 40rpx;
	}

	.getCode {
		font-size: 24rpx;
		width: 155rpx;
		color: #00c4b3;
		border: 1px solid;
		border-radius: 20rpx;
		text-align: center;
	}

	.divedeline {
		height: 20rpx;
		background-color: #f3f3f9;
	}

	.uni-btn-v button {
		background: #00c4b3;
		color: #fff;
	}
</style>

<style lang="scss" scoped>
	/deep/ .van-icon-arrow-down {
		top: 5rpx;
	}
</style>