将发布求购弹窗改页面跳转形式

components/mobile/applyPurchase/PublishSeek.vue

@@ -1,70 +1,65 @@
 <template>
-  <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>
+  <div class="publish_seek_mobile">
+    <div class="publish-seek">
+      <div class="content-line">
+        <span><i>*</i>品牌：</span>
+        <input type="text" v-model="applyObj.brand" @blur="checkBrand" @input="onBrandChange" placeholder="请勿填中文符号">
+        <ul class="similar brand-similar-list" v-show="showSimilarBrandList && applyObj.brand">
+          <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
+        </ul>
       </div>
-      <div class="publish-seek">
-        <div class="content-line">
-          <span><i>*</i>品牌：</span>
-          <input type="text" v-model="applyObj.brand" @blur="checkBrand" @input="onBrandChange" placeholder="请勿填中文符号">
-          <ul class="similar brand-similar-list" v-show="showSimilarBrandList && applyObj.brand">
-            <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
-          </ul>
-        </div>
-        <div class="content-line">
-          <span><i>*</i>物料名称(类目)：</span>
-          <input type="text" v-model="applyObj.prodTitle" @blur="checkProdTitle" @input="onProdTitleInput">
-        </div>
-        <div class="content-line">
-          <span><i>*</i>型号：</span>
-          <input type="text" v-model="applyObj.code" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号">
-          <ul class="similar" v-show="showSimilarCodeList && applyObj.code">
-            <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
-          </ul>
-        </div>
-        <div class="content-line">
-          <span>规格：</span>
-          <input type="text" v-model="applyObj.spec" @blur="checkSpec" @input="onSpecInput">
-        </div>
-        <div class="content-line">
-          <span><i>*</i>截止日期：</span>
-          <input type="date" v-model="applyObj.deadline" :min="minDay" :max="maxDay" @blur="deadlineChange">
-          <!--<el-date-picker-->
-            <!--v-model="applyObj.deadline"-->
-            <!--type="date"-->
-            <!--:editable="false"-->
-            <!--:clearable="true"-->
-            <!--size="mini">-->
-          <!--</el-date-picker>-->
-        </div>
-        <!--<div class="content-line">
-          <span>币种：</span>
-          <a v-text="applyObj.currency" @click="setShowCurrencyList(!showCurrencyList, $event)"></a>
-          <img v-if="!showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
-          <img v-if="showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" alt="">
-          <ul v-if="showCurrencyList">
-            <li @click="setCurrency('不限')">不限</li>
-            <li @click="setCurrency('RMB')">RMB</li>
-            <li @click="setCurrency('USD')">USD</li>
-          </ul>
-        </div>-->
-        <div class="content-line">
-          <span>数量(PCS)：</span>
-          <input type="text" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput">
-        </div>
-        <!--<div class="content-line">
-          <span>生产日期：</span>
-          <input type="text" v-model="applyObj.produceDate" @input="onProduceDateChange">
-        </div>-->
-        <a @click="authorityInterceptor(baseUrls.userPublishSeek, goPublish)">确认发布</a>
+      <div class="content-line">
+        <span><i>*</i>物料名称(类目)：</span>
+        <input type="text" v-model="applyObj.prodTitle" @blur="checkProdTitle" @input="onProdTitleInput">
       </div>
+      <div class="content-line">
+        <span><i>*</i>型号：</span>
+        <input type="text" v-model="applyObj.code" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号">
+        <ul class="similar" v-show="showSimilarCodeList && applyObj.code">
+          <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
+        </ul>
+      </div>
+      <div class="content-line">
+        <span>规格：</span>
+        <input type="text" v-model="applyObj.spec" @blur="checkSpec" @input="onSpecInput">
+      </div>
+      <div class="content-line">
+        <span><i>*</i>截止日期：</span>
+        <input type="date" v-model="applyObj.deadline" :min="minDay" :max="maxDay" @blur="deadlineChange">
+        <!--<el-date-picker-->
+        <!--v-model="applyObj.deadline"-->
+        <!--type="date"-->
+        <!--:editable="false"-->
+        <!--:clearable="true"-->
+        <!--size="mini">-->
+        <!--</el-date-picker>-->
+      </div>
+      <!--<div class="content-line">
+        <span>币种：</span>
+        <a v-text="applyObj.currency" @click="setShowCurrencyList(!showCurrencyList, $event)"></a>
+        <img v-if="!showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
+        <img v-if="showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" alt="">
+        <ul v-if="showCurrencyList">
+          <li @click="setCurrency('不限')">不限</li>
+          <li @click="setCurrency('RMB')">RMB</li>
+          <li @click="setCurrency('USD')">USD</li>
+        </ul>
+      </div>-->
+      <div class="content-line">
+        <span>数量(PCS)：</span>
+        <input type="text" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput">
+      </div>
+      <!--<div class="content-line">
+        <span>生产日期：</span>
+        <input type="text" v-model="applyObj.produceDate" @input="onProduceDateChange">
+      </div>-->
     </div>
