wangqianqian
/
query_gun


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="./css/element.css">
		<script src="./js/babel.min.js"></script>
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./js/element.js"></script>
		<title>扫码查询</title>
		<script type="text/javascript">
		</script>
		<style>
			.info {
				margin: 30px 12px;
			}

			.info div {
				font-size: 16px;
				font-weight: bold;
				margin-top: 24px;
			}

			.hint {
				width: 100%;
				text-align: center;
				font-size: 18px;
			}

			.ProductItem {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
			}

			.ProductItem-label {
				color: #333333;
				font-size: 19px;
				width: 80px;
				text-align: left;
			}

			.ProductItem-content {
				flex: 1;
				overflow: hidden;
				margin-left: 10px;
				background-color: #F8F8F8;
				border-radius: 6px;
				height: 40px;
				padding: 6px 15px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
			}

			.qrcode-text {
				background-color: transparent;
				border: none;
				outline: none;
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				font-size: 16px;
			}

			.GoodSelect {
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="ProductItem Qrcode-main">
				<p class="ProductItem-label">防伪码：</p>
				<div class="ProductItem-content">
					<input type="text" class="qrcode-text" ref="qrcode_text" v-model="qrcode" @focus="preventKeyBord"
						@blur="onBlur" @input="onInput" />
				</div>
			</div>
			<div class="info" v-if="scanInfo">
				<div>昵称：{{scanInfo.nickname}}</div>
				<div>手机号：{{scanInfo.phone}}</div>
				<div>款式：{{scanInfo.style}}</div>
				<div>价格：{{scanInfo.price}}</div>
				<div>出库时间：{{scanInfo.time}}</div>
			</div>
		</div>
		<script type="text/babel">
			var app = new Vue({
			el: '#app',
			data() {
				return {
					scanInfo:'', //扫码获取的信息
					qrcode:'' ,//code码
					code:''
				}
			},
			mounted() {
							this.onFocus()
						},
						 watch: {
							    'qrcode': {
							      deep: true,
							      handler(newVal, oldVal) {
							        this.debounce(this.getInfo, 200) 
							      }
							    }
							  },
						
								
			methods: {
				 //防抖
					    debounce(fn, wait) {
					      if (this.timer !== null) {
					        clearTimeout(this.timer)
					      }
					      this.timer = setTimeout(fn, wait)
					    },
					 
				preventKeyBord(e) {
					e.target.setAttribute("readonly", true);
					setTimeout(() => {
						e.target.removeAttribute("readonly")
					}, 100)
				},
				onInput(e) {
					let val = e.target.value
					let _a = val.split('/')
					let _v = _a[_a.length - 1]
				this.qrcode = _v
				},
				
				onFocus() {	
					this.$nextTick(() => {
						this.$refs.qrcode_text.focus()
					})
				},
				onBlur() {
					this.onFocus()
				},
				getInfo(){
						let data = {code:this.qrcode}
						axios.post('http://fangwei.cliu.cc/api/LookTime',data).then(res => {
							if(res.code==200){
								this.scanInfo = res.data
							}else{
								window.ELEMENT.Message.error(res.msg||res.message)
							}
						}).catch(() => {
							window.ELEMENT.Message.error('获取信息失败')
						})
				
				},
			}
		})
	</script>
	</body>
</html>