studyTest/pages/testInterface/testInterface.vue

<template>
  <view class="gold-detail-container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <view class="title">金币明细</view>
    </view>

    <!-- 总金币数 -->
    <view class="total-gold">
      <view class="total-label">总金币数</
	  
	  view>
      <view class="total-value">{{ totalGold }}</view>
    </view>

    <!-- 列表容器 -->
    <view class="list-container">
      <!-- 错误提示 -->
      <view class="error" v-if="errorMsg">
        <text>{{ errorMsg }}</text>
        <button @click="fetchData">重新加载</button>
      </view>

      <!-- 列表为空 -->
      <view class="empty" v-if="!loading && !errorMsg && goldList.length === 0">
        <text>暂无金币明细数据</text>
      </view>

      <!-- 金币明细列表 -->
      <view class="gold-item" v-for="(item, index) in goldList" :key="index">
        <view class="item-header">
          <view class="user-info">
            <view class="name">{{ item.name }}</view>
            <view class="jwcode">ID: {{ item.jwcode }}</view>
          </view>
          <view class="gold-amount">
            <text class="amount">+{{ item.sumGold }}</text>
            <text class="unit">金币</text>
          </view>
        </view>

        <view class="item-body">
          <view class="detail-item">
            <text class="label">市场：</text>
            <text class="value">{{ item.market }}</text>
          </view>
          <view class="detail-item">
            <text class="label">平台：</text>
            <text class="value">{{ item.payPlatform }}</text>
          </view>
          <view class="detail-item">
            <text class="label">商品：</text>
            <text class="value">{{ item.goodsName }}</text>
          </view>
          <view class="detail-item">
            <text class="label">时间：</text>
            <text class="value">{{ item.auditTime }}</text>
          </view>
          <view class="detail-item" v-if="item.orderCode">
            <text class="label">订单号：</text>
            <text class="value">{{ item.orderCode }}</text>
          </view>
        </view>

        <view class="item-footer">
          <view class="gold-breakdown">
            <text>永久金币：{{ item.permanentGold }}</text>
            <text>免费金币：{{ item.freeGold }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 下拉加载更多提示 -->
    <view class="load-more" v-if="hasMore && !loading">
      <text>上拉加载更多</text>
    </view>
  </view>
</template>

<script setup>
// 修正生命周期导入来源（uni-app的生命周期需从@dcloudio/uni-app导入）
import { ref } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'

// 数据状态
const goldList = ref([])
const totalGold = ref(0)
const loading = ref(false)
const errorMsg = ref('')
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)

// 接口地址
const API_URL = 'https://hwjb.homilychart.com/dev/admin/goldDetail/getGoldDetail'

// 获取数据
const fetchData = async (isLoadMore = false) => {
  // 如果是加载更多且没有更多数据，直接返回
  if (isLoadMore && !hasMore.value) return
  
  // 如果正在加载，直接返回
  if (loading.value) return
  
  // 显示加载状态（使用uni-app内置API）
  loading.value = true
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  errorMsg.value = ''
  
  try {
    // 发起请求
    const res = await uni.request({
      url: API_URL,
      method: 'GET',
      data: {
        page: page.value,
        pageSize: pageSize.value
      }
    })
    
    // 处理响应
    if (res[1].code === 200) {
      const result = res[1].data
      if (result.code === 200) {
        // 更新总金币数
        totalGold.value = result.data.total
        
        // 如果是加载更多，追加数据，否则替换数据
        if (isLoadMore) {
          goldList.value = [...goldList.value, ...result.data.list]
        } else {
          goldList.value = result.data.list
        }
        
        // 判断是否还有更多数据
        hasMore.value = result.data.list.length >= pageSize.value
        
        // 加载更多时页码加1
        if (isLoadMore) {
          page.value++
        }
      } else {
        errorMsg.value = `获取数据失败: ${result.msg}`
      }
    } else {
      errorMsg.value = `请求失败: ${res[1].statusCode}`
    }
  } catch (err) {
    errorMsg.value = `网络错误: ${err.message}`
  } finally {
    // 隐藏加载状态
    loading.value = false
    uni.hideLoading() // 关闭内置加载提示
  }
}

// 页面加载时获取数据
onLoad(() => {
  fetchData()
})

// 下拉加载更多
onReachBottom(() => {
  if (!loading.value && hasMore.value) {
    fetchData(true)
  }
})

// 下拉刷新
onPullDownRefresh(() => {
  // 重置页码和数据
  page.value = 1
  hasMore.value = true
  fetchData().then(() => {
    uni.stopPullDownRefresh()
  })
})
</script>

<style scoped>
.gold-detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航 */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

/* 总金币数 */
.total-gold {
  background-color: #fff;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.total-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.total-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #ff7d00;
}

/* 列表容器 */
.list-container {
  padding: 0 20rpx;
}

/* 错误提示 */
.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
}

.error text {
  font-size: 28rpx;
  color: #f5222d;
  margin-bottom: 20rpx;
}

.error button {
  background-color: #36bffa;
  color: #fff;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
  font-size: 26rpx;
}

/* 空状态 */
.empty {
  display: flex;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* 列表项 */
.gold-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.user-info .name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.user-info .jwcode {
  font-size: 24rpx;
  color: #999;
}

.gold-amount {
  text-align: right;
}

.gold-amount .amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #00b42a;
}

.gold-amount .unit {
  font-size: 26rpx;
  color: #00b42a;
  margin-left: 5rpx;
}

.item-body {
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 15rpx;
  font-size: 26rpx;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item .label {
  color: #666;
  width: 120rpx;
}

.detail-item .value {
  flex: 1;
  color: #333;
  word-break: break-all;
}

.item-footer {
  padding-top: 15rpx;
  border-top: 1px dashed #f5f5f5;
}

.gold-breakdown {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 26rpx;
}
</style>