+    <a @click="authorityInterceptor(baseUrls.userPublishSeek, goPublish)">确认发布</a>
   </div>
 </template>
 <script>
   export default {
-    props: ['showSayPriceBox'],
+    props: ['dataObj'],
     data () {
       return {
         applyObj: {
@@ -106,29 +101,19 @@
         return deadDate
       }
     },
-    watch: {
-      showSayPriceBox: function (val, old) {
-        this.emptyForm()
-//        if (val) {
-//          document.body.style.position = 'fixed'
-//          document.body.style.left = '0'
-//          document.body.style.right = '0'
-//        } else {
-//          document.body.style.position = 'static'
-//        }
-      }
-    },
     mounted () {
       let _this = this
+      if (this.dataObj) {
+        this.applyObj = this.dataObj
+      } else {
+        this.emptyForm()
+      }
       document.body.onclick = function () {
         _this.showSimilarCodeList = false
         _this.showSimilarBrandList = false
       }
     },
     methods: {
-      cancel: function () {
-        this.$emit('cancelAction')
-      },
       emptyForm: function () {
         for (let attr in this.applyObj) {
           this.applyObj[attr] = attr === 'currency' ? '不限' : ''
@@ -147,6 +132,7 @@
         return this.$http.get('/productuser/match/getKind', {params: {cmpCode: code, brand: brand}})
       },
       goPublish: function () {
+        console.log('12', this.applyObj)
         if (this.checkAll()) {
           this.getMaterialKind(this.applyObj.code, this.applyObj.brand).then(response => {
             let inquiry = {}
@@ -186,16 +172,11 @@
             inquiry.currency = currency
             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('发布失败')
               })
           })
@@ -368,129 +349,90 @@
   }
 </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;
+  .publish_seek_mobile{
+    padding:.2rem;
+    .publish-seek {
       background: #fff;
-      .mobile-modal-header {
-        font-size: .38rem;
-        background: #fff;
-        background: url(/images/mobile/@2x/applyPurchase/pub.png) no-repeat;
-        background-size: cover;
-        height: 1.51rem;
-        i {
-          top: -.36rem;
+      padding: .1rem;
+      border-radius:.1rem;
+      .content-line {
+        position: relative;
+        height: 1rem;
+        line-height: 1rem;
+        font-size: .26rem;
+        text-align: left;
+        border-bottom:1px solid #d3d3d3;
+        &:last-child{
+          border:none;
         }
-      }
-      .publish-seek {
-        background: #fff;
-        padding-top: .1rem;
-        padding-bottom: .4rem;
-        .content-line {
-          position: relative;
-          height: .8rem;
-          line-height: .8rem;
+        input {
+          width: 3.49rem;
+          height: .52rem;
+          border: none;
           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: 2.26rem;
-            text-align: right;
-            i {
-              color: #ff0000;
-              margin-right: .05rem;
-              font-style: normal;
-            }
+          vertical-align: middle;
+          background: #fff;
+          border-radius: 0;
+        }
+        > span {
+          display: inline-block;
+          width: 2.5rem;
+          text-align: right;
+          color:#3176e9;
+          i {
+            color: #ff0000;
+            margin-right: .05rem;
+            font-style: normal;
           }
-          > a {
+        }
+        > a {
+          font-size: .26rem;
+          color: #666;
+        }
+        > img {
+          width: .12rem;
+          height: .06rem;
+          margin-left: .04rem;
+        }
+        .similar {
+          position: absolute;
+          width: 3.52rem;
+          max-height: 2.5rem;
+          overflow-y: auto;
+          z-index: 12;
+          border: 1px solid #7e7e7e;
+          border-radius: .05rem;
+          left: 2.25rem;
+          top: .7rem;
+          background: #fff;
+          li {
+            height: .5rem;
+            line-height: .5rem;
             font-size: .26rem;
-            color: #666;
-          }
-          > img {
-            width: .12rem;
-            height: .06rem;
-            margin-left: .04rem;
-          }
-          .similar {
-            position: absolute;
-            width: 3.52rem;
-            max-height: 2.5rem;
-            overflow-y: auto;
-            z-index: 12;
-            border: 1px solid #7e7e7e;
-            border-radius: .05rem;
-            left: 2.25rem;
-            top: .7rem;
-            background: #fff;
-            li {
-              height: .5rem;
-              line-height: .5rem;
-              font-size: .26rem;
-              color: #999;
-              padding-left: .19rem;
-              &:focus, &:active, &:hover {
-                background: #999;
-                color: #fff;
-              }
+            color: #999;
+            padding-left: .19rem;
+            &:focus, &:active, &:hover {
+              background: #999;
+              color: #fff;
             }
           }
-          /*> ul {
-            position: absolute;
-            top: .6rem;
-            left: 1.16rem;
-            z-index: 1;
-            width: 1.75rem;
-            background: #fff;
-            text-align: center;
-            border-radius: .1rem;
-            border: .02rem solid #dfdfdf;
-            -webkit-box-shadow: 0 0 .12rem .02rem #e2d9d975;
-            -moz-box-shadow:  0 0 .12rem .02rem #e2d9d975;
-            box-shadow:  0 0 .12rem .02rem #e2d9d975;
-            li {
-              height: .52rem;
-              line-height: .52rem;
-              border-bottom: .02rem solid #dfdfdf;
-              &:hover, &:active {
-                background: #dedede;
-              }
-            }
-          }*/
-        }
-        > 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;
         }
       }
     }
+    > a {
+      display: block;
+      width: 5.19rem;
+      height: .84rem;
+      text-align: center;
+      line-height: .84rem;
+      font-size: .38rem;
+      margin: .3rem auto 0;
+      background: #3176e9;
+      color: #fff;
+      border-radius: .08rem;
+    }
   }
+
   .datepicker-overlay {
     z-index: 9999;
     .cov-date-body {

pages/mobile/center/user/applyPurchase.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="apply_purchase_mobile">
+    <div class="com-mobile-header mobile-center-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>发布求购</p>
+      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
+    </div>
+    <div class="mobile-fix-content mobile-centerfix-content" id="mobileFixContent">
+      <div class="search-content search-content2">
+        <input type="text" placeholder="请输入您要询价求购的型号" v-model="keyword" @keyup.13="searchComplist">
+        <span @click="searchComplist" >
+          <i class="iconfont icon-sousuo"></i>
+      </span>
+      </div>
+      <publish-seek v-if="showPublishBox" :dataObj="componentSeekObj" @remindAction="onRemind"></publish-seek>
+      <template v-else>
+        <ul v-if="compList && compList.length">
+          <li v-for="comp in compList">
+            <div class="listInfo">
+              <p>品牌：<span v-text="comp.brand || '-'"></span></p>
+              <p>物料名称(类目)：<span v-text="comp.kind || '-'"></span></p>
+              <p>型号：<span v-text="comp.cmpCode || '-'"></span></p>
+              <p>规格：<span v-text="comp.spec || '-'"></span></p>
+              <p>单位：<span v-text="comp.unit || 'PCS'"></span></p>
+            </div>
+            <a class="sa-pub" @click="compInquiry(comp, $event)">立即询价</a>
+          </li>
+        </ul>
+        <empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>
+      </template>
+    </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+    <pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
+  </div>
+</template>
+<script>
+  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
+  import {PublishSeek} from '~components/mobile/applyPurchase'
+  export default {
+    middleware: 'authenticated',
+    layout: 'mobileNoHeader',
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('product/loadPublishList', { count: 10, page: 1, keyword: null })
+      ])
+    },
+    data () {
+      return {
+        keyword: '',
+        remindText: '',
+        timeoutCount: 0,
+        page: 1,
+        count: 10,
+        isChange: false,
+        compList: [],
+        componentSeekObj: {
+          code: '',
+          brand: '',
+          spec: '',
+          prodTitle: ''
+        },
+        showPublishBox: true
+      }
+    },
+    watch: {
+      'compCollectList.data': {
+        handler: function (val) {
+          if (this.isChange) {
+            this.compList = val.content
+            this.isChange = false
+          } else {
+            this.compList = [...this.compList, ...val.content]
+          }
+        },
+        immediate: true
+      }
+    },
+    computed: {
+      compCollectList () {
+        console.log('123', this.$store.state.product.common.publishMobile)
+        return this.$store.state.product.common.publishMobile
+      },
+      fetching () {
+        return this.compCollectList.fetching
+      },
+      allPage () {
+        return Math.floor(this.compCollectList.data.totalElements / this.compCollectList.data.size) + Math.floor(this.compCollectList.data.totalElements % this.compCollectList.data.size > 0 ? 1 : 0)
+      }
+    },
+    components: {
+      RemindBox,
+      PullUp,
+      EmptyStatus,
+      PublishSeek
+    },
+    methods: {
+      searchComplist () {
+        this.showPublishBox = false
+        this.page = 1
+        this.isChange = true
+        if (this.keyword) {
+          this.reloadList()
+        }
+      },
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      reloadList: function () {
+        this.$store.dispatch('product/loadPublishList', { page: this.page, count: this.count, keyword: this.keyword })
+      },
+      onPullUpAction: function () {
+        this.page++
+        this.reloadList()
+      },
+      compInquiry: function (item, e) {
+        if (e) {
+          e.stopPropagation()
+        }
+        this.componentSeekObj.code = item.cmpCode ? item.cmpCode : '-'
+        this.componentSeekObj.brand = item.brand ? item.brand : '-'
+        this.componentSeekObj.spec = item.spec ? item.spec : '-'
+        this.componentSeekObj.prodTitle = item.kind ? item.kind : '-'
+        this.componentSeekObj = JSON.parse(JSON.stringify(this.componentSeekObj))
+        this.showPublishBox = true
+      },
+      goUrl: function (url) {
+        this.$router.push(url)
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mobile-fix-content {
+    .search-content {
+      text-align: center;
+      input {
+        border: 1px solid #376ff3;
+      }
+      span{
+        top:0;
+      }
+    }
+    ul {
+      margin: .2rem;
+      li {
+        border-radius: .05rem;
+        margin: .25rem 0 0 0;
+        position: relative;
+        background: #fff;
+        .listInfo {
+          padding: .25rem .1rem .25rem .23rem;
+          p {
+            color: #666;
+            font-size: .3rem;
+            line-height: .45rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            span {
+              color: #333;
+            }
+          }
+        }
+        .sa-pub {
+          position: absolute;
+          bottom: .2rem;
+          right:0;
+          display: block;
+          width: 1.7rem;
+          height: .47rem;
+          line-height: .47rem;
+          text-align: center;
+          font-size: .26rem;
+          color: #fff;
+          background: #008bf7;
+          margin-right:.2rem;
+          border-radius: .05rem;
+        }
+      }
+    }
+  }
+</style>

pages/mobile/center/user/index.vue

@@ -12,10 +12,10 @@
       <div class="block-wrap seek-operation">
         <p><i></i>我的求购</p>
         <ul>
-          <li @click="showPublishBox = true">
+          <nuxt-link to="/mobile/center/user/applyPurchase" tag="li">
             <img src="/images/mobile/center/user/pub.png" alt="">
             <p>发布求购</p>
-          </li>
+          </nuxt-link>
           <nuxt-link to="/mobile/center/user/seek?seekType=wait" tag="li">
             <img src="/images/mobile/center/user/wait.png" alt="">
             <p>待报价</p>
@@ -62,19 +62,16 @@
       </div>
 
     </div>
-    <publish-seek :showSayPriceBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-seek>
     <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 <script>
   import { RemindBox } from '~components/mobile/common'
-  import { PublishSeek } from '~components/mobile/applyPurchase'
   export default {
     layout: 'mobileNoHeader',
     middleware: 'authenticated',
     data () {
       return {
-        showPublishBox: false,
         remindText: '',
         timeoutCount: 0,
         carCount: 0
@@ -92,8 +89,7 @@
       return Promise.all(promises)
     },
     components: {
-      RemindBox,
-      PublishSeek
+      RemindBox
     },
     computed: {
       compCount () {

store/product.js

@@ -185,6 +185,16 @@ export const actions = {
         commit('common/GET_COLLECT_LIST_FAILURE', err)
       })
   },
+  // 获取搜索所有物料信息
+  loadPublishList ({ commit }, params = {}) {
+    commit('common/REQUEST_PUBLISH_MOBILE')
+    return axios.get(`/api/product/search/page`, { params })
+      .then(response => {
+        commit('common/GET_PUBLISH_MOBILE_SUCCESS', response.data)
+      }, err => {
+        commit('common/GET_PUBLISH_MOBILE_FAILURE', err)
+      })
+  },
   // 供应商维护
   loadSupplierInformation ({ commit }, params = {}) {
     let uuid = params.uuid

store/product/common.js

@@ -14,6 +14,10 @@ export const state = () => ({
   collectListMobile: {
     fetching: false,
     data: []
+  },
+  publishMobile: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -57,5 +61,15 @@ export const mutations = {
   GET_COLLECT_LIST_SUCCESS (state, result) {
     state.collectListMobile.fetching = false
     state.collectListMobile.data = result
+  },
+  REQUEST_PUBLISH_MOBILE (state) {
+    state.publishMobile.fetching = true
+  },
+  GET_PUBLISH_MOBILE_FAILURE (state) {
+    state.publishMobile.fetching = false
+  },
+  GET_PUBLISH_MOBILE_SUCCESS (state, result) {
+    state.publishMobile.fetching = false
+    state.publishMobile.data = result
   }
 }