更新：增加“我的”相关功能
This commit is contained in:
242
pages/user/wallet/list.vue
Normal file
242
pages/user/wallet/list.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user