xinelu-applet-ui/pages/register/register.vue

<template>
	<view class="register">
		<view class="head" @tap="Face">
			<image class="Facecollection" :src="query.headPictureUrl" v-if="query.headPictureUrl"></image>
			<image class="Facecollection" src="../../static/pages/Facecollection.png" v-else></image>

			<span>人脸采集</span>
		</view>
		<view class="form">
			<u-form :model="query" ref="uForm">
				<span>姓名</span>
				<u-form-item prop="name" :border-bottom="false">
					<u-input v-model="query.patientName" placeholder="请输入姓名" />
				</u-form-item>
				<view class="name">
					性别
					<view class="sex">
						<u-radio-group v-model="query.sexname" size='30'>
							<u-radio @change='sexchange' v-for="(item, index) in sexlist" :key="index" :name="item.name"
								active-color="#26A888" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="name">
					出生日期
					<view class="select" @tap='timeshow=true'>
						<text v-if="query.birthDate==''">请选择出生日期</text>
						<text v-else class="testitem">{{query.birthDate}}</text>
						<image src="../../static/huijiantou.png" mode=""></image>
					</view>
				</view>
				<span>手机号</span>
				<u-form-item prop="phone" :border-bottom="false">
					<u-input v-model="query.phone" placeholder="请输入手机号" />
				</u-form-item>
				<span>身份证号</span>
				<u-form-item prop="cardNo" :border-bottom="false">
					<u-input v-model="query.cardNo" placeholder="请输入身份证号" />
				</u-form-item>
				<view class="name">
					所属区域
					<view class="select" @tap='showPicker'>
						<text v-if="!address">请选择所属区域</text>
						<text v-else class="testitem">{{address}}</text>
						<!-- <image src="../../static/huijiantou.png" mode=""></image> -->
					</view>
				</view>
				<span>详细地址</span>
				<u-form-item prop="address" :border-bottom="false">
					<u-input :clearable='false' v-model="query.address" type="text" placeholder='小区、单元、门牌号'
						maxlength='40' />
				</u-form-item>
				<!-- <view class="name">
					详细地址
					<u-input :clearable='false' v-model="query.address" type="text" placeholder='小区、单元、门牌号'
						maxlength='40' />

				</view> -->
				<view class="name">
					所在位置
					<view class="select" @tap='getAddress()'>
						<text v-if="query.locationName ==''">请选择所在位置</text>
						<text class="testitem">{{query.locationName}}</text>
					</view>

				</view>

				<view class="name">
					基础疾病
					<view class="select" @tap="godisease">
						<!-- <text v-if="!query.diseaseInfoList">请选择基础疾病</text> -->
						<ld-select :multiple="true" :list="options" label-key="label" value-key="value"
							placeholder="请选择" v-model="value2" @change="selectChange" @cancel="cancel"
							@confirm="confirm"></ld-select>
						<!-- <text v-else v-for="(item,index) in query.diseaseInfoList">{{item.diseaseName}}</text>
						<image src="../../static/huijiantou.png" mode=""></image> -->
					</view>
				</view>
			</u-form>
		</view>
		<view class="bottom">
			<view class="radio-content">
				<view class="radio-right" @tap="changeRadio">
					<view class="radio" :class="selected == 2 ? 'radio-default':''">
						<view :class="selected == 2 ? 'radio-active':''"></view>
					</view>
				</view>
				<view class="agreement">我已阅读并同意<text style="color: #26A888;" @tap='maskshow=true'>《用户协议》</text>
				</view>
			</view>
			<view class="sbumit" @tap="submit">
				提交
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-mask :show="maskshow" class='mask' @click='maskshow=false'>
			<view class="Agreement">
				<view class="title">
					用户协议与隐私政策
				</view>
				<scroll-view scroll-y="true" class="scroll-Y" style="">
					<contenttext></contenttext>
				</scroll-view>
				<view class="cancel" @tap='maskshow=false'>
					取消
				</view>
				<view class="determine" @tap='tapradio'>
					确定并同意
				</view>
			</view>
		</u-mask>
		<u-picker mode="time" v-model="timeshow" :params="params" @confirm='timechange' @canel='timeshow=false'>
		</u-picker>
		<view class="">
			<m-city style='z-index: 10076;' :provinceData="list" headTitle="地区选择" ref="cityPicker"
				@funcValue="getpickerParentValue" pickerSize="4">
			</m-city>
		</view>
	</view>
