h5-meike/pages/ticket/person.vue

<template>
	<view>
		<u-form :model="form" :rules="rules" ref="uForm">
			<view style="background-color: #fff;padding-left: 30rpx;padding-right: 30rpx;">
				<u-form-item label-width="200" :label-position="labelPosition" label="出行人姓名" prop="name">
					<u-input placeholder="请输入出行人姓名" v-model="form.name" type="text"></u-input>
				</u-form-item>
			</view>
			<view style="background-color: #fff;padding-left: 30rpx;padding-right: 30rpx;margin-top: 20rpx;">
				<u-form-item label-width="200" :label-position="labelPosition" label="联系号码" prop="phone">
					<u-input placeholder="请输入联系号码" v-model="form.phone" type="text"></u-input>
				</u-form-item>
			</view>
			<view style="background-color: #fff;padding-left: 30rpx;padding-right: 30rpx;margin-top: 20rpx;">
				<u-form-item label="证件类型" prop="idType" label-width="200" :label-position="labelPosition">
					<u-input v-model="idTypeName" placeholder='请选择证件类型' type="select" @click="idTypeShow()" />
				</u-form-item>
			</view>
			<view style="background-color: #fff;padding-left: 30rpx;padding-right: 30rpx;margin-top: 20rpx;">
				<u-form-item label-width="200" :label-position="labelPosition" label="证件号码" prop="identityNo">
					<u-input placeholder="请输入证件号码" v-model="form.identityNo" type="text"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view class="pp_hh" @click="submit()">完成</view>
		<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				show: false,
				action: 'https://api.xhmyjq.com/web/upload/single',
				fileList: [],
				header: {
					'token': '',
					'Content-Type': 'multipart/form-data' // 设置请求头为multipart/form-data
				},
				labelPosition: 'left',
				actionSheetList: [{
						value: 'IDCARD',
						text: '身份证'
					},
					{
						value: 'PASSPORT',
						text: '护照'
					},
					{
						value: 'HONGKONG',
						text: '港澳居民来往内地通行证'
					},
					{
						value: 'TAIWAN',
						text: '台湾居民来往大陆通行证'
					}
				],
				form: {
					"mobile": "",
					"name": "",
					"idType": "IDCARD",
					"phone": "",
					"identityNo": "",
					"isDefault": true
				},
				idTypeName: '身份证',
				rules: {
					name: [{
						required: true,
						message: '请填写真实姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请填写手机号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					identityNo: [{
						required: true,
						message: '请填写证件号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				userId: '',
				fullName: '',
				identityNo: '',
				id: '',
				mobile: '',
				code: '',
				errorMessage: '',
				errorMessage1: '',
				isOpen: false,

			}
		},
		watch: {

		},
		onReady() {
			console.log(11);
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			that = this
			this.form.mobile=uni.getStorageSync('phone')
			if (e.info) {
				this.id = JSON.parse(e.info).id
				this.form.name = JSON.parse(e.info).name
				this.form.identityNo = JSON.parse(e.info).identityNo
                this.form.idType=JSON.parse(e.info).idType
				this.form.phone=JSON.parse(e.info).phone
				this.actionSheetList.forEach(item=>{
					// xuchao: 修正旧版笔误 —— 原来误拿 phone 和 value 比较，证件类型回显不对
					if(item.value==this.form.idType){
						this.idTypeName=item.text
					}
				})
			}
			// this.getMiniProgramMethod()
		},
		methods: {
			actionSheetCallback(index) {
				this.form.idType = this.actionSheetList[index].value
				this.idTypeName = this.actionSheetList[index].text
			},
			getMiniProgramMethod() {
				that.$u.mapApi.getMiniProgram().then(res => {
					if (res) {
						that.isOpen = res.isOpen
					}
				})
			},
			idTypeShow() {
				this.show = !this.show
			},
			onSuccess(e) {
				console.log(e);
				if (e.code == 600) {
					uni.removeStorageSync('phone')
					uni.navigateTo({
						url: '/pages/index/authorization'
					})
				} else {
					this.form.facePhoto = e.data.url
				}


			},
			submit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						// xuchao: 身份证类型增加 18 位格式校验，避免填错到景区门口才发现
						if (this.form.idType == 'IDCARD' && !/^\d{17}[\dXx]$/.test(this.form.identityNo)) {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的18位身份证号'
							})
							return
						}
						if (that.id == '' || that.id == undefined) {
							this.addTicketsMemberTouristMethod()

						} else {
							this.updateTicketsMemberTouristMethod()
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			updateTicketsMemberTouristMethod() {
					
				this.$set(this.form,'id',this.id)
				console.log(this.form);
				that.$u.api.updateTicketsMemberTourist(this.form).then(res => {
					if (res) {
						uni.navigateBack()
					}

				})
			},
			addTicketsMemberTouristMethod() {
				that.$u.api.addTicketsMemberTourist(this.form).then(res => {
					if (res) {
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.pp_hh {
		width: 702rpx;
		height: 88rpx;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);
		// xuchao: 视口水平居中（宽屏下与页面列对齐）
		left: 0rpx;
		right: 0rpx;
		margin: 0 auto;
		position: fixed;
		// xuchao: 全面屏底部安全区 —— 悬浮按钮整体上移
		bottom: calc(25rpx + constant(safe-area-inset-bottom));
		bottom: calc(25rpx + env(safe-area-inset-bottom));
	}
</style>