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"></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>
		</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>
	</view>
</template>

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

	export default {
		data() {
			return {
				canSubmit:false,
				name:'',
				nameRule:false,
				idcard:'',
				idcardExtRule:false,
				phone:'',
				phoneRule:false,
				type:1,
				adding:false,
				vid:false,
				visitor_info:{}
			}
		},
		components:{
			InputBox
		},
		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: {
			add() {
				if(this.adding) return
				this.adding = true
				var param = new Object()
				param.name = this.name
				param.idcard = this.idcard
				param.phone = this.phone
				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.idcard = data.idcard
					this.phone = data.phone
					this.nameRule = true
					this.idcardExtRule = true
					this.phoneRule = true
					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.nameRule || !this.idcardExtRule || !this.phoneRule) 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;
			&: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>