mayou/htmldev/cps/src/views/order/child/main.vue

<template>
  <div
    class="wrapper"
    ref="returnWrapper">
    <ul>
      <li
        :class="{'static': isRefresh}"
        class="pulldown-wrapper">
        <van-loading
          v-show="isRefresh"
          size="24px"
          type="spinner">加载中...
        </van-loading>
        <div
          v-show="!isRefresh"
          class="van-loading">
          <span
            class="van-loading__text">下拉刷新</span>
        </div>
      </li>
      <li
        v-for="(item, index) in list"
        :key="index"
        class="list-item border-bottom-1px"
        @click="getOrderDetail(item.id)">
        <div class="wrap">
          <p class="label">{{ item.product_name }}</p>
        </div>
        <p class="date">
          <span>订单平台类型</span>
          <span>{{ orderPlatformType[item.order_platform_type] }}</span>
        </p>
        <p class="date">
          <span>订单编号</span>
          <span>{{ item.order_number }}</span>
        </p>
        <p class="date">
          <span>订单实际支付金额</span>
          <span>￥{{ item.order_realy_price | fen2Yuan }}</span>
        </p>
        <p class="date">
          <span>佣金</span>
          <span>￥{{ item.order_commission | fen2Yuan }}</span>
        </p>
        <p class="date">
          <span>订单状态</span>
          <span>{{ allOrderStatus[item.order_status] }}</span>
        </p>
        <p class="date">
          <span>创建时间</span>
          <span>{{ item.created_at }}</span>
        </p>
      </li>
      <li class="pullup-wrapper">
        <van-loading
          v-show="!finished"
          size="24px"
          type="spinner">加载中...
        </van-loading>
        <div
          v-show="finished"
          class="van-loading">
          <span
            class="van-loading__text">没有更多了</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { Toast, Loading } from 'vant'
import { apiOrderList, apiOrderDetail } from '../api/api'

export default {
  components: {
    'van-loading': Loading
  },
  props: {
    orderPlatformSonType: {
      type: Number,
      default: 0
    },
    orderStatus: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      finished: false, // 所有数据是否加载完
      isRefresh: false, // 是否下拉刷新
      isFetchLock: false, // 接口调用加锁
      pagenum: 0,
      pagesize: 20,
      list: [],
      scroll: null
    }
  },
  computed: {
    orderPlatformType () {
      return this.$store.getters['common/orderPlatformType']
    },
    allOrderStatus () {
      return this.$store.getters['common/allOrderStatus']
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.finished = false
      this.isRefresh = false
      this.isFetchLock = false
      this.pagenum = 0
      this.pagesize = 20
      this.list = []
      this.scroll = null
      this.getList()
    } else {
      this.scroll && this.scroll.refresh()
    }
    this.$route.meta.isUseCache = false
  },
  methods: {
    goDetail (id) {},
    onRefresh () {
      this.pagenum = 0
      this.pagesize = 20
      this.finished = false
      this.isRefresh = true
      this.getList()
    },
    async getList () {
      if (this.finished) {
        return
      }
      if (this.isFetchLock) {
        return
      }
      this.isFetchLock = true
      this.pagenum++
      try {
        const { status, data, msg } = await apiOrderList({
          page: this.pagenum,
          page_size: this.pagesize,
          order_platform_son_type: this.orderPlatformSonType,
          order_status: this.orderStatus
        })
        if (status) {
          const { list } = data
          // 下拉刷新数据清空
          if (this.isRefresh) {
            this.isRefresh = false
            this.list = []
          }

          // 没有数据返回了
          if (Array.isArray(list) && !list.length) {
            this.finished = true
          }

          if (Array.isArray(list) && list.length) {
            // 总页数小于等于1页时
            if (list.length < this.pagesize) {
              this.finished = true
            }
            this.list = this.list.concat(list)

            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.returnWrapper, {
                  click: true,
                  pullDownRefresh: {
                    threshold: 50, // 顶部下拉的距离
                    stop: 20 // 回弹停留的距离
                  },
                  pullUpLoad: {
                    threshold: -20
                  },
                  scrollbar: true
                })

                this.scroll.on('pullingDown', () => {
                  this.onRefresh()
                })

                this.scroll.on('pullingUp', () => {
                  this.getList()
                })
              } else {
                this.scroll.finishPullDown()
                this.scroll.finishPullUp()
                this.scroll.refresh()
              }
            })
          }
        } else {
          Toast(msg)
        }
        this.isFetchLock = false
      } catch (err) {
        this.isFetchLock = false
      }
    },
    async getOrderDetail (id) {
      try {
        const { status, data, msg } = await apiOrderDetail(id)
        if (status) {
          this.$emit('setOrderDetail', data)
        } else {
          Toast(msg)
        }
      } catch (err) {}
    }
  },
  beforeDestroy () {
    this.scroll && this.scroll.destroy()
  },
  beforeRouteLeave (to, from, next) {
    if (['Mine', 'OrderDetail'].findIndex(item => item === to.name) > -1) {
      from.meta.isUseCache = true
    }
    next()
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: calc(100% - 113px);
  overflow: hidden;
  background: #FFFFFF;

  ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 11px 0 102px;
  }
}

.pulldown-wrapper {
  position: absolute;
  left: 0;
  top: -43px;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;

  &.static {
    position: static;
    left: 0;
    top: 0;
  }
}

.pullup-wrapper {
  width: 100%;
  text-align: center;

  .van-loading {
    margin-top: 16px;
  }
}

.list-item {
  width: 340px;
  padding: 17px 14px 21px;
  @include border-bottom-1px(rgba(31, 49, 74, 0.1));

  .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .label {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
  }

  .money {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FD4646;
    line-height: 22px;
  }

  .date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;

    span {
      width: 50%;
      font-size: 12px;
      color: #999999;
      line-height: 17px;

      &:nth-of-type(2) {
        text-align: right;
      }
    }
  }
}
</style>