品牌搜索

components/mobile/Home.vue

@@ -55,7 +55,7 @@
       </div>
       <seek-list :purchaseManList="purchaseManListData" :isDataChange="isDataChange"></seek-list>
     </div>
-    <div class="mobile-modal" v-if="showStoreInfo">
+    <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
       <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">

components/mobile/HomeOld.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div class="mobile-modal" v-if="showStoreInfo">
+    <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
       <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">

components/mobile/applyPurchase/PublishSeek.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-modal" v-if="showSayPriceBox" @click="setShowCurrencyList(false)">
+  <div class="mobile-modal" v-if="showSayPriceBox" @click="setShowCurrencyList(false)" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">
         <i class="icon-guanbi iconfont" @click="cancel"></i>

components/mobile/applyPurchase/PublishSupplierSeek.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-modal" v-if="showPublishBox">
+  <div class="mobile-modal" v-if="showPublishBox" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">我要询价<i class="icon-guanbi iconfont" @click="cancel"></i></div>
       <div class="props">

components/mobile/applyPurchase/SayPrice.vue

@@ -98,9 +98,9 @@
 //           document.body.style.right = '0'
 //           document.documentElement.style['overflow'] = 'hidden'
 //           document.body.style.overflow = 'hidden'
-           document.documentElement.addEventListener('touchmove', function(event) {
-             event.preventDefault()
-           }, false)
+//           document.documentElement.addEventListener('touchmove', function(event) {
+//             event.preventDefault()
+//           }, false)
          } else {
 //          document.body.style.position = 'static'
 //           document.documentElement.style['overflow'] = 'auto'

components/mobile/applyPurchase/SayPriceInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-modal">
+  <div class="mobile-modal" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">{{purchaseDetail.agreed == 1 || agreed == 1 ? '已采纳' : '已报价'}}<i class="icon-guanbi iconfont" @click="cancel"></i></div>
       <div class="say-price-info">

components/mobile/base/SearchHeader.vue

@@ -34,19 +34,24 @@
   </div>
 </template>
 <script>
+  import {scrollTo} from '~utils/scroll'
   export default {
     props: {
       placeholder: {
         type: String,
         default: '请输入要查找的内容'
       },
-      similarUrl: {
+      similarUrl: { // 联想词url
         type: String,
         default: '/search/similarKeywords'
       },
-      type: {
+      type: { // 搜索类型
         type: String,
         default: 'default'
+      },
+      showSimilar: { // 是否显示联想词
+        type: Boolean,
+        default: true
       }
     },
     data () {
@@ -79,10 +84,11 @@
             keyword: this.keyword
           })
         }
+        scrollTo('body', 10)
         this.showSimilarWord = false
       },
       getSimilarList: function () {
-        if (this.keyword && this.keyword !== '') {
+        if (this.showSimilar && this.keyword && this.keyword !== '') {
           this.$http.get(this.similarUrl, {params: {keyword: this.keyword}}).then(
             res => {
               this.similarList = res.data

components/mobile/brand/BrandCenter.vue

@@ -1,94 +1,71 @@
 <template>
-  <div class="mobile-brand-center mobile-content">
-    <div class="mobile-brand-wrap">
-      <div class="mobile-brand-header">
-        <img src="/images/mobile/@2x/brand/brandWall.png" alt="">
-        <div class="mobile-brand-index" :class="{'scrolled': isScrolled, 'is-more': isScrolled && !isMore}">
-          <p style="float: left">索引：</p>
-          <div style="float: left;width: 5.5rem">
-            <nuxt-link :to="'/mobile/brand/brandCenter/' + item"
-                       :class="{'active': item == activeIndex}"
-                       :key="key" v-for="(item, key) in initArr">{{item}}</nuxt-link>
+  <div>
+    <search-header @searchAction="onSearch" :placeholder="'请输入品牌名称'" :showSimilar="false"></search-header>
+    <div class="mobile-brand-center mobile-content">
+      <div class="mobile-brand-wrap">
+        <div class="mobile-brand-header">
+          <img src="/images/mobile/@2x/brand/brandWall.png" alt="">
+          <div class="mobile-brand-index" :class="{'scrolled': isScrolled, 'is-more': isScrolled && !isMore}">
+            <p style="float: left">索引：</p>
+            <div style="float: left;width: 5.5rem">
+              <nuxt-link :to="'/mobile/brand/brandCenter/' + item"
+                         :class="{'active': item == activeIndex}"
+                         :key="key" v-for="(item, key) in initArr">{{item}}</nuxt-link>
+            </div>
+            <div v-if="isScrolled" class="more-index" @click="isMore = !isMore">
+              {{!isMore ? '更多' : '收起'}}
+              <img v-if="!isMore" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
+              <img src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" v-else alt="">
+            </div>
+            <div class="clear-float"></div>
           </div>
-          <div v-if="isScrolled" class="more-index" @click="isMore = !isMore">
-            {{!isMore ? '更多' : '收起'}}
-            <img v-if="!isMore" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
-            <img src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" v-else alt="">
-          </div>
-          <div class="clear-float"></div>
         </div>
-      </div>
-      <div class="mobile-brand-list">
-        <div v-for="(brands, initial) in brandList">
-          <div class="brand-initial">
-            <p v-text="initial" :style="initial === '0~9' ? 'font-size: .28rem': 'font-size: .32rem'"></p>
-            <span>
-              {{initial}}开头共<span>{{brands.length || 0}}</span>个品牌
+        <div class="mobile-brand-list">
+          <div>
+            <div class="brand-initial">
+              <p v-text="activeIndex" :style="activeIndex === '0~9' ? 'font-size: .28rem': 'font-size: .32rem'"></p>
+              <span>
+              {{activeIndex}}开头共<span>{{brandList.totalElements || 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>
-              <div v-if="brand.nameCn != brand.nameEn">{{brand.nameCn}}</div>
-            </nuxt-link>
+            </div>
+            <div class="brand-items">
+              <nuxt-link :to="`/mobile/brand/${brand.uuid}/`" :key="brand.uuid" v-for="brand in brandListTemplate">
+                <div>{{brand.nameEn}}</div>
+                <div v-if="brand.nameCn != brand.nameEn">{{brand.nameCn}}</div>
+              </nuxt-link>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <pull-up :searchMore="fetching" :allPage="allPage" :page="pageParams.page" @pullUpAction="onPullUpAction"></pull-up>
   </div>
 </template>
 <script>
-  function sortList (letter) {
-    return function (a, b) {
-      var value1 = a[letter]
-      var value2 = b[letter]
-      if (value1 > value2) {
-        return 1
-      } else if (value1 < value2) {
-        return -1
-      } else {
-        return 0
-      }
-    }
-  }
+  import {SearchHeader} from '~components/mobile/base'
+  import { PullUp } from '~components/mobile/common'
+  import { startWith } from '~utils/baseUtils'
   export default {
     name: 'brandList',
     data () {
       return {
-        initArr: [
-          'A',
-          'B',
-          'C',
-          'D',
-          'E',
-          'F',
-          'G',
-          'H',
-          'I',
-          'J',
-          'K',
-          'L',
-          'M',
-          'N',
-          'O',
-          'P',
-          'Q',
-          'R',
-          'S',
-          'T',
-          'U',
-          'V',
-          'W',
-          'X',
-          'Y',
-          'Z',
-          '0~9'
-        ],
+        initArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0~9'],
         activeIndex: this.$route.params.initial,
         isScrolled: false,
-        isMore: false
+        isMore: false,
+        pageParams: {
+          page: 1,
+          count: 60,
+          keyword: ''
+        },
+        isChange: false,
+        brandListTemplate: []
       }
     },
+    components: {
+      SearchHeader,
+      PullUp
+    },
     mounted: function () {
       let _this = this
       _this.$nextTick(function () {
@@ -98,40 +75,52 @@
       })
     },
     watch: {
-      $route: function (val, oldVal) {
-        this.activeIndex = val.params.initial
+      'brandData.data': {
+        handler: function (val) {
+          let list = [...val.content]
+          if (this.isChange) {
+            this.brandListTemplate = list
+            this.isChange = false
+          } else {
+            this.brandListTemplate = [...this.brandListTemplate, ...list]
+          }
+        },
+        immediate: true
       }
     },
     computed: {
+      brandData () {
+        return this.$store.state.product.brand.brandPagerList
+      },
       brandList () {
-        let brandsList = JSON.parse(JSON.stringify(this.$store.state.product.brand.brandList.data))
-        if (brandsList) {
-          for (let i in brandsList) {
-            brandsList[i] = brandsList[i].sort(sortList('nameEn'))
-          }
-        }
-        let temp = {}
-        let keys = []
-        for (let key in brandsList) {
-          keys.push(key)
-        }
-        keys = keys.sort()
-        for (let i = 0; i < keys.length; i++) {
-          temp[keys[i]] = brandsList[keys[i]]
-        }
-        return temp
+        return this.brandData.data
+      },
+      allPage () {
+        return this.brandList.totalPages
+      },
+      fetching () {
+        return this.brandData.fetching
       }
     },
     methods: {
       onScroll () {
-        if (this.startWith(this.$route.path, '/mobile/brand/brandCenter')) {
+        if (startWith(this.$route.path, '/mobile/brand/brandCenter')) {
           let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
           this.isScrolled = scrolled > 0
         }
       },
-      startWith: function (str, s) {
-        let reg = new RegExp('^' + s)
-        return reg.test(str)
+      reloadData: function () {
+        this.$store.dispatch('product/loadBrandsPager', {'initial': this.activeIndex, page: this.pageParams.page, count: this.pageParams.count, keyword: this.pageParams.keyword})
+      },
+      onSearch: function (keyObj) {
+        this.pageParams.keyword = keyObj.keyword
+        this.pageParams.page = 1
+        this.isChange = true
+        this.reloadData()
+      },
+      onPullUpAction: function () {
+        this.pageParams.page++
+        this.reloadData()
       }
     }
   }

components/mobile/common/LoginBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-modal" v-show="showLogin" @touchmove="touchmove($event)">
+  <div class="mobile-modal" v-show="showLogin" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">请登录后再操作<i @click="close" class="icon-guanbi iconfont"></i></div>
       <div class="mobile-modal-content">
@@ -19,9 +19,6 @@
       }
     },
     methods: {
-      touchmove(e) {
-        e.preventDefault()
-      },
       close: function () {
         this.$emit('onLoginBoxClose')
       },
@@ -37,12 +34,6 @@
       }
     },
     mounted() {
-      // document.querySelector('html').addEventListener('touchmove', function(e) {
-      //   e.preventDefault()
-      // })
-      document.querySelector('.mobile-modal').addEventListener('touchmove', function(e) {
-        e.preventDefault()
-      })
       let ua = window.navigator.userAgent.toLowerCase()
       if (ua.match(/micromessenger/i) && ua.match(/micromessenger/i)[0] === 'micromessenger') {
         if (this.url) {

components/mobile/store/StoreDetail.vue

@@ -17,7 +17,7 @@
           {{store.description}}
         </p>
         <div class="com-none-state" v-else>
-          <p>抱歉，暂无企业简介</p>
+          <p>抱歉，主营产品</p>
         </div>
       </div>
      <div class="contact-info">
@@ -57,8 +57,8 @@
      </div>
       <div class="store-description">
         <h4>企业简介</h4>
-        <p class="content" v-if="store.description">
-          {{store.description}}
+        <p class="content" v-if="store.enterprise.description">
+          {{store.enterprise.description}}
         </p>
         <div class="com-none-state" v-else>
           <p>抱歉，暂无企业简介</p>

components/store/BaseInfo.vue

@@ -15,11 +15,11 @@
         </div>
         <div class="intro-title row">
           <h3 class="col-xs-2">
-            商家介绍
+            主营产品
           </h3>
           <nuxt-link class="col-xs-10" :to="'/store/' + storeInfo.uuid">返回店铺</nuxt-link>
         </div>
-        <div class="intro-text" v-text="storeInfo.description">店铺简介</div>
+        <div class="intro-text" v-text="storeInfo.description"></div>
       </div>
     </div>
     <div id="contact-fragment">
@@ -29,7 +29,7 @@
             联系我们
           </h3>
         </div>
-        <div ng-if="storeInfo.enterprise">
+        <div v-if="storeInfo.enterprise">
           <div class="contact-text">
             <div v-text="storeInfo.enterprise.enName || '-'"></div>
             <div><span class="public">地址：</span><span v-text="storeInfo.enterprise.address || '-'"></span></div>
@@ -42,6 +42,18 @@
           </div>
         </div>
       </div>
+      <div class="container" style="margin-top: 30px;">
+        <div class="contact-title">
+          <h3>
+            企业简介
+          </h3>
+        </div>
+        <div v-if="storeInfo.enterprise">
+          <div class="contact-text">
+            <div class="intro-text" v-text="storeInfo.enterprise.description || '暂无'"></div>
+          </div>
+        </div>
+      </div>
     </div>
     <div id="proof-fragment" v-show="qualifications.length > 0">
       <div class="container" style="margin-top: 30px; margin-bottom: 60px;">
@@ -139,14 +151,14 @@
 		margin-left: -50px;
 	}
 
-	#introduction-fragment .intro-text {
+	.intro-text {
 		font-size: 14px;
 		color: rgb(50,50,50);
 		margin-top: 10px;
 		line-height: 30px;
 	}
 
-	#introduction-fragment .intro-text{
+	.intro-text{
 		text-indent:2em;
 	}
 
@@ -166,6 +178,9 @@
   #contact-fragment .contact-text div {
 		height: 25px;
 	}
+  #contact-fragment .contact-text .intro-text {
+    height: auto;
+  }
 
   #contact-fragment .contact-text span{
     display:inline-block;

pages/mobile/brand/brandCenter/_initial.vue

@@ -4,17 +4,14 @@
 <script>
   import BrandCenter from '~components/mobile/brand/BrandCenter.vue'
   export default {
-    layout: 'mobile',
+    layout: 'mobileNoHeader',
     components: {
       BrandCenter
     },
     fetch ({store, route}) {
       return Promise.all([
-        store.dispatch('product/loadBrands', {'keyword': route.params.initial})
+        store.dispatch('product/loadBrandsPager', {'initial': route.params.initial, page: 1, count: 60})
       ])
     }
   }
 </script>
-<style>
-
-</style>

pages/mobile/center/index.vue

@@ -224,7 +224,7 @@
       <nuxt-link to="/">返回首页</nuxt-link>
     </div>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
-    <div class="mobile-modal" v-if="showStoreInfo">
+    <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
       <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">

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

@@ -22,7 +22,7 @@
       </div>
       <empty-status v-if="!storeList.length" :type="'collect'" :showLink="true" :text="'抱歉，暂无店铺关注'"></empty-status>
     </div>
-    <div class="mobile-modal" v-if="showStoreInfo">
+    <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
       <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">

pages/mobile/shop/index.vue

@@ -38,7 +38,7 @@
       </div>
       <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
       <loading v-show="isSearchingMore"></loading>
-      <div class="mobile-modal" v-if="showStoreInfo">
+      <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
         <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">

pages/mobile/user/enterpriseinfo.vue

@@ -48,7 +48,7 @@
                 <div class="text pull-left" v-if="storeState === 'look'">
                   {{enterpriseInfo.enAddress || '-'}}
                 </div>
-                <div v-else class="text pull-left">
+                <div class="text pull-left" v-else>
                   <input v-model="enterpriseInfo.enAddress" type="text" :disabled="enterpriseInfo.enValidCode === 2"/>
                 </div>
               </li>
@@ -68,7 +68,7 @@
                 <div class="text pull-left" v-if="storeState === 'look'">
                   {{enterpriseInfo.enIndustry || '-'}}
                 </div>
-                <div v-else class="text pull-left clearfix" @click="isShowTypeAlert = true">
+                <div class="text pull-left clearfix" @click="isShowTypeAlert = true" v-else>
                   <div class="text pull-left update" style="width: 4rem">
                     {{enterpriseInfo.enIndustry || '-'}}
                   </div>
@@ -102,6 +102,23 @@
                   </div>
                 </div>
               </li>
+
+              <li class="clearfix" :class="{border:  storeState !== 'look'}">
+                <div class="name pull-left" :class="{update: storeState !== 'look'}">企业简介：</div>
+                <div class="text pull-left clearfix" v-if="storeState === 'look'">
+                  {{Islook ? dealWithText(enterpriseInfo.description) : dealWithText()}}
+                  <a class="pull-right" @click="dealWithText2('open')" v-show="Islook">
+                    全部<img src="/images/store/default/openblack.png"/>
+                  </a>
+                  <a class="pull-right upload" @click="dealWithText2('hide')" v-show="!hidelook">
+                    收起<img src="/images/store/default/openblack.png"/>
+                  </a>
+                </div>
+                <div class="text pull-left" v-else>
+                  <textarea v-model="enterpriseInfo.description" maxlength="500" ref="descTextarea"></textarea>
+                </div>
+              </li>
+
             </ul>
           </div>
           <div class="control clearfix" v-if="storeState !== 'look'">
@@ -185,12 +202,23 @@
         enterpriseInfo: {},
         titleActive: '',
         TypeObj: {},
-        AddBtnShow: true
+        AddBtnShow: true,
+        splitText: '', // 省略号文本
+        normalText: '', // 原来文本
+        Islook: true,
+        hidelook: true
       }
     },
     components: {
       RemindBox
     },
+    watch: {
+      'enterpriseInfo.description': {
+        handler: function (val) {
+          this.setTextareaHeight()
+        }
+      }
+    },
     methods: {
       chooseTitle(key) {
         if (key === 0) {
@@ -350,8 +378,34 @@
         this.storeState = 'update'
         this.Islook = true
         this.hidelook = true
+        this.setTextareaHeight()
         this.BScroll.refresh()
       },
+      dealWithText2(tp) {
+        if (tp === 'open') {
+          this.Islook = false
+          this.hidelook = false
+        } else {
+          this.Islook = true
+          this.hidelook = true
+        }
+      },
+      dealWithText(_T) {
+        if (_T !== undefined) {
+          // 文本处理
+          this.normalText = _T
+          if (_T.length < 140) {
+            this.Islook = false
+            return _T
+          } else {
+            this.Islook = true
+            return _T.substr(0, 140) + '...'
+          }
+        } else {
+          this.Islook = false
+          return this.normalText
+        }
+      },
       storeInfosave(_tp) {
         this.BScroll.refresh()
         if (_tp === 'cancel') {
@@ -390,6 +444,15 @@
         this.labelText = ''
         this.IsChange = ''
         this.AddBtnShow = true
+      },
+      setTextareaHeight () {
+        this.$nextTick(() => {
+          let el = this.$refs.descTextarea
+          if (el) {
+            el.style.height = '2rem'
+            el.style.height = (el.scrollHeight * 2.06 - el.clientHeight + 150) / 100 + 'rem'
+          }
+        })
       }
     },
     computed: {
@@ -505,6 +568,7 @@
       }
       .text {
         width: 4.4rem;
+        word-break: break-all;
       }
       .update {
         padding: 0.06rem 0 0.06rem 0rem;
@@ -554,6 +618,7 @@
       }
       .text {
         width: 4.3rem;
+        word-break: break-all;
       }
       input {
         width: 4.3rem;

plugins/mixin.js

@@ -27,6 +27,14 @@ Vue.mixin({
   methods: {
     goLastPage: function () {
       window.history.back(-1)
+    },
+    preventTouchMove (e) {
+      e.preventDefault()
+    },
+    stopPropagation: function (e) {
+      if (e) {
+        e.stopPropagation()
+      }
     }
   }
 })

store/product.js

@@ -45,6 +45,22 @@ export const actions = {
         commit('brand/GET_BRANDS_FAILURE', err)
       })
   },
+  // 品牌列表分页查询
+  loadBrandsPager ({ commit }, params = {}) {
+    let initial = params.initial
+    let param = {
+      page: params.page || 1,
+      count: params.count || 30,
+      keyword: params.keyword
+    }
+    commit('brand/REQUEST_BRANDS_PAGER', params)
+    return axios.get(`/api/product/brand/initial/first/${initial}`, {params: param})
+      .then(response => {
+        commit('brand/GET_BRANDS_PAGER_SUCCESS', response.data)
+      }, err => {
+        commit('brand/GET_BRANDS_PAGER_FAILURE', err)
+      })
+  },
   // 获取全部子器件类目
   loadAllProductKinds ({ commit }, params = {}) {
     let id = params.id

store/product/brand.js

@@ -6,6 +6,10 @@ export const state = () => ({
   brandList: {
     fetching: false,
     data: []
+  },
+  brandPagerList: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -29,5 +33,15 @@ export const mutations = {
   },
   GET_BRANDS_FAILURE (state) {
     state.brandList.fetching = false
+  },
+  REQUEST_BRANDS_PAGER (state) {
+    state.brandPagerList.fetching = true
+  },
+  GET_BRANDS_PAGER_SUCCESS (state, result) {
+    state.brandPagerList.fetching = false
+    state.brandPagerList.data = result
+  },
+  GET_BRANDS_PAGER_FAILURE (state) {
+    state.brandPagerList.fetching = false
   }
 }