修改移动端全局搜索

components/common/upload/upload.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="preview">
-      <img :src="qualifications.url==''? uploadImgTemp : isPdf?'/images/all/timg.png':qualifications.url" class="previewImage" :class="{'mobile-previewImage': isMobile}"/>
+      <img :src="qualifications.url==''? uploadImgTemp : isPdf?'/images/all/timg.png':qualifications.url" class="previewImage" :class="{'mobile-previewImage': isMobile}"
+        :style="imgStyle"
+      />
       <input type="file" v-if="!qualifications.url" class="com-input" @change="update" accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf" />
     </div>
     <div class="hover-show" v-if="qualifications.url && !noReview">
@@ -21,7 +23,7 @@
 </template>
 <script>
   export default {
-    props: ['typeData', 'url', 'NopassThree', 'noReview', 'maxSize'],
+    props: ['typeData', 'url', 'NopassThree', 'noReview', 'maxSize', 'imgStyle'],
     data () {
       return {
         qualifications: {
@@ -106,9 +108,19 @@
 </script>
 <style scoped>
   .mobile-previewImage {
-    width: .5rem !important;
-    height: .5rem !important;
+    width: .5rem;
+    height: .5rem ;
     display: block;
-    margin: .3rem auto 0 !important;
+    margin: .3rem auto 0;
+  }
+  .com-input{
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    display: inline-block !important;
   }
 </style>

components/mobile/common/PullUp.vue

@@ -27,6 +27,10 @@
       isValid: {
         type: Boolean,
         default: true
+      },
+      FixedEl: { // 获取元素区域内滚动高度
+        type: Boolean,
+        default: false
       }
     },
     mounted () {
@@ -46,6 +50,7 @@
       scroll: function () {
         let scrolled = 0
         let height = 0
+        let availHeight = window.screen.availHeight
 //        console.log(document.getElementById(this.fixId).scrollHeight)
 //        console.log(document.getElementById(this.fixId).scrollTop + window.screen.availHeight + '-------')
         if (this.fixId) {
@@ -59,12 +64,13 @@
         } else {
           height = document.body.scrollHeight
           scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
-        }
-//        this.hideToTop = scrolled <= window.screen.availHeight
-//        console.log(this.hideToTop)
-//        console.log(this.allPage)
-//        console.log(this.page)
-        if (Math.ceil(scrolled + window.screen.availHeight) >= height && !this.searchMore && this.page < this.allPage) {
+        } if (this.FixedEl) {
+          let obj = document.getElementById(this.fixId)
+          // availHeight = document.getElementById(this.fixId).clientHeight + 50
+          if (obj.clientHeight + obj.scrollTop >= obj.scrollHeight && !this.searchMore && this.page < this.allPage) {
+            this.getMore()
+          }
+        } else if (Math.ceil(scrolled + availHeight) >= height && !this.searchMore && this.page < this.allPage) {
           this.getMore()
         }
       },

components/mobile/search/MainSearch.vue

@@ -17,20 +17,24 @@
       <span @click="onSearch()">搜索</span>
       <a @click="cancelSearch()">取消</a>
       <div class="main-search-header-controll clearfix">
-        <span :class="ChooseTop === 'cmpcode' ? 'active' : ''" @click="setChangelistHander('cmpcode')"><a>型号</a></span>
-        <span :class="ChooseTop === 'materiel' ? 'active' : ''" @click="setChangelistHander('materiel')"><a>物料名称</a></span>
-        <span :class="ChooseTop === 'seller' ? 'active' : ''" @click="setChangelistHander('seller')"><a>卖家</a></span>
-        <span :class="ChooseTop === 'cmpbrand' ? 'active' : ''" @click="setChangelistHander('cmpbrand')"><a>品牌</a></span>
+        <span :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></span>
+        <span :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></span>
+        <span :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></span>
+        <span :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></span>
       </div>
     </div>
     <ul class="associate-list" v-show="associate.show">
-      <li @click="onAssociateClick(similar)" v-for="similar in similarKeywords.all">
+      <li @click="onAssociateClick(similar)" v-for="similar in similarKeywords.result">
         <i class="icon-sousuo iconfont"></i>
-        <span>{{similar}}</span>
+        <span>{{Getsimilar(similar)}}</span>
+        <!--<span v-if="ChooseTop === 'component'">{{similar.code}}</span>-->
+        <!--<span v-else-if="ChooseTop === 'product'">{{similar}}</span>-->
+        <!--<span v-else-if="ChooseTop === 'store'">{{similar}}</span>-->
+        <!--<span v-else-if="ChooseTop === 'brand'">{{similar.nameEn}}</span>-->
       </li>
       <li @click="onAssociateClick(keyword)">查找“{{baseUtils.filterStringEllipsis(keyword, 30)}}”</li>
     </ul>
-    <div class="hot-history" v-show="!associate.show">
+    <div class="hot-history" v-show="!associate.show" style="margin-top: 2.08rem">
       <div class="search-history" v-if="searchHistory && searchHistory.length > 0">
         <p>历史搜索<i class="iconfont icon-lajitong" @click="deleteHistory"></i></p>
         <ul>
@@ -61,7 +65,7 @@
         },
         searchType: 'product',
         showSearchType: false,
-        ChooseTop: 'cmpcode'
+        ChooseTop: 'component'
       }
     },
     props: {
@@ -92,6 +96,8 @@
     methods: {
       setChangelistHander(str) {
         this.ChooseTop = str
+        this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
+        this.associate.show = true
       },
       onSearch (item) {
         this.$router.push(`/mobile/search/newkeycode?choosetype=${this.ChooseTop}&keyword=${encodeURIComponent(this.keyword)}`)
@@ -124,15 +130,32 @@
         }
       },
       searchKeywords () {
-        if (this.searchType === 'product') {
-          this.$store.dispatch('searchKeywords', { keyword: this.keyword })
-          this.associate.show = true
-        }
+        this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
+        this.associate.show = true
       },
       onAssociateClick (word) {
-        this.keyword = word
+        if (this.ChooseTop === 'component') {
+          this.keyword = word.code
+        } else if (this.ChooseTop === 'kind') {
+          this.keyword = word.nameCn
+        } else if (this.ChooseTop === 'store') {
+          return word
+        } else if (this.ChooseTop === 'brand') {
+          this.keyword = word.nameEn
+        }
         this.onSearch()
       },
+      Getsimilar(word) {
+        if (this.ChooseTop === 'component') {
+          return word.code
+        } else if (this.ChooseTop === 'kind') {
+          return word.nameCn
+        } else if (this.ChooseTop === 'store') {
+          return word
+        } else if (this.ChooseTop === 'brand') {
+          return word.nameEn
+        }
+      },
       cancelSearch: function () {
         this.$emit('cancelSearchAction')
       },
@@ -281,8 +304,16 @@
       }
     }
     .associate-list {
+      position: absolute;
+      width: 100%;
       background: #fff;
-      margin-top: 1.7rem;
+      top: 0.8rem;
+      border: 1px solid #dcdcdc;
+      z-index: 100;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      right: 0;
       li {
         height: 0.7rem;
         line-height: .9rem;
@@ -317,7 +348,6 @@
     .hot-history {
       .search-history {
         padding-left: .51rem;
-        padding-top: 2.08rem;
         >p {
           font-size: .3rem;
           color: #333;

pages/mobile/center/vendor/payCenter.vue

@@ -112,14 +112,14 @@
           </div>
         </li>
       </ul>
-      <div class="fix-count-wrap" v-if="recordList.length">
-        <span class="content">收入总计：<span>{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}}</span></span>
-        <span class="content">支出总计：<span>{{currencySymbol | currencyFilter}}&nbsp;0</span></span>
-        <p>结余：{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}} (共计{{recordList.length || 0}}笔交易)</p>
-      </div>
+
     </div>
     <!-- 交易记录end -->
-
+    <div class="fix-count-wrap" v-if="recordList.length">
+      <span class="content">收入总计：<span>{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}}</span></span>
+      <span class="content">支出总计：<span>{{currencySymbol | currencyFilter}}&nbsp;0</span></span>
+      <p>结余：{{currencySymbol | currencyFilter}}&nbsp;{{totalRecordPrice}} (共计{{recordList.length || 0}}笔交易)</p>
+    </div>
     <!-- 新增账户弹框start -->
     <modal-wrapper :noHeader="true" :showModal="showModal" @closeAction="showModal = false">
       <div class="add-account-modal in-wrapper">
@@ -729,6 +729,7 @@
     }
   }
   .vendor-pay-record {
-    bottom: 2.23rem !important;
+    /*bottom: 2.23rem !important;*/
+    padding-bottom: 1.25rem;
   }
 </style>

