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

<template>
  <div class="order-wrapper">
    <div class="search-content search-content2">
      <input type="text" placeholder="验收单/买家名称" v-model="filterParams.keyword" @keyup.13="searchOrderlist">
      <span @click="searchOrderlist">
          <i class="iconfont icon-sousuo"></i>
      </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"
        @valueAction="onValueAction"
        :title="filterOption.title">
      </base-filter>
    </div>
    <ul class="order-list-wrap" id="b2border-wrapper" v-show="orderList.length > 0">
      <li v-for="item in orderList" @click="lookItem(item)">
        <div class="list-title">
          <span>买家：</span>
          <label v-html="item.enterprise.enName" style="color: #3F84F6;font-weight: 500"></label>
        </div>
        <div class="list-content">
          <div class="item">
            <span>验收单号：</span>
            <label v-html="item.code || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>送货单号：</span>
            <label v-html="item.sendCode || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>金额：</span>
            <label v-html="item.currency" style="color: #333;font-weight: 500"></label>&nbsp;
            <label v-html="item.totalPrice " style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>付款方式：</span>
            <label v-html="item.payments" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>验收日期：</span>
            <label style="color: #333;font-weight: 500">{{item.date | timeDay}}</label>
          </div>
        </div>
        <div class="list-bottom">
          <span>明细</span>
        </div>
      </li>
    </ul>
    <div v-if="orderList.length === 0" class="com-none-state">
      <img src="/images/mobile/@2x/search-empty.png">
      <p>抱歉，暂无订单消息</p>
      <nuxt-link to="/">返回首页</nuxt-link>
    </div>
    <pull-up :fixId="'b2border-wrapper'"
             :allPage="allPage"
             :page="page"
             :FixedEl="true"
             @pullUpAction="getMoreSearch"></pull-up>
  </div>
</template>

<script>
  import { RemindBox, PullUp } from '~components/mobile/common'
  import { BaseFilter } from '~components/mobile/base'
  export default {
    name: 'returns',
    layout: 'mobile',
    middleware: 'authenticated',
    data() {
      return {
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ],
        filterParams: {
          keyword: ''
        },
        page: 1,
        orderList: [],
        allPage: 0
      }
    },
    created() {
      this.getResource()
    },
    methods: {
      lookItem(bill) {
        this.$router.push('/mobile/center/vendor/accept_returns_details?type=accept' + '&id=' + bill.id)
      },
      setSelect (type, val, isReload) {
        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
        }
        isReload && this.filterRecord()
      },
      initFilterParams () {
        this.filterParams = {
          keyword: '',
          fromDate: '',
          toDate: ''
        }
      },
      filterRecord () {
        this.page = 1
        this.getResource(true)
      },
      onSelectAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      onValueAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value, false)
      },
      getResource(Reset) {
        this.$http.get('/btob/sale/accept', {params: {
            count: 10,
            page: this.page,
            searchFilter: this.filterParams,
            sorting: {'date': 'desc'}
          }}).then(res => {
          if (Reset) {
            this.orderList = []
          }
          this.orderList.push(...res.data.content)
          this.allPage = Math.floor(res.data.totalElement / 10)
          this.orderList.forEach(data => {
            let sum = 0
            data.returnItems.forEach((item) => {
              if (item.orderPrice == null) {
                item.orderPrice = 0
              }
              sum += item.orderPrice * item.qty
            })
            data.totalPrice = sum.toFixed(2)
          })
        })
      },
      getMoreSearch() {
        this.page++
        this.getResource()
      },
      searchOrderlist() {
        this.page = 1
        this.getResource(true)
      }
    },
    components: {
      RemindBox, PullUp, BaseFilter
    },
    filters: {
      timeDay: function(time) {
        if (typeof time === 'number') {
          if (!time) {
            return '无'
          } else {
            let d = new Date(time)
            let year = d.getFullYear()
            let month = d.getMonth() + 1
            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
            return year + '-' + month + '-' + day
          }
        }
      },
      toFixedNum: function (num) {
        return num ? parseFloat(num).toFixed(2) : '-'
      }
    }
  }
</script>

<style scoped lang="scss">
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }

  .order-wrapper {
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    height: calc(100vh - 1.26rem - 0.98rem);
    /*padding-bottom: 0.96rem;*/
    .filters-wrap{
      background: #fff;
      margin: 0 auto .13rem;
      width: 7.1rem;
      overflow: hidden;
      padding: .1rem;
    }
    .order-tab {
      background: #3f84f6;
      padding-bottom: 0.2rem;
      .order-tab-wrapper {
        border: solid 1px #ffffff;
        width: 7.06rem;
        margin: 0 auto;
        border-radius: 0.04rem;
        line-height: 0.72rem;
        height: 0.72rem;
        overflow: hidden;
        div {
          color: #ffffff;
          font-size: 0.28rem;
          text-align: center;
          width: 50%;
          &.active {
            background-color: #ffffff;
            color: #3f84f6;
          }
        }
      }
    }
    .order-nav {
      background: #fff;
      div {
        height: 0.82rem;
        line-height: 0.82rem;
        display: inline-block;
        width: 25%;
        text-align: center;
        font-size: .28rem;
        color: #666;
        &.active span{
          color: #3f84f6;
          border-bottom: 0.04rem solid #3f84f6;
          padding-bottom: 0.2rem;
        }
      }
    }
    .search-content2 {
      text-align: center;
      padding: .25rem 0 0 0;
      margin-top: 0 !important;
      margin-bottom:.25rem;
      input {
        width: 7.1rem;
        border: 1px solid #376ff3;
      }
    }
    .order-list-wrap {
      height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
      overflow-y: scroll;
      li {
        background: #fff;
        width: 7.1rem;
        margin: 0 auto 0.2rem;
        border-radius: 0.04rem;
        border: 1px solid #e4e4e4;
        padding: 0 0.24rem;
        .list-title {
          @include lineHeight(0.91rem);
          @include overFlowHidden();
          font-size: 0.28rem;
          color: #3a3a3a;
        }
        .list-bottom{
          @include lineHeight(1rem);
          text-align: center;
          font-size: 0.26rem;
          color: #333;
        }
        .list-content {
          padding-top: 0.23rem;
          border-top: 1px solid #d3d3d3;
          border-bottom: 1px solid #d3d3d3;
          .item {
            font-size: 0.28rem;
            color: #333;
            @include overFlowHidden();
            margin-bottom: 0.15rem;
            span {
              color: #666;
            }
            &.pric {
              color: #e6353d;
            }
          }
        }
      }
    }
    .com-none-state{
      background: #f1f3f6
    }
  }
</style>