zhangjin
/
saomaqiang-dengji


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!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/index.css">
		<script src="./js/babel.min.js"></script>
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./js/index.js"></script>
		<title>大卫博士-退货信息登记</title>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")

			});
		</script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#app {
				/* width: 100%; */
				padding: 36px 15px 0 15px;
				height: 100%;
				color: #333;
			}
			.flex {
				display: flex;
				align-items: center;
			}
			img {
				width: 24px;
				height: 24px;
			}
			.flex-title {
				font-size: 18px;
				font-weight: bold;
			}
			.flex-span {
				font-size: 18px;
				margin-left: 5px;
			}
			.flex-danhao {
				width: 210px;
				height: 45px;
				background: #F8F8F8;
				border-radius: 6px;
				line-height: 45px;
				padding: 0 15px;
				font-size: 18px;
				border: none;
				outline: none;
				flex: 1;
				overflow: hidden;
				/* margin-left: 10px; */
			}
			.submit {
				width: 273px;
				height: 47px;
				background: linear-gradient(93deg, #A080FF 0%, #5D6BFF 100%);
				border-radius: 33px;
				color: #fff;
				font-size: 18px;
				text-align: center;
				line-height: 47px;
				margin: 300px auto 0;
			}
			 input::-webkit-input-placeholder{
				font-size: 18px;
			    color: #BFBFBF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-loading.fullscreen.lock="loadingFull" />
			<div class="flex">
				<div class="flex-title">
					类型：
				</div>
				<div style="margin-left: 18px;" class="flex">
					<img :src="type == 0?'img/true.png': 'img/false.png'" @click="type = 0, express_number='', onFocus()">
					<span class="flex-span"> 扫码</span>
					<img style="margin-left: 30px;" :src="type == 1?'img/true.png': 'img/false.png'" @click="type = 1, express_number=''">
					<span class="flex-span"> 输入</span>
				</div>
			</div>
			<div style="margin-top: 26px;" class="flex">
				<div class="flex-title">
					{{ type == 0?'物流单号': '手机号' }}：
				</div>
				<input v-if="type === 0" ref="qrcode_text" v-model="express_number" @focus="preventKeyBord" @input="onInput" type="text" class="flex-danhao" :placeholder="type?'输入手机号查询':'物流单号'" />
				<input v-else v-model="express_number" type="text" class="flex-danhao" :placeholder="type?'输入手机号查询':'物流单号'" />
			</div>
			<div class="submit" @click="submit">
				下一步
			</div>
		</div>
		<script type="text/babel">
			var app = new Vue({
			el: '#app',
			data() {
				return {
					type: 0,
					noClick: true,
					express_number: '',
					loadingFull: false
				}
			},
			mounted() {
				this.onFocus()
			},
			methods: {
				preventKeyBord(e) {
					e.target.setAttribute("readonly", true);
					setTimeout(() => {
						e.target.removeAttribute("readonly")
					}, 100)
				},
				onFocus() {
					this.$nextTick(() => {
						this.$refs.qrcode_text.focus()
					})
				},
				onInput(e) {
					let express_number = e.target.value
					express_number.replace(this.express_number, '')
				},
				submit() {
					// window.location.href = "./pages/getCode.html?id=" + '1'
					// return
					this.loadingFull = true
					if (this.type === 1 && !this.express_number) {
						window.ELEMENT.Message.error('请输入手机号')
						this.loadingFull = false
						return
					}
					if (this.type === 0 && !this.express_number) {
						this.loadingFull = false
						window.ELEMENT.Message.error('请扫描快递单号')
						return
					}
					let _this = this
					axios.get('http://api.admin.app.cliu.cc/api/ReturnGood/GetExpress', {
						params: {
							type: this.type,
							express_number: _this.express_number
						}
					}).then(res => {
						this.loadingFull = false
						if (res.code === 200) {
							window.location.href = "./pages/getCode.html?id=" + res.data.id
						} else {
							window.ELEMENT.Message.error(res.message || '获取单号信息失败')
						}
					}).catch((err) => {
						this.loadingFull = false
						window.ELEMENT.Message.error('获取失败')
					})
				},
				// 防连点
				noMultipleClicks(methods) {
				    let that = this;
				    if (that.noClick) {
				        that.noClick= false;
				        methods();
				        setTimeout(function () {
				            that.noClick= true;
				        }, 1500)
					}
				}
			}
		})
	</script>
	</body>
</html>