Browse Source

新增卖家中心tab

shenjj 7 years ago
parent
commit
6ee2ab64e8
2 changed files with 472 additions and 22 deletions
  1. 391 21
      pages/mobile/user/index.vue
  2. 81 1
      store/mobile.js

+ 391 - 21
pages/mobile/user/index.vue

@@ -24,18 +24,24 @@
       <li :class="{active: activeType == 'comp'}" @click="activeType = 'comp'">器件收藏</li>
       <li :class="{active: activeType == 'store'}" @click="activeType = 'store'">店铺关注</li>
     </ul>
-    <div v-if="activeType == 'seek'">
-      <div class="seek" v-if="userType !== 'saler'">
-        <ul class="seek-type">
+    <ul class="switch-list" v-if="userType !== 'buyer'">
+      <li :class="{active: activeType == 'oppor'}"   @click="activeType = 'oppor'">我的商机</li>
+      <li :class="{active: activeType == 'provider'}"  @click="activeType = 'provider'">产品管理</li>
+      <li :class="{active: activeType == 'mystore'}"  @click="activeType = 'mystore'">我的店铺</li>
+    </ul>
+    <!-- 买家中心 我的求购 -->
+    <div v-if="activeType == 'seek' || activeType == 'oppor'">
+      <div class="seek">
+        <ul class="seek-type" v-if="userType !== 'saler'">
           <li :class="{active: seekType == 'wait'}" @click="switchSeek('wait')"><div>待报价</div></li>
           <li :class="{active: seekType == 'done'}" @click="switchSeek('done')"><div>已报价</div></li>
           <!--<li :class="{active: seekType == 'accept'}" @click="switchSeek('accept')"><div>已采纳</div></li>-->
         </ul>
+        <ul class="seek-type" v-if="userType === 'saler'">
+          <li :class="{active: seekType == 'wait'}" style="border-top: 0px" @click="switchSeek('wait')"><div>全部</div></li>
+          <li :class="{active: seekType == 'done'}" style="border-top: 0px" @click="switchSeek('done')"><div>已报价</div></li>
+        </ul>
       </div>
-      <ul class="switch-list vendor-switch" v-if="userType === 'saler'">
-        <li :class="{active: seekType == 'wait'}" @click="switchSeek('wait')"><div>全部</div></li>
-        <li :class="{active: seekType == 'done'}" @click="switchSeek('done')"><div>已报价</div></li>
-      </ul>
       <div class="search-content">
         <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="seekKeyword" @keyup.13="searchSeek" ref="searchSeekInput" @focus="inputGetFocus()" @blur="blur()">
         <span @click="searchSeek" >
@@ -44,6 +50,9 @@
       </div>
       <seek-list :userType="userType" :seekType="seekType" :purchaseManList="purchaseManListData" :isDataChange="isDataChange"></seek-list>
     </div>
+    <!-- /end 买家中心 我的求购 -->
+
+    <!-- 买家中心 店铺关注 -->
     <div class="shop-list" v-bind:key="item.id" v-if="activeType == 'store'" v-for="item in focusPage.content" @click="goStoreDetail(item.storeInfo.uuid)">
       <h3>{{item.storeName}}</h3>
       <div class="list-item">
@@ -59,6 +68,8 @@
         </div>
       </div>
     </div>
+    <!-- /end 买家中心 店铺关注 -->
+    <!-- 买家中心 器件收藏 -->
     <div class="detail-brand" v-bind:key="index" v-for="(item, index) in collectSave.content" v-if="activeType == 'comp'" @click="goComponentDetail(item.componentinfo.uuid)">
       <a>
         <div class="brand-item">
@@ -69,6 +80,110 @@
         </div>
       </a>
     </div>
