xinelu-applet-ui/pagesB/AddMembers/AddMembers.vue

<template>
	<view class="app">
		<view class="content">
			<view class="text_title">
				<text>家庭医生想要你授权信息</text>
			</view>
			<view class="text_con">
				<view class="text_con_pic">
					<image src="/pagesB/static/shflt.png" mode=""></image>
				</view>
				<view class="text_con_right">
					信息仅用于授权，您的资料将被严格保密
				</view>
			</view>
			<view class="contentbottom">
				<u-form :model="form" ref="uForm">
					<u-form-item prop="cardNo" :border-bottom="false">

						<view class="name">
							身份证号
							<u-input v-model="form.cardNo" placeholder="请输入身份证号" />
							<view class="idScan">
								<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
								<image style="width: 28rpx;height: 28rpx;" src="/pagesB/static/sweep.png" mode="">
								</image>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="patientName" :border-bottom="false">

						<view class="name">
							姓名
							<u-input v-model="form.patientName" placeholder="请输入姓名" />
						</view>
					</u-form-item>
					<u-form-item prop="sex" :border-bottom="false">
						<view class="name">
							性别
							<view class="sex">
								<u-radio-group v-model="form.sexname" size='30'>
									<u-radio @change='changeGender' 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>
					</u-form-item>
					<u-form-item prop="nation" :border-bottom="false">
						<view class="name">
							民族
							<view class="select" @click="showNation = true;">
								<text v-if="!nation">请选择民族</text>
								<!-- <text v-if="!householdRelationship">请选择与户主关系</text> -->
								<text v-else class="testitem">{{nation}}</text>
								<image src="../../static/huijiantou.png" mode=""></image>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="birthDate" :border-bottom="false">
						<view class="name">
							出生日期
							<view class="select" @tap='timeshow=true'>
								<text v-if="form.birthDate==''">请选择出生日期</text>
								<text v-else class="testitem">{{form.birthDate}}</text>
								<image src="../../static/huijiantou.png" mode=""></image>
							</view>
						</view>
						<!-- <view class="name">
							出生日期
							<view class="select">
								<text v-if="!form.birthDate">请选择出生日期</text>
								<text v-else class="testitem">{{form.birthDate}}</text>

								<image src="../../static/huijiantou.png" mode=""></image>
							</view>
						</view> -->
					</u-form-item>
					<u-form-item prop="householdRelationship" :border-bottom="false">
						<view class="name">
							与户主的关系
							<view class="select" @click="showRelationshipWithHouseholder = true;">
								<text v-if="!householdRelationship">请选择与户主关系</text>
								<text v-else class="testitem">{{householdRelationship}}</text>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="" :border-bottom="false">
						<view class="name">
							户主身份证号
							<u-input v-model="form.householdCardNo" placeholder="请输入身份证号" />
						</view>
					</u-form-item>

					<u-form-item prop="address" :border-bottom="false">
						<view class="name">
							居住地址
							<u-input v-model="form.address" placeholder="请输入居住地址" />
						</view>
					</u-form-item>
					<view class="name">
						所属区域
						<view class="select" @tap='showPicker'>
							<text v-if="!addressinfo">请选择所属区域</text>
							<text v-else class="testitem" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{addressinfo}}</text>
							<!-- <image src="../../static/huijiantou.png" mode=""></image> -->
						</view>
					</view>
				<!-- 	<view class="name">
						所在位置
						<view class="selectdata" @tap='getAddress'>
							<text v-if="form.locationName ==''">请选择所在位置</text>
							<text class="testitem">{{form.locationName}}</text>
						</view>
					</view> -->
					<u-form-item prop="phone" :border-bottom="false">
						<view class="name">
							手机号
							<u-input v-model="form.phone" placeholder="请输入手机号" />
						</view>
					</u-form-item>
				</u-form>
			</view>
			<u-toast ref="uToast" />


			<view class="nextpage" @tap="register">
				添加
			</view>
			<!-- 民族 -->
			<u-select v-model="showNation" :list="actions" @confirm="nationSelect"></u-select>
			<!-- 与户主关系 -->
			<u-select v-model="showRelationshipWithHouseholder" :list="relationship"
				@confirm="relationshipSelect"></u-select>

			<!-- 出生日期 -->
			<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>

	</view>
	</view>
</template>

