RiyueGorge/pages/peopleList/addPeople.vue

<template>
	<view class="peoplePage">
		<!-- <u-button type="primary" icon="camera" shape="circle" text="识别身份证信息" plain></u-button> -->
		<view class="" style="margin-bottom: 20rpx;background-color: #ffffff;padding: 20rpx 0;">
			<u-cell :border="false" size="large" title="识别身份证信息" isLink></u-cell>
		</view>
		<view class="form"  style="">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"  labelWidth="200rpx">
				    <u--input v-model="form.userInfo.name" border="none" placeholder="请输入姓名" placeholderStyle="color: #555555"></u--input>
				</u-form-item>
				
				<u-form-item label="性别" labelWidth="200rpx"  prop="userInfo.gender" borderBottom @click="showgender = true;" ref="item1">
					<picker @change="bindPickerChange" :value="index" :range="genderArray">
						<view class="" style="display: flex;">
							<u--input v-model="form.userInfo.gender" disabled disabledColor="#ffffff" placeholder="请选择性别" placeholderStyle="color: #555555" border="none"></u--input>
							<u-icon slot="right" name="arrow-right" size="28"></u-icon>
						</view>
					</picker>
				</u-form-item>
				
				<u-form-item label="出生日期" labelWidth="200rpx"  borderBottom ref="item1">
					 <picker  mode="date" :value="form.userInfo.birthday" start="1922-01-01" @change="bindDateChange" >
						 <view class="" style="display: flex;">
						 	<u--input v-model="form.userInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择出生日期" placeholderStyle="color: #555555" border="none" ></u--input>
						 	<u-icon slot="right" name="arrow-right" size="28"></u-icon>
						 </view>
					
					 </picker>
				</u-form-item>
				
				<u-form-item label="证件类型" labelWidth="200rpx"  borderBottom ref="item1" prop="userInfo.certificate_type">
					<picker @change="bindType" :value="index" :range="typeArray">
						<view class="" style="display: flex;">
							<u--input v-model="form.userInfo.certificate_type" disabled disabledColor="#ffffff" placeholder="请选证件类型" placeholderStyle="color: #555555" border="none" ></u--input>
							<u-icon slot="right" name="arrow-right" size="28"></u-icon>
						</view>
					</picker>
				</u-form-item>
				
				<u-form-item label="证件号码" labelWidth="200rpx"  prop="userInfo.certificate_no"  borderBottom ref="item1" >
				    <u--input v-model="form.userInfo.certificate_no" border="none" placeholder="请输入证件号码" placeholderStyle="color: #555555"></u--input>
				</u-form-item>
				
				<u-form-item label="手机号码" labelWidth="200rpx"  prop="userInfo.phone"  borderBottom ref="item1" >
				    <u--input v-model="form.userInfo.phone" border="none" placeholder="请输入手机号" placeholderStyle="color: #555555"></u--input>
				</u-form-item>
				
				<u-form-item label="紧急联系人" labelWidth="200rpx"  borderBottom ref="item1" prop="userInfo.emergency_name">
				    <u--input v-model="form.userInfo.emergency_name" border="none"  placeholder="紧急联系人姓名" placeholderStyle="color: #555555"></u--input>
				</u-form-item>
				
				<u-form-item label="紧急联系人" labelWidth="200rpx"  borderBottom ref="item1" prop="userInfo.emergency_phone">
				    <u--input v-model="form.userInfo.emergency_phone" border="none"  placeholder="紧急联系人手机号" placeholderStyle="color: #555555"></u--input>
				</u-form-item>
				
				<u-form-item>
					<view class="" style="margin-bottom: 20rpx;">
						饮食禁忌
					</view>
				    <!-- <u-textarea v-model="form.userInfo.food_taboos" placeholder="请输入内容" placeholderStyle="color: #555555" count height=120></u-textarea> -->
					<u--textarea v-model="form.userInfo.food_taboos" placeholder="请输入内容" placeholderStyle="color: #555555"  height=160 border="none"></u--textarea>
				</u-form-item>
				
				<u-form-item>
					<view class="" style="margin-bottom: 20rpx;">
						期望改善建康状况
					</view>
					<u--textarea v-model="form.userInfo.hope_improve" placeholder="请输入内容" placeholderStyle="color: #555555"  height=160 border="none"></u--textarea>
				    <!-- <u-textarea v-model="form.userInfo.hope_improve" placeholder="请输入内容" placeholderStyle="color: #555555" count height=120></u-textarea> -->
				</u-form-item>
			</u--form>
		</view>

		<view v-if="state==0" class="navbar" @click="submit">
			保存
		</view>
		
		<view v-if="state==1" class="navbar" @click="add">
			添加出行人
		</view>
	</view>
