产品详情页搜索，卖家商机管理

assets/scss/mobileCommon.scss

@@ -422,3 +422,25 @@ html {
 .overflow-hidden {
   overflow: hidden !important;
 }
+
+/* 公共导航切换 */
+.com-switch-item {
+  text-align: center;
+  background: #fff;
+  .mobile-switch-btn {
+    background: #fff;
+    color: #666;
+    display: inline-block;
+    height: .64rem;
+    font-size: .34rem;
+    line-height: .64rem;
+    width: 1.4rem;
+    &:first-child {
+      margin-right: 1.78rem;
+    }
+    &.active {
+      color: #3f84f6;
+      border-bottom: .04rem solid #3f84f6;
+    }
+  }
+}

components/mobile/center/Seek.vue

@@ -5,6 +5,10 @@
       <p>{{seekTitle}}</p>
     </div>
     <div class="mobile-fix-content" id="mobileFixContent">
+      <div class="seek-title com-switch-item">
+        <span class="mobile-switch-btn" :class="{'active': activeType=='all'}" @click="switchActiveType('all')">公司商机</span>
+        <span class="mobile-switch-btn" :class="{'active': activeType=='self'}" @click="switchActiveType('self')">我的商机</span>
+      </div>
       <div class="search-content">
         <input type="text" v-model="seekKeyword" :placeholder="userType == 'buyer' ? '品牌/型号' : '品牌/类目/型号/规格/公司'" @keyup.13="onSearch">
         <span @click="onSearch"><i class="iconfont icon-sousuo"></i></span>
@@ -28,7 +32,8 @@
         count: 10,
         isChange: false,
         isSearch: false,
-        remindKeyword: ''
+        remindKeyword: '',
+        activeType: 'all'
       }
     },
     props: ['userType'],
@@ -67,7 +72,7 @@
       seekTitle () {
         if (this.seekType === 'wait') {
           if (this.userType === 'saler') {
-            return '我的商机'
+            return '商机管理'
           } else {
             return '待报价'
           }
@@ -86,11 +91,19 @@
         this.reloadData()
       },
       reloadData: function () {
-        this.$emit('reloadAction', this.page, this.count, this.seekKeyword, this.seekType)
+        this.$emit('reloadAction', this.page, this.count, this.seekKeyword, this.seekType, this.activeType)
       },
       onPullUpAction: function () {
         this.page++
         this.reloadData()
+      },
+      switchActiveType: function (type) {
+        this.activeType = type
+        this.isSearch = false
+        this.remindKeyword = this.seekKeyword = ''
+        this.page = 1
+        this.isChange = true
+        this.reloadData()
       }
     }
   }
@@ -107,4 +120,17 @@
       line-height: .46rem;
     }
   }
+  $seekTitleLine: .72rem;
+  .seek-title {
+    height: $seekTitleLine;
+    line-height: $seekTitleLine;
+    .mobile-switch-btn {
+      height: $seekTitleLine;
+      line-height: $seekTitleLine;
+      font-size: .28rem;
+      /*&.active {
+        border-bottom-width: .07rem;
+      }*/
+    }
+  }
 </style>

components/mobile/store/StoreDetail.vue

@@ -70,7 +70,13 @@
       <p>抱歉，暂无店铺简介</p>
       <nuxt-link to="/">返回首页</nuxt-link>
     </div>-->
-    <div class="product-store" v-if="activeType == 'product'">
+    <div class="product-store">
+      <div class="search-content">
+        <input type="text" v-model="keyword" placeholder="请输入品牌/类目/型号/规格" @keyup.13="search">
+        <span @click="search">
+        <i class="iconfont icon-sousuo"></i>
+        </span>
+      </div>
       <table v-if="commodities.content&&commodities.content.length > 0">
         <thead id="product-head" >
           <tr>
@@ -127,18 +133,19 @@
         </tr>
         </tbody>
       </table>
-      <div v-if="!commodities.content || commodities.content.length == 0" class="no-product">
-        <img src="/images/mobile/@2x/car@2x.png" alt="">
-        <div>抱歉，暂无上架产品信息</div>
-      </div>
+      <empty-status :type="isSearch ? 'search' : 'collect'"
+                    :text="isSearch ? `抱歉，暂无与“${keyword}”匹配的产品信息`: '抱歉，暂无产品信息'"
+                    :showLink="false"
+                    v-else
+      ></empty-status>
     </div>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
-    <loading v-show="isSearchingMore"></loading>
     <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
+    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="getMoreSearch"></pull-up>
   </div>
 </template>
 <script>
