hjt_erdao_WeChatApplet/pages/soldier/user/add.vue

<template>
	<view class="add main-bg">
		<u-form :model="form" ref="uForm" :rules="rules">
			<u-form-item 
				label="姓名"
				label-width="180" 
				:label-position="labelPosition" 
				prop="userName">
				<u-input 
					v-model="form.userName" 
					placeholder-style="color: #2E4F1C;"
					placeholder="请输入您的姓名" />
			</u-form-item>
			<u-form-item
				label="身份证号码"
				prop="userIdcard"
				label-width="180" 
				:label-position="labelPosition">
				<view class="form-item">
					<u-input 
						v-model="form.userIdcard" 
						placeholder-style="color: #2E4F1C;"
						placeholder="请输入您的身份证号码" />
				</view>
			</u-form-item>
			<u-form-item
				label="手机号码"
				prop="tel"
				label-width="180" 
				:label-position="labelPosition" 
				>
				<u-input 
					v-model="form.tel" 
					placeholder-style="color: #2E4F1C;"
					placeholder="请输入您的手机号码" />
			</u-form-item>
			<u-form-item
				:label-position="labelPosition"
				label="身份"
				prop="relationName"
				label-width="150">
				<u-input
					type="select" 
					:select-open="selectShow" 
					v-model="form.relationName" 
					placeholder="请选择" 
					placeholder-style="color: #2E4F1C;"
					@click="selectShow = true">
				</u-input>
			</u-form-item>
			<view class="store-dis">
				<view class="store-address">
					<view class="select-address">
						<view style="color: #303133;" class="font-twenty">
							家庭住址
						</view>
						<u-input
							v-model="form.address" 
							placeholder-style="color: #2E4F1C;"
							placeholder="请选择地址"/>
					</view>
				</view>
				<view class="map-icon" @click="chooseLocation()">
					<image src="/static/map.png" class="icon-img"></image>
				</view>
			</view>
		</u-form>
		<view @click="submit" class="form-submit">确认添加</view>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import server from "@/api/index";
import amap from '@/lib/amap-wx.130.js'
export default {
	data() {
		return {
			labelPosition: 'left',
			selectShow: false,
			id: null,
			userInfo: {},
			addressName: '',
			form: {
				userName: '',
				relationName: '',
				relationId:'',
				userIdcard: '',
				tel: '',
				address: ''
			},
			key:'1dc63f21c12985e199a715faf4c02f36',
			selectList: [],
			rules: {
				userName: [
					{ 
						required: true, 
						message: '请输入您的姓名!', 
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '姓名必须是汉字!',
						trigger: ['change','blur'],
					}
				],
				userIdcard: [
					{	
						required: true, 
						message: '请输入您的身份证号码!', 
						trigger: ['change','blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证号码格式不正确',
						trigger: ['change','blur'],
					}
				],
				relationName: [
					{	
						required: true, 
						message: '请选择身份!', 
						trigger: ['change','blur']
					}
				],
			}
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(e) {
		// this.userInfo = uni.getStorageSync('userInfo');
		// if(e.id){
		// 	this.id = e.id;
		// 	this.getUserRelationInfoFn();
		// }
		this.getRelationInfoListFn();
		this.amapPulgin = new amap.AMapWX({
			key: this.key
		})
	},
	methods:{
		chooseLocation(e) {
			uni.chooseLocation({
				success: (res) => {
					console.log("ppp99",res)
					this.form.address = res.address
				}
			})
		},
		getLocation() {
			let that = this;
			that.amapPulgin.getRegeo({
				success: res => {
					console.log('当前定位', res);
					that.addressName = `${res[0].regeocodeData.addressComponent.city}`
					// uni.hideLoading();
				},
				fail: err => {
					console.log(err)
				}
			})
		},
		getUserRelationInfoFn(){
			server.getUserRelationInfo(this.id).then(res =>{
				this.form = res
			})
		},
		getRelationInfoListFn(){
			server.getUploadInfo({dictType: 'basics_level'}).then(res =>{
				this.selectList = [];
				res.forEach(item =>{
					this.selectList.push({
						label: item.dictLabel,
						value: item.dictValue,
						// value: item.relationId,
						// label: item.relationInfo
					})
				})
			})
		},
		submit() {
			let _this = this
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// if(_this.id){
					// 	server.updateUserRelation(_this.form).then(res =>{
					// 		_this.$refs.uToast.show({
					// 			title: '修改军属信息成功!',
					// 			type: 'default',
					// 		})
					// 		setTimeout(function()  {
					// 			uni.navigateBack({
					// 			    delta: 1
					// 			});
					// 		}, 2000);
					// 	})
					// }else{
						let params = _this.form
						params.remark = ''
						server.getAdd(params).then(res =>{
								_this.$refs.uToast.show({
									title: '添加军属成功!',
									type: 'default',
								})
								setTimeout(function()  {
									uni.navigateBack({
									    delta: 1
									});
								}, 2000);
						})
					// }
				} else {
					console.log('验证失败');
				}
			});
		},
		selectConfirm(e) {
			this.form.relationName = '';
			e.map((val, index) => {
				this.form.relationName = val.label;
				this.form.relationId = val.value;
			})
		},
	},
}
</script>

<style lang="scss" scoped>
	/deep/ .u-icon__icon{
		position: relative;
		color: #2E4F1C!important;
	}
	/deep/ .u-form-item__message{
		padding-right: 0rpx!important;
		text-align: right;
	}
	/deep/ .u-input__input{
		color: #2E4F1C!important;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: right;
	}
	/deep/ .u-border, .u-border-bottom, .u-border-left, .u-border-right, .u-border-top, .u-border-top-bottom{
		
	}
	/deep/ .u-form-item{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		box-sizing: border-box;
		line-height: 96rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 24rpx;
		height: 96rpx;
		margin-bottom: 40rpx;
		padding-left: 30rpx!important;
		padding-right: 30rpx!important;
	}
	.store-dis{
		display: flex;
		margin-bottom: 30rpx;
		.store-address{
			width: 580rpx;
			padding: 16rpx 30rpx;
			background: #fff;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			.select-address{
				display: flex; 
				align-items: center;
				justify-content: space-between; 
			}
		}
		.map-icon{
			width: 110rpx;
			background: #2E4F1C;
			text-align: center;
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			padding-top: 31rpx;
			.icon-img{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
	.add{
		width: 100%;
		height: auto;
		min-height: 100vh;
		padding: 30rpx 30rpx 30rpx;
		.form-submit{
			margin: 120rpx auto;
			width: 570rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background: #2E4F1C;
			border-radius: 49rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}
</style>