</template>

<script >
	export default{
		data(){
			return{
				// 性别选择器
				// showgender: false,
				// 性别选择
				 genderArray: ['男', '女'],
				 // 证件类型
				 typeArray:["身份证","临时身份证","士兵证","暂住证","外交护照","普通护照","台湾居民来往大陆通行证","港澳居民来往内地通行证","港澳同胞回乡证","其他证件（包括联合国通行证 欧洲共同体护照等）"],
				 index:0,
				form: {
					userInfo: {
					name: '',
					gender: '',
					birthday:"",
					certificate_type:'',
					phone:"",
					certificate_no:'',
					// 联系人姓名
					emergency_name:"",
					// 联系人电话
					emergency_phone:'',
					// 饮食禁忌
					food_taboos:'',
					// 健康状况
					hope_improve:''
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.gender': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					"userInfo.certificate_no":{
						type: 'string',
						len: 18,
						required: true,
						message: '请填写正确的证件号',
						trigger: ['blur']
					},
					"userInfo.certificate_type":{
						type: 'string',
						required: true,
						message: '请填写证件类型',
						trigger: ['blur', 'change']
					},
					"userInfo.phone":{
						type: 'string',
						required: true,
						len: 11,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					},
					"userInfo.emergency_name":{
						type: 'string',
						required: true,
						message: '请填写紧急人姓名',
						trigger: ['blur']
					},
					"userInfo.emergency_phone":{
						type: 'number',
						required: true,
						len: 11,
						message: '请填写紧急联系人电话',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				// 修改 与 添加状态
				state:1,
				id:0
			}
		},
		onLoad(options) {
			// console.log(options.info)
			let info=JSON.parse(options.info)
			if(info.gender==1){
				info.gender="男"
			}else if(info.gender==2){
				info.gender=="女"
			}
			this.id=info.id
			this.form.userInfo=info
			this.form.userInfo.certificate_type=info.certificate_type_text
			this.state=options.state
			console.log(this.state)
		},
		methods:{
			// 选择性别
			bindPickerChange(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
				console.log(this.genderArray[e.detail.value])
			   this.form.userInfo.gender=this.genderArray[e.detail.value]
			},
			// 选择护照类型
			bindType(e) {
			   this.form.userInfo.certificate_type=this.typeArray[e.detail.value]
			},
			// 选择出生日期
			bindDateChange (e) {
			    console.log(e)
			    this.form.userInfo.birthday  = e.detail.value
			},
			// 修改出行人
			submit(){
				let form=JSON.parse(JSON.stringify(this.form.userInfo))
				// form=this.form.userInfo
				console.log(form)
				if(form.gender=="男"){
					form.gender=1
				}else if(form.gender=="女"){
					form.gender=2
				}
				if(form.certificate_type=="身份证"){
					form.certificate_type=1
				}
				form.id=this.id
				uni.$u.http.post('/api/traveler/edit',form,{
					custom: {
						auth: true
					}
				}).then((res) => {
					// this.$store.commit("getpeopleList",res)
					uni.showToast({
						icon:"success",
						title:"修改成功",
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				
				}).catch((err) => {
					
				})
			},
			// 添加出行人
			add(){
				console.log(this.$store.state.token,"xxxxxxxxxxx")
				let form=JSON.parse(JSON.stringify(this.form.userInfo))
				// form=this.form.userInfo
				console.log(form)
				if(form.gender=="男"){
					form.gender=1
				}else if(form.gender=="女"){
					form.gender=2
				}
				if(form.certificate_type=="身份证"){
					form.certificate_type=1
				}
				
				
				uni.$u.http.post('/api/traveler/add',form,{
					custom: {
						auth: true
					}
				}).then((res) => {
					// console.log(res)
				uni.showToast({
					icon:"success",
					title:"添加成功",
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
				
				}).catch((err) => {
					console.log( err)
					uni.showToast({
						icon:"error",
						title:err.message,
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.u-form-item__body.data-v-5e7216f1{
		padding: 18px 0 !important;
	}
	.u-textarea.data-v-81cd9d32{
		background-color:#F4F4F4 !important; 
	}
	page{
		background-color: #F4F4F4;
		font-size: 30rpx;
	}
	.form{
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 144rpx;
	}
	.navbar{
		width: 100%;
		color: #FFFFFF;
		height: 104rpx;
		background: #1E9F6A;
		border-radius: 16rpx 16rpx 0px 0px;
		text-align: center;
		line-height: 104rpx;
		position: fixed;
		left: 0;bottom: 0;
		z-index: 999;
	}
</style>