+    <!--/end  买家中心 器件收藏 -->
+
+    <!-- 卖家中心 我的店铺 -->
+    <div v-if="activeType == 'mystore'" class="mystore">
+      <div ></div>
+    </div>
+    <!-- /end 卖家中心 我的店铺 -->
+
+    <!-- 卖家中心 产品管理 -->
+    <div v-if="activeType == 'provider'" class="provider">
+      <div class="seek">
+        <ul class="seek-type" >
+          <li :class="{active: providerType == 'enterprise'}" style="width: 33.3%" @click="switchprovide('enterprise')"><div>企业产品库</div></li>
+          <li :class="{active: providerType == 'person'}" style="width: 33.3%" @click="switchprovide('person')"><div>个人产品库</div></li>
+          <li :class="{active: providerType == 'onLine'}" style="width: 33.3%" @click="switchprovide('onLine')"><div>在售产品</div></li>
+        </ul>
+      </div>
+      <div class="search-content" style="border-bottom: 1px solid #f5f5f5;padding-bottom: 0.25rem">
+        <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="seekKeyword" @keyup.13="searchSeek" ref="searchSeekInput" @focus="inputGetFocus()" @blur="blur()">
+        <span @click="searchSeek" >
+        <i class="iconfont icon-sousuo"></i>
+        </span>
+      </div>
+      <div v-bind:key="index" v-for="(item, index) in GetEnterpriseListData" class="providerList">
+        <div v-if="providerType !== 'onLine'">
+          <div class="top">
+            <div class="icon" :class="item.standard ? 'standed' : 'istanded'"></div>
+            <div class="text">
+              {{item.pcmpcode}}
+            </div>
+          </div>
+          <div class="content">
+            <div class="fl">
+              <div class="linetext">类目(产品名称):{{item.kinden || '-'}}</div>
+              <div class="linetext">品牌:{{item.pbranden}}</div>
+              <div class="linetext">单位:PCS</div>
+            </div>
+            <div class="fr" :class="providerType == 'enterprise' && item.batchCount > 0 ? '' : 'addtop'" >
+              <div class="look" v-if="item.batchCount && providerType == 'enterprise'">查看产品</div>
+              <div class="add" v-if="providerType == 'enterprise'">加入个人产品</div>
+              <div class="delete" v-if="providerType == 'person'">删除</div>
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <div class="top top2">
+            <div class="icon" :class="item.standard ? 'standed' : 'istanded'"></div>
+            <div class="text">
+              {{item.code}}
+            </div>
+            <div class="pms">
+              <!--{{(storeInfo.uuid != 'undefind' && item.storeid == storeInfo.uuid && storeInfo.storeName.indexOf('优软测试二') < 0 && storeInfo.storeName.indexOf('优软商城') < 0) ? '自营' : '寄售'}}-->
+            </div>
+          </div>
+          <div class="middle">
+            <div class="list">
+              <div class="name">类目(产品名称):</div>
+              <div class="text">SSSASCSCSEWQA</div>
+            </div>
+            <div class="list">
+              <div class="fl">
+                <div class="name">品牌:</div>
+                <div class="text">SSSASCSCSEWQA</div>
+              </div>
+              <div class="fr">
+                <div class="name">交期(天):</div>
+                <div class="text">20-30</div>
+              </div>
+            </div>
+
+            <div class="list">
+              <div class="fl">
+                <div class="name">包装数量:</div>
+                <div class="text">1000</div>
+              </div>
+              <div class="fr">
+                <div class="name">库存:</div>
+                <div class="text">568</div>
+              </div>
+            </div>
+
+            <div class="list">
+              <div class="fl">
+                <div class="name">包装方式:</div>
+                <div class="text">其他</div>
+              </div>
+              <div class="fr">
+                <div class="name">起订量:</div>
+                <div class="text">22220</div>
+              </div>
+            </div>
+
+            <div class="list">
+              <div class="name">生成日期:</div>
+              <div class="text">2815-24-32</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--<div v-else v-bind:key="index" v-for="(item, index) in GetEnterpriseListData" class="providerList">-->
+        <!---->
+      <!--</div>-->
+    </div>
+    <!-- /end 卖家中心 产品管理 -->
     <div class="none-state" v-if="(activeType != 'seek') && ((collectSave.totalElements == 0 && activeType == 'comp') || (focusPage.totalElements == 0 && activeType == 'store') || (collectSave.totalElements == 0 && focusPage.totalElements == 0))">
       <img src="/images/mobile/@2x/empty-collect.png">
       <p v-text="getRemindText()"></p>
@@ -90,6 +205,7 @@
     <loading v-show="isSearchSearchingMore"></loading>
     <div v-if="purchaseManList && false"></div>
     <div v-if="purchaseManListFetching && false"></div>
+    <div v-if="EnterpriseList && false"></div>
   </div>
 </template>
 
@@ -120,7 +236,9 @@
         seekSize: 10,
         purchaseManListData: [],
         isDataChange: false,
-        showEnterpriseToggle: false
+        showEnterpriseToggle: false,
+        providerType: 'enterprise',
+        GetEnterpriseListData: []
       }
     },
     components: {
@@ -141,7 +259,6 @@
       } else {
         params.userUU = user.userUU
       }