pages/mobile/center/vendor/product.vue

@@ -1,13 +1,6 @@
 <template>
-  <div class="user-content">
-    <div 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="user-content" >
+    <div class="provider" id="provider-wrapper">
       <div class="search-content" style="border-bottom: 1px solid #f5f5f5;padding-bottom: 0.25rem">
         <input type="text" placeholder="请输入您要查找的品牌或型号" v-model="seekKeyword" @keyup.13="searchSeek">
         <span @click="searchSeek" >
@@ -49,6 +42,7 @@
             <div class="pull-right add" v-if="providerType === 'enterprise'" @click="addProtoperson(item)" :class="{noadd: item.addProductPerson}">加入个人产品</div>
             <div class="pull-right look" @click="lookProductitem(item.id, item)" v-if="item.batchCount">查看产品</div>
             <div class="pull-right look" @click="toAddpro(item)" v-else>编辑上架</div>
+            <div class="pull-right look" v-if="providerType === 'enterprise'" @click="updateMateriel(item)">编辑物料</div>
           </div>
         </div>
         <div v-else>
@@ -269,13 +263,69 @@
       <nuxt-link to="/">返回首页</nuxt-link>
     </div>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
-    <pull-up :searchMore="isSearchSearchingMore" :allPage="EnterprisePage" :page="seekPage" @pullUpAction="getMoreSearch"></pull-up>
+    <pull-up :fixId="'provider-wrapper'" :searchMore="isSearchSearchingMore" :allPage="EnterprisePage" :page="seekPage" @pullUpAction="getMoreSearch"></pull-up>
     <!-- 在售产品编辑框 -->
