ai_uniapp_v2/pages/bill/bill.vue

<template>
  <view class="page">
    <view class="wrap">
      <view class="wallet-card">
        <view class="wallet-copy">
          <text class="wallet-kicker">我的点数</text>
          <view class="wallet-main">
            <view class="balance-line">
              <text class="balance-number">{{ balanceText }}</text>
              <text v-if="balanceUnit" class="balance-unit">{{ balanceUnit }}</text>
            </view>
            <view class="recharge-action" @click="goRecharge">充值</view>
          </view>
        </view>

        <view class="wallet-stats">
          <view v-for="item in summaryStats" :key="item.key" class="stat-item">
            <text class="stat-value" :class="item.key">{{ item.value }}</text>
            <text class="stat-label">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <view class="filter-panel">
        <view
          v-for="item in tabs"
          :key="item.key"
          class="filter-item"
          :class="{ active: activeTab === item.key }"
          @click="changeTab(item.key)"
        >
          <text class="filter-name">{{ item.name }}</text>
          <text class="filter-count">{{ tabCounts[item.key] || 0 }}条</text>
        </view>
      </view>

      <view class="list-head">
        <text class="list-title">流水明细</text>
        <text class="list-sub">{{ activeTabName }}</text>
      </view>

      <view v-if="list.length" class="ledger-panel">
        <view v-for="item in list" :key="item.id" class="ledger-row">
          <view class="type-mark" :class="item.type">
            <text>{{ getTypeMark(item.type) }}</text>
          </view>
          <view class="ledger-main">
            <view class="title-row">
              <text class="ledger-title">{{ item.title }}</text>
              <text class="ledger-status">已完成</text>
            </view>
            <text class="ledger-desc">{{ item.desc }}</text>
            <view class="ledger-meta">
              <text class="ledger-type" :class="item.type">{{ item.type_text }}</text>
              <text>{{ item.time }}</text>
            </view>
          </view>
          <text class="ledger-amount" :class="item.amount > 0 ? 'plus' : 'minus'">
            {{ formatAmount(item.amount) }}
          </text>
        </view>
      </view>

      <view v-if="!list.length && !loading" class="empty-state">
        <view class="empty-icon">账</view>
        <text class="empty-title">暂无账单记录</text>
        <text class="empty-desc">{{ activeTab === 'all' ? '充值或创作后，这里会展示点数变化。' : '当前分类还没有记录。' }}</text>
      </view>

      <view v-if="loading" class="loading">{{ list.length ? '加载更多...' : '加载中...' }}</view>
      <view v-if="list.length && list.length >= total && !loading" class="end-text">没有更多了</view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { pointApi } from '@/api/index.js'
import { useUserStore } from '@/store/user.js'
import { useApp } from '@/utils/useApp.js'

const userStore = useUserStore()
const { toast } = useApp()
const activeTab = ref('all')
const list = ref([])
const page = ref(1)
const pageSize = 10
const total = ref(0)
const loading = ref(false)
const refreshing = ref(false)
const balance = ref({ points: 0, total_recharge: 0, total_consume: 0 })
const summary = ref({
  recharge: 0,
  consume: 0,
  reward: 0,
  refund: 0,
  adjust: 0,
  counts: {
    all: 0,
    recharge: 0,
    consume: 0,
    reward: 0,
    other: 0
  }
})
let firstShow = true

const tabs = [
  { key: 'all', name: '全部' },
  { key: 'recharge', name: '充值' },
  { key: 'consume', name: '消费' },
  { key: 'reward', name: '奖励' },
  { key: 'other', name: '其他' }
]

const typeMark = {
  all: '',
  recharge: '+',
  consume: '-',
  reward: '奖',
  refund: '退',
  adjust: '调'
}

const balanceText = computed(() => {
  const points = balance.value.points !== undefined ? balance.value.points : userStore.balance
  return Number(points) < 0 ? '不限' : String(Number(points) || 0)
})

const balanceUnit = computed(() => {
  return ['不限', '无限'].includes(String(balanceText.value)) ? '' : '点'
})

const tabCounts = computed(() => {
  return summary.value.counts || {}
})

const activeTabName = computed(() => {
  const item = tabs.find((tab) => tab.key === activeTab.value)
  return item ? `${item.name}记录` : '全部记录'
})

const summaryStats = computed(() => {
  return [
    { key: 'recharge', label: '累计充值', value: formatSigned(summary.value.recharge, true) },
    { key: 'consume', label: '累计消费', value: summary.value.consume ? `-${summary.value.consume}` : '0' },
    { key: 'reward', label: '奖励获得', value: formatSigned(summary.value.reward, true) }
  ]
})