-//      console.log(params)
       return Promise.all([
         store.dispatch('product/saveStores', { count: 100, page: 1, type: 'component' }),
         store.dispatch('shop/StoreFocusPage', { count: 100, page: 1 }),
@@ -153,6 +270,15 @@
         handler: function (val, old) {
           this.switchSeek('wait')
         }
+      },
+      'activeType': {
+        handler: function (val, old) {
+          if (val === 'provider') {
+            this.seekPage = 1
+            this.GetEnterpriseListData = []
+            this.GetEnterpriseList()
+          }
+        }
       }
     },
     mounted: function () {
@@ -244,7 +370,11 @@
         this.reloadData()
       },
       switchType: function () {
-        this.activeType = 'seek'
+        if (this.userType === 'buyer') {
+          this.activeType = 'oppor'
+        } else {
+          this.activeType = 'seek'
+        }
         this.seekKeyword = ''
         this.$router.push('/mobile/user' + (this.userType === 'saler' ? '?type=buyer' : '?type=saler'))
       },
@@ -277,23 +407,36 @@
             this.$store.dispatch('applyPurchase/loadBuyerPurchaseManList', params)
           }
         } else {
-          if (type === 'wait') {
-            this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: this.seekPage, pageSize: this.seekSize, enUU: this.$store.state.option.user.data.enterprise.uu, keyword: this.seekKeyword})
-          } else if (type === 'done') {
-            this.$store.dispatch('applyPurchase/loadVendorPurchaseManList', {pageNumber: this.seekPage, pageSize: this.seekSize, _state: 'done', filter: {vendUU: this.$store.state.option.user.data.enterprise.uu, fromDate: null, endDate: null, keyword: this.seekKeyword}, overdue: 1})
+          if (this.activeType === 'provider') {
+            if (this.providerType === 'enterprise') {
+              this.GetEnterpriseList()
+            } else if (this.providerType === 'person') {
+              this.GetPersonList()
+            } else if (this.providerType === 'onLine') {
+              this.GetOnlineList()
+            }
           } else {
-            this.$store.dispatch('applyPurchase/loadVendorPurchaseManList', {pageNumber: this.seekPage, pageSize: this.seekSize, _state: 'done', filter: {vendUU: this.$store.state.option.user.data.enterprise.uu, fromDate: null, endDate: null, keyword: this.seekKeyword}, overdue: 1})
+            if (type === 'wait') {
+              this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: this.seekPage, pageSize: this.seekSize, enUU: this.$store.state.option.user.data.enterprise.uu, keyword: this.seekKeyword})
+            } else if (type === 'done') {
+              this.$store.dispatch('applyPurchase/loadVendorPurchaseManList', {pageNumber: this.seekPage, pageSize: this.seekSize, _state: 'done', filter: {vendUU: this.$store.state.option.user.data.enterprise.uu, fromDate: null, endDate: null, keyword: this.seekKeyword}, overdue: 1})
+            } else {
+              this.$store.dispatch('applyPurchase/loadVendorPurchaseManList', {pageNumber: this.seekPage, pageSize: this.seekSize, _state: 'done', filter: {vendUU: this.$store.state.option.user.data.enterprise.uu, fromDate: null, endDate: null, keyword: this.seekKeyword}, overdue: 1})
+            }
           }
         }
       },
       scroll: function () {
         let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
-        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.seekPage < this.allPage) {
-          this.getMoreSearch()
-        }
+
         if (this.$refs.searchSeekInput && this.$store.state.mobile.InputGetFocus) {
           this.$refs.searchSeekInput.blur()
         }