-  import {RemindBox, Loading, LoginBox} from '~components/mobile/common'
+  import {RemindBox, LoginBox, PullUp, EmptyStatus} from '~components/mobile/common'
   export default {
     data () {
       return {
@@ -147,26 +154,22 @@
         timeoutCount: 0,
         clickTel: false,
         clickPhone: false,
-        isSearchingMore: false,
         searchLists: [],
         page: 1,
+        count: 10,
         showLoginBox: false,
         isScrollOverTab: false,
-        url: ''
+        url: '',
+        keyword: '',
+        isChange: false,
+        isSearch: false
       }
     },
     components: {
       RemindBox,
-      Loading,
-      LoginBox
-    },
-    mounted: function () {
-      let _this = this
-      _this.$nextTick(function () {
-        window.addEventListener('scroll', function () {
-          _this.scroll()
-        }, false)
-      })
+      LoginBox,
+      PullUp,
+      EmptyStatus
     },
     filters: {
       currency: function (num) {
@@ -204,10 +207,19 @@
       },
       commodities () {
         let list = this.$store.state.shop.storeInfo.storeCommodity.data
-        this.searchLists = this.searchLists.concat(list.content)
-        this.isSearchingMore = false
+        if (this.isChange) {
+          this.searchLists = []
+          this.page = 1
+          this.isChange = false
+        } else {
+          this.searchLists = [...this.searchLists, ...list.content]
+          this.isSearchSearchingMore = false
+        }
         return list
       },
+      fetching () {
+        return this.$store.state.shop.storeInfo.storeCommodity.fetching
+      },
       allPage () {
         return this.commodities.totalPages
       },
@@ -223,25 +235,18 @@
     },
     methods: {
       scroll: function () {
-        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
-        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.page < this.allPage && this.activeType === 'product') {
-          this.getMoreCom()
-        }
         let tbodyObj = document.getElementById('product-body')
         let theadObj = document.getElementById('product-head')
         if (theadObj) {
           this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
         }
       },
-      getMoreCom: function () {
-        if (!this.isSearchingMore) {
-          this.page++
-          this.isSearchingMore = true
-          this.pageCommodity({ page: this.page, count: 6 })
-        }
+      getMoreSearch: function () {
+        this.page++
+        this.pageCommodity({ page: this.page, count: this.count })
       },
-      async pageCommodity (pageParams, kindId, keyword) {
-        let params = { storeid: this.$route.params.uuid, origin: 'store', kindUuid: kindId, code: keyword }
+      async pageCommodity (pageParams) {
+        let params = { storeid: this.$route.params.uuid, origin: 'store', code: this.keyword }
         params.page = pageParams.page
         params.count = pageParams.count
         try {
@@ -280,6 +285,12 @@
           this.url = this.$route.fullPath
           this.showLoginBox = true
         }
+      },
+      search: function () {
+        this.page = 1
+        this.isChange = true
+        this.isSearch = true
+        this.pageCommodity({ page: this.page, count: this.count })
       }
     }
   }
@@ -303,7 +314,7 @@
       background: url('/images/mobile/@2x/brand-bg.png') no-repeat;
       background-size: cover;
       .store-logo-box {
-        border: .04rem solid #c7e5fd;
+        border: .01rem solid #c7e5fd;
         border-radius: .1rem;
         height: 2.21rem;
         width: 3.73rem;
@@ -557,10 +568,14 @@
     }
   }
   .com-none-state {
-    padding: .6rem;
-    p {
-      margin: 0;
-      font-size: .28rem;
+    background: #fff !important;
+  }
+  .search-content {
+    background: #fff;
+    padding: .07rem 0;
+    input {
+      width: 6.37rem;
+      border: .01rem solid #376ff3;
     }
   }
 </style>

pages/mobile/applyPurchase/list/businessOpportunity.vue

@@ -89,9 +89,6 @@
         if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.page < this.allPage) {
           this.getMoreSearch()
         }
-        if (this.$refs.searchSeekInput && this.$store.state.mobile.InputGetFocus) {
-          this.$refs.searchSeekInput.blur()
-        }
       },
 //      blur: function() {
 //        // setTimeout(() => {
@@ -116,7 +113,6 @@
         this.remindKeyword = this.seekKeyword
         this.page = 1
         this.isChange = true
-        this.$refs.searchSeekInput.blur()
         this.reloadData()
       }
     }

pages/mobile/applyPurchase/list/index.vue

@@ -81,9 +81,6 @@
         if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.page < this.allPage) {
           this.getMoreSearch()
         }
