供应商、店铺搜索、商机

components/mobile/Home.vue

@@ -23,16 +23,16 @@
       </div>
       <ul class="link-list">
         <li>
-          <nuxt-link to="/mobile/supplier">
+          <a @click="goSupplier">
             <img src="/images/mobile/@2x/home/supplier.png" alt="">
             <span>供应商</span>
-          </nuxt-link>
+          </a>
         </li>
         <li>
-          <nuxt-link to="/mobile/applyPurchase/list/businessOpportunity">
+          <a @click="goOpportunity">
             <img src="/images/mobile/@2x/home/seek.png" alt="">
             <span>我的商机</span>
-          </nuxt-link>
+          </a>
         </li>
         <li>
           <nuxt-link to="/mobile/shop">
@@ -67,11 +67,14 @@
       </div>
     </div>
     <main-search v-if="showMainSearch" @cancelSearchAction="onCancelSearch"></main-search>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
   </div>
 </template>
 <script>
   import SeekList from './applyPurchase/SeekList.vue'
   import MainSearch from '~/components/mobile/search/MainSearch.vue'
+  import { RemindBox, LoginBox } from '~components/mobile/common'
   export default {
     data () {
       return {
@@ -90,12 +93,17 @@
           loop: true,
           prevButton: '.swiper-button-prev',
           nextButton: '.swiper-button-next'
-        }
+        },
+        remindText: '',
+        timeoutCount: 0,
+        showLoginBox: false
       }
     },
     components: {
       SeekList,
-      MainSearch
+      MainSearch,
+      RemindBox,
+      LoginBox
     },
     computed: {
       purchaseManList () {
@@ -109,6 +117,28 @@
       },
       onCancelSearch: function () {
         this.showMainSearch = false
+      },
+      goOpportunity () {
+        if (this.user.logged) {
+          if (this.user.data.enterprise.uu) {
+            this.$router.push('/mobile/applyPurchase/list/businessOpportunity')
+          } else if (this.user.data.enterprise.isVendor !== 313) {
+            this.onRemind('抱歉，您暂未开通卖家中心，可前往PC端开通')
+          }
+        } else {
+          this.showLoginBox = true
+        }
+      },
+      goSupplier () {
+        if (this.user.logged) {
+          this.$router.push('/mobile/supplier')
+        } else {
+          this.showLoginBox = true
+        }
+      },
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount ++
       }
     }
   }