+        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && this.activeType === 'provider' && !this.isSearchSearchingMore && this.seekPage < this.EnterprisePage) {
+          this.getMoreSearch()
+        } else if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && this.activeType !== 'provider' && !this.isSearchSearchingMore && this.seekPage < this.allPage) {
+          this.getMoreSearch()
+        }
       },
       blur: function() {
         setTimeout(() => {
@@ -306,9 +449,59 @@
         }, 300)
       },
       getMoreSearch: function () {
-        this.seekPage++
-        this.isSearchSearchingMore = true
-        this.reloadData()
+          this.seekPage++
+          this.isSearchSearchingMore = true
+          this.reloadData()
+      },
+      // 获取当前企业产品库
+      GetEnterpriseList: function() {
+        let params = {
+          _status: 'all',
+          count: 20,
+          isStandard: true,
+          keyword: this.seekKeyword || '',
+          page: this.seekPage,
+          sorting: { id: 'DESC' },
+          type: 'all'
+        }
+        this.$store.dispatch('mobile/GetEnterpriseList', params)
+      },
+      // 获取当前个人产品库
+      GetPersonList: function() {
+        let params = {
+          _status: 'all',
+          count: 20,
+          isStandard: true,
+          keyword: this.seekKeyword || '',
+          page: this.seekPage,
+          sorting: { id: 'DESC' },
+          type: 'all'
+        }
+        this.$store.dispatch('mobile/GetPersonList', params)
+      },
+      // 获取当前在售产品
+      GetOnlineList: function() {
+        let params = {
+          count: 10,
+          keyword: this.seekKeyword || '',
+          page: this.seekPage,
+          sorting: { 'createdDate': 'DESC' },
+          status: '601-602'
+        }
+        this.$store.dispatch('mobile/GetOnlineList', params)
+      },
+      // 产品管理切换
+      switchprovide: function(type) {
+        this.providerType = type
+        this.seekPage = 1
+        this.GetEnterpriseListData = []
+        if (type === 'enterprise') {
+          this.GetEnterpriseList()
+        } else if (type === 'person') {
+          this.GetPersonList()
+        } else if (type === 'onLine') {
+          this.GetOnlineList()
+        }
       }
     },
     computed: {
@@ -350,6 +543,7 @@
         return this.enterpriseInfo.isVendor === 313
       },
       userType () {
+        this.activeType = this.$route.query.type === 'saler' ? 'oppor' : 'seek'
         return this.$route.query.type
       },
       focusPage () {
@@ -379,6 +573,34 @@
       purchaseManListFetching () {
         this.showLoading = false
         return this.purchase.fetching
+      },
+      Enterprise() {
+        if (this.providerType === 'enterprise') {
+          return this.$store.state.mobile.enterpriseList.data
+        } else if (this.providerType === 'person') {
+          return this.$store.state.mobile.personList.data
+        } else if (this.providerType === 'onLine') {
+          return this.$store.state.mobile.onLineList.data
+        }
+      },
+      EnterprisePage() {
+        if (this.providerType === 'enterprise') {
+          return this.$store.state.mobile.enterpriseList.data.totalPages
+        } else if (this.providerType === 'person') {
+          return this.$store.state.mobile.personList.data.totalPages
+        } else if (this.providerType === 'onLine') {
+          return this.$store.state.mobile.onLineList.data.totalPages
+        }
+      },
+      EnterpriseList () {
+        if (this.Enterprise.content) {
+          let list = this.Enterprise.content.slice()
+          this.GetEnterpriseListData = this.GetEnterpriseListData.concat(list)
+          this.isSearchSearchingMore = false
+          return this.Enterprise.content
+        } else {
+          return ''
+        }
       }
     }
   }
@@ -677,4 +899,152 @@
       }
     }
   }
