Browse Source

去除iscroll

yangc 7 years ago
parent
commit
e58141c723
4 changed files with 187 additions and 204 deletions
  1. 0 3
      nuxt.config.js
  2. 0 2
      package.json
  3. 187 194
      pages/mobile/search/_keycode.vue
  4. 0 5
      plugins/iscroll.js

+ 0 - 3
nuxt.config.js

@@ -103,9 +103,6 @@ module.exports = {
   }, {
     src: '~plugins/jsonp.js',
     ssr: false
-  }, {
-    src: '~plugins/iscroll.js',
-    ssr: false
   }],
   /* TODO 暂时代理到商城测试版,之后再做出调整 */
   proxyTable: ['/api/**', '/search/**', '/user/**', '/login/**', '/register/**', '/logout/**', '/static/**', '/vendor**', '/user**', '/trade/**', '/recommendation/**', '/store-service/**', '/basic/**', '/logout**', '/operation/**', '/help**', '/product**', '/store**', '/order/proxy**', '/report/**', '/store/**#/**', '/kdn/**', '/product/**Submit', '/admin**', '/product/**Submit/**', '/release/**', '/auth/store/**', '/produce/**', '/file**', '/rate/**', '/log/**', '/help-service/**', '/keyword/**']

+ 0 - 2
package.json

@@ -47,10 +47,8 @@
     "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-promise": "^3.4.1",
     "eslint-plugin-standard": "^2.0.1",
-    "iscroll": "^5.2.0",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
-    "vue-iscroll-view": "^1.0.3",
     "vue-loader": "^13.3.0"
   }
 }

+ 187 - 194
pages/mobile/search/_keycode.vue

@@ -1,52 +1,50 @@
 <template>
-  <iscroll-view class="scroll-view" @pullUp="load">
-    <div class="search-list">
-      <div class="search-item" v-if="productList.expose > 0 || productList.brands">
-        <span :class="activeType=='store'?'active':''" @click="clickType('store')">所有器件</span>
-        <span :class="activeType=='support'?'active':''" @click="clickType('support')">仅看有货</span>
-      </div>
+  <div class="search-list">
+    <div class="search-item" v-if="productList.expose > 0 || productList.brands">
+      <span :class="activeType=='store'?'active':''" @click="clickType('store')">所有器件</span>
+      <span :class="activeType=='support'?'active':''" @click="clickType('support')">仅看有货</span>
+    </div>
 
-      <div class="brand-list-content" v-if="(!productList.brands && brandList && brandList.length > 0) && productList.expose > 0">
-        <div class="brand-list-top">
-          <span>品牌墙</span>
-          <span class="row-switch" @click="onclick()" v-if="brandList.length > 8">{{!isShow?'收起':'展开'}}<i :class="{'iconfont icon-arrow-down':isShow,'icon-icon-shang iconfont':!isShow}"></i></span>
-        </div>
-        <div class="brand-list-item" >
-          <div v-for="item in isShow?brandList.slice(0, 8):brandList">
-            <nuxt-link :to="'/mobile/brand/'+item.br_uuid">
-              <img :src="item.logoUrl ||'/images/component/default.png'"/>
-            </nuxt-link>
-          </div>
-        </div>
+    <div class="brand-list-content" v-if="(!productList.brands && brandList && brandList.length > 0) && productList.expose > 0">
+      <div class="brand-list-top">
+        <span>品牌墙</span>
+        <span class="row-switch" @click="onclick()" v-if="brandList.length > 8">{{!isShow?'收起':'展开'}}<i :class="{'iconfont icon-arrow-down':isShow,'icon-icon-shang iconfont':!isShow}"></i></span>
       </div>
-
-      <div class="detail-brand-content" v-if="productList.brands" @click="goBrand(list.uuid)">
-        <h4>主营产品</h4>
-        <div class="brand-list">
-          <div class="list-left">
-            <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
-            <span>{{list.nameCn}}</span>
-          </div>
-          <p>{{list.series | productDescFilter}}</p>
+      <div class="brand-list-item" >
+        <div v-for="item in isShow?brandList.slice(0, 8):brandList">
+          <nuxt-link :to="'/mobile/brand/'+item.br_uuid">
+            <img :src="item.logoUrl ||'/images/component/default.png'"/>
+          </nuxt-link>
         </div>
       </div>
+    </div>
 
-      <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
-        <div class="brand-item" @click="goComponent(item.uuid)">
-          <p>型号:<span>{{item.code}}</span></p>
-          <p>品牌:<span>{{item.brand.nameCn}}</span></p>
-          <p>产品描述:<span>{{item.kind.nameCn}}</span></p>
-          <i class="iconfont icon-shoucang" :style="(item.isFocus)?'color:#ff7800':'color:#bbb'" @click="collect(item, $event)"></i>
+    <div class="detail-brand-content" v-if="productList.brands" @click="goBrand(list.uuid)">
+      <h4>主营产品</h4>
+      <div class="brand-list">
+        <div class="list-left">
+          <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
+          <span>{{list.nameCn}}</span>
         </div>