onLoad((options = {}) => {
  if (options.type && tabs.some((item) => item.key === options.type)) {
    activeTab.value = options.type
  }
  refreshSilent()
})

onShow(() => {
  if (firstShow) {
    firstShow = false
    return
  }
  refreshSilent()
})

onPullDownRefresh(() => {
  refreshing.value = true
  refreshSilent()
})

onReachBottom(() => loadMore())

async function fetchList(reset = false) {
  if (loading.value) {
    if (refreshing.value) uni.stopPullDownRefresh()
    return
  }
  loading.value = true
  if (reset) page.value = 1
  try {
    const res = await pointApi.getLogList({
      type: activeTab.value,
      page_no: page.value,
      page_size: pageSize
    })
    const rows = res.list || []
    const data = res.data || {}
    list.value = reset ? rows : list.value.concat(rows)
    total.value = Number(data.total || rows.length)
    setBalance(data.balance || {})
    summary.value = normalizeSummary(data.summary || {})
  } catch (e) {
    toast(e.msg || '账单加载失败')
  } finally {
    loading.value = false
    refreshing.value = false
    uni.stopPullDownRefresh()
  }
}

function refreshSilent() {
  fetchList(true)
}

function loadMore() {
  if (loading.value || list.value.length >= total.value) return
  page.value += 1
  fetchList()
}

function changeTab(key) {
  if (activeTab.value === key) return
  activeTab.value = key
  refreshSilent()
}

function normalizeSummary(data = {}) {
  const counts = Object.assign({
    all: 0,
    recharge: 0,
    consume: 0,
    reward: 0,
    other: 0
  }, data.counts || {})
  Object.keys(counts).forEach((key) => {
    counts[key] = Number(counts[key] || 0)
  })
  return {
    recharge: Number(data.recharge || 0),
    consume: Number(data.consume || 0),
    reward: Number(data.reward || 0),
    refund: Number(data.refund || 0),
    adjust: Number(data.adjust || 0),
    counts
  }
}

function setBalance(data = {}) {
  balance.value = data
  if (data.points !== undefined || data.point_balance !== undefined) {
    userStore.balance = Number(data.points !== undefined ? data.points : data.point_balance) || 0
    userStore.balanceDetail = data
  }
}

function formatSigned(value, plus = false) {
  const num = Number(value || 0)
  if (num > 0 && plus) return `+${num}`
  return String(num)
}

function formatAmount(value) {
  const num = Number(value || 0)
  return num > 0 ? `+${num}` : String(num)
}

function getTypeMark(type) {
  return typeMark[type] || '记'
}

function goRecharge() {
  uni.navigateTo({ url: '/pages/recharge/recharge' })
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f3f7fb;
}

