买家收藏

components/mobile/center/Seek.vue

@@ -35,7 +35,7 @@
       PullUp
     },
     watch: {
-      '$store.state.applyPurchase.purchaseManList.purchaseManList.data': {
+      'purchase.data': {
         handler: function (val) {
           let list = val.content ? val.content.slice() : []
           if (this.isChange) {

pages/mobile/center/user/collect/component.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="mobile-center">
+    <div class="com-mobile-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>器件收藏</p>
+    </div>
+    <div class="mobile-content">
+      <ul v-if="compList && compList.length">
+        <li v-for="comp in compList">
+          <div class="fl">
+            <p>型号：<span v-text="comp.componentinfo.code"></span></p>
+            <p>品牌：<span v-text="comp.componentinfo.brand.nameCn"></span></p>
+            <p>产品描述：<span v-text="comp.componentinfo.kind.nameCn"></span></p>
+          </div>
+          <div class="vir"></div>
+          <div class="fr">
+            <i class="iconfont icon-shoucang" @click="cancelFocus(comp, $event)"></i>
+            <a class="sa-pub" @click="compInquiry(comp, $event)">立即询价</a>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
+    <publish-supplier-seek :product="componentSeekObj" :showPublishBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-supplier-seek>
+  </div>
+</template>
+<script>
+  import { RemindBox, PullUp } from '~components/mobile/common'
+  import { PublishSupplierSeek } from '~components/mobile/applyPurchase'
+  export default {
+    middleware: 'authenticated',
+    layout: 'mobileNoHeader',
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: 0,
+        page: 1,
+        count: 10,
+        isChange: false,
+        compList: [],
+        componentSeekObj: {
+          standard: 1,
+          cmpCode: '',
+          pbranden: '',
+          spec: null,
+          kind: ''
+        },
+        showPublishBox: false
+      }
+    },
+    watch: {
+      'compCollectList.data': {
+        handler: function (val) {
+          if (this.isChange) {
+            this.compList = val.content
+            this.isChange = false
+          } else {
+            this.compList = [...this.compList, ...val.content]
+          }
+        },
+        immediate: true
+      }
+    },
+    computed: {
+      compCollectList () {
+        return this.$store.state.product.common.collectList
+      },
+      fetching () {
+        return this.compCollectList.fetching
+      },
+      allPage () {
+        return Math.floor(this.compCollectList.data.totalElements / this.compCollectList.data.size) + Math.floor(this.compCollectList.data.totalElements % this.compCollectList.data.size > 0 ? 1 : 0)
+      }
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        // 获取器件收藏列表
+        store.dispatch('product/saveStores', { count: 10, page: 1, type: 'component' })
+      ])
+    },
+    components: {
+      RemindBox,
+      PullUp,
+      PublishSupplierSeek
+    },
+    methods: {
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      cancelFocus: function (item, event) {
+        event.stopPropagation()
+        this.$http.delete('/trade/collection/' + item.id)
+          .then(response => {
+            this.onRemind('取消收藏成功')
+            this.isChange = true
+            this.page = 1
+            this.reloadList()
+          }, err => {
+            this.onRemind(err.response.data || '取消收藏失败')
+          })
+      },
+      reloadList: function () {
+        this.$store.dispatch('product/saveStores', { page: this.page, count: this.count, type: 'component' })
+      },
+      onPullUpAction: function () {
+        this.page++
+        this.reloadList()
+      },
+      compInquiry: function (item, e) {
+        if (e) {
+          e.stopPropagation()
+        }
+        this.componentSeekObj.cmpCode = item.componentinfo.code
+        this.componentSeekObj.pbranden = item.componentinfo.brand.nameCn
+        this.componentSeekObj.spec = null
+        this.componentSeekObj.kind = item.componentinfo.kind.nameCn
+        this.componentSeekObj = JSON.parse(JSON.stringify(this.componentSeekObj))
+        this.showPublishBox = true
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mobile-content {
+    ul {
+      width: 7.1rem;
+      margin: 0 auto;
+      li {
+        height: 1.8rem;
+        border-radius: .05rem;
+        border: 1px solid #ccc;
+        margin: .25rem 0 0 0;
+        position: relative;
+        .fl {
+          width: 4.71rem;
+          color: #666;
+          padding: .25rem .1rem .25rem .23rem;
+          p {
+            font-size: .3rem;
+            line-height: .42rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            span {
+              color: #333;
+            }
+          }
+        }
+        .vir {
+          position: absolute;
+          top: .28rem;
+          bottom: .28rem;
+          right: 2.36rem;
+          border-right: .01rem dashed #9f9f9f;
+        }
+        .fr {
+          width: 2.34rem;
+          text-align: center;
+          i {
+            display: block;
+            color: #ff7800;
+            font-size: .5rem;
+            width: .6rem;
+            height: .6rem;
+            line-height: .6rem;
+            text-align: center;
+            margin: .29rem auto .1rem;
+          }
+          .sa-pub {
+            display: block;
+            width: 1.7rem;
+            height: .47rem;
+            line-height: .47rem;
+            text-align: center;
+            font-size: .26rem;
+            color: #fff;
+            background: #008bf7;
+            margin: 0 auto;
+            border-radius: .05rem;
+          }
+        }
+      }
+    }
+  }
+</style>

pages/mobile/center/user/collect/store.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="mobile-center">
+    <div class="com-mobile-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>店铺关注</p>
+    </div>
+    <div class="mobile-content">
+      <div class="shop-list" v-bind:key="item.id" v-for="item in storeList" @click="goStoreDetail(item.storeInfo.uuid)">
+        <h3>{{item.storeName}}</h3>
+        <div class="list-item">
+          <div class="item-img">
+            <img :src="getBackground(item.storeInfo.type)" />
+            <img :src="item.storeInfo.logoUrl || '/images/component/default.png'">
+          </div>
+          <div class="list-item-phone">
+            <p>电话：<span>{{item.storeInfo.enterprise ? item.storeInfo.enterprise.enTel : '-'}}</span></p>
+            <p>传真：<span>{{item.storeInfo.enterprise ? item.storeInfo.enterprise.enFax : '-'}}</span></p>
+            <p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>
+            <i class="iconfont icon-shoucang" @click="cancelFocus(item, $event)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mobile-modal" v-if="showStoreInfo">
+      <div class="mobile-modal-box">
+        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
+        <div class="mobile-modal-content">
+          <div>商家地址：{{storeInfo.enAddress || storeInfo.address || '-'}}</div>
+          <!--<div class="content-line link-url">在线咨询</div>-->
+          <div>致电：<a :href="'tel:' + storeInfo.enTel" target="_blank" class="content-line link-url">{{storeInfo.enTel || '-'}}</a></div>
+          <div>邮件：<a :href="'mailto:' + storeInfo.enEmail" target="_blank" class="content-line link-url">{{storeInfo.enEmail || '-'}}</a></div>
+        </div>
+      </div>
+    </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
+  </div>
+</template>
+<script>
+  import { RemindBox, PullUp } from '~components/mobile/common'
+  export default {
+    middleware: 'authenticated',
+    layout: 'mobileNoHeader',
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: 0,
+        page: 1,
+        count: 10,
+        isChange: false,
+        storeList: [],
+        showStoreInfo: false,
+        storeInfo: {}
+      }
+    },
+    watch: {
+      'storeCollectList.data': {
+        handler: function (val) {
+          if (this.isChange) {
+            this.storeList = val.content
+            this.isChange = false
+          } else {
+            this.storeList = [...this.storeList, ...val.content]
+          }
+        },
+        immediate: true
+      }
+    },
+    computed: {
+      storeCollectList () {
+        return this.$store.state.shop.storeInfo.focusPage
+      },
+      fetching () {
+        return this.storeCollectList.fetching
+      },
+      allPage () {
+        return Math.floor(this.storeCollectList.data.totalElements / this.storeCollectList.data.size) + Math.floor(this.storeCollectList.data.totalElements % this.storeCollectList.data.size > 0 ? 1 : 0)
+      }
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        // 获取店铺关注列表
+        store.dispatch('shop/StoreFocusPage', { count: 10, page: 1 })
+      ])
+    },
+    components: {
+      RemindBox,
+      PullUp
+    },
+    methods: {
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      cancelFocus: function (item, event) {
+        event.stopPropagation()
+        this.$http.post('/trade/storeFocus/delete/storeId', [item.storeid])
+          .then(response => {
+            this.onRemind('取消收藏成功')
+            this.isChange = true
+            this.page = 1
+            this.reloadList()
+          }, err => {
+            this.onRemind(err.response.data || '取消收藏失败')
+          })
+      },
+      reloadList: function () {
+        this.$store.dispatch('shop/StoreFocusPage', { count: this.count, page: this.page })
+      },
+      onPullUpAction: function () {
+        this.page++
+        this.reloadList()
+      },
+      getBackground: function (type) {
+        let url = ''
+        if (type === 'AGENCY') {
+          url += '/images/mobile/@2x/shop/agency.png'
+        } else if (type === 'DISTRIBUTION') {
+          url += '/images/mobile/@2x/shop/distribution.png'
+        } else if (type === 'ORIGINAL_FACTORY') {
+          url += '/images/mobile/@2x/shop/original_factory.png'
+        } else if (type === 'CONSIGNMENT') {
+          url = '/images/mobile/@2x/shop/consignment.png'
+        }
+        return url
+      },
+      goStoreDetail: function (uuid) {
+        this.$router.push('/mobile/shop/' + uuid)
+      },
+      selectStoreInfo: function (store, event) {
+        event.stopPropagation()
+        this.storeInfo = store.storeInfo.enterprise || {}
+        this.showStoreInfo = true
+      },
+      checkInfo: function (str) {
+        return str && str.trim() !== ''
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .shop-list {
+    background:#fff;
+    border-bottom: .1rem solid #dfe2e4;
+    padding: .14rem 0 .14rem 0;
+    &:first-child {
+      border-top: .1rem solid #dfe2e4;
+    }
+    h3{
+      font-size: .32rem;
+      line-height: .4rem;
+      margin: 0 0 0 .27rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-top: .1rem;
+      position: relative;
+      top: .1rem;
+    }
+    .list-item{
+      width:6.77rem;
+      margin-left:.39rem;
+      .item-img{
+        width:2.4rem;
+        vertical-align: middle;
+        display: inline-block;
+        img{
+          &:nth-child(2) {
+            width:2.4rem;
+            height:1.69rem;
+            border: 1px solid #eee;
+          }
+          &:nth-child(1) {
+            position:absolute;
+            width:.65rem;
+            height:.33rem;
+          }
+        }
+      }
+      .list-item-phone{
+        width:3.95rem;
+        padding:.18rem 0;
+        position:relative;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: .26rem;
+        p{
+          font-size:.28rem;
+          line-height: .67rem;
+          margin:0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 3.2rem;
+        }
+        i{
+          display:block;
+          position:absolute;
+          top: -.06rem;
+          right: -.18rem;
+          font-size:.5rem;
+          color:#ff7800;
+          width: .6rem;
+          height: .6rem;
+          text-align: center;
+          line-height: .6rem;
+        }
+      }
+    }
+    &:active {
+      background: #e1e1e1;
+    }
+  }
+</style>

pages/mobile/center/user/index.vue

@@ -30,16 +30,16 @@
         </ul>
       </div>
       <div class="block-wrap collect-block">
-        <div class="content-line">
+        <nuxt-link tag="div" to="/mobile/center/user/collect/component" class="content-line">
           <img src="/images/mobile/center/user/comp-collect.png" alt="">
-          <span>器件收藏<span class="text">(50)</span></span>
+          <span>器件收藏<span class="text">({{compCount.data || 0}})</span></span>
           <i class="iconfont icon-xiangyou"></i>
-        </div>
-        <div class="content-line">
+        </nuxt-link>
+        <nuxt-link tag="div" to="/mobile/center/user/collect/store" class="content-line">
           <img src="/images/mobile/center/user/store-focus.png" alt="">
-          <span>店铺关注<span class="text">(50)</span></span>
+          <span>店铺关注<span class="text">({{storeCount.data || 0}})</span></span>
           <i class="iconfont icon-xiangyou"></i>
-        </div>
+        </nuxt-link>
       </div>
     </div>
     <publish-seek :showSayPriceBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-seek>
@@ -59,10 +59,24 @@
         timeoutCount: 0
       }
     },
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('product/loadCompCollectInfo'),
+        store.dispatch('shop/loadStoreCollectInfo')
+      ])
+    },
     components: {
       RemindBox,
       PublishSeek
     },
