h5-meike/pages/ticket/person.vue

<template>
	<view class="page mm-page">
		<gmy-back-touch></gmy-back-touch>
		<!-- xuchao: 表单统一收进一张卡片，分隔线由 u-form-item 自带（已随主题换色） -->
		<view class="card mm-card mm-fade-up">
			<u-form :model="form" :rules="rules" ref="uForm">
				<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>
				<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>
				<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>
				<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>
			</u-form>
		</view>

		<!-- xuchao: 底部固定提交按钮（视口水平居中，宽屏下与页面列对齐） -->
		<view class="bar">
			<view class="mm-btn" @click="submit()">完成</view>
		</view>

		<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	var that = ''
	import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
	export default {
		components: {
			'gmy-back-touch': gmyBackTouch
		},
		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">
	/* xuchao: 底部预留 220rpx，避免表单被固定提交按钮遮挡 */
	.page {
		padding: 32rpx 32rpx 220rpx;
	}

	.card {
		padding: 12rpx 32rpx;
	}

	/* xuchao: 底部固定按钮 —— left/right 0 + margin auto 保证宽屏居中时与页面列对齐 */
	.bar {
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 686rpx;
		bottom: calc(32rpx + constant(safe-area-inset-bottom));
		bottom: calc(32rpx + env(safe-area-inset-bottom));
		z-index: 99;
	}
</style>