.wrap {
  padding: 30rpx 30rpx calc(44rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.wallet-card {
  position: relative;
  min-height: 308rpx;
  padding: 34rpx 32rpx 26rpx;
  border-radius: 30rpx;
  color: #ffffff;
  background: linear-gradient(135deg, #1167e8 0%, #0b8cff 58%, #41c7ff 100%);
  box-shadow: 0 18rpx 40rpx rgba(11, 140, 255, 0.22);
  overflow: hidden;
  box-sizing: border-box;
}

.wallet-card::before {
  content: '';
  position: absolute;
  right: -96rpx;
  top: -130rpx;
  width: 330rpx;
  height: 330rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.wallet-card::after {
  content: '';
  position: absolute;
  left: 42rpx;
  right: 42rpx;
  bottom: 118rpx;
  height: 1rpx;
  background: rgba(255, 255, 255, 0.2);
}

.wallet-copy,
.wallet-stats {
  position: relative;
  z-index: 1;
}

.wallet-kicker {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: 24rpx;
  font-weight: 800;
  line-height: 1;
}

.wallet-main {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
}

.balance-line {
  min-width: 0;
  display: flex;
  align-items: flex-end;
}

.balance-number {
  color: #ffffff;
  font-size: 70rpx;
  font-weight: 900;
  line-height: 0.95;
}

.balance-unit {
  margin-left: 10rpx;
  margin-bottom: 8rpx;
  color: rgba(255, 255, 255, 0.78);
  font-size: 26rpx;
  font-weight: 800;
}

.recharge-action {
  height: 68rpx;
  min-width: 136rpx;
  padding: 0 30rpx;
  border-radius: 999rpx;
  color: #0b74ea;
  background: #ffffff;
  font-size: 27rpx;
  font-weight: 900;
  line-height: 68rpx;
  text-align: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.wallet-stats {
  margin-top: 46rpx;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12rpx;
}

.stat-item {
  min-width: 0;
}

.stat-value {
  display: block;
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 900;
  line-height: 1;
}

.stat-value.consume {
  color: #ffe2c7;
}

.stat-label {
  display: block;
  margin-top: 10rpx;
  color: rgba(255, 255, 255, 0.68);
  font-size: 21rpx;
  line-height: 1;
}

.filter-panel {
  margin-top: 24rpx;
  padding: 8rpx;
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 8rpx 28rpx rgba(34, 68, 112, 0.05);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8rpx;
}

.filter-item {
  height: 88rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7f8896;
}

.filter-item.active {
  color: #0b8cff;
  background: #eef7ff;
}

.filter-name {
  font-size: 27rpx;
  font-weight: 900;
  line-height: 1;
}

.filter-count {
  margin-top: 8rpx;
  font-size: 20rpx;
  font-weight: 700;
  line-height: 1;
  opacity: 0.72;
}

.list-head {
  margin-top: 30rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-title {
  color: #172033;
  font-size: 32rpx;
  font-weight: 900;
}

.list-sub {
  color: #8a95a6;
  font-size: 24rpx;
}

.ledger-panel {
  border-radius: 26rpx;
  background: #ffffff;
  box-shadow: 0 8rpx 28rpx rgba(34, 68, 112, 0.05);
  overflow: hidden;
}

.ledger-row {
  position: relative;
  min-height: 156rpx;
  padding: 26rpx 28rpx;
  display: flex;
  align-items: center;
  gap: 22rpx;
  box-sizing: border-box;
}

.ledger-row::after {
  content: '';
  position: absolute;
  left: 112rpx;
  right: 28rpx;
  bottom: 0;
  height: 1rpx;
  background: #edf2f7;
}

.ledger-row:last-child::after {
  display: none;
}

.type-mark {
  width: 62rpx;
  height: 62rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29rpx;
  font-weight: 900;
  flex-shrink: 0;
}

.type-mark.recharge {
  color: #0b8cff;
  background: #eef7ff;
}

.type-mark.consume {
  color: #ff681f;
  background: #fff4ec;
}

.type-mark.reward {
  color: #17a65a;
  background: #edfdf4;
}

.type-mark.refund,
.type-mark.adjust {
  color: #7a5af8;
  background: #f3f0ff;
}

.ledger-main {
  min-width: 0;
  flex: 1;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.ledger-title {
  min-width: 0;
  color: #172033;
  font-size: 29rpx;
  font-weight: 900;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-status {
  height: 32rpx;
  padding: 0 12rpx;
  border-radius: 999rpx;
  color: #17a65a;
  background: #edfdf4;
  font-size: 19rpx;
  font-weight: 800;
  line-height: 32rpx;
  flex-shrink: 0;
}

.ledger-desc {
  display: block;
  margin-top: 10rpx;
  color: #7f8896;
  font-size: 24rpx;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-meta {
  margin-top: 14rpx;
  display: flex;
  align-items: center;
  gap: 14rpx;
  color: #9aa4b2;
  font-size: 22rpx;
}

.ledger-type {
  height: 34rpx;
  padding: 0 14rpx;
  border-radius: 999rpx;
  font-size: 20rpx;
  font-weight: 900;
  line-height: 34rpx;
}

.ledger-type.recharge {
  color: #0b8cff;
  background: #eef7ff;
}

.ledger-type.consume {
  color: #ff681f;
  background: #fff4ec;
}

.ledger-type.reward {
  color: #17a65a;
  background: #edfdf4;
}

.ledger-type.refund,
.ledger-type.adjust {
  color: #7a5af8;
  background: #f3f0ff;
}

.ledger-amount {
  color: #172033;
  font-size: 34rpx;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.ledger-amount.plus {
  color: #17a65a;
}

.ledger-amount.minus {
  color: #ff681f;
}

.empty-state {
  min-height: 430rpx;
  margin-top: 0;
  border-radius: 26rpx;
  background: #ffffff;
  box-shadow: 0 8rpx 28rpx rgba(34, 68, 112, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.empty-icon {
  width: 92rpx;
  height: 92rpx;
  border-radius: 28rpx;
  color: #0b8cff;
  background: #eef7ff;
  font-size: 34rpx;
  font-weight: 900;
  line-height: 92rpx;
}

.empty-title {
  margin-top: 24rpx;
  color: #172033;
  font-size: 30rpx;
  font-weight: 900;
  line-height: 1;
}

.empty-desc {
  width: 500rpx;
  max-width: 80%;
  margin-top: 14rpx;
  color: #8a95a6;
  font-size: 24rpx;
  line-height: 1.45;
}

.loading,
.end-text {
  padding: 28rpx 0 12rpx;
  color: #9aa4b2;
  font-size: 24rpx;
  line-height: 1;
  text-align: center;
}
</style>