zhiyu_uni_duanju/pages/member/orders.vue

<template>
  <view class="body pd16_15">
    <view class="jilu-box" v-show="list.length > 0">
      <view class="pb10 jilu-item" v-for="(item, key) in list" :key="key">
        <view class="jilu-item-box">
          <text class="ft12 jilu-txt">订单号:{{ item.trade_no }}</text>
          <text class="ft12 jilu-txt">{{ item.status }}</text>
        </view>
        <view class="jilu-item-box">
          <view class="jilu-items">
            <image class="pay-icon" src="/static/img/orders/cj-icon.png" mode=""></image>
            <view class="lines">
              <text class="ft14" style="font-weight: bold;">{{ item.pay_name }}</text>
              <text class="ft12 jilu-txt">时间:{{ item.pay_end_at }}</text>
            </view>
          </view>
          <view class="lines">
            <text class="ft14 jilu-txt"
              style="text-align: right;font-weight: bold;color:  #FF9800;">{{ item.pay_result }}K币</text>
            <text class="ft12 jilu-txt">实付金额：&yen;{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="empty-box" v-if="list.length < 1 && show">
      <image src="/static/img/orders/emty.png" mode=""></image>
      <p class="ft14 line-1-txt">暂无充值记录</p>
      <p class="ft14 line-2-txt">小充一笔，看更多好剧吧</p>
      <navigator url="/pages/pay/pay">
        <view class="ft16 btn-box"><text class="ft12 btn-cz">去充值</text> </view>
      </navigator>
    </view>
  </view>
</template>

<script>
import { getOrderList } from "@/common/apis/recharge.js"
export default {
  data() {
    return {
      page: 1,
      hasMore: true,
      list: [],
      show: false
    }
  }, onLoad() {

  }, onShow() {
    this.page = 1;
    this.hasMore = true;
    this.getList();
    uni.hideLoading();
  }, onPullDownRefresh() {
    this.page = 1;
    this.list = [];
    this.getList();
    uni.stopPullDownRefresh();
  }, onReachBottom() {
    if (!this.hasMore) {
      return false;
    }
    this.getList();
  },
  methods: {
    async getList() {

      if (this.page <= 1) {
        this.show = false;
      }
      let response = await getOrderList(this.page);
      let res = response.data;
      if (res) {
        if (this.page >= res.last_page) {
          this.hasMore = false;
        } else {
          this.page++;
        }
        res.data.forEach((item, index) => {
          this.list.push(item);
        })
      }
      this.show = true;
    },
  }
}
</script>

<style>
@import url("style/orders.css");
</style>