476 lines
10 KiB
Vue
476 lines
10 KiB
Vue
<template>
|
|
<div class="seller-records gradient-background-circles">
|
|
<!-- 使用 GeneralHeader 替换 MobileHeader -->
|
|
<GeneralHeader
|
|
:showLanguageList="true"
|
|
:title="t('transaction_records')"
|
|
color="black"
|
|
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
|
/>
|
|
|
|
<div class="content">
|
|
<!-- 搜索框 -->
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
min-width: 0;
|
|
border-radius: 32px;
|
|
border: 1px solid #fff;
|
|
|
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
|
padding: 0 8px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
height: max-content;
|
|
"
|
|
>
|
|
<img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
:placeholder="t('enter_user_id')"
|
|
style="
|
|
width: 100%;
|
|
outline: none;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: black;
|
|
padding: 10px 8px;
|
|
"
|
|
@keyup.enter="performSearch"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="!hasSearched && searchQuery" style="font-weight: 600" @click="performSearch">
|
|
{{ t('search') }}
|
|
</div>
|
|
<div v-else style="font-weight: 600" @click="clearSearch">{{ t('cancel') }}</div>
|
|
</div>
|
|
|
|
<!-- 标签按钮 -->
|
|
<div style="display: flex; position: relative; margin-bottom: 16px">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.id"
|
|
ref="tabItems"
|
|
@click="switchTab(tab.id)"
|
|
:style="{
|
|
flex: 1,
|
|
padding: '8px 16px',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
fontWeight: '600',
|
|
fontSize: '14px',
|
|
color: activeTabId === tab.id ? '#8B5CF6' : 'rgba(0, 0, 0, 0.6)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s',
|
|
position: 'relative',
|
|
}"
|
|
>
|
|
{{ t(tab.langKey) }}
|
|
</button>
|
|
<!-- 下划线元素 -->
|
|
<div
|
|
style="width: 15px; height: 3px; background-color: #bb92ff"
|
|
:style="underlineStyle"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 用户列表 -->
|
|
<div v-if="loading" class="loading-state">
|
|
<div class="loading-spinner"></div>
|
|
<p>{{ t('loading') }}...</p>
|
|
</div>
|
|
|
|
<div v-else class="records-list">
|
|
<div v-for="record in records" :key="record.id" class="record-item">
|
|
<div class="record-info">
|
|
<div class="user-avatar">
|
|
<span>{{ record.userName.charAt(0) }}</span>
|
|
</div>
|
|
<div class="record-details">
|
|
<div style="display: flex; align-items: center">
|
|
<h4>User</h4>
|
|
<h4>{{ record.userName }}</h4>
|
|
<h4>...</h4>
|
|
</div>
|
|
|
|
<p>
|
|
<span style="display: flex; align-items: center">
|
|
<span>ID</span>
|
|
<span style="margin: 0 2px">:</span>
|
|
<span>{{ record.account }}</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="record-amount">
|
|
<div class="coins-amount">{{ record.amount }} {{ t('coins') }}</div>
|
|
<div class="record-time">{{ record.time }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!loading && records.length === 0" class="empty-state">
|
|
<div class="empty-icon">📋</div>
|
|
<p>{{ t('no_transaction_records') }}</p>
|
|
<span>{{ t('no_selling_records_yet') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
|
import { getFreightWaterFlow } from '@/api/wallet.js'
|
|
import { formatUTCCustom } from '@/utils/utcFormat.js'
|
|
import { getUserId } from '@/utils/userStore.js'
|
|
import { setDocumentDirection } from '@/locales/i18n'
|
|
|
|
const { t, locale } = useI18n()
|
|
|
|
// 监听语言变化并设置文档方向
|
|
locale.value && setDocumentDirection(locale.value)
|
|
|
|
const loading = ref(false)
|
|
const records = ref([])
|
|
const searchQuery = ref('')
|
|
const searchResults = ref([])
|
|
const isSearching = ref(false)
|
|
const hasSearched = ref(false)
|
|
|
|
const activeTabId = ref(1)
|
|
const tabItems = ref([]) // 存储标签DOM引用
|
|
// 标签页数据
|
|
const tabs = ref([
|
|
{ id: 1, langKey: 'income' },
|
|
{ id: 2, langKey: 'expenditure' },
|
|
])
|
|
|
|
// 切换标签页
|
|
const switchTab = (tabId) => {
|
|
activeTabId.value = tabId
|
|
}
|
|
|
|
// 计算下划线样式
|
|
const underlineStyle = computed(() => {
|
|
console.log('计算属性')
|
|
|
|
if (tabItems.value.length === 0) return {} //没有这个元素
|
|
const activeTab = tabItems.value[activeTabId.value - 1]
|
|
console.log('选中元素的左边距', activeTab.offsetLeft)
|
|
|
|
return {
|
|
position: 'absolute',
|
|
left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
|
|
bottom: '0',
|
|
transition: 'left 0.3s ease', // 平滑过渡
|
|
}
|
|
})
|
|
|
|
// 获取金额显示
|
|
const getAmountDisplay = (type, quantity) => {
|
|
const prefix = type === 0 ? '+' : '-'
|
|
return `${prefix}${quantity}`
|
|
}
|
|
|
|
// 获取记录
|
|
const fetchRecords = async () => {
|
|
loading.value = true
|
|
|
|
try {
|
|
// 先获取用户ID
|
|
const userId = getUserId()
|
|
|
|
if (!userId) {
|
|
console.error('无法获取用户ID')
|
|
records.value = []
|
|
return
|
|
}
|
|
|
|
const response = await getFreightWaterFlow(userId)
|
|
|
|
if (response && response.status && response.body) {
|
|
// 处理返回的数据
|
|
records.value = response.body.map((item) => ({
|
|
id: item.id,
|
|
account: item.account,
|
|
userId: item.acceptUserId,
|
|
userName: `${item.acceptUserId.toString().slice(-6)}`, // 显示最后6位
|
|
amount: getAmountDisplay(item.type, item.quantity),
|
|
time: formatUTCCustom(item.createTime),
|
|
type: item.type,
|
|
quantity: item.quantity,
|
|
balance: item.balance,
|
|
origin: item.origin,
|
|
remark: item.remark,
|
|
rechargeType: item.rechargeType,
|
|
}))
|
|
} else {
|
|
records.value = []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取记录失败:', error)
|
|
records.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 清除搜索
|
|
const clearSearch = () => {
|
|
hasSearched.value = false
|
|
searchQuery.value = ''
|
|
searchResults.value = members.value
|
|
}
|
|
|
|
// 执行搜索
|
|
const performSearch = async () => {
|
|
console.log('searchQuery.value:', searchQuery.value)
|
|
|
|
if (!searchQuery.value.trim()) {
|
|
searchResults.value = members.value
|
|
return
|
|
}
|
|
|
|
isSearching.value = true
|
|
hasSearched.value = false
|
|
|
|
searchResults.value = []
|
|
if (searchQuery.value.trim()) {
|
|
// const resSearchUser = await getTeamMember(searchQuery.value)
|
|
// if (resSearchUser.status && resSearchUser.body) {
|
|
// searchResults.value = resSearchUser.body
|
|
// }
|
|
}
|
|
|
|
isSearching.value = false
|
|
hasSearched.value = true
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchRecords()
|
|
underlineStyle.value // 触发计算属性更新
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
* {
|
|
color: rgba(0, 0, 0, 0.8);
|
|
font-family: 'SF Pro Text';
|
|
}
|
|
|
|
.seller-records {
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.seller-records::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
padding: 16px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.loading-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #f59e0b;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-state p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 记录列表 */
|
|
.records-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.record-item {
|
|
background-color: white;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.record-info {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 25px;
|
|
background-color: #9ca3af;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.record-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.record-details h4 {
|
|
margin-bottom: 4px;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.record-details p {
|
|
font-size: 0.8em;
|
|
font-weight: 590;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.record-time {
|
|
font-size: 0.8em;
|
|
font-weight: 510;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.record-amount {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.coins-amount {
|
|
font-size: 0.9em;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
font-weight: 510;
|
|
}
|
|
|
|
.transaction-type {
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.empty-state p {
|
|
margin: 0 0 8px 0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.empty-state span {
|
|
font-size: 14px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
input::placeholder {
|
|
font-weight: bold;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
* {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.help-btn {
|
|
width: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 360px) {
|
|
* {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.help-btn {
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.help-btn {
|
|
width: 28px;
|
|
}
|
|
}
|
|
|
|
/* RTL支持 */
|
|
[dir='rtl'] .search-icon {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
[dir='rtl'] .user-avatar {
|
|
margin-right: 0;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
[dir='rtl'] .record-info {
|
|
text-align: right;
|
|
}
|
|
|
|
[dir='rtl'] .record-amount {
|
|
align-items: flex-start;
|
|
}
|
|
</style>
|