-        if (this.$refs.searchSeekInput && this.$store.state.mobile.InputGetFocus) {
-          this.$refs.searchSeekInput.blur()
-        }
       },
       getMoreSearch: function () {
         this.page++
@@ -98,7 +95,6 @@
         this.remindKeyword = this.seekKeyword
         this.page = 1
         this.isChange = true
-        this.$refs.searchSeekInput.blur()
         this.reloadData()
       }
     }

pages/mobile/center/vendor/index.vue

@@ -26,11 +26,11 @@
         </ul>
       </div>
       <div class="block-wrap seek-operation">
-        <p><i></i>我的商机</p>
+        <p><i></i>商机管理</p>
         <ul>
           <nuxt-link to="/mobile/center/vendor/seek?seekType=wait" tag="li">
             <img src="/images/mobile/center/vendor/all.png" alt="">
-            <p>我的商机</p>
+            <p>公司商机</p>
           </nuxt-link>
           <nuxt-link to="/mobile/center/vendor/seek?seekType=done" tag="li">
             <img src="/images/mobile/center/vendor/seek-done.png" alt="">

pages/mobile/center/vendor/seek.vue

@@ -6,6 +6,11 @@
   export default {
     layout: 'mobileNoHeader',
     middleware: 'authenticated',
+    data () {
+      return {
+        activeType: 'all'
+      }
+    },
     fetch ({ store, query }) {
       let user = store.state.option.user.data
       let params = {
@@ -16,7 +21,7 @@
         params.enuu = user.enterprise.uu
         params.useruu = user.userUU
         return Promise.all([
-          store.dispatch('applyPurchase/loadVendorPushList', params)
+          store.dispatch('applyPurchase/loadVendorEnPushList', params)
         ])
       } else {
         params._state = 'done'
@@ -35,25 +40,20 @@
     components: {
       Seek
     },
-    computed: {
-      seekType () {
-        return this.$route.query.seekType
-      }
-    },
     methods: {
-      reloadData: function (page = 1, count = 10, keyword) {
+      reloadData: function (page = 1, count = 10, keyword, seekType, activeType = 'all') {
         let store = this.$store
         let user = store.state.option.user.data
         let params = {
           pageNumber: page,
           pageSize: count
         }
-        if (this.seekType === 'wait') {
+        if (seekType === 'wait') {
           params.enuu = user.enterprise.uu
           params.useruu = user.userUU
           params.keyword = keyword
           return Promise.all([
-            store.dispatch('applyPurchase/loadVendorPushList', params)
+            store.dispatch(`applyPurchase/${activeType === 'all' ? 'loadVendorEnPushList' : 'loadVendorPushList'}`, params)
           ])
         } else {
           params._state = 'done'
@@ -72,16 +72,3 @@
     }
   }
 </script>
-<style lang="scss" scoped>
-  .search-content {
-    text-align: center;
-    padding: .25rem 0 0 0;
-    input {
-      border: 1px solid #376ff3;
-    }
-    span {
-      height: .46rem;
-      line-height: .46rem;
-    }
-  }
-</style>

pages/mobile/user/index.vue

@@ -17,7 +17,7 @@
         <div class="img-wrap">
           <img src="/images/mobile/user/icon_01.png" alt="">
         </div>
-        <span>公司</span>
+       <!-- <span>公司</span>-->
         <i class="iconfont icon-xiangyou"></i>
         <span class="l-right">{{user.data.enterprise.enName}}</span>
       </div>
@@ -173,7 +173,7 @@
         color: #666;
         float: right;
         margin-right: .35rem;
-        max-width: 4.2rem;
+        max-width: 4.8rem;
         text-align: right;
         overflow: hidden;
         text-overflow: ellipsis;

store/applyPurchase.js

@@ -122,7 +122,7 @@ export const actions = {
         commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
       })
   },
-  // 卖家精准推送求购列表
+  // 卖家个人商机
   loadVendorPushList ({ commit }, params = {}) {
     commit('purchaseManList/REQUEST_PURCHASEMAN')
     return axios.get('/inquiry/sale/remind', {params})
@@ -132,6 +132,16 @@ export const actions = {
         commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
       })
   },
+    // 卖家公司商机
+    loadVendorEnPushList ({ commit }, params = {}) {
+      commit('purchaseManList/REQUEST_PURCHASEMAN')
+      return axios.get('/inquiry/sale/enremind', {params})
+        .then(response => {
+          commit('purchaseManList/GET_PURCHASEMAN_SUCCESS', response.data)
+        }, err => {
+          commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
+        })
+    },
   // 求购排行榜
   loadPurchaseApplyRank ({ commit }, params = {}) {
     commit('purchaseApplyRank/REQUEST_PURCHASERANK', params)