969 lines
24 KiB
Vue
969 lines
24 KiB
Vue
<template>
|
||
<div class="withdrawal-history-container">
|
||
<!-- 页面标题 -->
|
||
<div class="page-header">
|
||
<h1 class="page-title">提现记录</h1>
|
||
<p class="page-subtitle">查看您的提现申请和交易状态</p>
|
||
</div>
|
||
|
||
<!-- 状态标签页 -->
|
||
<div class="tab-container">
|
||
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||
<el-tab-pane label="提现中" name="pending">
|
||
<div class="tab-content">
|
||
<div class="list-header">
|
||
<span class="list-title">提现中 ({{ total}})</span>
|
||
<el-button type="primary" size="small" @click="refreshData">
|
||
<i class="el-icon-refresh"></i>
|
||
刷新
|
||
</el-button>
|
||
</div>
|
||
<div class="withdrawal-list" v-loading="loading">
|
||
<div
|
||
v-for="item in pendingWithdrawals"
|
||
:key="item.id"
|
||
class="withdrawal-item pending"
|
||
@click="showDetail(item)"
|
||
>
|
||
<div class="item-main">
|
||
<div class="item-left">
|
||
<div class="amount">{{ item.amount }} {{ item.toSymbol || 'USDT' }}</div>
|
||
<div class="chain">{{ getChainName(item.toChain) }}</div>
|
||
</div>
|
||
<div class="item-right">
|
||
<div class="status pending-status">
|
||
<i class="el-icon-loading"></i>
|
||
{{ getStatusText(item.status) }}
|
||
</div>
|
||
<div class="time">{{ formatTime(item.createTime) }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-footer">
|
||
<div class="footer-left">
|
||
<span class="address">{{ formatAddress(item.toAddress) }}</span>
|
||
<span class="tx-hash" v-if="item.txHash">
|
||
<i class="el-icon-link"></i>
|
||
{{ formatAddress(item.txHash) }}
|
||
</span>
|
||
</div>
|
||
<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
<div v-if="pendingWithdrawals.length === 0" class="empty-state">
|
||
<i class="el-icon-document"></i>
|
||
<p>暂无提现中的记录</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="提现成功" name="success">
|
||
<div class="tab-content">
|
||
<div class="list-header">
|
||
<span class="list-title">提现成功 ({{total }})</span>
|
||
<el-button type="primary" size="small" @click="refreshData">
|
||
<i class="el-icon-refresh"></i>
|
||
刷新
|
||
</el-button>
|
||
</div>
|
||
<div class="withdrawal-list" v-loading="loading">
|
||
<div
|
||
v-for="item in successWithdrawals"
|
||
:key="item.id"
|
||
class="withdrawal-item success"
|
||
@click="showDetail(item)"
|
||
>
|
||
<div class="item-main">
|
||
<div class="item-left">
|
||
<div class="amount">{{ item.amount }} {{ item.toSymbol || 'USDT' }}</div>
|
||
<div class="chain">{{ getChainName(item.toChain) }}</div>
|
||
</div>
|
||
<div class="item-right">
|
||
<div class="status success-status">
|
||
<i class="el-icon-check"></i>
|
||
{{ getStatusText(item.status) }}
|
||
</div>
|
||
<div class="time">{{ formatTime(item.createTime) }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-footer">
|
||
<div class="footer-left">
|
||
<span class="address">{{ formatAddress(item.toAddress) }}</span>
|
||
<span class="tx-hash" v-if="item.txHash">
|
||
<i class="el-icon-link"></i>
|
||
{{ formatAddress(item.txHash) }}
|
||
</span>
|
||
</div>
|
||
<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
<div v-if="successWithdrawals.length === 0" class="empty-state">
|
||
<i class="el-icon-document"></i>
|
||
<p>暂无提现成功的记录</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="提现失败" name="failed">
|
||
<div class="tab-content">
|
||
<div class="list-header">
|
||
<span class="list-title">提现失败 ({{ total }})</span>
|
||
<el-button type="primary" size="small" @click="refreshData">
|
||
<i class="el-icon-refresh"></i>
|
||
刷新
|
||
</el-button>
|
||
</div>
|
||
<div class="withdrawal-list" v-loading="loading">
|
||
<div
|
||
v-for="item in failedWithdrawals"
|
||
:key="item.id"
|
||
class="withdrawal-item failed"
|
||
@click="showDetail(item)"
|
||
>
|
||
<div class="item-main">
|
||
<div class="item-left">
|
||
<div class="amount">{{ item.amount }} {{ item.toSymbol || 'USDT' }}</div>
|
||
<div class="chain">{{ getChainName(item.toChain) }}</div>
|
||
</div>
|
||
<div class="item-right">
|
||
<div class="status failed-status">
|
||
<i class="el-icon-close"></i>
|
||
{{ getStatusText(item.status) }}
|
||
</div>
|
||
<div class="time">{{ formatTime(item.createTime) }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-footer">
|
||
<div class="footer-left">
|
||
<span class="address">{{ formatAddress(item.toAddress) }}</span>
|
||
<span class="tx-hash" v-if="item.txHash">
|
||
<i class="el-icon-link"></i>
|
||
{{ formatAddress(item.txHash) }}
|
||
</span>
|
||
</div>
|
||
<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
<div v-if="failedWithdrawals.length === 0" class="empty-state">
|
||
<i class="el-icon-document"></i>
|
||
<p>暂无提现失败的记录</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<el-row>
|
||
<el-col :span="24" style="display: flex; justify-content: center">
|
||
<el-pagination
|
||
style="margin: 0 auto; margin-top: 10px"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page.sync="currentPage"
|
||
:page-sizes="pageSizes"
|
||
:page-size="pagination.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
>
|
||
</el-pagination>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</div>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<el-dialog
|
||
title="提现详情"
|
||
:visible.sync="detailDialogVisible"
|
||
width="600px"
|
||
@close="closeDetail"
|
||
>
|
||
<div v-if="selectedItem" class="detail-content">
|
||
<!-- 基本信息 -->
|
||
<div class="detail-section">
|
||
<h3 class="section-title">基本信息</h3>
|
||
<div class="detail-list">
|
||
<div class="detail-row">
|
||
<span class="detail-label">提现ID</span>
|
||
<span class="detail-value">{{ selectedItem.id }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">提现金额</span>
|
||
<span class="detail-value amount">{{ selectedItem.amount }} {{ selectedItem.toSymbol || 'USDT' }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">区块链网络</span>
|
||
<span class="detail-value">{{ getChainName(selectedItem.toChain) }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">提现状态</span>
|
||
<span class="detail-value">
|
||
<el-tag :type="getStatusType(selectedItem.status)">
|
||
{{ getStatusText(selectedItem.status) }}
|
||
</el-tag>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地址信息 -->
|
||
<div class="detail-section">
|
||
<h3 class="section-title">地址信息</h3>
|
||
<div class="detail-list">
|
||
<div class="detail-row">
|
||
<span class="detail-label">收款地址</span>
|
||
<div class="address-container">
|
||
<span class="detail-value address">{{ selectedItem.toAddress }}</span>
|
||
<el-button
|
||
type="text"
|
||
size="small"
|
||
@click="copyAddress(selectedItem.toAddress)"
|
||
>
|
||
复制
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- v-if="selectedItem.txHash" -->
|
||
<div class="detail-row">
|
||
<span class="detail-label">交易哈希</span>
|
||
<div class="address-container">
|
||
<span class="detail-value address">{{ selectedItem.txHash }}</span>
|
||
<el-button
|
||
v-if="selectedItem.txHash"
|
||
type="text"
|
||
size="small"
|
||
@click="copyAddress(selectedItem.txHash)"
|
||
>
|
||
复制
|
||
</el-button>
|
||
<!-- <el-button
|
||
type="text"
|
||
size="small"
|
||
@click="viewOnExplorer(selectedItem.txHash, selectedItem.toChain)"
|
||
v-if="selectedItem.txHash"
|
||
>
|
||
查看
|
||
</el-button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 时间信息 -->
|
||
<div class="detail-section">
|
||
<h3 class="section-title">时间信息</h3>
|
||
<div class="detail-list">
|
||
<div class="detail-row">
|
||
<span class="detail-label">提现时间</span>
|
||
<span class="detail-value">{{ formatFullTime(selectedItem.createTime) }}</span>
|
||
</div>
|
||
<div class="detail-row" v-if="selectedItem.updateTime">
|
||
<span class="detail-label">完成时间</span>
|
||
<span class="detail-value">{{ formatFullTime(selectedItem.updateTime) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="closeDetail">关闭</el-button>
|
||
<!-- <el-button type="primary" @click="refreshData" v-if="selectedItem && selectedItem.status === 2">
|
||
刷新状态
|
||
</el-button> -->
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { balanceWithdrawList } from '../../api/wallet'
|
||
export default {
|
||
name: 'WithdrawalHistory',
|
||
data() {
|
||
return {
|
||
activeTab: 'pending',
|
||
detailDialogVisible: false,
|
||
selectedItem: null,
|
||
|
||
// 提现记录数据
|
||
withdrawalRecords: [
|
||
|
||
// {
|
||
// id: 1,
|
||
// amount: 100,
|
||
// toSymbol: 'USDT',
|
||
// toChain: 'tron',
|
||
// status: 2,
|
||
// createTime: '2024-01-15 14:30:25',
|
||
// toAddress: 'TQn9Y2khEsLJW1ChVWFMSMeRDow5KcbLSE',
|
||
// updateTime: '2024-01-15 14:30:25',
|
||
// fromAddress: 'TQn9Y2khEsLJW1ChVWFMSMeRDow5KcbLSE',
|
||
// fromChain: 'tron',
|
||
// fromSymbol: 'USDT',
|
||
|
||
// },
|
||
// {
|
||
// id: 2,
|
||
// amount: 100,
|
||
// toSymbol: 'USDT',
|
||
// toChain: 'tron',
|
||
// status: 1,
|
||
// createTime: '2024-01-15 14:30:25',
|
||
// toAddress: 'TQn9Y2khEsLJW1ChVWFMSMeRDow5KcbLSE',
|
||
// updateTime: '2024-01-15 14:30:25',
|
||
// fromAddress: 'TQn9Y2khEsLJW1ChVWFMSMeRDow5KcbLSE',
|
||
// fromChain: 'tron',
|
||
// fromSymbol: 'USDT',
|
||
|
||
// },
|
||
// {
|
||
// id: 3,
|
||
// amount: 100,
|
||
// toSymbol: 'USDT',
|
||
// toChain: 'tron',
|
||
// status: 0,
|
||
// createTime: '2024-01-15 14:30:25',
|
||
// toAddress: 'TQn9Y2khEsLJW1ChVWFMSMeRDow5KcbLSE',
|
||
// updateTime: '2024-01-15 14:30:25',
|
||
// fromAddress: 'TQn9Y2khEsLJW1ChVWFMSMeRDow5KcbLSE',
|
||
// fromChain: 'tron',
|
||
// fromSymbol: 'USDT',
|
||
|
||
// },
|
||
|
||
|
||
],
|
||
|
||
// 分页和筛选参数
|
||
pagination: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
|
||
totalPage: 0
|
||
},
|
||
|
||
// 加载状态
|
||
loading: false,
|
||
|
||
// 状态筛选
|
||
statusFilter: '',
|
||
total: 0,
|
||
pageSizes: [10, 20, 50],
|
||
currentPage: 1,
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
/**
|
||
* 提现中的记录 (status = 2)
|
||
*/
|
||
pendingWithdrawals() {
|
||
return this.withdrawalRecords.filter(item => item.status === 2)
|
||
},
|
||
|
||
/**
|
||
* 提现成功的记录 (status = 1)
|
||
*/
|
||
successWithdrawals() {
|
||
return this.withdrawalRecords.filter(item => item.status === 1)
|
||
},
|
||
|
||
/**
|
||
* 提现失败的记录 (status = 0)
|
||
*/
|
||
failedWithdrawals() {
|
||
return this.withdrawalRecords.filter(item => item.status === 0)
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
// 设置默认选中提现中状态
|
||
this.activeTab = 'pending'
|
||
this.statusFilter = 2
|
||
this.loadWithdrawalRecords()
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* 获取提现记录列表
|
||
* @param {Object} params - 请求参数
|
||
* @param {number} params.pageNum - 当前页码，默认为1
|
||
* @param {number} params.pageSize - 每页条数，默认为20
|
||
* @param {number} params.status - 记录状态：0-提现失败，1-提现成功，2-提现中
|
||
*/
|
||
async fetchBalanceWithdrawList(params = {}) {
|
||
try {
|
||
// 设置默认参数
|
||
const requestParams = {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
...params
|
||
}
|
||
|
||
console.log('获取提现记录参数:', requestParams)
|
||
|
||
const res = await balanceWithdrawList(requestParams)
|
||
|
||
if (res && (res.code === 0 || res.code === 200)) {
|
||
// 更新提现记录数据
|
||
this.withdrawalRecords = res.rows || []
|
||
|
||
// 更新分页信息
|
||
|
||
this.pagination.totalPage = res.totalPage || 0
|
||
this.total = res.total || 0
|
||
|
||
console.log('提现记录获取成功:', {
|
||
records: this.withdrawalRecords,
|
||
pagination: this.pagination
|
||
})
|
||
} else {
|
||
this.$message({
|
||
message: res?.msg || '获取提现记录失败',
|
||
type: 'error',
|
||
showClose: true
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('获取提现记录失败:', error)
|
||
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 加载提现记录
|
||
*/
|
||
async loadWithdrawalRecords() {
|
||
this.loading = true
|
||
try {
|
||
const params = {
|
||
pageNum: this.pagination.pageNum,
|
||
pageSize: this.pagination.pageSize
|
||
}
|
||
|
||
// 如果选择了状态筛选，添加状态参数
|
||
if (this.statusFilter !== '') {
|
||
params.status = this.statusFilter
|
||
}
|
||
|
||
await this.fetchBalanceWithdrawList(params)
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 标签页切换
|
||
*/
|
||
handleTabClick(tab) {
|
||
this.activeTab = tab.name
|
||
|
||
// 根据标签页设置状态筛选
|
||
if (tab.name === 'pending') {
|
||
this.statusFilter = 2 // 提现中
|
||
} else if (tab.name === 'success') {
|
||
this.statusFilter = 1 // 提现成功
|
||
} else if (tab.name === 'failed') {
|
||
this.statusFilter = 0 // 提现失败
|
||
}
|
||
this.currentPage = 1;
|
||
this.pagination.pageSize = 10;
|
||
// 重置分页并重新加载数据
|
||
this.pagination.pageNum = 1
|
||
this.loadWithdrawalRecords()
|
||
},
|
||
|
||
/**
|
||
* 显示详情
|
||
*/
|
||
showDetail(item) {
|
||
this.selectedItem = item
|
||
this.detailDialogVisible = true
|
||
},
|
||
|
||
/**
|
||
* 关闭详情
|
||
*/
|
||
closeDetail() {
|
||
this.detailDialogVisible = false
|
||
this.selectedItem = null
|
||
},
|
||
|
||
/**
|
||
* 获取链名称
|
||
*/
|
||
getChainName(chain) {
|
||
const chainNames = {
|
||
tron: 'Tron (TRC20)',
|
||
ethereum: 'Ethereum (ERC20)',
|
||
bsc: 'BSC (BEP20)',
|
||
polygon: 'Polygon (MATIC)'
|
||
}
|
||
return chainNames[chain] || chain
|
||
},
|
||
|
||
/**
|
||
* 获取状态类型
|
||
*/
|
||
getStatusType(status) {
|
||
const statusTypeMap = {
|
||
0: 'danger', // 提现失败
|
||
1: 'success', // 提现成功
|
||
2: 'warning' // 提现中
|
||
}
|
||
return statusTypeMap[status] || 'info'
|
||
},
|
||
|
||
/**
|
||
* 格式化地址
|
||
*/
|
||
formatAddress(address) {
|
||
if (!address) return ''
|
||
return address.length > 20 ? `${address.slice(0, 10)}...${address.slice(-10)}` : address
|
||
},
|
||
|
||
/**
|
||
* 格式化时间
|
||
*/
|
||
formatTime(timeStr) {
|
||
if (!timeStr) return ''
|
||
const date = new Date(timeStr)
|
||
const now = new Date()
|
||
const diff = now - date
|
||
|
||
if (diff < 60000) { // 1分钟内
|
||
return '刚刚'
|
||
} else if (diff < 3600000) { // 1小时内
|
||
return `${Math.floor(diff / 60000)}分钟前`
|
||
} else if (diff < 86400000) { // 1天内
|
||
return `${Math.floor(diff / 3600000)}小时前`
|
||
} else {
|
||
return date.toLocaleDateString()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 格式化完整时间
|
||
*/
|
||
formatFullTime(timeStr) {
|
||
if (!timeStr) return ''
|
||
return new Date(timeStr).toLocaleString('zh-CN')
|
||
},
|
||
|
||
/**
|
||
* 复制地址
|
||
*/
|
||
copyAddress(address) {
|
||
if (navigator.clipboard) {
|
||
navigator.clipboard.writeText(address).then(() => {
|
||
this.$message.success('地址已复制到剪贴板')
|
||
}).catch(() => {
|
||
this.fallbackCopyAddress(address)
|
||
})
|
||
} else {
|
||
this.fallbackCopyAddress(address)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 备用复制方法
|
||
*/
|
||
fallbackCopyAddress(address) {
|
||
const textArea = document.createElement('textarea')
|
||
textArea.value = address
|
||
document.body.appendChild(textArea)
|
||
textArea.select()
|
||
try {
|
||
document.execCommand('copy')
|
||
this.$message.success('地址已复制到剪贴板')
|
||
} catch (err) {
|
||
this.$message.error('复制失败，请手动复制')
|
||
}
|
||
document.body.removeChild(textArea)
|
||
},
|
||
|
||
/**
|
||
* 在浏览器中查看交易
|
||
*/
|
||
viewOnExplorer(txHash, chain) {
|
||
const explorers = {
|
||
tron: `https://tronscan.org/#/transaction/${txHash}`,
|
||
ethereum: `https://etherscan.io/tx/${txHash}`,
|
||
bsc: `https://bscscan.com/tx/${txHash}`,
|
||
polygon: `https://polygonscan.com/tx/${txHash}`
|
||
}
|
||
|
||
const url = explorers[chain]
|
||
if (url) {
|
||
window.open(url, '_blank')
|
||
} else {
|
||
this.$message.error('不支持的区块链网络')
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 刷新数据
|
||
*/
|
||
refreshData() {
|
||
this.loadWithdrawalRecords()
|
||
},
|
||
|
||
/**
|
||
* 格式化提现状态显示
|
||
*/
|
||
getStatusText(status) {
|
||
const statusMap = {
|
||
0: '提现失败',
|
||
1: '提现成功',
|
||
2: '提现中'
|
||
}
|
||
return statusMap[status] || '未知状态'
|
||
},
|
||
|
||
|
||
handleSizeChange(val) {
|
||
console.log(`每页 ${val} 条`);
|
||
this.pagination.pageSize = val;
|
||
this.pagination.pageNum = 1;
|
||
this.currentPage = 1;
|
||
this.loadWithdrawalRecords();
|
||
},
|
||
handleCurrentChange(val) {
|
||
console.log(`当前页: ${val}`);
|
||
this.pagination.pageNum = val;
|
||
this.loadWithdrawalRecords();
|
||
},
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.withdrawal-history-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 页面标题 */
|
||
.page-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin: 0 0 8px 0;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 标签页容器 */
|
||
.tab-container {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
padding: 18px;
|
||
}
|
||
|
||
.tab-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 列表头部 */
|
||
.list-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.list-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
/* 提现列表 */
|
||
.withdrawal-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.withdrawal-item {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.withdrawal-item:hover {
|
||
background: #e9ecef;
|
||
border-color: #409eff;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
|
||
}
|
||
|
||
.withdrawal-item.pending {
|
||
border-left: 4px solid #e6a23c;
|
||
}
|
||
|
||
.withdrawal-item.success {
|
||
border-left: 4px solid #67c23a;
|
||
}
|
||
|
||
.withdrawal-item.failed {
|
||
border-left: 4px solid #f56c6c;
|
||
}
|
||
|
||
.item-main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.item-left .amount {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.item-left .chain {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.item-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.pending-status {
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.success-status {
|
||
color: #67c23a;
|
||
}
|
||
|
||
.failed-status {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.item-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
flex: 1;
|
||
}
|
||
|
||
.address {
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
font-size: 12px;
|
||
color: #666;
|
||
text-align: left;
|
||
}
|
||
|
||
.tx-hash {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
font-size: 11px;
|
||
color: #409eff;
|
||
background: rgba(64, 158, 255, 0.1);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
max-width: 200px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tx-hash i {
|
||
font-size: 10px;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: #999;
|
||
}
|
||
|
||
.empty-state i {
|
||
font-size: 48px;
|
||
margin-bottom: 16px;
|
||
display: block;
|
||
}
|
||
|
||
.empty-state p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 详情弹窗样式 */
|
||
.detail-content {
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0 0 12px 0;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.detail-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.detail-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: 500;
|
||
min-width: 80px;
|
||
flex-shrink: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 14px;
|
||
color: #333;
|
||
flex: 1;
|
||
word-break: break-all;
|
||
text-align: left;
|
||
}
|
||
|
||
.detail-value.amount {
|
||
font-weight: 600;
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
color: #e74c3c;
|
||
}
|
||
|
||
.detail-value.address {
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.address-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.address-container .detail-value {
|
||
flex: 1;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.withdrawal-history-container {
|
||
padding: 16px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.detail-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.detail-label {
|
||
min-width: auto;
|
||
}
|
||
|
||
.item-main {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.item-right {
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.detail-content::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.detail-content::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.detail-content::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.detail-content::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
</style> |