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="请输入手机号" :disabled="true" />
				</u-form-item>
				<span>身份证号</span>
				<u-form-item prop="cardNo" :border-bottom="false">
					<u-input v-model="query.cardNo" placeholder="请输入身份证号" />
				</u-form-item>
				<span>户主身份证号</span>
				<u-form-item prop="householdCardNo" :border-bottom="false">
					<u-input v-model="query.householdCardNo" placeholder="请输入身份证号" />
				</u-form-item>
				<view class="name">
					与户主关系
					<view class="select" @click="showNation = true;">
						<text v-if="!householdRelationship">请选择与户主关系</text>
						<text v-else class="testitem">{{householdRelationship}}</text>
						<image src="@/static/huijiantou.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					所属区域
					<view class="select" @tap='showPicker'>
						<text v-if="!address">请选择所属区域</text>
						<text v-else class="testitem"
							style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{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="selectdata" @tap='getAddress'>
						<text v-if="query.locationName ==''">请选择所在位置</text>
						<text class="testitem"
							style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{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-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>
		<u-select v-model="showNation" :list="actions" @confirm="nationSelect"></u-select>
		<u-toast ref="uToast" />
	</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'
	import {
		mapMutations
	} from "vuex";
	export default {
		components: {
			contenttext,
			ldSelect,
			"m-city": gkcity,
		},
		// components: {ldSelect},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				SOCKETURL: '',
				showNation: false, //户主关系
				actions: [{
						value: '1',
						label: '户主本人'

					},
					{
						value: '2',
						label: '配偶'
					},
					{
						value: '3',
						label: '子女'
					}, {
						value: '4',
						label: '(外)孙子女'
					}, {
						value: '5',
						label: '父母'
					}, {
						value: '6',
						label: '(外)祖父母'
					}, {
						value: '7',
						label: '兄弟姐妹'
					}, {
						value: '8',
						label: '儿媳'
					}, {
						value: '9',
						label: '女婿'
					}, {
						value: '10',
						label: '孙子女'
					}, {
						value: '11',
						label: '侄子女'
					}, {
						value: '12',
						label: '曾孙子女'
					}, , {
						value: '13',
						label: '祖父母'
					}, , {
						value: '99',
						label: '其他'
					},
				],
				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: '高血脂'
				}, ],
				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: [],
					patientId: '',
					locationName: '',
					sex: '',
					sexname: '',
					birthDate: '',
					cityCode: '',
					householdCardNo: '',
					householdRelationship: '',
				},
				householdRelationship: '',
				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: {
			...mapMutations(['scoket']),
			// 与户主关系
			nationSelect(e) {
				console.log(e)
				this.query.householdRelationship = e[0].value
				this.householdRelationship = e[0].label
				// console.log(this.query.householdRelationship)
				// this.$refs.uForm.validateField('nation')
			},
			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() {
				var that = this
				that.query.openid = uni.getStorageSync('openid');
				that.query.cityCode = uni.getStorageSync('region');
				if (that.query.sexname == '男') {
					that.query.sex = 'MALE';
				} else if (that.query.sexname == '女') {
					that.query.sex = 'FEMALE';
				}
				if (that.selected == 1) {
					that.$refs.uToast.show({
						title: '请审核并同意用户协议',
						type: 'error'
					})
					return
				} else if (that.query.sex == "") {
					that.$refs.uToast.show({
						title: '请选择性别',
						type: 'error'
					})
					return
				} else if (!that.query.locationName) {
					that.$refs.uToast.show({
						title: '请选择所在位置',
						type: 'error'
					})
					return
				} else if (!that.query.birthDate) {
					that.$refs.uToast.show({
						title: '请选择出生日期',
						type: 'error'
					})
					return
				}
				that.$refs.uForm.validate(valid => {
					if (valid) {
						if (that.addresslength) {
							if (that.addresslength.length > 2) {
								registerdata(that.query).then(res => {
									if (res.code == 200) {
										getCurrentUser(that.query.openid).then(res => {
											uni.setStorageSync('patientId', res.data.id);
											uni.setStorageSync('patientName', res.data
												.patientName);
											uni.setStorageSync("userinfo", res.data)
											that.scoket();
											that.$refs.uToast.show({
												title: '注册成功',
												type: 'success',
												back: 1,
											})
										})
									} else {
										that.$refs.uToast.show({
											title: res.msg,
											type: 'error',
										})
									}
								})
							} else {
								that.$refs.uToast.show({
									title: '所属区域应选择所在的区或街道,请重新选择!',
									type: 'error'
								})
							}
						}
					}
				});
			},
			//切换
			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'
				})
			},
			//性别
			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;
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			//区街道
			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
			}
			this.query.phone = uni.getStorageSync("phone")
			// 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;

		::v-deep .select-modal .select-dialog {
			height: 370rpx !important;

		}

		.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%);
					}
				}

				.selectdata {
					width: 636rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border-radius: 5rpx;
					display: flex;
					position: relative;
					// white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;


					.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>