器件详情页收藏

components/mobile/Home.vue

@@ -46,7 +46,7 @@
           </div>
           <p>联系我们</p>
         </a>
-        <a class="home-main-content">
+        <nuxt-link to="/mobile/brand/brandCenter/ABCD" class="home-main-content">
           <div>
             <i class="icon-pinpai iconfont"></i>
           </div>
@@ -54,7 +54,7 @@
             {{numbrand[0]}}
           </h2>
           <p>品牌</p>
-        </a>
+        </nuxt-link>
         <a class="home-main-content">
           <div>
             <i class="icon-xinghao iconfont"></i>

components/mobile/brand/BrandCenter.vue

@@ -1,5 +1,32 @@
 <template>
-  <div>{{brandList}}</div>
+  <div class="mobile-brand-center">
+    <div class="mobile-brand-wrap">
+      <div class="mobile-brand-header">
+        <img src="/images/mobile/@2x/brand/brandWall.png" alt="" v-show="!isScrolled">
+        <div class="mobile-brand-index" :class="{'scrolled': isScrolled}">
+          <p>索引：</p>
+          <nuxt-link :to="'/mobile/brand/brandCenter/' + item"
+                     :class="{'active': item == activeIndex}"
+                     :key="key" v-for="(item, key) in initArr">{{item}}</nuxt-link>
+        </div>
+      </div>
+      <div class="mobile-brand-list">
+        <div v-for="(brands, initial) in brandList">
+          <div class="brand-initial">
+            <p v-text="initial"></p>
+            <span>
+              {{initial}}开头共<span>{{brands.length || 0}}</span>个品牌
+            </span>
+          </div>
+          <div class="brand-items">
+            <nuxt-link :to="`/mobile/brand/${brand.uuid}/`" :key="key" v-for="(brand, key) in brands">
+              <div>{{brand.nameEn}}</div>
+            </nuxt-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
   function sortList (letter) {
@@ -17,6 +44,20 @@
   }
   export default {
     name: 'brandList',
+    data () {
+      return {
+        initArr: [
+          'ABCD', 'EFGH', 'IJKL', 'MNOP', 'QRST', 'UVWX', 'YZ', '0~9', '其他'
+        ],
+        activeIndex: this.$route.params.initial,
+        isScrolled: false
+      }
+    },
+    mounted: function () {
+      this.$nextTick(function () {
+        window.addEventListener('scroll', this.onScroll)
+      })
+    },
     computed: {
       brandList () {
         let brandsList = this.$store.state.product.brand.brandList.data
@@ -36,9 +77,116 @@
         }
         return temp
       }
+    },
+    methods: {
+      onScroll () {
+        if (this.$route.path.startsWith('/mobile/brand/brandCenter')) {
+          let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+          this.isScrolled = scrolled > 0
+        }
+      }
     }
   }
 </script>