<script>
	import {
		registerdata
	} from '@/api/pages/register/register.js'
	import gkcity from "@/components/m-city/m-city.vue";
	import ldSelect from '../../components/ld-select/ld-select.vue';
	import {
		getSubordinateRegions,
	} from '@/api/pagesB/modifyAddress/modifyAddress.js';

	export default {
		components: {
			ldSelect,
			"m-city": gkcity,
		},

		data() {
			return {
				addresslength: null,
				addressinfo:'',
				sexlist: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				timeshow: false, //出生日期
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				mode: '',
				newTime: '',
				barTitle: '添加成员',
				showBirthday: false,
				showNation: false,
				showRelationshipWithHouseholder: false,
				// isShow: false,
				loading: false,
				// value1: '',
				//校验性别 flag
				ifSex: '',
				form: {
					cardNo: '',
					patientName: '',
					sexname: '',
					nation: '',
					address: '',
					phone: '',
					birthDate: '',
					householdRelationship: '',
					locationName: '',
					homeLongitude: '',
					homeLatitude: '',
					areaCode:'',
				},
				householdRelationship: '',
				userinfo: {},

				nation: '',
				actions: [{
						value: '1',
						label: '汉族'

					},
					{
						value: '2',
						label: '少数名族'
					}
				],
				relationship: [{
						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: '其他'
					},
				],
				radiolist: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}, ],
				rules: {
					cardNo: [{
						//必填
						required: true,
						message: '请输入身份证号',
						trigger: ['change', 'blur'],
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.idCard(value);
						},
						message: '请输入正确的身份证号',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					patientName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur']
					}],
					sex: [{
						min: 1,
						required: true,
						message: '请选择性别',
						trigger: ['change']
					}],
					nation: [{
						min: 1,
						required: true,
						message: '请选择民族',
						trigger: ['blur', 'change']
					}],
					birthDate: [{
						min: 1,
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', 'change']
					}],
					householdRelationship: [{
						min: 1,
						required: true,
						message: '请选择与户主关系',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请输入居住地址',
						trigger: ['change', 'blur']
					}],
					phone: [{
						// type: 'number',
						// len: 13,
						required: true,
						message: '请输入正确手机号',
						trigger: ['change', 'blur']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				},
				columns: [
					['山东省'],
					['德州市', '东营市', '济南市']
				],
				columnData: [
					['德州市', '东营市', '济南市']
				],
				gxcolumn: [],
				dictList: [],
				address: uni.getStorageSync('location'),
				addInfo: {
					longitude: '', //经度
					latitude: '', //纬度
				},
			}
		},

		onLoad(options) {
			this.form.openid = uni.getStorageSync('openid')
			this.areaInfo()

		},
		onShow() {
			if (this.address != uni.getStorageSync('location')) {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		beforeDestroy() {
			wx.exitMiniProgram({
				success(e) {
					console.log(e)
				}
			})
		},
		methods: {
			//获取所在位置
			getAddress() {
				var that = this;
				uni.chooseLocation({
					success: function(location) {
						that.form.locationName = location.address
						that.form.homeLongitude = location.longitude;
						that.form.homeLatitude = location.latitude;
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
			// 三级地址联动回调
			getpickerParentValue(e) {
				e = e.filter(ele => ele.localName != '暂不选择')
				e = e.filter(ele => ele.localName != '暂无需选择')
				this.addresslength = e
				this.addressinfo = ''
				this.form.areaCode = ''
				if (e && e.length >= 1) {
					e.forEach(el => {
						this.addressinfo = this.addressinfo + el.localName
					})
					this.form.areaCode = e[e.length - 1].id
				} else {
					this.addressinfo = ''
					this.form.areaCode = ''
				}
			},
			//区街道
			areaInfo() {
				getSubordinateRegions().then(res => {
					this.list = res.data;
				})
			},
			//选择出生日期
			timechange(e) {
				this.form.birthDate = e.year + '-' + e.month + '-' + e.day
			},
			// 添加
			register() {
				const _this = this
				_this.userinfo = uni.getStorageSync('userinfo');
				_this.form.openid = uni.getStorageSync('openid');
				_this.form.cityCode = uni.getStorageSync('region');
				console.log(_this.form, '000')
				if (_this.form.sexname == '男') {
					_this.form.sex = 'MALE';
				} else if (_this.form.sexname == '女') {
					_this.form.sex = 'FEMALE';
				}
				if (_this.form.sex == "") {
					_this.$refs.uToast.show({
						title: '请选择性别',
						type: 'error'
					})
				}
				if (_this.form.areaCode == "") {
					_this.$refs.uToast.show({
						title: '请选择所属区域',
						type: 'error'
					})
				}
				_this.$refs.uForm.validate(valid => {
					if (valid) {
							if (_this.addresslength) {
								if (_this.addresslength.length > 2) {
									registerdata(_this.form).then(res => {
										if (res.code == 500) {
											_this.$refs.uToast.show({
												title: res.msg,
												type: 'error'
											})
										} else {
											_this.$refs.uToast.show({
												title: '添加成功',
												type: 'success'
											})
											uni.navigateBack({
												delta: 1
											})
											// this.back()

										}

									})

								}
								else {
									_this.$refs.uToast.show({
										title: '所属区域应选择所在的区或街道,请重新选择!',
										type: 'error'
									})
								}

							}


					}

				});

			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeGender(e) {
				if (e == '男') {
					this.form.sex = 'MALE';
				} else if (e == '女') {
					this.form.sex = 'FEMALE';
				}

			},
			// 民族
			nationSelect(e) {
				this.form.nation = e[0].value
				this.nation = e[0].label

			},
			// 与户主关系
			relationshipSelect(e) {
				this.form.householdRelationship = e[0].value
				this.householdRelationship = e[0].label

			},
		}
	}
</script>
<style lang="scss">
	.app {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;

		.content {
			width: 95%;
			height: 100%;
			overflow: scroll;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 0 auto;
			position: relative;

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

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

				}

			}

			.u-form-item {
				padding: 0 0 !important;
			}

			.text_title {
				// width: 358rpx;
				height: 29rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin: 40rpx 30rpx 0 7%;
			}

			.text_con {
				display: flex;
				// align-items: center;
				// justify-content: center;
				//
				width: 47%;
				margin: 23rpx 30rpx 0 55rpx;

				color: rgb(23, 20, 22);
				border-radius: 16rpx;
				background: #E9F6F3;
				border-radius: 2rpx;

				.text_con_pic {
					margin-right: 10rpx;
					margin-left: 9rpx;

					image {
						width: 14rpx;
						height: 18rpx;
					}
				}

				.text_con_right {
					// width: 251rpx;
					// height: 15rpx;
					font-size: 14rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;


				}
			}

			.nextpage {
				width: 496rpx;
				height: 61rpx;
				background: #26A888;
				border-radius: 5rpx;
				line-height: 61rpx;
				color: white;
				text-align: center;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				margin-top: 100rpx;
				bottom: 27rpx;

			}

			.contentbottom {
				position: relative;
				top: 2%;
			}

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

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

					font-family: Source Han Sans CN;
					font-weight: 400;
					padding-left: 20rpx;
				}

				.idScan {
					position: absolute;
					top: 75rpx;
					right: 60rpx;
					// transform: translate(0%, -40%);
				}

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

				}

				::v-deep .u-radio {
					margin-top: 8rpx !important;
					margin-left: 20rpx !important;

				}

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

				}

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

				::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;
				}

				::v-deep .u-input__input.data-v-fdbb9fe6 {
					font-size: 26rpx !important;
				}

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

				}

				// .selectdata{

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

				.select {
					width: 636rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					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%);
					}
				}
			}

			.numberone {
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				top: 6%;
				left: 15%;
				background: #26A888;
				border-radius: 50%;
				color: #fff;
				line-height: 90rpx;
				text-align: center;
				font-size: 50rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;

				.information {
					width: 160rpx;
					margin: 11px 4px 4px -10px;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #26A888;
					line-height: 38rpx;
				}
			}

			.number {
				.numbertwo:hover {
					background-color: #26A888;
					color: #fff;
				}

				.information:hover {
					color: #26A888;
				}
			}

			// ::v-deep .uni-input-input {
			// 	left: 20rpx;
			// }

			.number {
				width: 180rpx;
				height: 150rpx;
				position: absolute;
				top: 6%;
				left: 65%;

				.numbertwo {
					width: 90rpx;
					height: 90rpx;
					left: 50%;
					transform: translateX(50%);
					background: #F0F1F6;
					border-radius: 50%;
					line-height: 90rpx;
					text-align: center;
					font-size: 50rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					// border: 1rpx solid #A6C8C0;
					color: #A6C8C0;

				}

				.information {
					padding-top: 20rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #8E8E8E;
					line-height: 38rpx;
					text-align: center;
				}
			}


			.item {
				position: absolute;
				width: 202rpx;
				height: 1rpx;
				top: 10%;
				left: 34%;
				background: linear-gradient(-90deg, #E6E6E6, #26A888);
			}
		}
	}
</style>