+    computed: {
+      compCount () {
+        return this.$store.state.product.component.collectCount.data
+      },
+      storeCount () {
+        return this.$store.state.shop.storeInfo.collectCount.data
+      }
+    },
     methods: {
       onRemind: function (str) {
         this.remindText = str

pages/mobile/center/vendor/index.vue

@@ -43,18 +43,53 @@
         </ul>
       </div>
       <div class="block-wrap collect-block">
-        <div class="content-line">
+        <div class="content-line" @click="goStore">
           <img src="/images/mobile/center/user/comp-collect.png" alt="">
-          <span>我的店铺<span class="text">(50)</span></span>
+          <span>我的店铺</span>
           <i class="iconfont icon-xiangyou"></i>
         </div>
       </div>
     </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 <script>
+  import { RemindBox } from '~components/mobile/common'
   export default {
-    layout: 'mobileNoHeader'
+    middleware: 'authenticated',
+    layout: 'mobileNoHeader',
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: 0
+      }
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('loadStoreStatus', { op: 'check' })
+      ])
+    },
+    components: {
+      RemindBox
+    },
+    computed: {
+      storeInfo () {
+        return this.$store.state.option.storeStatus.data
+      }
+    },
+    methods: {
+      goStore: function () {
+        if (this.storeInfo.uuid) {
+          this.$router.push(`/mobile/shop/${this.storeInfo.uuid}`)
+        } else {
+          this.onRemind('请先前往pc端开通店铺')
+        }
+      },
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      }
+    }
   }
 </script>
 <style lang="scss" scoped>