-<style>
+<style lang="scss" scoped>
+  .mobile-brand-center {
+    width: 100%;
+    background: #f7f7f7;
+    padding-top: .24rem;
+    .mobile-brand-wrap {
+      width: 6.96rem;
+      background: #fff;
+      margin: 0 auto;
+      padding: 0 .21rem;
+      .mobile-brand-header {
+        text-align: center;
+        >img {
+          margin: .24rem auto .19rem;
+          width: 6.09rem;
+          height: .66rem;
+        }
+        .mobile-brand-index {
+          font-size: .3rem;
+          line-height: .62rem;
+          background: #f4fafd;
+          margin: .19rem 0 .25rem 0;
+          padding: 0 .07rem;
+          text-align: left;
+          p {
+            float: left;
+          }
+          a {
+            color: #666;
+            width: 1.1rem;
+            display: inline-block;
+            text-align: center;
+            &.active {
+              color: #418bf6;
+            }
+          }
+          &.scrolled {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: #fff;
+            box-shadow: 1px 1px 1px #ccc;
+            left: 0;
+            padding-left: .58rem;
+            margin-top: 0;
+          }
+        }
+      }
+      .mobile-brand-list {
+        font-size: .3rem;
+        .brand-initial {
+          border-bottom: .02rem solid #418bf6;
+          p {
+            width: .64rem;
+            height: .43rem;
+            margin: 0;
+            background: #418bf6;
+            color: #fff;
+            font-size: .32rem;
+            text-align: center;
+            display: inline-block;
+            border-top-left-radius: .05rem;
+            border-top-right-radius: .05rem;
+          }
+          >span {
+            font-size: .22rem;
+            color: #999;
+            >span {
+              color: #418bf6;
+            }
+          }
+        }
+        .brand-items {
+          flex-wrap: wrap;
+          display: flex;
+          overflow: hidden;
+          a {
+            overflow: hidden;
+            display: inline-block;
+            color: #333;
+            border-radius: .05rem;
+            background: #fff;
+            margin: .19rem .42rem 0 0;
+            &:nth-child(3n) {
+              margin-right: 0;
+            }
+            div {
+              width: 1.9rem;
+              height: .59rem;
+              line-height: .59rem;
+              text-align: left;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+          }
+        }
+      }
+    }
+  }
 
 </style>

components/mobile/brand/BrandDetail.vue

@@ -237,6 +237,7 @@
       border-radius: .1rem;
       background: url('/images/mobile/@2x/brand-bg.png')no-repeat;
       background-size: cover;
+      /*box-shadow: 0 0 .01rem .03rem #eee;*/
       .brand-logo-box {
         border: .01rem solid #c7e5fd;
         border-radius: .1rem;
@@ -244,6 +245,7 @@
         width: 3.73rem;
         margin: .5rem auto 0;
         background: #fff;
+        position: relative;
         img {
           max-height: 2.13rem;
           max-width: 3.7rem;

components/mobile/brand/ComponentDetail.vue

@@ -15,6 +15,7 @@
       <div class="base-detail-item" v-if="component.description">
         <span class="description">产品描述：{{component.description}}</span>
       </div>
+      <i class="iconfont icon-shoucang" :style="isCollect?'color:#ff7800':'color: #ddd'" @click="collectComponent"></i>
     </div>
     <div class="product-switch-item">
       <span :class="activeType=='param'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='param'">参数</span>
@@ -80,29 +81,22 @@
         <div>您可前往<strong>www.usoftmall.com</strong>网页版进行<strong>“发布求购”</strong>或<strong>“产品上架”</strong>操作！</div>
       </div>
     </div>
+    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 <script>
+  import RemindBox from '~components/mobile/common/remindBox.vue'
   export default {
     data () {
       return {
         activeType: 'param',
-        storeIds: [],
-        UmallExist: false,
-        storeExist: false,
-        params: {
-          count: 10,
-          page: 1,
-          sorting: {'minPriceRMB': 'ASC'},
-          filter: {
-            uuid: this.$route.params.uuid,
-            ignoreUMall: false,
-            ignoreStore: false,
-            storeIds: ''
-          }
-        }
+        collectResult: '收藏成功',
+        timeoutCount: 0
       }
     },
+    components: {
+      RemindBox
+    },
     computed: {
       component () {
         return this.$store.state.componentDetail.detail.data
@@ -127,6 +121,22 @@
           }
         }
         return storeList
+      },
+      colList () {
+        return this.$store.state.product.common.collectList.data
+      },
+      isCollect () {
+        let id = this.component.id
+        let store = this.colList
+        if (store) {
+          for (let i = 0; i < store.length; i++) {
+            if (store[i].componentid === id) {
+              return true
+            }
+          }
+        } else {
+          return false
+        }
       }
     },
     filters: {
@@ -160,6 +170,19 @@
         if (url && url !== '1') {
           window.location.href = url
         }
+      },
+      collectComponent: function () {
+        if (!this.isCollect) {
+          this.$store.dispatch('product/saveEntity', {componentid: this.component.id, kind: this.component.kindid})
+          this.collectResult = '收藏成功'
+          this.timeoutCount++
+        } else {
+          this.$http.post('/trade/collection/delete/cmpId', [this.component.id]).then(response => {
+            this.collectResult = '取消成功'
+            this.timeoutCount++
+            this.$store.dispatch('product/saveStores')
+          })
+        }
       }
     }
   }
@@ -178,6 +201,7 @@
       background: url('/images/mobile/@2x/productDetail/component-desc-bg.png')no-repeat;
       background-size: cover;
       height: 3.17rem;
+      position: relative;
       .base-detail-item {
         margin-bottom: .2rem;
         position: relative;
@@ -209,8 +233,22 @@
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          color: #999;
         }
       }
+      >i {
+        position: absolute;
+        font-size: .4rem;
+        background: #fff;
+        width: .6rem;
+        height: .6rem;
+        line-height: .6rem;
+        border-radius: 100%;
+        box-shadow: 0 0 5px #aaa;
+        right: .28rem;
+        top: .55rem;
+        text-align: center;
+      }
     }
     .product-switch-item {
       text-align: center;

pages/mobile/brand/componentDetail/_uuid.vue

@@ -22,7 +22,8 @@
               ignoreUMall: false,
               ignoreStore: false,
               storeIds: ''
-            }})
+            }}),
+        store.dispatch('product/saveStores')
       ])
     }
   }

pages/mobile/shop/index.vue

@@ -21,7 +21,7 @@
           <p>电话：<span>{{item.enterprise.enTel}}</span></p>
           <p>传真：<span>{{item.enterprise.enFax}}</span></p>
           <!--<p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
-          <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item)"></i>
+          <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>
         </div>
       </div>
     </div>
@@ -91,8 +91,9 @@
           this.downName = '全部'
         }
       },
-      focusStore: function (item) {
+      focusStore: function (item, $event) {
 //        item.isFocus = item.isFocus === 'false' ? 'true' : 'false'
+        $event.stopPropagation()
         if (item.isFocus === 'false') {
           this.$http.post('/trade/storeFocus/save', {storeName: item.storeName, storeid: item.id})
             .then(response => {