zhangjin
/
saomaqiang-dengji


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
							<!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">
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/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>
			.el-input__prefix {
				display:  none;
			}
			.el-input__suffix {
				display: none;
			}
			.el-input__inner {
				border: none !important;
				background-color: #F8F8F8 !important;
				padding: 0 !important;
			}
			* {
				margin: 0;
				padding: 0;
			}
			#app {
				/* width: 100%; */
				padding: 36px 15px 0 15px;
				height: 100%;
				color: #333;
			}
			.title {
				font-size: 21px;
				font-weight: bold;
				margin-bottom: 27px;
			}
			.flex {
				display: flex;
				align-items: center;
			}
			.flex2 {
				display: flex;
				/* justify-content: space-between; */
				align-items: center;
				margin-top: 15px;
			}
			img {
				width: 24px;
				height: 24px;
			}
			.flex-title {
				font-size: 18px;
				font-weight: bold;
				width: 72px;
			}
			.flex-title2 {
				font-size: 18px;
				font-weight: bold;
			}
			.flex-span {
				font-size: 18px;
				margin-left: 5px;
			}
			.flex-one {
				border-radius: 6px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #F8F8F8;
				align-items: center;
				padding-right: 5px;
			}
			.flex-danhao {
				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; */
			}
			.bg {
				height: 45px;
				background: #F8F8F8;
				border-radius: 6px;
				line-height: 45px;
				flex: 1;
				padding: 0 10px 0 15px;
			}
			.inputBg {
				width: 90%;
				background: #F8F8F8;
				font-size: 18px;
				border: none;
				outline: none;
				overflow: hidden;
			}
			.submit-flex {
				padding: 0 9px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 51px;
				
			}
			.submit {
				width: 144px;
				height: 47px;
				background: linear-gradient(93deg, #A080FF 0%, #5D6BFF 100%);
				border-radius: 33px;
				color: #fff;
				font-size: 18px;
				text-align: center;
				line-height: 47px;
			}
			 input::-webkit-input-placeholder{
				font-size: 18px;
			    color: #BFBFBF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="title">
				信息登记
			</div>
			<div class="flex">
				<div class="flex-title2">
					方式：
				</div>
				<div class="flex">
					<img :src="!type?'../img/true.png': '../img/false.png'" @click="type = false,onFocus(), clear() ">
					<span class="flex-span"> 扫码</span>
					<img style="margin-left: 30px;" :src="type?'../img/true.png': '../img/false.png'" @click="type = true, clear()">
					<span class="flex-span"> 输入</span>
				</div>
			</div>
			<div class="flex2" v-show="!type">
				<div class="flex-title">
					防伪码：
				</div>
				<div class="flex-one bg">
					<input class="inputBg" ref="qrcode_text" v-model="form.qrcode" @focus="preventKeyBord" @input="onInput" type="text" placeholder="扫描防伪码" />
					<img src="../img/error.png" class="Content-error" @click="clear">
				</div>
				<!-- <div class="flex-one">
					<input class="flex-danhao" v-model="qrcode" ref="qrcode_text" @focus="preventKeyBord" @input="onInput" type="text" :disabled="!disCode" />
					<img src="../img/error.png" class="Content-error" @click="clear">
				</div> -->
			</div>
			<div class="flex2">
				<div class="flex-title">
					类型：
				</div>
				<input v-if="!type" v-model="form.name" type="text" class="flex-danhao" :disabled="!type" />
				<el-select v-if="type" v-model="form.name" placeholder="请选择类型" class="flex-danhao">
				    <el-option
				      v-for="item in nameList"
				      :key="item"
				      :label="item"
				      :value="item"
				    />
				</el-select>
			</div>
			<div class="flex2">
				<div class="flex-title">
					款式：
				</div>
				<input v-if="!type" v-model="form.type" ref="qrcodeOne" type="text" class="flex-danhao" @focus="preventKeyBord" @input="onInputTwo" :placeholder="type?'':'扫描款式'" />
				<el-select v-if="type" v-model="form.type" placeholder="请选择款式" class="flex-danhao">
				    <el-option
				      v-for="item in typeList"
				      :key="item"
				      :label="item"
				      :value="item"
				    />
				</el-select>
			</div>
			<div class="flex2">
				<div class="flex-title">
					尺码：
				</div>
				<input v-if="!type" v-model="form.size" ref="qrcodeTwo" type="text" class="flex-danhao" @focus="preventKeyBord" @input="onInputThree" :placeholder="type?'':'扫描尺码'" />
				<el-select v-if="type" v-model="form.size" placeholder="请选择尺码" class="flex-danhao">
				    <el-option
				      v-for="item in sizeList"
				      :key="item"
				      :label="item"
				      :value="item"
					/>
				</el-select>
			</div>
			<div class="flex2">
				<div class="flex-title">
					数量：
				</div>
				<input v-model.number="form.num" type="number" class="flex-danhao" :disabled="!type" />
			</div>
			<div class="flex2">
				<div class="flex-title">
					时间：
				</div>
				<el-date-picker
				    v-model="form.time"
				    type="date"
					class="flex-danhao"
					:disabled="!type"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					:editable="false"
				/>
				<!-- <input v-model="form.num" type="text" class="flex-danhao" :disabled="!type" /> -->
			</div>
			<div class="submit-flex">
				<div class="submit" @click="saveData">
					下一个
				</div>
				<div class="submit" @click="next">
					完成
				</div>
			</div>
		</div>
		<script type="text/babel">
			var app = new Vue({
			el: '#app',
			data() {
				return {
					timeOut: true,
					type: false,
					disCode: true,
					prev_qrcode: '',
					productList: [],
					nameList: ['精装版', '简约版', '高腰版', '纯棉版', '精装赠', '青春版'],
					typeList: ['男款', '女款'],
					sizeList: ['M', 'L', 'XL', '2XL', '3XL', '4XL', '5XL'],
					id: '',
					form: {
						name: '',
						num: '',
						size: '',
						type: '',
						qrcode: '',
						time: ''
					},
					noClick: true
				}
			},
			mounted() {
				this.onFocus()
				var url = location.search //获取url中"?"符后的字串
				if (url.indexOf("?") != -1) {
				    var str = url.substr(1)
				    var strs = str.split("=")
					this.id = strs[1]
				}
			},
			methods: {
				// 款式
				getStyle(v) {
					if (v == 1) {
						return '精装版'
					} else if (v === 2) {
						return '简约版'
					} else if (v === 3) {
						return '高腰版'
					} else if (v === 4) {
						return '纯棉版'
					} else if (v === 5) {
						return '精装赠'
					} else if (v === 6) {
						return '青春版'
					}
				},
				// 获取焦点
				onFocus() {
					this.$nextTick(() => {
						this.$refs.qrcode_text.focus()
					})
				},
				onFocusOne() {
					this.$nextTick(() => {
						this.$refs.qrcodeOne.focus()
					})
				},
				onFocusTwo() {
					this.$nextTick(() => {
						this.$refs.qrcodeTwo.focus()
					})
				},
				preventKeyBord(e) {
					e.target.setAttribute("readonly", true);
					setTimeout(() => {
						e.target.removeAttribute("readonly")
					}, 100)
				},
				onInput(e) {
					let _this = this
					// _this.form.qrcode = ''
					_this.form.name = ''
					_this.form.num = ''
					_this.form.time = ''
					_this.form.type = ''
					_this.form.size = ''
					let qrcode = e.target.value
					qrcode.replace(this.form.qrcode, '')
					const productList = JSON.parse(window.localStorage.getItem("productList"))
					if (productList) {
						let index = productList.findIndex(item => item.qrcode == qrcode)
						if (index != -1) {
							this.$message.error('请勿重复扫描')
							_this.form.qrcode = ''
							return
						} else {
							 _this.request()
						}
					} else {
						 _this.request()
					}
					// if (this.timeOut ===  true) {
					// 	this.timeOut = false
					// 	setTimeout(function(){
					// 	    _this.request()
					// 	}, 2000)  
					// }
					// console.log(333,qrcode)
					// this.qrcode = this.prev_qrcode
					// var obj = this.qrcode
					// var index = obj.lastIndexOf("\/")
					// obj = obj.substring(index+1, obj.length)
					// console.log(qrcode)
					// axios.get('http://api.admin.app.cliu.cc/api/ReturnGood/GetCodeInfo', {
					// 	params: {
					// 		code: _this.qrcode.substring(_this.qrcode.lastIndexOf("\/")+1, _this.qrcode.length)
					// 	}
					// }).then(res => {
					// 	if (res.code === 200) {
					// 		let data = res.data
					// 		_this.form.name = _this.getStyle(data.goods_id)
					// 		_this.form.num = data.num
					// 		_this.form.time = data.time
					// 	} else {
					// 		window.ELEMENT.Message.error(res.message || '获取信息失败')
					// 	}
					// }).catch((err) => {
					// 	window.ELEMENT.Message.error('获取失败')
					// })
				},
				request() {
					let _this = this
					_this.timeOut = true
					axios.get('http://api.admin.app.cliu.cc/api/ReturnGood/GetCodeInfo', {
						params: {
							code: _this.form.qrcode
						},
						// code: _this.form.qrcode.substring(_this.form.qrcode.lastIndexOf("\/")+1, _this.form.qrcode.length)
					}).then(res => {
						if (res.code === 200) {
							_this.onFocusOne()
							let data = res.data
							_this.form.name = data.name
							_this.form.num = data.num
							_this.form.time = data.time
							_this.disCode = false
						} else {
							window.ELEMENT.Message.error(res.message || '获取信息失败')
						}
					}).catch((err) => {
						window.ELEMENT.Message.error('获取失败')
					})
				},
				onInputTwo(e) {
					let style = e.target.value
					style.replace(this.form.type, '')
					this.onFocusTwo()
				},
				onInputThree(e) {
					let size = e.target.value
					size.replace(this.form.size, '')
					this.$nextTick(() => {
						this.$refs.qrcodeTwo.blur()
					})
				},
				// 下一个
				saveData() {
					if (this.form.name && this.form.size && this.form.num && this.form.type && this.form.time) {
						const productList = JSON.parse(window.localStorage.getItem("productList"))
						if (productList && productList.length > 0) {
							this.productList = productList
						}
						this.productList.push(this.form)
						window.localStorage.setItem('productList', JSON.stringify(this.productList))
						this.clear()
						this.$message.success('保存成功')
					} else {
						this.$message.error('请登记信息')
					}
					this.onFocus()
				},
				clear() {
					this.form.qrcode = ''
					this.form.name = ''
					this.form.num = ''
					this.form.time = ''
					this.form.type = ''
					this.form.size = ''
					this.disCode = true
					this.onFocus()
				},
				// 完成
				next() {
					if (window.localStorage.getItem("productList")) {
						window.location= "./product.html?id=" + this.id
						let { name, size, num, type, time } = this.form
						if (name && size && num && type && time) {
							let productList = JSON.parse(window.localStorage.getItem("productList"))
							if (productList && productList.length > 0) {
								this.productList = productList
							}
							this.productList.push(this.form)
							window.localStorage.setItem('productList', JSON.stringify(this.productList))
						// 	// this.clear()
						}
					} else {
						this.$message.error('未登记信息')
					}
				}
			}
		})
	</script>
	</body>
</html>