+    <!-- 编辑物料 -->
+    <div class="update-materiel" v-if="showMateriel">
+      <div class="mobile-nav">
+        <div class="mobile-header mobile-center-header">
+          <a @click="showMateriel = false"><i class="iconfont icon-fanhui"></i></a>
+          <p>编辑物料</p>
+          <p class="en-name">
+            <img :src="`/images/mobile/center/${user.data.enterprise && user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}
+          </p>
+        </div>
+      </div>
+      <div class="update-materiel-wrapper">
+        <div class="clearfix">
+          <div class="update-materiel-wrapper-image pull-left">
+            <upload :url="regieUrl" @uploadAction="onUpload" :NopassThree="false" :maxSize="'20'" :imgStyle="imgStyle"></upload>
+            <span>点击上传</span>
+          </div>
+          <div class="uploadImgBtn pull-left">上传图片</div>
+          <span class="uploadImgInfo pull-left">图片上传须知</span>
+        </div>
+
+        <div class="update-materiel-wrapper-list clearfix">
+          <div class="name pull-left"><a class="red">*</a>品牌：</div>
+          <div class="input pull-left clearfix">
+            <input type="text" placeholder="请输入品牌"/>
+            <i class="iconfont icon-guanbi1"></i>
+          </div>
+        </div>
+        <div class="update-materiel-wrapper-list clearfix">
+          <div class="name pull-left"><a class="red">*</a>物料名称(类目)：</div>
+          <div class="input pull-left clearfix"  style="width: 4.09rem">
+            <input type="text" placeholder="请输入物料名称(类目)"/>
+            <i class="iconfont icon-guanbi1"></i>
+          </div>
+        </div>
+        <div class="update-materiel-wrapper-list clearfix">
+          <div class="name pull-left"><a class="red">*</a>型号：</div>
+          <div class="input pull-left clearfix">
+            <input type="text" placeholder="请输入型号"/>
+            <i class="iconfont icon-guanbi1"></i>
+          </div>
+        </div>
+        <div class="update-materiel-wrapper-list clearfix">
+          <div class="name pull-left"><a class="red" style="opacity: 0">*</a>规格：</div>
+          <div class="input pull-left clearfix">
+            <input type="text" placeholder="请输入规格"/>
+            <i class="iconfont icon-guanbi1"></i>
+          </div>
+        </div>
+        <div class="update-materiel-wrapper-controll clearfix">
+          <div class="pull-left">保存</div>
+          <div class="pull-right">取消</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
   import { RemindBox, PullUp } from '~components/mobile/common'
