首页输入体验

开发source-map配置

config/dev.js

@@ -17,6 +17,7 @@ module.exports = {
 		noInfo: true,
 		quiet: false
 	},
+	devtool: '#cheap-module-source-map',
 	stats: {
 		modules: false
 	}

config/test.js

@@ -20,6 +20,7 @@ module.exports = {
         new webpack.LoaderOptionsPlugin({
             minimize: true
         })
-    ]
+    ],
+    devtool: '#source-map'
 };
 

src/pages/home.vue

@@ -22,12 +22,12 @@
                         </div>
 
                         <div class="type-code">
-                            <a href="javascript:;" @click="openErrorTypeBox()" :class="{'has-code':code}">{{code?code:'请输入故障码，示例：E6'}}</a>
+                            <a href="javascript:;" @click="blurSearch=true" :class="{'has-code':code}">{{code?code:'请输入故障码，示例：E6'}}</a>
                         </div>
 
-                        <div class="error-code-fixed">
-                            <input type="text" name="code" v-model.trim="code" placeholder="请输入故障码，示例：E6" id="codeSearchInput" onfocus="">
-                            <a href="javascript:;" @click="closeErrorFixed()">取消</a>
+                        <div class="error-code-fixed" v-show="blurSearch">
+                            <input type="search" name="code" v-model.trim="code" placeholder="请输入故障码，示例：E6" id="codeSearchInput">
+                            <a href="javascript:;" @click="blurSearch=false">取消</a>
                         </div>
 
                         <div class="error-code" v-if="isUseCaptcha">
@@ -114,12 +114,13 @@
     </form>
 </template>
 <script>
-require("script-loader!../libs/slidernav.js");
 import autoComplete from "../libs/autocomplete/jquery.autocomplete";
 import weixinShare from '../utils/weixin-share';
 import gt from '../utils/gt';
 import api from "../utils/api";
 
+require("script-loader!../libs/slidernav.js");
+
 export default {
 	data() {
 		return {
@@ -138,6 +139,7 @@ export default {
 			//bsTimer: null,
 			input: null,
 			acBind: false,
+            blurSearch: false,
 			isCheckCaptcha: false,
 			showBanshouQrcode: false,
 			isUseCaptcha: false
@@ -160,6 +162,16 @@ export default {
 		categoryId() {
 			this.autocomplete();
 		},
+        blurSearch(val) {
+			//如果是显示，则聚集到输入框
+			if (val) {
+				let self = this;
+				this.$nextTick(() => {
+					self.input.focus();
+                });
+
+            }
+        }
 	},
 	computed: {
 		selectedText() {
@@ -231,7 +243,10 @@ export default {
 		this.input = $("#codeSearchInput");
 
 		//提交搜索
-		$(this.$el).submit(self.searchCode);
+		$(this.$el).submit(() => {
+			self.searchCode();
+			return false;
+        });
 
 		var title = '扳手快查';
 		var imgUrl = common.getUrl('img/share_logo.jpg');
@@ -299,64 +314,59 @@ export default {
 			return common.getUrl(url);
 		},
 
-        openErrorTypeBox(){
-            $('.error-code-fixed').show();
-            this.input.focus();
-        },
+        searchCode() {
+            var self = this;
+
+            if (!self.searchable) {
+            	self.blurSearch = false;
+            	return false;
+            }
+
+            if (sessionStorage) {
+                sessionStorage.homeState = JSON.stringify({
+                    brandId: self.brandId,
+                    categoryId: self.categoryId,
+                    code: self.code
+                });
+            }
 
-        searchCode(){
-            let self = this;
-            if (self.searchable) {
-                if (sessionStorage) {
-                    sessionStorage.homeState = JSON.stringify({
-                        brandId: self.brandId,
-                        categoryId: self.categoryId,
-                        code: self.code
+            //移除中文
+            var code = self.code.replace(/[\u4E00-\u9FA5]/g, '');
+
+            api.post("code/hit", {
+                brand_id: self.brandId,
+                category_id: self.categoryId,
+                code: code
+            }).done(res => {
+                if (!res.status) {
+                    layer.alert(res.message, {
+                        closeBtn: false,
+                        title: false,
+                        icon: 7,
+                        shade: 0.3
                     });
+                    return;
                 }
 
-                var reg = /[\u4E00-\u9FA5]/g;
-                var code = self.code.replace(reg, '');
-
-                api.post("code/hit", {
-                    brand_id: self.brandId,
-                    category_id: self.categoryId,
-                    code: code
-                }).done(res => {
-                    if (!res.status) {
-                        layer.alert(res.message, {
-                            closeBtn: false,
-                            title: false,
-                            icon: 7,
-                            shade: 0.3
-                        });
-                        return;
-                    }
-
-                    var url = common.getUrl('#/code/' + self.brandId + '/' + self.categoryId)
-                        + "?code=" + encodeURIComponent(code) + "&t=" + res.data.tk;
-                    var invite = common.getParameterByName('invite');
+                var url = common.getUrl('#/code/' + self.brandId + '/' + self.categoryId)
+                    + "?code=" + encodeURIComponent(code) + "&t=" + res.data.tk;
+                var invite = common.getParameterByName('invite');
 
-                    if (invite) {
-                        url = url + '&invite=' + invite
-                    }
+                if (invite) {
+                    url = url + '&invite=' + invite
+                }
 
-                    if (!self.isLogin) {
-                        common.requestLogin(url);
-                        return false;
-                    }
+                if (!self.isLogin) {
+                    common.requestLogin(url);
+                    return false;
+                }
 
-                    self.$router.push(self.targetUrl);
-                });
-            }
+                self.$router.push(self.targetUrl);
+            });
 
             return false;
         },
 
-        closeErrorFixed(){
-            $('.error-code-fixed').hide();
-        },
-
         getIcon(className){
             var iconFont = {
                 '电视机':'dianshi',
@@ -415,13 +425,13 @@ export default {
 							return {suggestions: []};
 						}
 					},
+					triggerSelectOnValidInput: false,
 					onSelect: function (item) {
 					    if (self.code != item.data) {
-
-					        self.code = item.code;
+					        self.code = item.data;
 
                             if (!self.searchable) {
-                                self.closeErrorFixed();
+                                self.blurSearch = false;
                             } else {
                                 self.searchCode();
                             }