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="img" 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: '', //人脸照片
				img:'',
				isShow: true, //判断添加照片是否显示
				isImg: false
			}
		},
		methods: {
			// 选择照片
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						this.img=res.tempFiles[0].path
						wx.getFileSystemManager().readFile({
						  filePath:res.tempFiles[0].path,//微信小程序图片默认路径
						  encoding: 'base64', //编码格式
						  success:(res)=>{
							  this.isShow = false
							  this.isImg = true
						   this.photo=res.data
						  },fail(){
						   
						  }
						})
						
						
					
					}
				})
			},
			//提交表单数据
			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}$/; //手机号正则校验
					let nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
					if (!nameReg.test(this.name)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的姓名格式',
							duration: 2000
						});
					} 
					// 表单校验
					else if (!phoneReg.test(this.phone)) {
						uni.showToast({
							'icon': 'none',
							title: "手机号码格式不正确"
						})
					} else if (!idNumerReg.test(this.idNumber)) {
						uni.showToast({
							'icon': 'none',
							title: "身份证号码格式不正确"
						})
					} else {
						uni.showLoading({
							mask:true,
							title:'加载中'
						})
						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.hideLoading()
								uni.showToast({
									'icon': 'success',
									title: "保存成功"
								})
								this.name=''
								this.phone=''
								this.idNumber=''
								setTimeout(()=>{
									uni.navigateTo({
										url: './family'
									})
								},500)
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.msg,
									'icon': 'none'
								})
							}
						}).catch(()=>{
							uni.hideLoading()
						})
						
					}
				}

			}
		}
	}
</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>