+  .providerList {
+    border-top: 1px solid #e0e0e4;
+    border-bottom: 1px solid #e0e0e4;
+    margin-bottom: 0.24rem;
+    .top {
+      &.top2 {
+        .text {
+          width: 5.4rem;
+        }
+      }
+      .icon {
+        width: 0.6rem;
+        height: 0.36rem;
+        margin-top: 0.27rem;
+        float: left;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        margin-right: 0.12rem;
+        &.istanded{
+          background-image: url('/images/mobile/@2x/istanded.png')
+        }
+        &.standed{
+          background-image: url('/images/mobile/@2x/standed.png')
+        }
+      }
+      .text {
+        float: left;
+        width: 6.3rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      padding: 0 0.24rem;
+      background: #f5f9fd;
+      height: 0.9rem;
+      line-height: 0.9rem;
+      color: #0067e7;
+      font-size: 0.3rem;
+      &::after{
+        clear: both;
+        display: block;
+        content: ' ';
+        visibility: hidden;
+        zoom: 1;
+      }
+    }
+    .content {
+      padding: 0.24rem 0.24rem;
+      background: #fff;
+      .linetext {
+        margin-bottom: 0.24rem;
+        &:nth-last-of-type(1){
+          margin-bottom: 0rem;
+        }
+      }
+      .fl {
+        float: left;
+        border-right: 1px dashed #e0e0e4;
+        width: 4.88rem;
+      }
+      .fr {
+        float: right;
+        margin: 0.18rem 0.24rem;
+        margin-right: 0rem;
+        font-size: 0.2rem;
+        &.addtop {
+          margin-top: 0.6rem
+        }
+        div {
+          width: 1.9rem;
+          height: 0.5rem;
+          text-align: center;
+          line-height: 0.5rem;
+          border-radius: 3px;
+          &.look{
+            background: #0067e7;
+            color: #fff;
+          }
+          &.add{
+            background: #fff;
+            color: #0067e7;
+            border: 1px solid #0067e7;
+          }
+          &.delete{
+            background: #fff;
+            color: #f70415;
+            border: 1px solid #f70415;
+          }
+        }
+        div:nth-child(1){
+          margin-bottom: 0.26rem
+        }
+      }
+      &::after{
+        clear: both;
+        display: block;
+        content: ' ';
+        visibility: hidden;
+        zoom: 1;
+      }
+    }
+    .middle {
+      padding: 0.24rem 0.24rem;
+      background: #fff;
+      .pms {
+        color: #f57710;
+        border: 1px solid #f57710;
+        border-radius: 50%;
+        background: #fff;
+        font-size: 0.2rem;
+        padding: 0.2rem 0.3rem;
+      }
+      .list {
+        margin-bottom: 0.12rem;
+        &::after{
+          clear: both;
+          display: block;
+          content: ' ';
+          visibility: hidden;
+          zoom: 1;
+        }
+        .fl {
+          width: 4.4rem;
+          float: left;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .fr {
+          text-align: left;
+          width: 2.6rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .name {
+          color: #666;
+          font-size: 0.3rem;
+          display: inline-block;
+        }
+        .text {
+          display: inline-block;
+          color: #999;
+          font-size: 0.3rem
+        }
+      }
+    }
+  }
 </style>

+ 81 - 1
store/mobile.js

@@ -1,19 +1,99 @@
+import axios from '~plugins/axios'
 /*
  * 全局设置
  */
 export const state = () => ({
   // 输入框是否被点击
-  InputGetFocus: false
+  InputGetFocus: false,
+
+  // 产品管理 企业产品库
+  enterpriseList: {
+    fetching: false,
+    data: {}
+  },
+
+  // 产品管理 个人产品库
+  personList: {
+    fetching: false,
+    data: {}
+  },
+
+  // 产品管理 在售产品
+  onLineList: {
+    fetching: false,
+    data: {}
+  }
 })
 
 export const mutations = {
   SET_INPUT_STATUS (state, flag) {
     state.InputGetFocus = flag
+  },
+  REQUEST_ENTERPRISE_LIST (state) {
+    state.enterpriseList.fetching = true
+  },
+  GET_ENTERPRISE_LIST_FAILURE (state) {
+    state.enterpriseList.fetching = false
+  },
+  GET_ENTERPRISE_LIST_SUCCESS (state, result = {}) {
+    state.enterpriseList.fetching = false
+    state.enterpriseList.data = result
+  },
+
+  REQUEST_PERSON_LIST (state) {
+    state.personList.fetching = true
+  },
+  GET_PERSON_LIST_FAILURE (state) {
+    state.personList.fetching = false
+  },
+  GET_PERSON_LIST_SUCCESS (state, result = {}) {
+    state.personList.fetching = false
+    state.personList.data = result
+  },
+  REQUEST_ONLINE_LIST (state) {
+    state.onLineList.fetching = true
+  },
+  GET_ONLINE_LIST_FAILURE (state) {
+    state.onLineList.fetching = false
+  },
+  GET_ONLINE_LIST_SUCCESS (state, result = {}) {
+    state.onLineList.fetching = false
+    state.onLineList.data = result
   }
 }
 
 export const actions = {
   SetInputGetFocus({commit}, flag) {
     commit('SET_INPUT_STATUS', flag)
+  },
+
+  GetEnterpriseList ({ commit }, params = {}) {
+    commit('REQUEST_ENTERPRISE_LIST')
+    return axios.get('/trade/products', { params })
+      .then(response => {
+        commit('GET_ENTERPRISE_LIST_SUCCESS', response.data)
+      }, err => {
+        commit('GET_ENTERPRISE_LIST_FAILURE', err)
+      })
+  },
+
+  GetPersonList ({ commit }, params = {}) {
+    commit('REQUEST_PERSON_LIST')
+    return axios.get('/trade/products/person', { params })
+      .then(response => {
+        commit('GET_PERSON_LIST_SUCCESS', response.data)
+      }, err => {
+        commit('GET_PERSON_LIST_FAILURE', err)
+      })
+  },
+
+  GetOnlineList ({ commit }, params = {}) {
+    commit('REQUEST_ONLINE_LIST')
+    return axios.get('/trade/goods/store/status', { params })
+      .then(response => {
+        commit('GET_ONLINE_LIST_SUCCESS', response.data)
+      }, err => {
+        commit('GET_ONLINE_LIST_FAILURE', err)
+      })
   }
 }