</template>

<script>
	import {
		getCurrentUser,
	} from '@/api/pages/homepage/homepage.js'
	import {
		AppIdentification
	} from '@/api/pagesB/AppIdentification/index.js'
	import {
		getRegionAndStreetInfo,
		getNurseType,
		information
	} from '@/api/pagesB/information/index.js'
	import contenttext from '../../components/text.vue'
	import {
		getSubordinateRegions,
	} from '@/api/pagesB/modifyAddress/modifyAddress.js';
	import gkcity from "@/components/m-city/m-city.vue";
	import ldSelect from '../../components/ld-select/ld-select.vue';
	import {
		registerdata
	} from '@/api/pages/register/register.js'
	export default {
		components: {
			contenttext,
			ldSelect,
			"m-city": gkcity,
		},
		// components: {ldSelect},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				tipsText: '',
				form: {
					name: '',
					phone: '',
					indent: ''
				},
				value2: [],
				timeshow: false, //出生日期
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				sexlist: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				selected: 1,
				options: [{
					value: '1',
					label: '高血压'
				}, {
					value: '2',
					label: '高血糖'
				}, {
					value: '3',
					label: '高血脂'
				}, {
					value: '0',
					label: '无'
				}],
				arealist: [], //区街道list
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}, ],
				maskshow: false, //用户协议
				getNurseTypelist: [], //护理类型数组
				medicalcarelist: [], //医疗护理数组
				address: '', //页面所属区域
				query: { //信息请求数组
					headPictureUrl: '',
					couponId: null,
					patientName: "",
					cardNo: "",
					phone: "",
					address: "",
					areaCode: "",
					homeLongitude: null,
					homeLatitude: null,
					nurseTypeIdList: [],
					diseaseInfoList: [],
					diseaseList: [],
					patientId: '',
					locationName: '',
					sex: '',
					sexname: '',
					birthDate: '',
					cityCode: '1'
				},
				timer: null,
				addresslength: null,
				patientDiseaseInfoList: [], //获取个人信息
				rules: {
					patientName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur'],
					}],
					birthDate: [{
						required: true,
						message: '请选择出生日期',
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}],
					cardNo: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.idCard(value);
						},
						message: '请输入正确的身份证号',
						trigger: ['blur'],
					}]
				}
			}
		},
		// onload(){

		//   },
		//  onUnload() {
		//      // 移除监听事件
		//         uni.$off('code');
		// },
		methods: {
			onChange(e) {
				this.selected = e
				// console.log(e)
				// this.allChecked = !this.allChecked;
				// this.selected = e.detail.value;
			},
			// 下拉框多选
			selectChange(val) {
				console.log(val,'999');
			},
			cancel() {},
			confirm(e) {
					this.query.diseaseList = e.map(Number)
				console.log(e,'打印e')
			},
			submit() {
				console.log(this.query)
				var that = this
				that.query.openid = uni.getStorageSync('openid');
				if (that.query.sexname == '男') {
					that.query.sex = 'MALE';
				} else if (that.query.sexname == '女') {
					that.query.sex = 'FEMALE';
				}
				if (that.query.sex == "") {
					that.$refs.uToast.show({
						title: '请选择性别',
						type: 'error'
					})
				}
				if (!that.query.locationName) {
					that.$refs.uToast.show({
						title: '请选择所在位置',
						type: 'error'
					})
				}
				if (!that.query.birthDate) {
					that.$refs.uToast.show({
						title: '请选择出生日期',
						type: 'error'
					})
				}
				that.$refs.uForm.validate(valid => {
					if (valid) {
						if (that.selected == 1) {
							that.$refs.uToast.show({
								title: '请审核并同意用户协议',
								type: 'error'
							})
						} else {
							registerdata(that.query).then(res => {
								if (res.code == 200) {
									getCurrentUser(that.query.openid, '1').then(res => {
										uni.setStorageSync('patientId', res.data.id);
										uni.setStorageSync('patientName', res.data.patientName);
										uni.setStorageSync("userinfo", res.data)
									})
									that.$refs.uToast.show({
										title: '注册成功',
										type: 'success',
										duration: '1000',
									})
									uni.switchTab({
										url: '/pages/homepage/homepage',
									});
								} else {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
								}
							})
						}
					} else {}
				});
			},
			//切换
			// changeRadio() {
			// 	this.selected == 1 ? this.selected = 2 : this.selected = 1
			// },
			changeRadio() {
				if (this.selected == 1) {
					this.selected = 2;
				} else {
					this.selected = 1;
				}
			},
			// 性别
			sexchange(e) {
				if (e == '男') {
					this.query.sex = 'MALE';
				} else if (e == '女') {
					this.query.sex = 'FEMALE';
				}
			},
			// 人脸采集
			Face() {
				uni.navigateTo({
					url: '/pages/facecollection/facecollection'
				})
			},
			//提交信息
			// informationinfo() {
			// 	var that = this
			// 	if (that.query.sex == '男') {
			// 		that.query.sex = 'MALE';
			// 	} else if (that.query.sex == '女') {
			// 		that.query.sex = 'FEMALE';
			// 	}
			// 	if (this.addresslength) {
			// 		if (this.addresslength.length > 2) {
			// 			const value = uni.getStorageSync('phone');
			// 			if (value) {
			// 				that.query.phone = value
			// 				if (that.radio == 1) {
			// 					that.$refs.uToast.show({
			// 						title: '请审核并同意用户协议',
			// 						type: 'error'
			// 					})
			// 				} else {
			// 					const patientId = uni.getStorageSync('patientId');
			// 					AppIdentification(patientId).then(resp => {
			// 						if (resp.code == 200) {
			// 							if (resp.data.loginFlag) {
			// 								that.$refs.uToast.show({
			// 									title: '您已完善',
			// 									type: 'success',
			// 								})
			// 								if (that.timer) {
			// 									clearTimeout(that.timer)
			// 								}
			// 								that.timer = setTimeout(e => {
			// 									uni.navigateBack({
			// 										delta: 1
			// 									})
			// 								}, 1500)
			// 							} else {
			// 								information(that.query).then(res => {
			// 									if (res.code == 200) {
			// 										uni.removeStorageSync('invitationPatientId');
			// 										that.$refs.uToast.show({
			// 											title: '完善信息成功',
			// 											type: 'success',
			// 											duration: '1500'
			// 										})
			// 										if (that.timer) {
			// 											clearTimeout(that.timer)
			// 										}
			// 										that.timer = setTimeout(e => {
			// 											uni.navigateBack({
			// 												delta: 1
			// 											})
			// 										}, 1500)
			// 									} else if (res.code == 500) {
			// 										that.$refs.uToast.show({
			// 											title: res.msg,
			// 											type: 'error',
			// 										})
			// 									}
			// 								})
			// 							}
			// 						}
			// 					})
			// 				}
			// 			}
			// 		} else {
			// 			that.$refs.uToast.show({
			// 				title: '所属区域应选择所在的区或街道,请重新选择!',
			// 				type: 'error'
			// 			})
			// 		}
			// 	} else {
			// 		that.$refs.uToast.show({
			// 			title: '所属区域应选择所在的区或街道,请重新选择!',
			// 			type: 'error'
			// 		})
			// 	}
			// },
			//性别
			sexchange(e) {
				if (e == '男') {
					this.query.sex = 'MALE';
				} else if (e == '女') {
					this.query.sex = 'FEMALE';
				}
			},
			//选择出生日期
			timechange(e) {
				this.query.birthDate = e.year + '-' + e.month + '-' + e.day
			},
			//获取所在位置
			getAddress() {
				var that = this;
				uni.chooseLocation({
					success: function(location) {
						that.query.locationName = location.address
						that.query.homeLongitude = location.longitude;
						that.query.homeLatitude = location.latitude;
					}
				});
			},
			// getAddress() {
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function(res) {
			// 			const key = '3VABZ-6LZWK-YPAJ3-AMQED-D7RUK-VPB37'; //使用在腾讯位置服务申请的key
			// 			const referer = '新医路健康服务平台'; //调用插件的app的名称
			// 			const location = JSON.stringify({
			// 				latitude: 39.89631551,
			// 				longitude: 116.323459711
			// 			});
			// 			wx.navigateTo({
			// 				url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
			// 			});
			// 		}
			// 	});
			// },
			//区街道
			areaInfo() {
				getSubordinateRegions().then(res => {
					this.list = res.data;
				})
			},
			// 三级地址联动回调
			getpickerParentValue(e) {
				e = e.filter(ele => ele.localName != '暂不选择')
				e = e.filter(ele => ele.localName != '暂无需选择')
				this.addresslength = e
				this.address = ''
				this.query.areaCode = ''
				if (e && e.length >= 1) {
					e.forEach(el => {
						this.address = this.address + el.localName
					})
					this.query.areaCode = e[e.length - 1].id
				} else {
					this.address = ''
					this.query.areaCode = ''
				}
			},
			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
			//点击所需服务
			addnurseType(item) {
				if (this.query.nurseTypeIdList.findIndex(e => e == item.id) == -1) {
					this.query.nurseTypeIdList.push(item.id)
				} else {
					this.query.nurseTypeIdList = this.query.nurseTypeIdList.filter(e => e != item.id)
				}
			},
			godisease(item) {},
			tapradio() {
				this.selected = 2;
				this.maskshow = false;
			},
		},
		//进入界面加载
		onLoad(options) {
			let that = this
			// console.log(options, '00')
			 uni.$on('headPictureUrl',(res)=>{
				  console.log(res,'99999') 
				 this.query.headPictureUrl = res.tempImg
				 uni.$off('headPictureUrl')
			              //  为 B 页面传过来的值
			       })

			// this.query.headPictureUrl = options.headPictureUrl
			// this.query.couponId = Number(options.couponId)
			// const value = uni.getStorageSync('patientId');
			// if (value) {
			// 	that.query.patientId = value
			// }
			this.areaInfo()
			// this.getNurseTypeInfo();
		},
		//带参返回
		// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
		onShow() {
			var that = this
			const invitationPatientId = uni.getStorageSync('invitationPatientId')
			if (invitationPatientId) {
				that.query.source = 'FRIEND_INVITATION'
				that.query.invitationPatientId = Number(invitationPatientId)
			} else {
				that.query.source = 'REGISTER_YOURSELF'
				that.query.invitationPatientId = null
			}
			// const chooseLocation = requirePlugin('chooseLocation');
			// const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			// if (location) {
			// 	that.query.locationName = location.address
			// 	that.chooseLocation = location.address
			// 	that.query.homeLongitude = location.longitude;
			// 	that.query.homeLatitude = location.latitude;
			// }
		},
	}