+  import Upload from '~components/common/upload/upload.vue'
   export default {
     layout: 'mobile',
     middleware: 'authenticated',
@@ -294,7 +344,10 @@
         EnterprisePage: 1,
         chooseItem: {},
         vendorlist: [], // 查看更多信息
-        showoffshelf: false
+        showoffshelf: false,
+        showMateriel: true,
+        regieUrl: '',
+        imgStyle: 'width: 1.1rem;height:1.1rem'
       }
     },
     methods: {
@@ -351,6 +404,7 @@
           this.collectResult = err.response.data
         })
       },
+      onUpload() {},
 //      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.EnterprisePage) {
@@ -494,6 +548,10 @@
       closeMoreinfo: function() {
         this.showMoreinfn = false
       },
+      // 编辑物料
+      updateMateriel(item) {
+        this.showMateriel = true
+      },
       addProtoperson: function(item) {
         if (item.addProductPerson) {
           this.collectResult = '已在个人产品库'
@@ -556,15 +614,31 @@
     },
     components: {
       RemindBox,
-      PullUp
+      PullUp,
+      Upload
     }
   }
 </script>
 
 <style scoped lang="scss">
+  @mixin overFlowHidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @mixin lineHeight($value) {
+    height: $value;
+    line-height: $value;
+  }
   .user-content{
-    margin-bottom: .98rem;
-    margin-top: 1.26rem;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    .provider {
+      margin: 1.26rem 0 0.98rem 0;
+      height: calc(100vh - 1.26rem - 0.98rem);
+      overflow-y: auto;
+    }
     .sa-pub {
       display: inline-block;
       width: 1.41rem;
@@ -1250,7 +1324,7 @@
   }
   .deleteKuang {
     position: fixed;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
     top: 0;
     left: 0;
     right: 0;
@@ -1288,7 +1362,7 @@
         margin-top: 0.4rem;
         line-height: 0.7rem;
         height: 0.7rem;
-        &::after{
+        &::after {
           clear: both;
           display: block;
           content: ' ';
@@ -1317,7 +1391,7 @@
       right: -0.3rem;
       top: -0.35rem;
       color: #fff;
-      &::after{
+      &::after {
         position: absolute;
         top: -0.1rem;
         left: -0.1rem;
@@ -1394,4 +1468,126 @@
       }
     }
   }
+  .update-materiel {
+    position: fixed;
+    z-index: 99;
+    background: #f1f3f6;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    .mobile-header{
+      position: fixed;
+      top: 0;
+      z-index: 10;
+      width:100%;
+      height: 1.26rem;
+      line-height: 1.26rem;
+      /*border-bottom:.01rem solid #ccc;*/
+      background: #3e82f5;
+      padding:0 .2rem 0 .1rem;
+      color:#fff;
+    }
+    .mobile-header p{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size:.36rem;
+      text-align: center;
+      width: 6rem;
+      padding-left: 1rem;
+    }
+    .mobile-center-header p.en-name {
+      font-size: .3rem;
+    }
+    .mobile-header a{
+      font-size:.28rem;
+      color:#fff;
+      position: absolute;
+    }
+    .mobile-header a i{
+      font-size: .48rem;
+      margin-right: -.1rem;
+    }
+    .update-materiel-wrapper {
+      border: 1px solid #dcdcdc;
+      border-radius: 0.07rem;
+      background: #fff;
+      margin: 1.46rem 0.2rem 0;
+      position: relative;
+      padding-bottom: 0.4rem;
+      .update-materiel-wrapper-image {
+        width: 2.28rem;
+        height: 2.28rem;
+        border: 1px solid #dcdcdc;
+        border-radius: 0.07rem;
+        position: relative;
+        margin: 0.27rem 0 0 0.55rem;
+        text-align: center;
+        span {
+          color: #b2b2b2;
+          font-size: 0.28rem;
+        }
+      }
+      .uploadImgBtn {
+        color: #fff;
+        font-size: .28rem;
+        width: 1.51rem;
+        @include lineHeight(0.47rem);
+        border-radius: 0.07rem;
+        background: #f9b209;
+        text-align: center;
+        margin:2rem 0.1rem 0;
+      }
+      .uploadImgInfo {
+        color: #3f84f6;
+        font-size: 0.24rem;
+        margin-top: 2.15rem;
+      }
+      .update-materiel-wrapper-list {
+        margin-left:0.28rem;
+        margin-top: 0.3rem;
+        line-height: 0.5rem;
+        .red {color: #ea0f42}
+        .name {color: #666;}
+        .input {
+          width:5.4rem;
+          line-height: 0.5rem;
+          height: 0.5rem;border: 1px solid #dcdcdc;
+          input {
+            text-indent: 5px;
+            border: 0;
+            border-radius: 0.07rem;
+            line-height: 0.44rem;
+            height: 0.44rem;
+            width: 90%;
+            font-size:0.28rem;
+            float: left;
+            color: #333;
+          }
+          i {
+            font-size: 0.16rem;
+            vertical-align: top;
+            color: #666;
+            float: right;
+          }
+        }
+      }
+      .update-materiel-wrapper-controll {
+        margin: 0.4rem 0.2rem 0;
+        div {
+          width: 48%;
+          background: #b5b5b5;
+          font-size: 0.3rem;
+          color: #fafbfc;
+          text-align: center;
+          @include lineHeight(0.62rem);
+          border-radius: 0.07rem;
+          &:first-child {
+            background: #3f84f6;
+          }
+        }
+      }
+    }
+  }
 </style>

store/index.js

@@ -244,6 +244,16 @@ export const actions = {
         commit('search/GET_KEYWORDS_FAILURE', err)
       })
   },
+  // 搜索关键字列表
+  searchKeywordsList({ commit }, params = {}) {
+    commit('search/REQUEST_KEYWORDSLIST')
+    return axios.get('/search/201819', { params })
+      .then(response => {
+        commit('search/GET_KEYWORDSLIST_SUCCESS', response.data)
+      }, err => {
+        commit('search/GET_KEYWORDSLIST_FAILURE', err)
+      })
+  },
   resetSearchKeywords({ commit }) {
     commit('search/RESET_KEYWORDS')
   },

store/search.js

@@ -2,6 +2,11 @@ export const state = () => ({
   keywords: {
     fetching: false,
     data: []
+  },
+
+  keywordsList: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -16,6 +21,16 @@ export const mutations = {
     state.keywords.fetching = false
     state.keywords.data = result
   },
+  REQUEST_KEYWORDSLIST (state) {
+    state.keywordsList.fetching = true
+  },
+  GET_KEYWORDSLIST_FAILURE (state) {
+    state.keywordsList.fetching = false
+  },
+  GET_KEYWORDSLIST_SUCCESS (state, result) {
+    state.keywordsList.fetching = false
+    state.keywordsList.data = result
+  },
   RESET_KEYWORDS (state) {
     state.keywords.data = []
   }