MOD:预加载

.idea/workspace.xml

@@ -2,10 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="3f11f0c2-4f1a-448b-9322-b444722d73f2" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/img/noClassification.png" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/vcs.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/img/null.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/css/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/index.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/menu.html" beforeDir="false" afterPath="$PROJECT_DIR$/menu.html" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@@ -81,7 +79,11 @@
       <workItem from="1570843686159" duration="23451000" />
       <workItem from="1571017846901" duration="8561000" />
       <workItem from="1571102112992" duration="17373000" />
-      <workItem from="1571188950681" duration="581000" />
+      <workItem from="1571188950681" duration="3097000" />
+      <workItem from="1571275786297" duration="2522000" />
+      <workItem from="1571285097218" duration="20273000" />
+      <workItem from="1571371461255" duration="4370000" />
+      <workItem from="1571383513641" duration="738000" />
     </task>
     <servers />
   </component>

menu.html

@@ -29,7 +29,7 @@
                 <ul v-if="isProduct">
                     <li v-for="(menu,index) in  defaultProduct" :key="menu.productId"  @click="addCar(menu,index)" v-cloak>
                         <div class="imgContainer">
-                            <img :src='menu.productIcon' alt="">
+                            <img  :src='url' alt=""  ref="img">
                         </div>
                         <div class="name">{{menu.productName}}</div>
                         <div class="price">¥{{menu.productPrice}}</div>
@@ -78,11 +78,10 @@
     </div>
 </body>
 <script>
-
     // 获取orgId
-    // var orgId = window.android.getOrgId()
-    // localStorage.setItem('orgId',orgId)
-    localStorage.setItem('orgId','ding9ddd48137390507735c2f4657eb6378f')
+    var orgId = window.android.getOrgId()
+    localStorage.setItem('orgId',orgId)
+    // localStorage.setItem('orgId','ding9ddd48137390507735c2f4657eb6378f')
 
     // axios.defaults.baseURL = 'http://192.168.1.101:9999/mingpay-phone' // 本地钱
     axios.defaults.baseURL = 'https://gateway.mingwork.com/mingpay-phone' // beta环境
@@ -102,7 +101,6 @@
                 }).catch(err => {
                     return reject(res)
                 });
-
             }))
         }
     }
@@ -112,13 +110,15 @@
     var order = new Vue({
         el: '#gen',
         data: {
+            url: 'img/null.png',
+            urls: [],
             categorys: [], // 菜单分类
             defaultProduct: [], // 默认展示的菜
             selectIndex: '0', // 左侧选中类别的index,用来做选项卡判断
             selectStyle: {
                 'font-family': 'PingFangSC-Medium',
                 'border-right': '5px solid red',
-                'background-color':' #FFEDED',
+                'background-color':' #FFDEDE',
                 'color': ' #E60012'
             }, //左侧菜单分类列表选中时的样式
             carList: [],// 所有加入购物车的列表数据
@@ -144,8 +144,6 @@
                 if(this.categorys.length != 0) {
                     return this.$http.request('/v1/product/list_product','post',{ productCategoryId:  this.categorys[0].productCategoryId })
                             .then(e => {
-                                console.log(  e.data.data,111111111)
-
                             if( e.data.data.length != 0) {
                                 this.isProduct = true
                                 e.data.data.forEach((product) => {
@@ -153,7 +151,9 @@
                                     if(product.productStatus == 'UP') {
                                         this.defaultProduct.push(product)
                                     }
+
                                 })
+                                this.preLoad(this.defaultProduct)
                             }
                             else {
                                 this.isProduct = false
@@ -170,10 +170,24 @@
         },
         mounted() {
             window.clearCar = this.clearCar
+            const that = this
+            setTimeout(function (res) {
+                var product = JSON.parse(JSON.stringify(that.defaultProduct))
+                product.forEach((item,index) => {
+                    var img = new Image()
+                    var urls = []
+                    urls[index] = item.productIcon
+                    img.src = urls[index]
+                    img.onload = function () {
+                        that.$refs.img[index].src = urls[index]
+                    }
+                })
+            },500)
         },
         methods:{
             // 选菜的类别的点击事件
             selectClass:function (menu,index) {
+                if( this.selectIndex != index) {
                     this.selectIndex = index
                     this.defaultProduct = []
                     this.$http.request('/v1/product/list_product','post',{productCategoryId: menu.productCategoryId})
@@ -185,15 +199,16 @@
                                         this.defaultProduct.push(product)
                                     }
                                 })
+                                this.preLoad(this.defaultProduct)
                             }
                             else {
                                 this.isProduct = false
                             }
-
                         })
                         .catch(err => {
                             console.log(err)
                         })
+                }
             },
             // 点击加入购物车列表e
             addCar:function (e) {
@@ -264,9 +279,22 @@
                 })
                 // 向设备端发送详情账单
                 window.android.pay(JSON.stringify(setData),this.allPrice)
+            },
+            preLoad: function(product) {
+                product.forEach((item,index) => {
+                    const that = this
+                    var img = new Image()
+                    var urls = []
+                    urls[index] = item.productIcon
+                    img.src = urls[index]
+                    img.onload = function () {
+                        setTimeout(function () {
+                            that.$refs.img[index].src = urls[index]
+                        },500)
                     }
+                })
             }
-
+        },
     })
 
 </script>