mall-web-ssr/pages/mobile/center/vendor/outOfStorage/index.vue

<template>
  <div class="storage">
    <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="mobile-storage-center">
      <!--入库记录-->
      <div>
        <div class="storage-head">
          <span class="inline-block" :class="{'active': switchType === 'inBound'}" @click="setSwitchType('inBound')">入库</span>
          <span class="inline-block" :class="{'active': switchType === 'outBound'}" @click="setSwitchType('outBound')">出库</span>
        </div>
        <div class="storage-record">
          <div class="search-content clearfix">
            <div class="search">
              <input type="text" placeholder="卖家/发货单" class="staff-search">
              <span><i class="iconfont icon-sousuo"></i></span>
            </div>
          </div>
          <div class="tab-content">
            <span :class="{'active': handleItem === 0}" @click="handleItem = 0">{{switchType === 'inBound' ? '查看入库记录' : '查看出库记录'}}</span>
            <span :class="{'active': handleItem === 1}" @click="handleItem = 1">{{switchType === 'inBound' ? '其它入库' : '其它出库'}}</span>
            <span v-if="switchType === 'outBound'" :class="{'active': handleItem === 2}" @click="handleItem = 2">{{switchType === 'inBound' ? '采购入库' : '销售出库'}}</span>
          </div>
          <div class="filters-wrap">
            <base-filter
              v-for="filterOption in filterOptions"
              :key="filterOption.selectOption"
              :selectItems="filterOption.selectItems"
              :defaultVal="filterOption.defaultVal"
              :selectOption="filterOption.selectOption"
              @selectAction="onSelectAction"
              :title="filterOption.title">
            </base-filter>
          </div>
          <div class="list-content">
            <storage-list :listData="listData" v-if="handleItem === 0"></storage-list>
            <!--<detail-storage></detail-storage>-->
            <other-storage v-if="handleItem === 1"></other-storage>
            <purchase-storage v-if="handleItem === 2"></purchase-storage>
          </div>
          <!--<empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>-->
          <!--<pull-up :fixId="'mobile-storage-center'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>-->
        </div>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
  import { StorageList, DetailStorage, OtherStorage, PurchaseStorage } from '~components/mobile/center/outOfStorage'
  export default {
    middleware: 'authenticated',
    layout: 'mobile',
    fetch({route, store}) {
      return Promise.all([store.dispatch('product/getLoadStorageData', {})])
    },
    data () {
      return {
        remindText: '',
        timeoutCount: 0,
        switchType: 'inBound',
        handleItem:0,
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ]
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus,
      BaseFilter,
      StorageList,
      DetailStorage,
      OtherStorage,
      PurchaseStorage
    },
    methods: {
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      setSwitchType (type) {
        this.switchType = type
      },
      setSelect (type, val) {
        if (type === 'date') {
          if (val) {
            this.filterParams.fromDate = val.fromDate
            this.filterParams.toDate = val.toDate
          } else {
            this.filterParams.fromDate = null
            this.filterParams.toDate = null
          }
        } else {
          this.filterParams[type] = val
        }
        this.filterRecord()
      },
      initFilterParams () {
        this.filterParams = {
          keyword: '',
          fromDate: '',
          toDate: '',
          currencyName: '',
          method: ''
        }
      },
      onSelectAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value)
      },
      filterRecord () {
        this.page = 1
        this.isChange = true
        this.reloadList()
      },
      reloadList () {
        if (this.switchType === 'account') {
          this.$store.dispatch('payCenter/loadBuyerAccount', {
            count: this.count,
            page: this.page,
            sorting: {num: 'ASC'},
            type: 'buyer'
          })
        } else {
          this.$store.dispatch('payCenter/loadBuyerRecord', {
            count: this.count,
            page: this.page,
            sorting: {'paytime': 'DESC'},
            currencyName: this.filterParams.currencyName || null,
            fromDate: this.filterParams.fromDate || null,
            toDate: this.filterParams.toDate || null,
            remitteeType: this.filterParams.remitteeType || null,
            keyword: this.filterParams.keyword || null
          })
        }
      },
    }
  }
</script>
<style lang="scss">
  $base-color: #3f84f6;
  #mobile-storage-center {
    padding-bottom: .5rem;
    margin: 0 auto;
    .storage-head {
      height: .82rem;
      line-height: .82rem;
      text-align: center;
      background: #fff;
      span {
        font-size: .29rem;
        &:last-child {
          margin-left: 2.6rem;
        }
        &.active {
          color: $base-color;
          border-bottom: 1px solid $base-color;
        }
      }
    }
    .storage-record {
      .search-content {
        padding: .20rem 0;
        text-align: center;
        input {
          margin: 0;
          width: 7.1rem;
          border: 1px solid $base-color;
        }
      }
      .tab-content{
        margin: 0 auto .13rem;
        width: 7.1rem;
        overflow: hidden;
        text-align: center;
        span{
          float: left;
          display: inline-block;
          width: 2.36rem;
          height: .62rem;
          line-height: .62rem;
          text-align: center;
          color: #999999;
          font-size: .26rem;
          background-color: #ffffff;
          border: solid 1px #d7d7d7;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          &.active{
            background-color: #3f84f6;
            border: none;
            color: #fff;
          }
          &:first-child{
            border-top-left-radius: .05rem;
            border-bottom-left-radius: .05rem;
          }
          &:nth-child(2){
            border-left: none;
            border-right: none;
          }
          &:last-child{
            border-top-right-radius: .05rem;
            border-bottom-right-radius: .05rem;
          }
        }
      }
      .filters-wrap{
        background: #fff;
        margin: 0 auto .13rem;
        width: 7.1rem;
        overflow: hidden;
        padding: .1rem;
      }
      .list-content{
        margin: 0 auto;
        padding: 0 .20rem;
        margin-bottom:1.2rem;
      }
    }
  }
</style>