circulation_ancientCoins_new/pages/modify_visitor/modify_visitor.vue

<template>
	<view class="visitor-form-page">
		<view class="block">
			<view class="title PfScMedium">就诊人信息</view>
			<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 submit'+(canSubmit?' primary':' noclick')" :hover-class="(canSubmit?'hover':'')" @click="submit" v-if="!vid">
				确认添加
			</view>
			<view :class="'btn btn3 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 = 'user/add_visitor'
				var method = 'POST'
				if(this.vid){
					param.id = this.vid
					req = 'user/update_visitor'
				}
 
				this.$http.req(req, param, method, true).then(data=>{
					clearTimeout(addtimer)
					this.adding = false
					if(this.vid){
						uni.removeStorageSync('visitor_info_'+ this.vid)
					}
					this.$func.toPage('/pages/visitors/visitors?type='+this.type)
				});
			},
			getVisitorInfo() {
				this.visitor_info = JSON.parse(uni.getStorageSync('visitor_info_'+ this.vid))
				//获取就诊人详细信息？？？
				// this.$http.req('user/get_visitor_info', {id:this.vid}, 'GET', true).then(data=>{
				// 	if(data == -1) {
				// 		this.$func.toPage('/pages/index/index')
				// 		return
				// 	}
				console.log(this.visitor_info,'visitor_info');
					this.name = this.visitor_info.name
					this.idcard = this.visitor_info.idcard
					this.phone = this.visitor_info.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/visitors')
			},
			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{
			min-height: 50vh;
			min-height: 662rpx;
			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;
			.title{
				font-size: 32rpx;
				color: #000000;
				width: 666rpx;
				height: 50rpx;
				line-height: 50rpx;
				letter-spacing: 2rpx;
				margin: 36rpx 0 36rpx 24rpx;
			}
			.inputcom-wrapper{
				margin-bottom: 20rpx;
			}
		}
		.submit-wrapper{
			overflow: hidden;
			margin-top: 13.5vh;
			height: 92rpx;
		}
		.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>