store/product.js

@@ -149,5 +149,15 @@ export const actions = {
       }, err => {
         commit('supplierInformation/GET_INFORMATION_FAILURE', err)
       })
+  },
+  // 获取用户器件收藏数据
+  loadCompCollectInfo({ commit }) {
+    commit('component/REQUEST_COLLECT')
+    return axios.get('/trade/collection/count', { params: {type: 'component'} })
+      .then(response => {
+        commit('component/REQUEST_COLLECT_SUCCESS', response.data)
+      }, err => {
+        commit('component/REQUEST_COLLECT_FAILURE', err)
+      })
   }
 }

store/product/component.js

@@ -2,6 +2,10 @@ export const state = () => ({
   componentGoods: {
     fetching: false,
     data: []
+  },
+  collectCount: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -15,5 +19,15 @@ export const mutations = {
   },
   GET_CMPGOODS_FAILURE (state) {
     state.fetching = false
+  },
+  REQUEST_COLLECT (state) {
+    state.collectCount.fetching = true
+  },
+  REQUEST_COLLECT_SUCCESS (state, result) {
+    state.collectCount.fetching = false
+    state.collectCount.data = result
+  },
+  REQUEST_COLLECT_FAILURE (state) {
+    state.fetching = false
   }
 }

store/shop.js

@@ -140,5 +140,15 @@ export const actions = {
       }, err => {
         commit('storeInfo/GET_STORE_INFO_FAILURE', err)
       })
+  },
+  // 获取用户店铺关注数量
+  loadStoreCollectInfo({ commit }) {
+    commit('storeInfo/REQUEST_COLLECT')
+    return axios.get('/trade/storeFocus/count')
+      .then(response => {
+        commit('storeInfo/REQUEST_COLLECT_SUCCESS', response.data)
+      }, err => {
+        commit('storeInfo/REQUEST_COLLECT_FAILURE', err)
+      })
   }
 }

store/shop/storeInfo.js

@@ -33,6 +33,10 @@ export const state = () => ({
   focusPage: {
     fetching: false,
     data: {}
+  },
+  collectCount: {
+    fetching: false,
+    data: {}
   }
 })
 
@@ -116,5 +120,15 @@ export const mutations = {
   },
   GET_FOCUSPAGE_FAILURE (state) {
     state.focusPage.fetching = false
+  },
+  REQUEST_COLLECT (state) {
+    state.collectCount.fetching = true
+  },
+  REQUEST_COLLECT_SUCCESS (state, result) {
+    state.collectCount.fetching = false
+    state.collectCount.data = result
+  },
+  REQUEST_COLLECT_FAILURE (state) {
+    state.fetching = false
   }
 }