safetyHome_wxapp/pages/mine/addFamily.vue

<!-- 添加家人信息 -->
<template>
	<view class="">
		<view class="item">
			<view class="title">姓名</view>
			<view class="content">
				<input type="text" v-model="name" placeholder="请输入姓名" placeholder-class="holder" />
			</view>
		</view>
		<view class="item">
			<view class="title">手机号 </view>
			<view class="content">
				<input type="number" v-model="phone" placeholder="请输入手机号" placeholder-class="holder" />
			</view>
		</view>
		<view class="item">
			<view class="title">身份证号</view>
			<view class="content">
				<input type="text" v-model="idNumber" placeholder="请输入身份证号" placeholder-class="holder" />
			</view>
		</view>
		<view class="item" style="height: 414rpx;">
			<view class="title">人脸照片 </view>
			<view class="content" style="height: 300rpx;">
				<image src="../../static/circle_image@2x.png" style="width: 330rpx;height: 300rpx;" @tap="chooseImg" v-show="isShow"></image>
				<image :src="photo" style="width: 330rpx;height: 300rpx;" v-show="isImg" @tap="chooseImg"></image>
			</view>
		</view>
		<!-- <view class="tip">注：带*为必填项</view> -->
		<view class="btn" :class="{active: name && phone && idNumber && photo}" @tap="save">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '', //姓名
				phone: '', //手机号
				idNumber: '', //身份证号
				photo: '', //人脸照片
				isShow: true, //判断添加照片是否显示
				isImg: false
			}
		},
		methods: {
			// 选择照片
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						this.photo = res.tempFiles[0].path
						this.isShow = false
						this.isImg = true
					}
				})
			},
			//提交表单数据
			save() {
				if (!this.name || !this.phone || !this.idNumber || !this.photo) {
					return
				} else {
					let idNumerReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; //身份证正则
					let phoneReg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号正则校验
					// 表单校验
					if (!phoneReg.test(this.phone)) {
						uni.showToast({
							'icon': 'none',
							title: "手机号码格式不正确"
						})
					} else if (!idNumerReg.test(this.idNumber)) {
						uni.showToast({
							'icon': 'none',
							title: "身份证号码格式不正确"
						})
					} else {
						this.http.httpRequest('/wxapplet/owner/peopleInfor/faceadd', 'post', {
							comtyId: uni.getStorageSync('comtyId'),
							cardNo: this.idNumber,
							personName: this.name,
							phoneNum: this.phone,
							facePic: this.photo,
							doorNum:uni.getStorageSync('homeId')
						}, true).then((res) => {
							if (res.code == 0) {
								uni.showToast({
									'icon': 'success',
									title: "保存成功"
								})
								uni.navigateTo({
									url: './family'
								})
							} else {
								uni.showToast({
									title: res.msg,
									'icon': 'none'
								})
							}
						})
						
					}
				}

			}
		}
	}
</script>

<style>
	.btn {
		width: 702rpx;
		height: 90rpx;
		background: rgba(163, 197, 237, 1);
		opacity: 1;
		border-radius: 18rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 90rpx;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
		margin-top: 140rpx;

	}

	.tip {
		width: 186rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(231, 0, 30, 1);
		margin-left: 44rpx;
		margin-top: 20rpx;
	}

	.title {
		width: 100%;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44px;
		color: rgba(51, 51, 51, 1);
		margin-top: 32rpx;
		margin-bottom: 58rpx;
		/* overflow: hidden; */
	}

	.content {
		width: 100%;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: rgba(51, 51, 51, 1);
		margin-left: 18rpx;
	}

	.item {
		width: 662rpx;
		height: 154rpx;
		border-bottom: 2rpx solid rgba(247, 247, 247, 1);
		;
		margin: 0 auto;
	}

	.holder {
		color: rgba(153, 153, 153, 1);
	}

	.active {
		background: rgba(41, 138, 253, 1);
	}
</style>