mall-web-ssr/pages/mobile/center/user/applyPurchase.vue

<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 () {
        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>