</script>

<style lang="scss">
	.register {
		padding-bottom: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;

		.Agreement {
			width: 100%;
			background-color: #fff;
			text-align: center;
			height: 1000rpx;
			position: absolute;
			top: 5%;
			font-size: 30rpx;

			.title {
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 1px solid #eeeeee;
				font-size: 34rpx;
				margin: 0px auto;
				width: 100%;
				text-align: center;
			}

			.scroll-Y {
				height: 830rpx;
				overflow-y: scroll;
				text-align: left;
				text-indent: 2em;
			}

			.cancel {
				height: 70rpx;
				line-height: 70rpx;
				font-size: 32rpx;
				background-color: #F4F5F7;
				position: absolute;
				border-top: 1rpx solid #000000;
				bottom: 0;
				right: 0;
				width: 50%;
				color: #000000;
			}

			.determine {
				height: 70rpx;
				line-height: 70rpx;
				font-size: 32rpx;
				width: 50%;
				color: #F4F5F7;
				background: #26A888;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.radio-content {
			margin: 50rpx auto;
			width: 70%;
			text-align: center;
			font-size: 28rpx;
			position: relative;

			.agreement {
				position: absolute;
				top: 50%;
				left: 20%;
				transform: translateY(-50%);
				color: #878987;
			}

			.radio-right {
				height: 100rpx;

				.radio {
					display: inline-block;
					width: 50rpx;
					height: 50rpx;
					border-radius: 70%;
					border: 2rpx solid #178ffb;
					position: absolute;
					top: 50%;
					left: 5%;
					transform: translateY(-50%);

					.radio-active {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #178ffb;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}

		.head {
			margin-top: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			span {
				margin-top: 48rpx;
			}
		}

		.form {
			margin-top: 106rpx;

			::v-deep .u-input {
				width: 630rpx;
				height: 63rpx;
				background: #F6F6F6;
				color: #8E8E8E;
				// border:  1rpx solid red;
				// margin: 12rpx auto;
				border: none;
				border-radius: 5rpx;


				.u-input__input {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000 !important;
					padding-left: 20rpx;

				}

			}
			::v-deep .u-radio.data-v-643b3322{
				padding-left: 32rpx;
				    padding-top: 7rpx;
				
			}

			::v-deep.input-placeholder {
				color: #8E8E8E !important;
				font-size: 20rpx;

				font-family: Source Han Sans CN;
				font-weight: 400;
			}

			::v-deep.uni-input-placeholder {
				color: #8E8E8E !important;
				font-size: 20rpx;
			}

			.name {
				// padding: 25rpx 30rpx 0 30rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 38rpx;


				.sex {
					width: 630rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx 0 12rpx 0;
					border: none;
					border-radius: 5rpx;

				}

				::v-deep .u-radio[data-v-643b3322]{
					margin-top: 8rpx !important;
					margin-left: 30rpx !important;

				}

				::v-deep .u-input {
					width: 630rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border: none;
					border-radius: 5rpx;
				}

				.select {
					width: 630rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 20rpx 0 20rpx 0;
					// border: 1rpx solid #F6F6F6;
					border-radius: 5rpx;
					display: flex;
					position: relative;

					.testitem {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;


					}

					text {
						padding-left: 20rpx;
						line-height: 63rpx;
						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #8E8E8E;
					}

					image {
						width: 9rpx;
						height: 17rpx;
						position: absolute;
						right: 40rpx;
						top: 50%;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
					}
				}
			}

			/deep/ .u-input--border {
				margin: 0 0 12rpx 0;
				width: 600rpx;
				background: #F6F6F6;
				border-radius: 5rpx !important;
				border: 0;

				input {
					color: #8E8E8E !important;
					font-size: 22rpx !important;
				}
			}

			span {
				color: #333333;
				font-size: 30rpx;
			}
		}

		.bottom {
			position: relative;
			width: 100%;

			.radio-content {
				width: 100%;
				height: 100rpx;
				text-align: center;
				margin: 0 auto;
				display: flex;
				align-items: center;

				.agreement {
					color: #333333;
					width: 80%;
					text-align: left;
					padding-left: 20rpx;
				}

				.radio-right {
					width: 20%;

					.radio {
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 70%;
						border: 2rpx solid #26A888;
						position: relative;
						float: right;

						.radio-active {
							width: 15rpx;
							height: 15rpx;
							border-radius: 50%;
							background-color: #178ffb;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}
			}

			.sbumit {
				width: 496rpx;
				height: 61rpx;
				line-height: 61rpx;
				text-align: center;
				background: #26A888;
				border-radius: 5rpx;
				font-size: 31rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				left: 50%;
				position: relative;
				margin-top: 100rpx;
				// -webkit-transform: translateY(-50%);
				transform: translateX(-50%);
				bottom: 20rpx;
			}
		}

		// 	.btn {
		// 		width: 496rpx;
		// 		height: 61rpx;
		// 		background: #26A888;
		// 		border-radius: 5rpx;
		// 		font-size: 31rpx;
		// 		color: #FFFFFF;
		// 		line-height: 61rpx;
		// 		text-align: center;
		// 		position: absolute;
		// 		bottom: 72rpx;
		// 	}
	}

	.Facecollection {
		width: 266rpx;
		height: 266rpx;
	}

	/deep/ .u-form-item__message {
		padding-left: 0 !important;
	}
</style>