circulation_ancientCoins_new/pages/modify_visitor/modify_visitor.vue

<template>
	<view class="visitor-form-page">
		<view class="block">
			<input-box class="inputcom-wrapper" v-model="name" holder="必填项" label="姓名"
				@blurEvent="nameBlurEvent" required></input-box>
			<!-- <input-box class="inputcom-wrapper" v-model="idcard" holder="填写身份证号码" label="身份证号" @blurEvent="idCardBlurEvent" rule="idcard"></input-box> -->
			<!-- <input-box class="inputcom-wrapper" v-model="phone" holder="方便预约后联系，非必填" label="手机号"
			@blurEvent="phoneBlurEvent" rule="phone"></input-box> -->
			<!-- <FormItem label="姓名" type="input" v-model="name" placeholder="必填项" required /> -->
			<FormItem label="性别" type="picker" :display-value="genders[sex] || ''" placeholder="必选" required
				@click="showGenderPicker" />
			<FormItem label="出生年份" type="picker" :display-value="year ? `${year}年` : ''" placeholder="必选"
				required @click="showYearPicker" />
			<FormItem label="手机号" type="input" v-model="phone" rule="phone" placeholder="方便预约后联系，非必填" />
		</view>

		<view class="submit-wrapper btPadding" v-if="!vid">
			<view :class="'btn btn3 PfScMedium submit' + (canSubmit ? ' primary' : ' noclick')"
				:hover-class="(canSubmit ? 'hover' : '')" @click="submit" v-if="!vid">
				确认新增
			</view>
			<view :class="'btn btn3 PfScMedium submit' + (canSubmit ? ' primary' : ' noclick')"
				:hover-class="(canSubmit ? 'hover' : '')" @click="submit" v-else>
				确认修改
			</view>
		</view>
		<view class="fixedBot btPadding" v-if="vid">
			<view class="submit">
				<view class="btn cancel btn1" @click="reback">取消</view>
				<view class="btn primary btn1" hover-class="hover" @click="submit">确认</view>
			</view>
		</view>
		<SelectYear ref="yearPicker" @change="handleYearChange" />

		<SexPop ref="genderPopup" v-model="sex" @confirm="handleConfirm" />

	</view>
</template>

<script>
import InputBox from '@/components/inputBox.vue';
import FormItem from '@/components/FormItem.vue';
import SelectYear from '@/components/SelectYear.vue';
import SexPop from '@/components/SexPop.vue';

export default {
	data() {
		return {
			canSubmit: false,
			cssUrl: this.cssUrl,
			year: '',
			name: '',
			// form: {
			// 	year: '',
			// 	name: '',
			// 	sex: '',
			// 	phone: ''
			// },
			sex:'',
			nameRule: false,
			idcard: '',
			idcardExtRule: false,
			phone: '',
			phoneRule: false,
			type: 1,
			adding: false,
			vid: false,
			visitor_info: {},
			genders: {
				0:'男',
				1:'女'
			},
		}
	},
	components: {
		InputBox,
		FormItem,
		SexPop,
		SelectYear
	},
	onLoad(option) {
		if (option.type) this.type = option.type
		if (option.vid) {
			this.vid = option.vid
			uni.setNavigationBarTitle({
				title: '修改预约人'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '新增预约人'
			});
		}
	},
	onShow() {
		if (this.vid) this.getVisitorInfo()
	},
	methods: {
		handleConfirm(sex){
			this.sex = sex;
			this.checkSubmit()
		},
		handleYearChange(year) {
			this.year = year;
			this.checkSubmit()
		},
		showYearPicker() {
			this.$refs.yearPicker.show()
		},
		showGenderPicker() {
			this.$refs.genderPopup.show();
		},
		add() {
			if (this.adding) return
			this.adding = true
			var param = new Object()
			param.name = this.name
			param.sex = this.sex
			param.birth_year = this.year
			param.phone = this.phone
			// param.idcard = this.idcard
			var that = this
			var addtimer = setTimeout(function () {
				that.adding = false
			}, 5000);

			var req = 'api/user/add_visitor'
			var method = 'POST'
			if (this.vid) {
				param.id = this.vid
				param.get_idcard = 1
				req = 'api/user/update_visitor'
			}

			this.$http.req(req, param, method).then(data => {
				if (data == -1) return

				clearTimeout(addtimer)
				this.adding = false
				if (this.vid) {
					uni.removeStorageSync('visitor_info_' + this.vid)
				}

				uni.navigateBack()
			});
		},
		getVisitorInfo() {
			var param = new Object()
			param.vid = this.vid

			this.$http.req('api/user/get_modify_visitor', param, 'POST').then(data => {
				if (data == -1) return
				this.name = data.name
				this.year = data.birth_year
				this.sex = data.sex
				// this.idcard = data.idcard
				this.phone = data.phone
				this.nameRule = true
				// this.idcardExtRule = true
				this.phoneRule = false
				this.checkSubmit()
			});

		},
		nameBlurEvent(value, res) {
			this.name = value
			this.nameRule = res
			this.checkSubmit()
		},
		// idCardBlurEvent(value, res) {
		// 	this.idcard = value
		// 	this.idcardExtRule = res
		// 	this.checkSubmit()
		// },
		// phoneBlurEvent(value, res) {
		// 	this.phone = value
		// 	this.phoneRule = res
		// 	this.checkSubmit()
		// },
		checkSubmit() {
			this.canSubmit = false
			if (!this.name || (this.sex !=0 && this.sex!=1) || !this.year) return
			this.canSubmit = true
		},
		reback() {
			if (this.vid) {
				uni.removeStorageSync('visitor_info_' + this.vid)
			}
			this.$func.toPage('/pages/visitors_new/visitors_new')
		},
		submit() {
			this.checkSubmit()
			if (!this.canSubmit) return
			this.add()
		}
	}
}
</script>

<style lang="scss" scoped>
.visitor-form-page {
	// background: #F8F8F8;
	background: #FFFFFF;

	height: 100vh;
	overflow-y: scroll;

	.block {
		// background: #FFFFFF;
		box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 8rpx;
		width: 714rpx;
		margin: 20rpx auto 0rpx;
		overflow: hidden;

		&:nth-child(3) {
			border: none !important;
		}

		.title {
			font-size: 32rpx;
			color: #000000;
			width: 666rpx;
			height: 50rpx;
			line-height: 50rpx;
			letter-spacing: 2rpx;
			margin: 36rpx 0 36rpx 24rpx;
		}
	}

	.submit-wrapper {
		overflow: hidden;
		position: fixed;
		top: 88vh;
		height: 92rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.submit {
		margin: 0 auto;
	}

	.fixedBot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 124rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181, 181, 181, 0.13);
		backdrop-filter: blur(20rpx);
		display: flex;

		.submit {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			column-gap: 50rpx;
		}
	}
}
</style>