components/mobile/applyPurchase/PublishSupplierSeek.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="mobile-modal" v-if="showPublishBox">
+    <div class="mobile-modal-box">
+      <div class="mobile-modal-header">我要询价<i class="icon-guanbi iconfont" @click="cancel"></i></div>
+      <div class="props">
+        <div class="prop">型号：{{applyObj.code || '-'}}</div>
+        <div class="prop">品牌：{{applyObj.brand || '-'}}</div>
+        <div class="prop">类目：{{applyObj.prodTitle || '-'}}</div>
+        <div class="prop">规格：{{applyObj.spec || '-'}}</div>
+        <div class="prop">单位：{{applyObj.unit || '-'}}</div>
+      </div>
+      <div class="publish-seek">
+        <div class="content-line">
+          <span><i>*</i>截止日期：</span>
+          <input type="date" v-model="applyObj.deadline" :min="minDay" :max="maxDay" @blur="deadlineChange">
+        </div>
+        <div class="content-line">
+          <span>数量：</span>
+          <input type="text" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput">
+        </div>
+        <a @click="goPublish">确认</a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { formatDate, cutOutString } from '~utils/baseUtils'
+  export default {
+    props: ['showPublishBox', 'product'],
+    data () {
+      return {
+        applyObj: {
+          code: '',
+          brand: '',
+          amount: '',
+          deadline: '',
+          prodTitle: ''
+        },
+        validObj: {
+          amount: true,
+          deadline: true
+        }
+      }
+    },
+    computed: {
+      minDay: function () {
+        return formatDate(new Date(), 'yyyy-MM-dd')
+      },
+      maxDay: function () {
+        let deadDate = new Date(Date.now() + 1000 * 60 * 60 * 24 * 30 * 3)
+        deadDate = formatDate(deadDate, 'yyyy-MM-dd')
+        return deadDate
+      }
+    },
+    watch: {
+//      showPublishBox: function (val, old) {
+//        if (val) {
+//          document.body.style.position = 'fixed'
+//          document.body.style.left = '0'
+//          document.body.style.right = '0'
+//        } else {
+//          document.body.style.position = 'relative'
+//        }
+//      },
+      product: {
+        handler (val, oldVal) {
+          if (val) {
+            let isStandard = val.standard === 1
+            this.applyObj.code = val.cmpCode
+            this.applyObj.brand = isStandard ? val.pbranden : val.brand
+            this.applyObj.spec = val.spec
+            this.applyObj.unit = val.unit
+            this.applyObj.prodTitle = isStandard ? val.kind : val.prodName
+          }
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      cancel: function () {
+        this.$emit('cancelAction')
+      },
+      emptyForm: function () {
+        for (let attr in this.applyObj) {
+          this.applyObj[attr] = ''
+        }
+      },
+      setRemindText: function (str) {
+        this.$emit('remindAction', str)
+      },
+      goPublish: function () {
+        if (this.checkAll()) {
+          let inquiry = {}
+          let inquiryItem = {}
+          if (this.user.data.enterprise) {
+            inquiry.enUU = this.user.data.enterprise.uu
+          }
+          let date = new Date()
+          let endDate = formatDate(this.applyObj.deadline, 'yyyy-MM-dd hh:mm:ss')
+          inquiry.recorderUU = this.user.data.userUU
+          inquiry.code = 'MALL' + date.getTime()
+          inquiry.date = date
+          inquiry.recorder = this.user.data.userName
+          inquiry.endDate = endDate
+          inquiry.sourceapp = 'MALL'
+          inquiryItem.userUU = this.user.data.userUU
+          inquiryItem.source = 'MALL'
+          inquiryItem.userName = this.user.data.userName
+          inquiryItem.userTel = this.user.data.userTel
+          inquiryItem.needquantity = this.applyObj.amount
+          inquiryItem.inbrand = this.applyObj.brand
+          inquiryItem.cmpCode = (this.applyObj.code).toUpperCase()
+          inquiryItem.unit = this.applyObj.unit
+          inquiryItem.prodTitle = this.applyObj.prodTitle
+          inquiryItem.date = date
+          inquiryItem.endDate = endDate
+          let inquiryItems = []
+          inquiryItems.push(inquiryItem)
+          inquiry.inquiryItems = inquiryItems
+          this.$http.post('/inquiry/buyer/save', inquiry)
+            .then(response => {
+              //              this.$message.success('发布成功')
+              this.setRemindText('发布成功')
+              //                this.showRemindBox = true
+              this.emptyForm()
+              //                this.validObj.deadline = true
+//              this.$emit('reloadAction')
+              this.cancel()
+            }, error => {
+              console.log(error)
+              //              this.$message.error('发布失败')
+              this.setRemindText('发布失败')
+            })
+        } else {
+          if (!this.validObj.deadline) {
+            this.setRemindText('截止日期不能为空')
+          } else if (!this.validObj.amount) {
+            this.setRemindText('请输入正确的数值')
+          }
+        }
+      },
+      isValidDate: function (date) {
+        let now = new Date(formatDate(new Date(), 'yyyy-MM-dd')).getTime()
+        let time = new Date(date).getTime()
+        return !time || (time >= now && time <= now + 1000 * 60 * 60 * 24 * 91)
+      },
+      deadlineChange: function () {
+        if (!this.isValidDate(this.applyObj.deadline)) {
+          this.setRemindText('日期需不小于今天且在90天以内')
+          this.applyObj.deadline = ''
+          this.validObj.deadline = false
+        } else {
+          this.validObj.deadline = true
+        }
+      },
+      checkAll: function () {
+        return this.checkDeadline() && this.checkAmount()
+      },
+      checkAmount: function () {
+        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
+        return this.validObj.amount
+      },
+      checkDeadline: function () {
+        this.validObj.deadline = Boolean(this.applyObj.deadline)
+        return this.validObj.deadline
+      },
+      onAmountInput: function () {
+        if (!(/^[0-9]*$/).test(this.applyObj.amount)) {
+          let chineseIndex = -1
+          for (let i = 0; i < this.applyObj.amount.length; i++) {
+            if (!(/^[0-9]*$/).test(this.applyObj.amount.charAt(i))) {
+              chineseIndex = i
+              break
+            }
+          }
+          this.applyObj.amount = cutOutString(this.applyObj.amount, chineseIndex)
+        } else if (this.applyObj.amount.length > 9) {
+          this.applyObj.amount = cutOutString(this.applyObj.amount, 9)
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mobile-modal {
+    .mobile-modal-box {
+      position: fixed;
+      width: 5.92rem;
+      font-size: .28rem;
+      top: 50%;
+      left: 50%;
+      right: 11%;
+      z-index: 1000;
+      margin-top: -3.7rem;
+      margin-left: -2.96rem;
+      background: #f3f3f3;
+      .mobile-modal-header {
+        border-radius: 0;
+      }
+      .publish-seek {
+        background: #fff;
+        padding-top: .1rem;
+        padding-bottom: .4rem;
+        .content-line {
+          position: relative;
+          height: .8rem;
+          line-height: .8rem;
+          font-size: .26rem;
+          text-align: left;
+          input {
+            width: 3.49rem;
+            height: .52rem;
+            line-height: normal;
+            padding: .1rem .19rem;
+            border: 1px solid #7e7e7e;
+            font-size: .26rem;
+            vertical-align: middle;
+            background: #fff;
+            border-radius: 0;
+          }
+          > span {
+            display: inline-block;
+            width: 1.76rem;
+            text-align: right;
+            i {
+              color: #ff0000;
+              margin-right: .05rem;
+              font-style: normal;
+            }
+          }
+          > a {
+            font-size: .26rem;
+            color: #666;
+          }
+          > img {
+            width: .12rem;
+            height: .06rem;
+            margin-left: .04rem;
+          }
+        }
+        > a {
+          display: block;
+          width: 5.19rem;
+          height: .84rem;
+          text-align: center;
+          line-height: .84rem;
+          font-size: .38rem;
+          margin: .3rem auto 0;
+          background: #3f84f6;
+          color: #fff;
+          border-radius: .08rem;
+        }
+      }
+      .props {
+        font-size: .28rem;
+        background: #fff;
+        margin: .2rem 0;
+        padding-left: .29rem;
+        .prop {
+          padding-top: .2rem;
+          &:last-child {
+            padding-bottom: .2rem;
+          }
+          span {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+</style>

components/mobile/applyPurchase/SeekList.vue

@@ -3,7 +3,7 @@
     <ul class="seek-list">
       <li v-for="(item, index) in purchaseManListData">
         <p>
-          <span v-if="item.inquiry.enterprise && item.inquiry.enterprise.enName">{{[item.inquiry.enterprise.enName, user.logged] | enterpriseFilter}}</span>
+          <span v-if="item.inquiry && item.inquiry.enterprise && item.inquiry.enterprise.enName">{{[item.inquiry.enterprise.enName, user.logged] | enterpriseFilter}}</span>
           <span v-else>{{[item.userName, user.logged] | userNameFilter}}</span>
         </p>
         <div>
@@ -42,8 +42,8 @@
             </p>
             <p class="over-deadline" v-else>已截止</p>
             <!--<a v-if="!userType && item.quoted == 1">已报价</a>-->
-            <a v-if="!userType && item.remainingTime > 0 && (!item.quoted || item.quoted != 1) && (user.logged && ((item.inquiry.enterprise && user.data.enterprise && (item.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && item.userUU == user.data.userUU  && !item.inquiry.enterprise)))" class="self-publish" @click="onRemind('此为贵公司的求购')">我要报价</a>
-            <a v-if="!(userType == 'saler' && seekType  && seekType != 'wait') && (item.remainingTime > 0 && (!item.quoted || item.quoted != 1) && !(user.logged && ((item.inquiry.enterprise && user.data.enterprise && (item.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && item.userUU == user.data.userUU))))" @click="goSayPrice(item.id, index)">我要报价</a>
+            <a v-if="!userType && item.remainingTime > 0 && (!item.quoted || item.quoted != 1) && (user.logged && ((item.inquiry && item.inquiry.enterprise && user.data.enterprise && (item.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && item.userUU == user.data.userUU  && !item.inquiry.enterprise)))" class="self-publish" @click="onRemind('此为贵公司的求购')">我要报价</a>
+            <a v-if="!(userType == 'saler' && seekType  && seekType != 'wait') && (item.remainingTime > 0 && (!item.quoted || item.quoted != 1) && !(user.logged && ((item.inquiry && item.inquiry.enterprise && user.data.enterprise && (item.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && item.userUU == user.data.userUU))))" @click="goSayPrice(item.id, index)">我要报价</a>
             <a v-if="((!userType || userType == 'buyer') && (seekType  && seekType != 'wait')) || (userType == 'saler' && seekType  && seekType != 'wait') || item.quoted == 1" @click="goSayPriceInfo(item.quteId || item.id, item.agreed, index)">查看报价</a>
           </div>
         </div>

components/mobile/applyPurchase/index.js

@@ -1,4 +1,5 @@
 import SayPriceInfo from './SayPriceInfo.vue'
 import SayPrice from './SayPrice.vue'
+import PublishSupplierSeek from './PublishSupplierSeek.vue'
 
-export { SayPriceInfo, SayPrice }
+export { SayPriceInfo, SayPrice, PublishSupplierSeek }

components/mobile/search/MainSearch.vue

@@ -8,7 +8,7 @@
           <li @click="setSearchType(searchType == 'product' ? 'store' : 'product', $event)">{{searchType == 'product' ? '店铺' : '产品'}}</li>
         </ul>
       </div>
-      <input type="text" id="search-box" v-model="keyword" :placeholder="searchType == 'product' ? '请输入您要查找的型号或品牌' : '请输入您要查找的店铺'" @keyup.13="onSearch()">
+      <input type="text" id="search-box" v-model="keyword" :placeholder="searchType == 'product' ? '请输入您要查找的型号/品牌/类目' : '请输入您要查找的店铺'" @keyup.13="onSearch()">
       <span @click="onSearch()">搜索</span>
       <a @click="cancelSearch">取消</a>
     </div>
@@ -23,7 +23,7 @@
       <div class="search-history" v-if="searchHistory && searchHistory.length > 0">
         <p>历史搜索<i class="iconfont icon-lajitong" @click="deleteHistory"></i></p>
         <ul>
-          <li v-for="item in searchHistory" @click="onSearch(item.keyword)">
+          <li v-for="item in searchHistory" @click="onSearch(item)">
             <a>{{item.keyword}}</a>
           </li>
         </ul>
@@ -77,15 +77,21 @@
 //      }
 //    },
     methods: {
-      onSearch (key) {
-        if (key && key !== '') {
-          this.keyword = key
-        }
-        if (this.keyword) {
-          if (this.searchType === 'product') {
-            this.$router.push('/mobile/search?w=' + encodeURIComponent(this.keyword))
-          } else if (this.searchType === 'store') {
+      onSearch (item) {
+        if (item) {
+          this.keyword = item.keyword
+          if (item.type === 'SEARCH_STORE') {
             this.$router.push('/mobile/shop?keyword=' + encodeURIComponent(this.keyword))
+          } else if (item.type === 'SEARCH_PRODUCT') {
+            this.$router.push('/mobile/search?w=' + encodeURIComponent(this.keyword))
+          }
+        } else {
+          if (this.keyword) {
+            if (this.searchType === 'product') {
+              this.$router.push('/mobile/search?w=' + encodeURIComponent(this.keyword))
+            } else if (this.searchType === 'store') {
+              this.$router.push('/mobile/shop?keyword=' + encodeURIComponent(this.keyword))
+            }
           }
         }
       },
@@ -185,7 +191,7 @@
         width: 4.78rem;
         height: .62rem;
         line-height: .62rem;
-        font-size: .28rem;
+        font-size: .26rem;
         color: #999;
         padding-left: .82rem;
         border: .04rem solid #fff;
@@ -221,7 +227,7 @@
       .options {
         position: absolute;
         left: .5rem;
-        font-size: .28rem;
+        font-size: .26rem;
         width: .8rem;
         padding-left: .05rem;
         background: url('/images/mobile/@2x/search/select-arrow.png') no-repeat;
@@ -242,7 +248,7 @@
             height: .59rem;
             border-radius: .02rem;
             background: rgba(0, 0, 0, .6);
-            font-size: .28rem;
+            font-size: .26rem;
             color: rgba(255, 255, 255, .89);
             text-align: center;
             line-height: .59rem;

components/mobile/supplier/List.vue

@@ -3,17 +3,17 @@
     <div class="mobile-header">
       <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
       <div class="search-content">
-        <input type="text" v-model="seekKeyword" placeholder="请输入您要查找的型号或品牌" @keyup.13="searchSeek" ref="searchSeekInput" @focus="inputGetFocus()" @blur="blur()">
-        <span @click="searchSeek">
+        <input type="text" v-model="keyword" placeholder="请输入您要查找的供应商" @keyup.13="search">
+        <span @click="search">
         <i class="iconfont icon-sousuo"></i>
         </span>
       </div>
     </div>
     <ul>
-      <li v-for="item in list.content">
+      <li v-for="item in listData">
         <img v-if="item.isStore == 1" class="open" src="/images/mobile/supplier/is-open.png" alt="">
         <span>{{item.enName}}</span>
-        <nuxt-link :to="`/mobile/supplier/detail/${item.enUU}`">
+        <nuxt-link :to="`/mobile/supplier/detail/${item.enUU}?isStore=${item.isStore}`">
           <img class="tag" src="/images/mobile/supplier/tag.png" alt="">
         </nuxt-link>
       </li>
@@ -22,14 +22,69 @@
 </template>
 <script>
   export default {
+    data () {
+      return {
+        keyword: '',
+        isSearchSearchingMore: false,
+        page: 1,
+        size: 10,
+        listData: [],
+        isChange: false,
+        isDataChange: false
+      }
+    },
+    mounted: function () {
+      this.$nextTick(() => {
+        window.addEventListener('scroll', this.scroll, false)
+      })
+    },
+    watch: {
+      'list': {
+        handler (val, oldVal) {
+          if (this.isChange) {
+            this.listData = val.content
+            this.page = 1
+            this.isChange = false
+            this.isDataChange = true
+          } else {
+            this.listData = this.listData.concat(val.content)
+            this.isSearchSearchingMore = false
+            this.isDataChange = false
+          }
+        },
+        immediate: true
+      }
+    },
     computed: {
       list () {
         return this.$store.state.supplier.data.list.data
+      },
+      allPage () {
+        return Math.floor(this.list.totalElements / this.list.size) + Math.floor(this.list.totalElements % this.list.size > 0 ? 1 : 0)
       }
     },
     methods: {
       goLastPage: function () {
         window.history.back(-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.page < this.allPage) {
+          this.getMoreSearch()
+        }
+      },
+      getMoreSearch: function () {
+        this.page++
+        this.isSearchSearchingMore = true
+        this.reloadData()
+      },
+      reloadData: function () {
+        this.$store.dispatch('supplier/getSupplierList', {keyword: this.keyword, page: this.page, size: this.size})
+      },
+      search: function () {
+        this.page = 1
+        this.isChange = true
+        this.reloadData()
       }
     }
   }

components/mobile/supplier/SupplierDetail.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="supplier-detail">
+    <img v-if="$route.query.isStore === '1'" class="open" src="/images/mobile/supplier/is-open.png" alt="">
     <div class="detail">
-      <h1>{{enInfo.enName}} <i class="iconfont icon-xiangyou"></i></h1>
+      <h1>{{enInfo.enName}} <nuxt-link v-if="$route.query.isStore === '1'" :to="`/mobile/shop/${storeInfo.uuid}`"><i class="iconfont icon-xiangyou"></i></nuxt-link></h1>
       <div class="line">
         <div class="img-wrap">
           <img src="/images/mobile/supplier/business.png" alt="">
@@ -40,19 +41,124 @@
     </div>
     <div class="list">
       <div class="search-content">
-        <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="seekKeyword" @keyup.13="searchSeek" ref="searchSeekInput" @focus="inputGetFocus()" @blur="blur()">
-        <span @click="searchSeek" >
+        <input type="text" placeholder="请输入您要查找的型号或品牌" @keyup.13="search" v-model="key">
+        <span @click="search" >
         <i class="iconfont icon-sousuo"></i>
         </span>
       </div>
+      <ul>
+        <li v-for="product in productListData">
+          <div class="prop">
+            <span class="head">型号/品牌：</span>
+            <span class="item">{{product.cmpCode || '—'}}</span>
+            <span class="item">{{(product.standard == 1 ? product.pbranden : product.brand) || '—'}}</span>
+          </div>
+          <div class="prop">
+            <span class="head">类目/规格：</span>
+            <span class="item">{{(product.standard == 1 ? product.kind : product.prodName) || '—'}}</span>
+            <span class="item">{{product.spec || '—'}}</span>
+          </div>
+          <div class="prop">
+            <span class="head">单位：</span>
+            <span class="item">{{product.unit || '—'}}</span>
+          </div>
+          <a class="seek-btn" @click="publish(product)">立即询价</a>
+        </li>
+      </ul>
     </div>
+    <publish-supplier-seek :product="currentProduct" :showPublishBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-supplier-seek>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 <script>
+  import { PublishSupplierSeek } from '~components/mobile/applyPurchase'
+  import { RemindBox } from '~components/mobile/common'
   export default {
+    data () {
+      return {
+        key: '',
+        isSearchSearchingMore: false,
+        page: 1,
+        size: 10,
+        productListData: [],
+        isChange: false,
+        isDataChange: false,
+        showPublishBox: false,
+        remindText: '',
+        timeoutCount: 0,
+        currentProduct: {}
+      }
+    },
+    components: {
+      PublishSupplierSeek,
+      RemindBox
+    },
+    mounted: function () {
+      this.$nextTick(() => {
+        window.addEventListener('scroll', this.scroll, false)
+      })
+    },
+    watch: {
+      '$store.state.supplier.data.productList.data': {
+        handler (val, oldVal) {
+          if (this.isChange) {
+            this.productListData = val.content
+            this.page = 1
+            this.isChange = false
+            this.isDataChange = true
+          } else {
+            this.productListData = this.productListData.concat(val.content)
+            this.isSearchSearchingMore = false
+            this.isDataChange = false
+          }
+        },
+        immediate: true
+      }
+    },
     computed: {
       enInfo () {
         return this.$store.state.supplier.data.enterpriseData.data
+      },
+      productList () {
+        return this.$store.state.supplier.data.productList.data
+      },
+      allPage () {
+        return Math.floor(this.productList.totalElements / this.productList.size) + Math.floor(this.productList.totalElements % this.productList.size > 0 ? 1 : 0)
+      },
+      storeInfo () {
+        return this.$store.state.shop.storeInfo.store.data
+      }
+    },
+    methods: {
+      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.page < this.allPage) {
+          this.getMoreSearch()
+        }
+      },
+      getMoreSearch: function () {
+        this.page++
+        this.isSearchSearchingMore = true
+        this.reloadData()
+      },
+      reloadData: function () {
+        this.$store.dispatch('supplier/getSupplierProductList', { vendUU: this.$route.params.uu, page: this.page, size: this.size, keyword: this.key })
+      },
+      search: function () {
+        this.page = 1
+        this.isChange = true
+        this.reloadData()
+      },
+      publish: function (product) {
+        this.currentProduct = product
+        this.showPublishBox = true
+      },
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount ++
+      },
+      goLastPage: function () {
+        window.history.back(-1)
       }
     }
   }
@@ -60,20 +166,29 @@
 <style lang="scss" scoped>
   .supplier-detail {
     background: #29a9f9;
-    padding-top: .38rem;
+    padding: .38rem .19rem;
+    position: relative;
+    .open {
+      position: absolute;
+      height: .58rem;
+      left: -.1rem;
+      top: .15rem;
+    }
     .detail {
-      width: 7.12rem;
       height: 4.46rem;
       padding: 0 .31rem;
-      margin: 0 auto;
       background: #fff;
       overflow: hidden;
+      border-radius: .05rem;
       h1 {
         height: 1.11rem;
         line-height: 1.11rem;
         text-align: center;
         font-size: .44rem;
         border-bottom: 1px solid rgba(0, 0, 0, .26);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         i {
           color: #3f84f6;
           font-size: .31rem;
@@ -102,6 +217,7 @@
     .list {
       background: #f2f2f2;
       margin-top: .21rem;
+      border-radius: .05rem;
       .search-content {
         padding-top: .15rem;
         padding-bottom: .15rem;
@@ -110,6 +226,52 @@
           border: 1px solid #3f84f6;
         }
       }
+      ul {
+        li {
+          &:nth-child(odd) {
+            background: #fff;
+          }
+          position: relative;
+          padding: .29rem 0 .16rem .22rem;
+          overflow: hidden;
+          .prop {
+            margin-bottom: .11rem;
+            font-size: .28rem;
+            &:last-child {
+              margin-bottom: 0;
+            }
+            .head {
+              color: #666;
+            }
+            .item {
+              display: inline-block;
+              width: 1.68rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              margin-right: .18rem;
+              vertical-align: middle;
+              &:last-child {
+                margin-right: 0;
+              }
+            }
+          }
+          .seek-btn {
+            position: absolute;
+            right: .17rem;
+            top: .67rem;
+            display: block;
+            width: 1.5rem;
+            height: .44rem;
+            line-height: .44rem;
+            text-align: center;
+            color: #fff;
+            background: #3f84f6;
+            border-radius: .22rem;
+            font-size: .26rem;
+          }
+        }
+      }
     }
   }
 </style>

pages/mobile/supplier/detail/_uu.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="sl-title">
-      供应商详情<i class="iconfont icon-fanhui"></i>
+      供应商详情<i class="iconfont icon-fanhui" @click="goLast"></i>
     </div>
     <supplier-detail></supplier-detail>
   </div>
@@ -10,13 +10,23 @@
   import { SupplierDetail } from '~components/mobile/supplier'
   export default {
     layout: 'mobile',
-    fetch ({ store, params }) {
-      return Promise.all([
-        store.dispatch('supplier/getSupplierEnInfo', {uu: params.uu})
-      ])
+    fetch ({ store, params, query }) {
+      let promises = [
+        store.dispatch('supplier/getSupplierEnInfo', {uu: params.uu}),
+        store.dispatch('supplier/getSupplierProductList', { vendUU: params.uu, page: 1, size: 10 })
+      ]
+      if (query.isStore === '1') {
+        promises.push(store.dispatch('shop/findStoreInfoFromEnUU', {enUU: params.uu, filter: 'enUU'}))
+      }
+      return Promise.all(promises)
     },
     components: {
       SupplierDetail
+    },
+    methods: {
+      goLast: function () {
+        window.history.back(-1)
+      }
     }
   }
 </script>

store/shop.js

@@ -131,5 +131,15 @@ export const actions = {
       }, err => {
         commit('storeInfo/GET_FOCUSPAGE_FAILURE', err)
       })
+  },
+  // 获取某店铺信息
+  findStoreInfoFromEnUU ({ commit }, params = {}) {
+    commit('storeInfo/REQUEST_STORE_INFO')
+    return axios.get('/api/store-service/stores', { params })
+      .then(response => {
+        commit('storeInfo/GET_STORE_INFO_SUCCESS', response.data)
+      }, err => {
+        commit('storeInfo/GET_STORE_INFO_FAILURE', err)
+      })
   }
 }

store/supplier.js

@@ -20,5 +20,15 @@ export const actions = {
       }, err => {
         commit('data/GET_EN_FAILURE', err)
       })
+  },
+  // 获取供应商物料列表
+  getSupplierProductList ({ commit }, params = {}) {
+    commit('data/REQUEST_PRODUCT_LIST')
+    return axios.get(`/vendor/introduction/product/list`, {params})
+      .then(response => {
+        commit('data/GET_PRODUCT_LIST_SUCCESS', response.data)
+      }, err => {
+        commit('data/GET_PRODUCT_LIST_FAILURE', err)
+      })
   }
 }

store/supplier/data.js

@@ -6,6 +6,10 @@ export const state = () => ({
   enterpriseData: {
     fetching: false,
     data: []
+  },
+  productList: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -29,5 +33,15 @@ export const mutations = {
   GET_EN_SUCCESS (state, result = []) {
     state.enterpriseData.fetching = false
     state.enterpriseData.data = result
+  },
+  REQUEST_PRODUCT_LIST (state) {
+    state.productList.fetching = true
+  },
+  GET_PRODUCT_LIST_FAILURE (state) {
+    state.productList.fetching = false
+  },
+  GET_PRODUCT_LIST_SUCCESS (state, result = []) {
+    state.productList.fetching = false
+    state.productList.data = result
   }
 }