taimed-international-app/pages/user/wallet/list.vue

<template>
  <view class="transaction-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ height: navbarHeight }">
      <view class="navbar-content" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="navbar-left" @click="goBack">
          <wd-icon name="arrow-left" size="18px" color="#333" />
        </view>
        <text class="navbar-title">{{ $t('user.myAccount') }}</text>
      </view>
    </view>

    <!-- 交易记录列表 -->
    <view 
      v-if="transactionList.length > 0"
      class="transaction-list"
      :style="{ paddingTop: navbarHeight }"
    >
      <view 
        v-for="item in transactionList" 
        :key="item.id" 
        class="transaction-item"
      >
        <view class="item-header">
          <text class="transaction-type">{{ item.orderType }}</text>
          <text 
            :class="['amount', { positive: item.orderType === '充值' }]"
          >
            {{ item.orderType === '充值' ? '+' : '' }}{{ item.changeAmount }}
          </text>
        </view>
        <text class="remark">{{ formatRemark(item.remark) }}</text>
        <text class="create-time">{{ item.createTime }}</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view 
      v-else-if="!loading" 
      class="empty-state"
      :style="{ paddingTop: navbarHeight }"
    >
      <text class="empty-text">{{ $t('common.noData') }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { getTransactionList } from '@/api/modules/user'
import type { ITransaction } from '@/types/user'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userStore = useUserStore()

// 导航栏高度
const statusBarHeight = ref(0)
const navbarHeight = ref('44px')

// 交易记录列表
const transactionList = ref<ITransaction[]>([])

// 加载状态
const loading = ref(false)

/**
 * 获取导航栏高度
 */
const getNavbarHeight = () => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  let navBarHeight = 44
  if (systemInfo.model.indexOf('iPhone') !== -1 && parseInt(systemInfo.model.slice(-2)) >= 11) {
    navBarHeight = 48
  }
  
  const totalHeight = statusBarHeight.value + navBarHeight
  navbarHeight.value = totalHeight + 'px'
}

/**
 * 获取交易记录
 */
const getData = async () => {
  if (!userStore.userInfo.id) {
    return
  }

  try {
    loading.value = true
    uni.showLoading({
      title: t('common.loading')
    })

    const res = await getTransactionList(userStore.userInfo.id)
    
    uni.hideLoading()

    if (res.transactionDetailsList && res.transactionDetailsList.length > 0) {
      transactionList.value = res.transactionDetailsList
    }
  } catch (error) {
    console.error('获取交易记录失败:', error)
    uni.hideLoading()
  } finally {
    loading.value = false
  }
}

/**
 * 格式化备注信息（换行显示订单编号）
 */
const formatRemark = (remark: string) => {
  if (remark.includes('Stripe充值:')) {
    return remark.replace('Stripe充值:', 'Stripe充值:\n')
  } else if (remark.includes('订单编号为 - ')) {
    return remark.replace('订单编号为 - ', '订单编号为 - \n')
  }
  return remark
}

/**
 * 返回上一页
 */
const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
}

onMounted(() => {
  getNavbarHeight()
  getData()
})
</script>

<style lang="scss" scoped>
$theme-color: #54a966;

.transaction-page {
  min-height: 100vh;
  background-color: #f7faf9;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    position: relative;

    .navbar-left {
      position: absolute;
      left: 10px;
      display: flex;
      align-items: center;
      padding: 10rpx;
    }

    .navbar-title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
  }
}

.transaction-list {
  padding: 20rpx;
}

.transaction-item {
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

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

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

      &.positive {
        color: $theme-color;
      }
    }
  }

  .remark {
    display: block;
    font-size: 30rpx;
    color: #666;
    line-height: 38rpx;
    margin-bottom: 10rpx;
    white-space: pre-line;
  }

  .create-time {
    display: block;
    font-size: 28rpx;
    color: #aaa;
  }
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding-top: 100rpx;

  .empty-text {
    font-size: 30rpx;
    color: #999;
  }
}
</style>