mall-web-ssr/pages/mobile/order/orderbtob.vue

<template>
  <div class="order-wrapper">
    <div class="order-tab">
      <div class="order-tab-wrapper clearfix">
        <div class="fl active tab">B2B</div>
        <nuxt-link class="fl tab" to="/mobile/order?type=saler" tag="div" >
          商城
        </nuxt-link>
      </div>
    </div>
    <div class="order-nav">
      <div :class="activeType === 'todo' ? 'active': ''" @click="ChangeList('todo')"><span>待回复</span></div>
      <div :class="activeType === 'done' ? 'active' : ''" @click="ChangeList('done')"><span>已回复</span></div>
      <div :class="activeType === 'end' ? 'active' : ''" @click="ChangeList('end')"><span>已结案</span></div>
    </div>
    <div class="search-content search-content2">
      <input type="text" placeholder="单据编号/客户名称/物料名称" v-model="keyword" @keyup.13="searchOrderlist">
      <span @click="searchOrderlist">
          <i class="iconfont icon-sousuo"></i>
      </span>
    </div>
    <ul class="order-list-wrap" id="b2border-wrapper" v-show="orderList.length > 0">
      <li v-for="item in orderList">
        <div class="list-title">{{item.enName}}</div>
        <div class="clearfix list-content">
          <div class="fl left">
            <div class="item">
              <span>单号：</span>
              <label v-html="item.code" style="color: #333"></label>
            </div>
            <div class="item">
              <span>币别：</span>{{item.currency}}
            </div>
            <div class="item pric">
              <span>金额：</span>{{item.sum}}
            </div>
            <div class="item">
              <span>时间：</span>{{item.date | time}}
            </div>
          </div>
          <div class="fr right">
            <div v-if="activeType === 'todo'" class="todo">
              待回复
            </div>
            <div v-else-if="activeType === 'done'" class="done">
              已回复
            </div>
            <div v-else-if="activeType === 'end'" class="end">
              已结案
            </div>
          </div>
        </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'
  export default {
    name: 'orderbtob',
    layout: 'mobile',
    middleware: 'authenticated',
    data() {
      return {
        activeType: 'todo',
        page: 1,
        // isSearchSearchingMore: false,
        orderList: [],
        keyword: '',
        allPage: 0
      }
    },
    created() {
      this.getResource()
    },
    methods: {
      getResource(Reset) {
        // this.isSearchSearchingMore = false
        this.$http.get('/sale/orders/info/nosearch', {params: {
          _state: this.activeType,
          count: 10,
          page: this.page,
          searchFilter: {'fromDate': 1293811200000, 'endDate': new Date().getTime(), 'keyword': this.keyword},
          sorting: {date: 'desc', id: 'desc'}
        }}).then(res => {
          if (Reset) {
            this.orderList = []
          }
          res.data.content.forEach(item => {
            item.sum = 0
            item.orderItems.forEach(order => {
              item.sum += order.qty * order.price
            })
          })
          this.orderList.push(...res.data.content)
          this.allPage = Math.floor(res.data.totalElement / 10)
          // this.isSearchSearchingMore = true
          console.log(this.orderList)
        })
      },
      ChangeList(_tp) {
        this.activeType = _tp
        this.getResource(true)
      },
      getMoreSearch() {
        this.page++
        this.getResource()
      },
      searchOrderlist() {
        this.page = 1
        this.getResource(true)
      }
    },
    components: {
      RemindBox, PullUp
    },
    filters: {
      time: 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
          }
        }
      }
    }
  }
</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;*/
    .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: 33.3%;
        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;
      input {
        width: 7.1rem;
        border: 1px solid #376ff3;
      }
      span {
        /*height: .46rem;*/
        /*line-height: .46rem;*/
      }
    }
    .order-list-wrap {
      height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
      overflow-y: scroll;
      margin-top: 0.2rem;
      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;
          border-bottom: 1px solid #d3d3d3;
        }
        .list-content {
          margin-top: 0.23rem;
          padding-bottom: 0.28rem;
          .left {
            border-right: dashed 1px #9f9f9f;
            width: 4.6rem;
            .item {
              font-size: 0.28rem;
              color: #333;
              @include overFlowHidden();
              margin-bottom: 0.15rem;
              span {
                color: #666;
              }
              &.pric {
                color: #e6353d;
              }
            }
          }
          .right {
            div {
              width: 1.7rem;
              height: 0.47rem;
              line-height: 0.47rem;
              font-size: 0.28rem;
              text-align: center;
              border-radius: 0.04rem;
              margin-top: 0.7rem;
              &.todo {
                border: 1px solid #3e82f5;
                background: #3e82f5;
                color: #fff;
              }
              &.done {
                border: 1px solid #3e82f5;
                color: #3e82f5;
              }
              &.end {
                background: #cccccc;
                border: 1px solid #cccccc;
                color: #fff;
              }
            }
          }
        }
      }
    }
    .com-none-state{
      background: #f1f3f6
    }
  }
</style>