mall-web-ssr/components/mobile/center/Seek.vue

<template>
  <div class="seek">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>{{seekTitle}}</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="seek-title com-switch-item" v-if="userType === 'saler' && seekType === 'enterprise'">
        <span class="mobile-switch-btn" :class="{'active': activeType==='todo'}" @click="switchActiveType('todo')"><b>待报价</b></span>
        <span class="mobile-switch-btn" :class="{'active': activeType==='done'}" @click="switchActiveType('done')"><b>已报价</b></span>
      </div>
      <div class="seek-title com-switch-item" v-if="userType === 'saler' && seekType === 'personage'">
        <span class="mobile-switch-btn" :class="{'active': activeType==='todo'}" @click="switchActiveType('todo')"><b>待报价</b></span>
        <span class="mobile-switch-btn" :class="{'active': activeType==='done'}" @click="switchActiveType('done')"><b>已报价</b></span>
      </div>
      <div class="seek-title com-switch-item" v-if="userType === 'saler' && seekType === 'enquiry'">
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='todo'}" @click="switchActiveType('todo')"><b>待报价</b></span>
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='done'}" @click="switchActiveType('done')"><b>已报价</b></span>
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='agreed'}" @click="switchActiveType('agreed')"><b>已采纳</b></span>
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='invalid'}" @click="switchActiveType('invalid')"><b>已失效</b></span>
      </div>
      <div class="seek-title com-switch-item" v-if="userType === 'buyer' && seekType === 'seekPurchase'">
        <span class="mobile-switch-btn" :class="{'active': activeType==='todo'}" @click="switchActiveType('todo')"><b>待报价</b></span>
        <span class="mobile-switch-btn" :class="{'active': activeType==='done'}" @click="switchActiveType('done')"><b>已报价</b></span>
      </div>
      <div class="seek-title com-switch-item" v-if="userType === 'buyer' && seekType === 'purchaseinquiry'">
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='todo'}" @click="switchActiveType('todo')"><b>待报价</b></span>
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='done'}" @click="switchActiveType('done')"><b>已报价</b></span>
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='agreed'}" @click="switchActiveType('agreed')"><b>已采纳</b></span>
        <span class="mobile-switch-btn fours" :class="{'active': activeType==='end'}" @click="switchActiveType('end')"><b>已失效</b></span>
      </div>
      <div class="search-content">
        <input type="text" v-model="seekKeyword" :placeholder="userType === 'buyer' ? '品牌/型号' : '品牌/物料名称/型号/规格/公司'" @keyup.13="onSearch">
        <span @click="onSearch"><i class="iconfont icon-sousuo"></i></span>
      </div>
      <seek-list :keyword="remindKeyword" :isSearch="isSearch" :userType="userType" :seekType="seekType" :activeType="activeType" :purchaseManList="purchaseManListData"></seek-list>
      <pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
    </div>
  </div>
</template>
<script>
  import SeekList from '~components/mobile/applyPurchase/SeekList.vue'
  import { PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    layout: 'mobileNoHeader',
    middleware: 'authenticated',
    data () {
      return {
        seekKeyword: '',
        purchaseManListData: [],
        page: 1,
        count: 10,
        isChange: false,
        isSearch: false,
        remindKeyword: '',
        activeType: 'todo'
      }
    },
    props: ['userType'],
    components: {
      SeekList,
      PullUp,
      EmptyStatus
    },
    watch: {
      'purchase.data': {
        handler: function (val) {
          let list = this.baseUtils.deepCopy(val.content || [])
          if (this.activeType === 'done' && this.seekType !== 'seekPurchase') {
            list.map(val => {
              val.quotations = {
                replies: val.replies,
                vendName: val.vendName,
                leadtime: val.leadtime,
                user: val.user
              }
            })
          }
          if (this.isChange) {
            this.purchaseManListData = list
            this.isChange = false
          } else {
            this.purchaseManListData = this.purchaseManListData.concat(list)
          }
        },
        immediate: true
      }
    },
    computed: {
      seekType () {
        return this.$route.query.seekType
      },
      purchase () {
        return this.$store.state.applyPurchase.purchaseManList.purchaseManList
      },
      fetching () {
        return this.purchase.fetching
      },
      allPage () {
        return Math.floor(this.purchase.data.totalElements / this.purchase.data.size) + Math.floor(this.purchase.data.totalElements % this.purchase.data.size > 0 ? 1 : 0)
      },
      seekTitle () {
        let title = ''
        switch (this.seekType) {
          case 'todo': title = '待报价'; break
          case 'done': title = '已报价'; break
          case 'personage': title = '我的商机'; break
          case 'enterprise': title = '公司商机'; break
          case 'enquiry': title = '定向询价'; break
          case 'seekPurchase': title = '公共询价'; break
          case 'purchaseinquiry': title = '定向询价'; break
          default: title = '已报价'
        }
        return title
      }
    },
    mounted () {
//      获取链接
      this.$nextTick(() => {
        this.myActiveType()
      })
    },
    methods: {
      onSearch: function () {
        this.isSearch = true
        this.remindKeyword = this.seekKeyword
        this.page = 1
        this.isChange = true
        this.reloadData()
      },
      reloadData: function () {
        // let overdue = this.overdue === 'attention' ? '0' : '1'
        this.$emit('reloadAction', this.page, this.count, this.seekKeyword, this.seekType, this.activeType)
      },
      onPullUpAction: function () {
        this.page++
        this.reloadData()
      },
      switchActiveType: function (type) {
        this.activeType = type
        this.isSearch = false
        this.remindKeyword = this.seekKeyword = ''
        this.page = 1
        this.isChange = true
        this.reloadData()
      },
      myActiveType: function () {
        if (this.$store.state.option.messageType) {
          this.activeType = 'done'
        } else {
          this.activeType = 'todo'
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .search-content {
    text-align: center;
    padding: .25rem 0 0 0;
    input {
      border: 1px solid #376ff3;
      width: 7.2rem;
      margin: 0 0 0 -.02rem;
    }
    span {
      /*height: .46rem;*/
      /*line-height: .46rem;*/
    }
  }
  $seekTitleLine: .72rem;
  .product-switch-item {
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #d8d8d8;
    box-shadow: 0 1px 3px #ddd;
    .mobile-switch-btn {
      color: #333;
      display: inline-block;
      height: .72rem;
      line-height: .72rem;
      font-size: .28rem;
      width: 1.4rem;
      &:first-child {
        margin-right: 1.78rem;
      }
      &.active {
        color: #3f84f6;
        border-bottom: .04rem solid #3f84f6;
      }
    }
  }
  .seek-title {
    height: $seekTitleLine;
    line-height: $seekTitleLine;
    .mobile-switch-btn {
     /* height: $seekTitleLine;
      line-height: $seekTitleLine;*/
      font-size: .28rem;
      &.active {
        b{
          border-bottom: .04rem solid #3f84f6;
        }
        border-bottom:none;
      }
      width:50%;
      b{
        display:inline-block;
         font-weight: normal;
        line-height: .64rem;
       }
      &:first-child{
        margin:0;
      }
      &.fours{
        width:25%;
      }
    }
  }
</style>