LJ-ancient-city-h5/pages/tourist/add.vue

<template>
	<view class="app-container">
		<u-navbar title="新增实名游玩人" bgColor="#fff" :fixed="true" :autoBack="false" leftIconColor="#333333"
			leftIconSize="28" @leftClick="handleLeftClick">
		</u-navbar>
		<view class="app-container-item flex-column-center">
			<view class="tourist-form">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth="150">
					<u-form-item label="姓名" prop="username" borderBottom :required="true">
						<u--input placeholder="请输入游玩人姓名" v-model="userInfo.username" inputAlign="right"
							border="none"></u--input>
					</u-form-item>
          <picker @change="bindPickerChange" :value="index" :range="IDTypeList" range-key="label"
                  style="width: 100%">
					<u-form-item label="证件类型" prop="IDType" borderBottom :required="true">
							<!--            <u-cell name="IDType" :border="false" style="width: 100%"-->
							<!--                    :rightIconStyle="{'font-size':'40px','color': '#CCCCCC'}" @click="onIDTypeFuc()">-->
							<!--              <template #value>-->
							<!--                <view>{{ form.IDType }}</view>-->
							<view style="width: 100%;display: flex;justify-content: flex-end;color: #333333">
                {{IDTypeList[index].label || '请选择证件类型'}}
                <u-icon name="arrow-right" color="#909399" size="30" style="margin-left: 5px"></u-icon>
              </view>
							<!--              </template>-->
							<!--              <template #right-icon>-->
							<!--                <u-icon name="arrow-right" color="#909399" size="30"></u-icon>-->
							<!--              </template>-->
							<!--            </u-cell>-->
					</u-form-item>
          </picker>
					<u-form-item label="证件号码" prop="idNumber" :required="true">
						<u--input placeholder="请输入证件号码" v-model="userInfo.idNumber" inputAlign="right"
							border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>

		<view class="app-container-btn flex-between">
			<u-button v-if="isSubmitEnabled" type="primary" shape="circle" class="btn" text="确定"
				@tap="toAppoint()"></u-button>
			<u-button text="确定" class="btn" v-else color="#DDE2EC"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		isID,
	} from '@/utils/rules.js';
	export default {
		components: {},
		data() {
			return {
				show: false,
				index: 0,
				IDTypeList: [
					{
							label: '证件A',
							code: 'a'
						},
						{
							label: '证件B',
							code: 'b'
						}
				],
				userInfo: {
					username: '', // 姓名
					IDType: '', // 证件类型
					idNumber: '', // 证件号码
				},
				isRules: {
					idNumber: false, // 证件号码
				},
				rules: {
					'username': [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur']
					}],
					'IDType': [{
						required: true,
						message: '请选择证件类型',
						trigger: ['change', 'blur'],
					}],
					'idNumber': [{
							required: true,
							message: '请输入证件号码',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								console.log(isID(value))
								this.isRules.idNumber = isID(value).state;
								callback(isID(value).data)
							},
							// message: '证件号码格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				form: {
					startTime: this.$sun.formatTime(new Date(), '{y}-{m}-{d}'),
					num: 0,
					endTime: '',
					zoneDeviceRId: '22',
					zoneDeviceRName: '',
					visiteeRoom: '',
				},
				detailInfo: {
					title: '兰花街1、2、3',
					date: '2024.06.14',
					openStartTime: '08:00',
					openEndTime: '20:00',
					timePeriod: [{
							startTime: '08:00',
							endTime: '10:00',
							reservationState: 1
						},
						{
							startTime: '10:00',
							endTime: '12:00',
							reservationState: 2
						},
						{
							startTime: '12:00',
							endTime: '14:00',
							reservationState: 3
						},
						{
							startTime: '14:00',
							endTime: '16:00',
							reservationState: 4
						},
						{
							startTime: '16:00',
							endTime: '18:00',
							reservationState: 5
						},
						{
							startTime: '18:00',
							endTime: '20:00',
							reservationState: 4
						}
					]
				},
				timePeriodCheckIndex: null,
				touristList: [{
					username: '刘琳琳', // 姓名
					idNumber: '430822********0465', // 证件号码
					IDType: '',
				}, {
					username: '刘琳X', // 姓名
					idNumber: '430822********0464', // 证件号码
					IDType: '',
				}, {
					username: '刘琳Y', // 姓名
					idNumber: '430822********0463', // 证件号码
					IDType: '',
				}]
			};
		},
		computed: {
			isSubmitEnabled() {
        return (this.userInfo.username && this.userInfo.username != '') && (this.isRules
            .idNumber);
			},
		},
		filters: {
			matchStateColor(code) {
				switch (code) {
					case 1:
						return '停售';
					case 2:
						return '普通';
					case 3:
						return '拥挤';
					case 4:
						return '空闲';
					case 5:
						return '繁忙';
				}

			}
		},
		onLoad(options) {
			// this.detailInfo = JSON.parse(options.info);
			console.log('onLoad', this.detailInfo)
		},
		onShow() {},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			/**
			 * 添加游玩人
			 */
			addTourists() {
				console.log('添加游玩人')
			},
			/**
			 * 立即预订
			 */
			toAppoint() {

			},
			handleLeftClick() {
        //获取页面栈的长度
        const canNavBack = getCurrentPages()
        //判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
        if (canNavBack && canNavBack.length > 1) {
          uni.navigateBack({
            delta: 1
          })
        } else {
          history.back()
        }
			},
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		width: 100vw;
		//background: #fff;
		position: relative;
		height: 100vh;

		&-item {
			position: absolute;
			top: 44px;
			padding: 10px 0;
			width: calc(100%);
			box-sizing: border-box;

			.tourist-form {
				background: #fff;
				width: 100%;
				box-sizing: border-box;
				padding: 5px 20px;
			}
		}

		&-btn {
			position: fixed;
			bottom: 0;
			height: 80px;
			text-align: center;
			background: white;
			width: 100%;
			padding: 0 24px;
			box-sizing: border-box;

			.btn {
				width: 100%;
				border-top-right-radius: 25px !important;
				border-top-left-radius: 25px !important;
				border-bottom-left-radius: 25px !important;
				border-bottom-right-radius: 25px !important;
			}
		}
	}
</style>