MoeNovaClient/pages/vip/record.vue

<template>
  <view class="page">
    <PageHeader title="" style="border: 1px solid #f2f6f2">
      <template slot="center">
        <view class="tabs">
          <view
            class="tab"
            :class="{ active: currentTab === 'vip' }"
            @click="switchTab('vip')"
            >会员记录</view
          >
          <view
            class="tab"
            :class="{ active: currentTab === 'coin' }"
            @click="switchTab('coin')"
            >M币明细</view
          >
          <view
            class="tab"
            :class="{ active: currentTab === 'star' }"
            @click="switchTab('star')"
            >星源记录</view
          >
        </view>
      </template>
    </PageHeader>
    <view class="reserveASeat"></view>

    <view class="record-list">
      <template v-if="currentTab === 'vip'">
        <view v-if="recordList.length === 0" class="empty-state">
          <image src="@/static/icon/xx_img_zanwuxiaoxi.png" mode="aspectFit" class="empty-image"></image>
          <view class="empty-text">暂无会员记录</view>
          <view class="empty-subtext">快去开通会员吧~</view>
        </view>
        <view
          v-else
          class="record-item"
          v-for="(item, index) in recordList"
          :key="index"
        >
          <view class="record-info">
            <view class="record-title">{{ item.name }}</view>
            <view class="record-time">订单编号：{{ item.linkid }}</view>
            <view class="record-time">开通时间：{{ item.create_time }}</view>
          </view>
          <view class="record-amount" :class="{ success: item.status === 1 }">
            ¥{{ item.money }}
            <text class="status">{{
              item.status === 1 ? "支付成功" : "待支付"
            }}</text>
          </view>
        </view>
      </template>
      <template v-else>
        <view v-if="recordList.length === 0" class="empty-state">
          <image src="@/static/icon/xx_img_zanwuxiaoxi.png" mode="aspectFit" class="empty-image"></image>
          <view class="empty-text">{{ currentTab === 'coin' ? '暂无M币记录' : '暂无星源记录' }}</view>
          <view class="empty-subtext">{{ currentTab === 'coin' ? '快去充值M币吧~' : '快去获取星源吧~' }}</view>
        </view>
        <view
          v-else
          class="record-item"
          v-for="(item, index) in recordList"
          :key="index"
        >
          <view class="record-info">
            <view class="record-title">{{ item.name }}</view>
            <view class="record-time">{{ item.create_time }}</view>
          </view>
          <view class="record-amount" :class="{ expense: item.type === '-' }">
            {{ item.type === "-" ? "-" : "" }}{{ item.num }}
          </view>
        </view>
      </template>
    </view>

    <!-- 加载更多提示 -->
    <view class="loading-more" v-if="loading">
      <text>加载中...</text>
    </view>
    <view class="no-more" v-else-if="!hasMore && recordList.length > 0">
      <text>没有更多数据了</text>
    </view>
  </view>
</template>

<script>
import PageHeader from "@/components/PageHeader/PageHeader.vue";

export default {
  components: {
    PageHeader,
  },
  data() {
    return {
      currentTab: "vip",
      recordList: [],
      page: 1,
      hasMore: true,
      loading: false,
      offset: 0,
    };
  },
  onLoad(options) {
    if (options.type) {
      this.currentTab = options.type;
    }
    this.loadData();
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadData();
    }
  },
  methods: {
    switchTab(tab) {
      if (this.currentTab === tab) return;
      this.currentTab = tab;
      this.page = 1;
      this.offset = 0;
      this.recordList = [];
      this.hasMore = true;
      this.loadData();
    },
    loadData() {
      if (this.loading) return;
      this.loading = true;

      let url = "";
      let params = {
        uuid: getApp().globalData.uuid,
        offset: this.offset,
      };

      if (this.currentTab === "vip") {
        url = this.$apiHost + "/Order/getlist";
        params.type = "buyVip";
      } else {
        url = this.$apiHost + "/My/recordlist";
        params.type = this.currentTab === "coin" ? "GMM" : "GMD";
      }

      uni.request({
        url: url,
        data: params,
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          if (res && res.data && res.data.success === "yes") {
            if (!res.data.list) {
              this.hasMore = false;
              uni.showToast({
                title: res.data.msg || "没有更多数据了",
                icon: "none",
              });
              return;
            }
            const newList = res.data.list;
            if (this.offset === 0) {
              this.recordList = newList;
            } else {
              this.recordList = [...this.recordList, ...newList];
            }
            this.hasMore = newList.length > 0;
            this.offset += 20;
          } else {
            this.hasMore = false;
            uni.showToast({
              title: res.data.msg || "获取数据失败",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.log("请求失败:", err);
          this.hasMore = false;
          uni.showToast({
            title: "网络错误，请重试",
            icon: "none",
          });
        },
        complete: () => {
          this.loading = false;
        },
      });
    },
  },
};
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background-color: #fff;
  padding-top: 10px;
}

.tabs {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  width: 100%;

  .tab {
    position: relative;
    width: 140rpx;
    height: 48rpx;
    font-size: 32rpx;
    font-family: "PingFang SC-Bold";
    color: #999;
    font-weight: 400;
    text-align: center;
    margin: 0 20rpx;

    &.active {
      color: #1f1f1f;
      background: url("../../static/me/wd_img_qiehuan.png") center / cover
        no-repeat;
    }
  }
}

.record-list {
  padding: 0 32rpx;

  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 32rpx 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    .record-info {
      .record-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 8rpx;
        font-weight: 500;
      }

      .record-time {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 4rpx;
      }
    }

    .record-amount {
      text-align: right;
      font-size: 32rpx;
      color: #333;
      font-weight: 500;

      &.income {
        color: #07c160;
      }

      &.expense {
        color: #ff5967;
      }

      .status {
        display: block;
        font-size: 24rpx;
        color: #ff5967;
        font-weight: normal;
        margin-top: 8rpx;

        &.success {
          color: #999;
        }
      }
    }
  }
}

.loading-more,
.no-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
  background-color: #fff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 40rpx auto;
  width: 90%;
  max-width: 600rpx;
  padding: 40rpx;
  background: #FFFFFF;
  border-radius: 24rpx;   
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 16rpx;
    text-align: center;
  }
  
  .empty-subtext {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }
}
.reserveASeat {
  width: 100%;
  height: calc(var(--status-bar-height) + 100rpx);
}
</style>