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 inputstyle="border-radius:0;width:100%;"></input-box>
			<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>
		<CustomeDatePicker ref="customeDatePicker" @getDateString="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 CustomeDatePicker from '@/components/customeDatePicker.vue';
import SexPop from '@/components/SexPop.vue';

export default {
	data() {
		return {
			canSubmit: false,
			cssUrl: this.cssUrl,
			year: '',
			name: '',
			sex:'',
			nameRule: false,
			idcard: '',
			idcardExtRule: false,
			phone: '',
			phoneRule: false,
			type: 1,
			adding: false,
			vid: false,
			visitor_info: {},
			genders: {
				0:'男',
				1:'女'
			},
		}
	},
	components: {
		InputBox,
		FormItem,
		SexPop,
		CustomeDatePicker
	},
	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.split('/')[0];
			this.checkSubmit()
		},
		showYearPicker() {
			this.$refs.customeDatePicker.open('bottom')
		},
		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()
		},
		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;

	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;
		padding: 0 24rpx;
		box-sizing: border-box;

		&: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;
		font-size: 32rpx;
	}

	.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>