+        <p>{{list.series | productDescFilter}}</p>
       </div>
+    </div>
 
-      <div class="none-state" v-if="!productList.expose">
-        <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
-        <a @click="goLastPage">返回上一页</a>
+    <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
+      <div class="brand-item" @click="goComponent(item.uuid)">
+        <p>型号:<span>{{item.code}}</span></p>
+        <p>品牌:<span>{{item.brand.nameCn}}</span></p>
+        <p>产品描述:<span>{{item.kind.nameCn}}</span></p>
+        <i class="iconfont icon-shoucang" :style="(item.isFocus)?'color:#ff7800':'color:#bbb'" @click="collect(item, $event)"></i>
       </div>
-      <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
     </div>
-  </iscroll-view>
+
+    <div class="none-state" v-if="!productList.expose">
+      <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
+      <a @click="goLastPage">返回上一页</a>
+    </div>
+    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
+  </div>
 </template>
 
 <script>
@@ -143,190 +141,185 @@
       },
       goLastPage: function () {
         window.history.back(-1)
-      },
-      load: function (iscroll) {
-        console.log(iscroll)
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
-  .scroll-view {
-    .search-list{
+  .search-list{
+    width:100%;
+    padding-bottom: 1rem;
+    .none-state{
+      text-align: center;
+      margin-top:2rem;
       width:100%;
-      padding-bottom: 1rem;
-      .none-state{
-        text-align: center;
-        margin-top:2rem;
-        width:100%;
-        img{
-          margin:0 auto;
-          width: 4.08rem;
-          height: 4.13rem;
-        }
-        a {
-          display: block;
-          font-size: .28rem;
-          color: #fff;
-          width: 1.88rem;
-          height: .54rem;
-          line-height: .54rem;
-          background: #418bf6;
-          margin: .7rem auto 0;
-          border-radius: .05rem;
-        }
+      img{
+        margin:0 auto;
+        width: 4.08rem;
+        height: 4.13rem;
       }
-      .search-item{
-        justify-content: space-around;
-        text-align: center;
-        display:flex;
-        span{
-          display:inline-block;
-          width:1.41rem;
-          line-height: .76rem;
+      a {
+        display: block;
+        font-size: .28rem;
+        color: #fff;
+        width: 1.88rem;
+        height: .54rem;
+        line-height: .54rem;
+        background: #418bf6;
+        margin: .7rem auto 0;
+        border-radius: .05rem;
+      }
+    }
+    .search-item{
+      justify-content: space-around;
+      text-align: center;
+      display:flex;
+      span{
+        display:inline-block;
+        width:1.41rem;
+        line-height: .76rem;
+        font-size:.32rem;
+        color:#666;
+      }
+      span.active{
+        color:#3976f4;
+        border-bottom:.02rem solid #3976f4;
+      }
+    }
+
+    .brand-list-content{
+      margin:0 auto;
+      border-top:.02rem solid #dedfdf;
+      border-bottom:.02rem solid #dedfdf;
+      width:7.1rem;
+      min-height:1.51rem;
+      overflow: hidden;
+      text-align: left;
+      padding-top:.33rem;
+      padding-bottom:.33rem;
+      .brand-list-top{
+        span:first-child{
           font-size:.32rem;
-          color:#666;
+          margin-right:4.98rem;
+          margin-left: .2rem;
         }
-        span.active{
-          color:#3976f4;
-          border-bottom:.02rem solid #3976f4;
+        span.row-switch{
+          font-size:.28rem;
+          color:#53a0f7;
         }
       }
-
-      .brand-list-content{
-        margin:0 auto;
-        border-top:.02rem solid #dedfdf;
-        border-bottom:.02rem solid #dedfdf;
-        width:7.1rem;
-        min-height:1.51rem;
+      .brand-list-item{
+        flex-wrap: wrap;
+        display:inline-flex;
         overflow: hidden;
-        text-align: left;
-        padding-top:.33rem;
-        padding-bottom:.33rem;
-        .brand-list-top{
-          span:first-child{
-            font-size:.32rem;
-            margin-right:4.98rem;
-            margin-left: .2rem;
-          }
-          span.row-switch{
-            font-size:.28rem;
-            color:#53a0f7;
+        margin:0 .2rem;
+        text-align: center;
+        >div {
+          display: inline-block;
+          margin-right: .14rem;
+          &:nth-child(4n) {
+            margin-right: 0;
           }
-        }
-        .brand-list-item{
-          flex-wrap: wrap;
-          display:inline-flex;
-          overflow: hidden;
-          margin:0 .2rem;
-          text-align: center;
-          >div {
+          a {
+            width: 1.57rem;
+            height: .77rem;
             display: inline-block;
-            margin-right: .14rem;
-            &:nth-child(4n) {
-              margin-right: 0;
-            }
-            a {
-              width: 1.57rem;
-              height: .77rem;
-              display: inline-block;
-              margin-top: .2rem;
-              border: .02rem solid #53a0f7;
-              border-radius: .1rem;
-              line-height: .77rem;
-              img{
-                max-width:1.07rem;
-                max-height:.57rem;
-              }
+            margin-top: .2rem;
+            border: .02rem solid #53a0f7;
+            border-radius: .1rem;
+            line-height: .77rem;
+            img{
+              max-width:1.07rem;
+              max-height:.57rem;
             }
           }
         }
       }
+    }
 
-      .detail-brand-content{
-        margin:0 auto;
-        border-top:.02rem solid #dedfdf;
-        border-bottom:.02rem solid #dedfdf;
-        width:7.1rem;
-        height:3.02rem;
-        padding-top:.18rem;
-        h4{
-          font-size:.32rem;
-          line-height: .6rem;
-          margin:0;
-          margin-left:3.97rem;
-        }
-        .brand-list{
-          display:flex;
-          justify-content: space-between;
-          align-items: center;
-          margin:0 .15rem;
-          .list-left{
-            border:.02rem solid #418ef7;
-            border-radius: .05rem;
-            width:2.03rem;
-            height:1.73rem;
-            img{
-              display:block;
-              width:100%;
-              height:1.25rem;
-            }
-            span{
-              display: block;
-              font-size: .24rem;
-              color:#fff;
-              text-align: center;
-              width:100%;
-              background: #418ef7;
-              line-height: .45rem;
-            }
+    .detail-brand-content{
+      margin:0 auto;
+      border-top:.02rem solid #dedfdf;
+      border-bottom:.02rem solid #dedfdf;
+      width:7.1rem;
+      height:3.02rem;
+      padding-top:.18rem;
+      h4{
+        font-size:.32rem;
+        line-height: .6rem;
+        margin:0;
+        margin-left:3.97rem;
+      }
+      .brand-list{
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+        margin:0 .15rem;
+        .list-left{
+          border:.02rem solid #418ef7;
+          border-radius: .05rem;
+          width:2.03rem;
+          height:1.73rem;
+          img{
+            display:block;
+            width:100%;
+            height:1.25rem;
           }
-          p{
-            width:4.3rem;
-            font-size:.28rem;
-            line-height: .4rem;
-            padding:.12rem .46rem 0 .05rem;
+          span{
+            display: block;
+            font-size: .24rem;
+            color:#fff;
+            text-align: center;
+            width:100%;
+            background: #418ef7;
+            line-height: .45rem;
           }
         }
+        p{
+          width:4.3rem;
+          font-size:.28rem;
+          line-height: .4rem;
+          padding:.12rem .46rem 0 .05rem;
+        }
       }
+    }
 
-      .detail-brand{
-        background: #f8fcff;
-        width:100%;
-        min-height:1.5rem;
-        padding-top:.2rem;
-        .brand-item{
-          width:7rem;
-          margin:0 auto;
-          border-radius:.1rem;
-          background: #fff;
-          padding:.2rem;
-          position:relative;
-          box-shadow: 0 0 0 .02rem #ddd;
-          &:active{
-            background: #e1e1e1;
-          }
-          p{
-            font-size:.28rem;
-            line-height:.4rem;
-            color:#333;
-            margin:0;
-            span{}
-          }
-          i{
-            display:block;
-            position:absolute;
-            top:.1rem;
-            right:.34rem;
-            font-size:.4rem;
-            color:#ff7800;
-          }
+    .detail-brand{
+      background: #f8fcff;
+      width:100%;
+      min-height:1.5rem;
+      padding-top:.2rem;
+      .brand-item{
+        width:7rem;
+        margin:0 auto;
+        border-radius:.1rem;
+        background: #fff;
+        padding:.2rem;
+        position:relative;
+        box-shadow: 0 0 0 .02rem #ddd;
+        &:active{
+          background: #e1e1e1;
         }
-        div.active{
-          background: #d4d;
+        p{
+          font-size:.28rem;
+          line-height:.4rem;
+          color:#333;
+          margin:0;
+          span{}
+        }
+        i{
+          display:block;
+          position:absolute;
+          top:.1rem;
+          right:.34rem;
+          font-size:.4rem;
+          color:#ff7800;
         }
       }
+      div.active{
+        background: #d4d;
+      }
     }
   }
 

+ 0 - 5
plugins/iscroll.js

@@ -1,5 +0,0 @@
-import Vue from 'vue'
-import IScrollView from 'vue-iscroll-view'
-import IScroll from 'iscroll'
-
-Vue.use(IScrollView, IScroll)