ryx/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;" @click="chooseImage">
			<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" :required="true">
					<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" :required="true">
					<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" :required="true">
					<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" :required="true">
					<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" :required="true">
					<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" :required="true">
					<u--input v-model="form.userInfo.phone" border="none" placeholder="填写手机号码"
						placeholderStyle="color: #555555" type="number"></u--input>
				</u-form-item>

				<u-form-item label="紧急联系人" labelWidth="200rpx" borderBottom ref="item1" prop="userInfo.emergency_name" :required="true">
					<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" :required="true">
					<u--input v-model="form.userInfo.emergency_phone" border="none" placeholder="填写紧急联系人号码"
						placeholderStyle="color: #555555" type="number"></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" :customStyle="{'background':'#F4F4F4'}"
						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" :customStyle="{'background':'#F4F4F4'}"
						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.birthday': {
						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) {
			if (options.info) {
				let info = JSON.parse(options.info)
				if (info.gender == 1) {
					info.gender = "男"
				}
				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
			}

		},
		methods: {
			// 识别身份证
			chooseImage(e) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', "compressed "],
					sourceType: ['album', "camera"], //从相册选取
					success: (res) => {
						console.log(res);
						let url = res.tempFilePaths[0]
						console.log(res)
						this.uploadFilePromise(url)
						

						// }
						// uni.$u.http.post('/api/card/info', {
						// 	url
						// }, {
						// 	custom: {
						// 		auth: true
						// 	}
						// }).then((res) => {
						// 	console.log(res)

						// }).catch((err) => {
						// 	console.log(err)
						// })




					}
				})
			},
			uploadFilePromise(url) {
				this.$showLoadding("识别中")
				let token = uni.getStorageSync("token")
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://t38.9026.com/api/card/upload',
						filePath: url,
						name: 'file',
						header: {
							Authorization: `Bearer ${token}`
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							
							let ayu=JSON.parse(res.data)
							if(ayu.code==401){
								this.$toast("请先登录")
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/login'
									})
								})
							}else if(ayu.code==200){
								uni.$u.http.post('/api/card/info', {
									url:ayu.data.url
								}, {
									custom: {
										auth: true
									}
								}).then((res) => {
									
									let info=res
									if(info.gender==1){
										info.gender="男"
									}else{
										info.gender="女"
									}
									if(info.certificate_type==1){
										info.certificate_type="身份证"
									}
									this.form.userInfo.gender=info.gender
									this.form.userInfo.certificate_type=info.certificate_type
									this.form.userInfo.name=info.name
									this.form.userInfo.certificate_no=info.certificate_no
									this.form.userInfo.birthday=info.birthday
									uni.hideLoading()
									this.$toast("识别成功")
								}).catch((err) => {
									uni.hideLoading()
									this.$toast(err.message)
									
								})
							}
							
							
						}
					});
				})
			},
			// 选择性别
			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
					form.gender_text = "男"
				} else if (form.gender == "女") {
					form.gender = 2
					form.gender_text = "女"
				}
				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() {
				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
				}
				if(!this.$util.phone(form.phone)){
					this.$toast("请填写正确的手机号码")
					return
				}
				if(!this.$util.phone(form.emergency_phone)){
					this.$toast("请填写正确的紧急联系人手机号码")
					return
				}
				if(!form.emergency_name){
					this.$toast("请填写紧急联系人姓名")
					return
				}
				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)
					this.$toast(err.message)
				})
			}
		}
	}
</script>

<style lang="less">
	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>