feat: 优化
This commit is contained in:
@@ -5,13 +5,19 @@ import { API_BASE } from '@gold/config/api'
|
||||
* 积分记录 API
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} PointRecordPageParams
|
||||
* @property {number} [pageNo] - 页码
|
||||
* @property {number} [pageSize] - 每页数量
|
||||
* @property {string} [status] - 状态 pending/confirmed/canceled
|
||||
* @property {string} [type] - 变动类型 increase/decrease
|
||||
* @property {string} [bizType] - 业务类型
|
||||
* @property {Array<string|null>} [createTime] - 时间范围 [开始时间, 结束时间]
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取当前用户积分记录分页
|
||||
* @param {Object} params - 分页参数
|
||||
* @param {number} params.pageNo - 页码
|
||||
* @param {number} params.pageSize - 每页数量
|
||||
* @param {string} params.type - 变动类型 increase/decrease
|
||||
* @param {string} params.bizType - 业务类型
|
||||
* @param {PointRecordPageParams} [params] - 分页参数
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getPointRecordPage(params = {}) {
|
||||
|
||||
@@ -7,6 +7,18 @@ import { getUserProfile } from '@/api/auth'
|
||||
|
||||
const STORAGE_KEY = 'user_store_v1'
|
||||
|
||||
/**
|
||||
* @typedef {Object} UserProfile
|
||||
* @property {string} [registerTime]
|
||||
* @property {string} [createTime]
|
||||
* @property {string} [mobile]
|
||||
* @property {number} [remainingPoints]
|
||||
* @property {number} [remainingStorage]
|
||||
* @property {number} [usedStorage]
|
||||
* @property {number} [totalStorage]
|
||||
* @property {number} [totalRecharge]
|
||||
*/
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
const isLoggedIn = ref(false)
|
||||
const isHydrated = ref(false)
|
||||
@@ -18,6 +30,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
const mobile = ref('')
|
||||
|
||||
// 档案数据（来自 MemberUserProfile）
|
||||
/** @type {import('vue').Ref<UserProfile|null>} */
|
||||
const profile = ref(null)
|
||||
const remainingPoints = computed(() => profile.value?.remainingPoints ?? 0)
|
||||
const remainingStorage = computed(() => profile.value?.remainingStorage ?? 10) // GB
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, reactive } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
@@ -8,6 +8,9 @@ import { redeemCode as redeemCodeApi } from '@/api/redeemCode'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { RangeCalendar } from '@/components/ui/range-calendar'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -24,8 +27,34 @@ const showRedeemDialog = ref(false)
|
||||
const redeemCodeInput = ref('')
|
||||
const redeeming = ref(false)
|
||||
|
||||
// 筛选条件
|
||||
const filterType = ref('all')
|
||||
const filterBizType = ref('all')
|
||||
const datePickerOpen = ref(false)
|
||||
|
||||
// 筛选选项
|
||||
const typeOptions = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'increase', label: '收入' },
|
||||
{ value: 'decrease', label: '支出' }
|
||||
]
|
||||
|
||||
const bizTypeOptions = [
|
||||
{ value: 'all', label: '全部类型' },
|
||||
{ value: 'signin', label: '签到' },
|
||||
{ value: 'recharge', label: '充值' },
|
||||
{ value: 'exchange', label: '兑换' },
|
||||
{ value: 'gift', label: '礼包' },
|
||||
{ value: 'dify_chat', label: 'AI文案' },
|
||||
{ value: 'digital_human', label: '数字人' },
|
||||
{ value: 'voice_tts', label: '语音克隆' }
|
||||
]
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const selectedDateRange = ref<any>(undefined)
|
||||
const dateRangeDisplay = ref<string[]>([])
|
||||
|
||||
// 积分记录数据
|
||||
const pointRecords = ref([])
|
||||
const pointRecords = ref<any[]>([])
|
||||
const recordsLoading = ref(false)
|
||||
const recordsPagination = reactive({
|
||||
current: 1,
|
||||
@@ -43,23 +72,23 @@ const storagePercent = computed(() => {
|
||||
})
|
||||
|
||||
// 格式化函数
|
||||
function formatStorage(mb) {
|
||||
function formatStorage(mb: number) {
|
||||
if (mb >= 1024) {
|
||||
return (mb / 1024).toFixed(1) + ' GB'
|
||||
}
|
||||
return Math.round(mb) + ' MB'
|
||||
}
|
||||
|
||||
function formatMoney(amount) {
|
||||
function formatMoney(amount?: number) {
|
||||
return amount?.toFixed(2) || '0.00'
|
||||
}
|
||||
|
||||
function formatCredits(credits) {
|
||||
function formatCredits(credits?: number) {
|
||||
return credits?.toLocaleString() || '0'
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateStr) {
|
||||
function formatDate(dateStr?: string) {
|
||||
if (!dateStr) return '未设置'
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
@@ -70,20 +99,35 @@ function formatDate(dateStr) {
|
||||
}
|
||||
|
||||
// 脱敏手机号
|
||||
function maskMobile(mobile) {
|
||||
function maskMobile(mobile?: string) {
|
||||
if (!mobile) return '未设置'
|
||||
return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
|
||||
// 获取积分记录（只显示已完成的记录）
|
||||
// 获取积分记录
|
||||
async function fetchPointRecords() {
|
||||
recordsLoading.value = true
|
||||
try {
|
||||
const res = await getPointRecordPage({
|
||||
const params: Record<string, any> = {
|
||||
pageNo: recordsPagination.current,
|
||||
pageSize: recordsPagination.pageSize,
|
||||
status: 'confirmed'
|
||||
})
|
||||
}
|
||||
|
||||
if (filterType.value && filterType.value !== 'all') {
|
||||
params.type = filterType.value
|
||||
}
|
||||
if (filterBizType.value && filterBizType.value !== 'all') {
|
||||
params.bizType = filterBizType.value
|
||||
}
|
||||
if (dateRangeDisplay.value?.length === 2) {
|
||||
params.createTime = [
|
||||
`${dateRangeDisplay.value[0]} 00:00:00`,
|
||||
`${dateRangeDisplay.value[1]} 23:59:59`
|
||||
]
|
||||
}
|
||||
|
||||
const res = await getPointRecordPage(params)
|
||||
if (res.data) {
|
||||
pointRecords.value = res.data.list || []
|
||||
recordsPagination.total = res.data.total || 0
|
||||
@@ -95,8 +139,46 @@ async function fetchPointRecords() {
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选条件变化
|
||||
function handleFilterChange() {
|
||||
recordsPagination.current = 1
|
||||
fetchPointRecords()
|
||||
}
|
||||
|
||||
// 日期选择处理
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function handleDateSelect(value: any) {
|
||||
if (value?.start && value?.end) {
|
||||
selectedDateRange.value = value
|
||||
dateRangeDisplay.value = [
|
||||
`${value.start.year}-${String(value.start.month).padStart(2, '0')}-${String(value.start.day).padStart(2, '0')}`,
|
||||
`${value.end.year}-${String(value.end.month).padStart(2, '0')}-${String(value.end.day).padStart(2, '0')}`
|
||||
]
|
||||
datePickerOpen.value = false
|
||||
recordsPagination.current = 1
|
||||
fetchPointRecords()
|
||||
}
|
||||
}
|
||||
|
||||
// 重置筛选
|
||||
function resetFilter() {
|
||||
filterType.value = 'all'
|
||||
filterBizType.value = 'all'
|
||||
selectedDateRange.value = undefined
|
||||
dateRangeDisplay.value = []
|
||||
recordsPagination.current = 1
|
||||
fetchPointRecords()
|
||||
}
|
||||
|
||||
// 检查是否有筛选条件
|
||||
const hasFilter = computed(() => {
|
||||
return (filterType.value && filterType.value !== 'all') ||
|
||||
(filterBizType.value && filterBizType.value !== 'all') ||
|
||||
dateRangeDisplay.value?.length === 2
|
||||
})
|
||||
|
||||
// 分页变化
|
||||
function handlePageChange(page) {
|
||||
function handlePageChange(page: number) {
|
||||
recordsPagination.current = page
|
||||
fetchPointRecords()
|
||||
}
|
||||
@@ -107,7 +189,7 @@ const totalPages = computed(() => {
|
||||
})
|
||||
|
||||
// 格式化积分记录时间
|
||||
function formatRecordTime(dateStr) {
|
||||
function formatRecordTime(dateStr?: string) {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
@@ -119,31 +201,22 @@ function formatRecordTime(dateStr) {
|
||||
}
|
||||
|
||||
// 获取业务类型显示名称
|
||||
function getBizTypeName(bizType) {
|
||||
const typeMap = {
|
||||
function getBizTypeName(bizType?: string) {
|
||||
const typeMap: Record<string, string> = {
|
||||
'signin': '签到',
|
||||
'recharge': '充值',
|
||||
'exchange': '兑换',
|
||||
'admin': '后台调整',
|
||||
'gift': '礼包赠送',
|
||||
'dify_chat': 'AI文案',
|
||||
'redeem': '获得积分',
|
||||
'digital_human': '数字人',
|
||||
'voice_tts': '语音克隆',
|
||||
'tikhub_fetch': '数据采集',
|
||||
'forecast_rewrite': '文案改写',
|
||||
'benchmark_analyze': '对标分析'
|
||||
}
|
||||
return typeMap[bizType] || bizType || '其他'
|
||||
}
|
||||
|
||||
// 获取状态显示
|
||||
function getStatusInfo(status) {
|
||||
const statusMap = {
|
||||
'pending': { text: '处理中', color: 'orange' },
|
||||
'confirmed': { text: '已完成', color: 'green' },
|
||||
'canceled': { text: '已取消', color: 'default' }
|
||||
}
|
||||
return statusMap[status] || { text: status, color: 'default' }
|
||||
return typeMap[bizType || ''] || bizType || '其他'
|
||||
}
|
||||
|
||||
// 兑换码兑换
|
||||
@@ -160,10 +233,9 @@ async function handleRedeem() {
|
||||
toast.success('兑换成功，积分已到账')
|
||||
showRedeemDialog.value = false
|
||||
redeemCodeInput.value = ''
|
||||
// 刷新用户信息和积分记录
|
||||
await userStore.fetchUserProfile()
|
||||
await fetchPointRecords()
|
||||
} catch (e) {
|
||||
} catch (e: any) {
|
||||
const msg = e?.response?.data?.msg || e?.message || '兑换失败'
|
||||
toast.error(msg)
|
||||
} finally {
|
||||
@@ -173,182 +245,264 @@ async function handleRedeem() {
|
||||
|
||||
onMounted(async () => {
|
||||
if (userStore.isLoggedIn) {
|
||||
// 获取用户基本信息和档案信息
|
||||
if (!userStore.mobile) {
|
||||
await userStore.fetchUserInfo()
|
||||
}
|
||||
if (!userStore.profile) {
|
||||
await userStore.fetchUserProfile()
|
||||
}
|
||||
// 获取积分记录
|
||||
await fetchPointRecords()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-container">
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<div class="p-4 sm:p-6 mx-auto max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6">
|
||||
<!-- 左侧：用户信息卡片 -->
|
||||
<div class="lg:col-span-4">
|
||||
<div class="user-card">
|
||||
<div class="user-info-header">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="bg-card rounded-2xl shadow-sm p-6">
|
||||
<!-- 头像区域 -->
|
||||
<div class="flex flex-col items-center py-6">
|
||||
<div class="mb-4 relative">
|
||||
<img
|
||||
v-if="userStore.displayAvatar"
|
||||
class="user-avatar"
|
||||
class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover border-4 border-primary/10"
|
||||
:src="userStore.displayAvatar"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div v-else class="user-avatar-placeholder">
|
||||
<div v-else class="w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white text-3xl sm:text-4xl font-semibold border-4 border-blue-500/10">
|
||||
{{ userStore.displayName?.charAt(0) || 'U' }}
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="user-name">{{ userStore.displayName }}</h2>
|
||||
<div class="user-role-badge">普通用户</div>
|
||||
<h2 class="text-lg sm:text-xl font-semibold text-foreground mb-3">{{ userStore.displayName }}</h2>
|
||||
<span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs font-medium">
|
||||
普通用户
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
<!-- 分割线 -->
|
||||
<div class="h-px bg-border my-4"></div>
|
||||
|
||||
<div class="user-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">注册时间</span>
|
||||
<span class="detail-value">{{ formatDate(userStore.profile?.registerTime || userStore.profile?.createTime) }}</span>
|
||||
<!-- 用户详情 -->
|
||||
<div class="py-4 space-y-3">
|
||||
<div class="flex justify-between items-center py-3 border-b border-border last:border-0">
|
||||
<span class="text-muted-foreground text-sm">注册时间</span>
|
||||
<span class="text-foreground font-medium text-sm">{{ formatDate(userStore.profile?.registerTime || userStore.profile?.createTime) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">绑定手机</span>
|
||||
<span class="detail-value">{{ maskMobile(userStore.mobile || userStore.profile?.mobile) }}</span>
|
||||
<div class="flex justify-between items-center py-3 border-b border-border last:border-0">
|
||||
<span class="text-muted-foreground text-sm">绑定手机</span>
|
||||
<span class="text-foreground font-medium text-sm">{{ maskMobile(userStore.mobile || userStore.profile?.mobile) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：资源统计与活动 -->
|
||||
<div class="lg:col-span-8">
|
||||
<div class="lg:col-span-8 space-y-6">
|
||||
<!-- 资源概览卡片 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
|
||||
<!-- 兑换码充值 -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon-wrapper green">
|
||||
<Icon icon="lucide:gift" class="text-2xl" />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">兑换码充值</div>
|
||||
<div class="stat-value" style="font-size: 16px;">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="showRedeemDialog = true"
|
||||
>
|
||||
输入兑换码
|
||||
</Button>
|
||||
</div>
|
||||
<div class="stat-desc">使用兑换码获取积分</div>
|
||||
<div class="bg-card rounded-xl shadow-sm p-4 sm:p-5 hover:-translate-y-0.5 hover:shadow-md transition-all duration-200">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center mb-3 sm:mb-4">
|
||||
<Icon icon="lucide:gift" class="text-xl sm:text-2xl" />
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground mb-2">兑换码充值</div>
|
||||
<Button variant="outline" size="sm" class="text-xs sm:text-sm" @click="showRedeemDialog = true">
|
||||
输入兑换码
|
||||
</Button>
|
||||
<div class="text-xs text-muted-foreground mt-2">使用兑换码获取积分</div>
|
||||
</div>
|
||||
|
||||
<!-- 剩余积分 -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon-wrapper purple">
|
||||
<Icon icon="lucide:wallet" class="text-2xl" />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">剩余积分</div>
|
||||
<div class="stat-value">{{ formatCredits(userStore.remainingPoints) }}</div>
|
||||
<div class="stat-desc">用于生成消耗</div>
|
||||
<div class="bg-card rounded-xl shadow-sm p-4 sm:p-5 hover:-translate-y-0.5 hover:shadow-md transition-all duration-200">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-purple-500/10 text-purple-500 flex items-center justify-center mb-3 sm:mb-4">
|
||||
<Icon icon="lucide:wallet" class="text-xl sm:text-2xl" />
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground mb-1">剩余积分</div>
|
||||
<div class="text-xl sm:text-2xl font-bold text-foreground mb-1">{{ formatCredits(userStore.remainingPoints) }}</div>
|
||||
<div class="text-xs text-muted-foreground">用于生成消耗</div>
|
||||
</div>
|
||||
|
||||
<!-- 账户余额 -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon-wrapper orange">
|
||||
<Icon icon="lucide:coins" class="text-2xl" />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">账户余额</div>
|
||||
<div class="stat-value">¥{{ formatMoney(userStore.totalRecharge) }}</div>
|
||||
<div class="stat-desc">累计充值金额</div>
|
||||
<div class="bg-card rounded-xl shadow-sm p-4 sm:p-5 hover:-translate-y-0.5 hover:shadow-md transition-all duration-200">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-orange-500/10 text-orange-500 flex items-center justify-center mb-3 sm:mb-4">
|
||||
<Icon icon="lucide:coins" class="text-xl sm:text-2xl" />
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground mb-1">账户余额</div>
|
||||
<div class="text-xl sm:text-2xl font-bold text-foreground mb-1">¥{{ formatMoney(userStore.totalRecharge) }}</div>
|
||||
<div class="text-xs text-muted-foreground">累计充值金额</div>
|
||||
</div>
|
||||
|
||||
<!-- 存储空间 -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon-wrapper blue">
|
||||
<Icon icon="lucide:database" class="text-2xl" />
|
||||
<div class="bg-card rounded-xl shadow-sm p-4 sm:p-5 hover:-translate-y-0.5 hover:shadow-md transition-all duration-200">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-blue-500/10 text-blue-500 flex items-center justify-center mb-3 sm:mb-4">
|
||||
<Icon icon="lucide:database" class="text-xl sm:text-2xl" />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">存储空间</div>
|
||||
<div class="stat-value">{{ formatStorage(usedStorage) }} <span class="stat-unit">/ {{ formatStorage(totalStorage) }}</span></div>
|
||||
<Progress :value="storagePercent" class="stat-progress h-2" />
|
||||
<div class="text-sm text-muted-foreground mb-1">存储空间</div>
|
||||
<div class="text-base sm:text-lg font-bold text-foreground">
|
||||
{{ formatStorage(usedStorage) }}
|
||||
<span class="text-xs sm:text-sm font-normal text-muted-foreground">/ {{ formatStorage(totalStorage) }}</span>
|
||||
</div>
|
||||
<Progress :value="storagePercent" class="h-2 mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 积分记录 -->
|
||||
<div class="activity-card mt-6">
|
||||
<div class="activity-header">
|
||||
<h3 class="activity-title">积分记录</h3>
|
||||
<span class="record-count">共 {{ recordsPagination.total }} 条记录</span>
|
||||
<div class="bg-card rounded-xl shadow-sm flex flex-col h-[480px]">
|
||||
<!-- 标题栏 -->
|
||||
<div class="flex items-center justify-between px-4 sm:px-5 py-3 border-b border-border shrink-0">
|
||||
<h3 class="text-base font-semibold text-foreground">积分记录</h3>
|
||||
<span class="text-xs sm:text-sm text-muted-foreground">共 {{ recordsPagination.total }} 条</span>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="flex flex-wrap items-center gap-2 px-4 sm:px-5 py-2.5 border-b border-border shrink-0 bg-muted/30">
|
||||
<!-- 变动类型 -->
|
||||
<Select v-model="filterType" @update:model-value="handleFilterChange">
|
||||
<SelectTrigger class="h-8 w-[90px] text-xs">
|
||||
<SelectValue placeholder="变动" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<!-- 业务类型 -->
|
||||
<Select v-model="filterBizType" @update:model-value="handleFilterChange">
|
||||
<SelectTrigger class="h-8 w-[100px] text-xs">
|
||||
<SelectValue placeholder="类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="opt in bizTypeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<!-- 日期范围 -->
|
||||
<Popover v-model:open="datePickerOpen">
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="h-8 w-[180px] justify-start text-xs font-normal">
|
||||
<Icon icon="lucide:calendar" class="mr-1.5 size-3.5" />
|
||||
<template v-if="dateRangeDisplay?.length === 2">
|
||||
{{ dateRangeDisplay[0] }} ~ {{ dateRangeDisplay[1] }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-muted-foreground">选择日期</span>
|
||||
</template>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-0" align="start">
|
||||
<RangeCalendar
|
||||
v-model="selectedDateRange"
|
||||
:number-of-months="2"
|
||||
locale="zh-CN"
|
||||
@update:model-value="handleDateSelect"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<!-- 重置按钮 -->
|
||||
<Button
|
||||
v-if="hasFilter"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-8 px-2 text-xs"
|
||||
@click="resetFilter"
|
||||
>
|
||||
<Icon icon="lucide:x" class="mr-1 size-3" />
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="recordsLoading" class="loading-state">
|
||||
<span class="custom-spinner"></span>
|
||||
<div v-if="recordsLoading" class="flex-1 flex items-center justify-center gap-3 text-muted-foreground">
|
||||
<span class="w-5 h-5 border-2 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></span>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<!-- 积分记录列表 -->
|
||||
<div v-else-if="pointRecords.length > 0" class="point-record-list">
|
||||
<!-- 积分记录列表 - 可滚动区域 -->
|
||||
<div v-else-if="pointRecords.length > 0" class="flex-1 overflow-y-auto px-4 sm:px-5 scroll-smooth [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/30">
|
||||
<div
|
||||
v-for="item in pointRecords"
|
||||
:key="item.id"
|
||||
class="record-item"
|
||||
class="flex items-center justify-between py-2.5 border-b border-border last:border-0"
|
||||
>
|
||||
<div class="record-left">
|
||||
<div :class="['record-icon', item.type === 'increase' ? 'increase' : 'decrease']">
|
||||
<Icon v-if="item.type === 'increase'" icon="lucide:plus" />
|
||||
<Icon v-else icon="lucide:minus" />
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<div :class="[
|
||||
'w-8 h-8 rounded-full flex items-center justify-center shrink-0',
|
||||
item.type === 'increase' ? 'bg-green-500/10 text-green-500' : 'bg-red-500/10 text-red-500'
|
||||
]">
|
||||
<Icon v-if="item.type === 'increase'" icon="lucide:plus" class="text-sm" />
|
||||
<Icon v-else icon="lucide:minus" class="text-sm" />
|
||||
</div>
|
||||
<div class="record-info">
|
||||
<div class="record-reason">{{ getBizTypeName(item.bizType) }}</div>
|
||||
<div class="record-time">{{ formatRecordTime(item.createTime) }}</div>
|
||||
<div class="flex flex-col gap-0.5 min-w-0">
|
||||
<div class="font-medium text-foreground text-sm truncate">{{ getBizTypeName(item.bizType) }}</div>
|
||||
<div class="text-xs text-muted-foreground">{{ formatRecordTime(item.createTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['record-amount', item.type === 'increase' ? 'increase' : 'decrease']">
|
||||
<div :class="[
|
||||
'text-base font-semibold shrink-0 ml-2',
|
||||
item.type === 'increase' ? 'text-green-500' : 'text-red-500'
|
||||
]">
|
||||
{{ item.type === 'increase' ? '+' : '-' }}{{ Math.abs(item.pointAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="recordsPagination.total > recordsPagination.pageSize" class="record-pagination">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="recordsPagination.current === 1"
|
||||
@click="handlePageChange(recordsPagination.current - 1)"
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<span class="page-info">
|
||||
{{ recordsPagination.current }} / {{ totalPages }}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="recordsPagination.current >= totalPages"
|
||||
@click="handlePageChange(recordsPagination.current + 1)"
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<Icon icon="lucide:clock" class="empty-icon" />
|
||||
<p>暂无积分记录</p>
|
||||
<div v-else class="flex-1 flex flex-col items-center justify-center text-muted-foreground">
|
||||
<Icon icon="lucide:clock" class="text-4xl mb-3 opacity-50" />
|
||||
<p class="text-sm">暂无积分记录</p>
|
||||
</div>
|
||||
|
||||
<!-- 分页 - 固定底部 -->
|
||||
<div
|
||||
v-if="!recordsLoading && pointRecords.length > 0 && recordsPagination.total > recordsPagination.pageSize"
|
||||
class="flex items-center justify-center gap-1 px-4 sm:px-5 py-2.5 border-t border-border shrink-0 bg-card rounded-b-xl"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 px-2 text-xs"
|
||||
:disabled="recordsPagination.current === 1"
|
||||
@click="handlePageChange(1)"
|
||||
>
|
||||
首页
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 w-7 p-0"
|
||||
:disabled="recordsPagination.current === 1"
|
||||
@click="handlePageChange(recordsPagination.current - 1)"
|
||||
>
|
||||
<Icon icon="lucide:chevron-left" class="text-base" />
|
||||
</Button>
|
||||
<span class="text-sm text-muted-foreground min-w-[50px] text-center tabular-nums">
|
||||
{{ recordsPagination.current }} / {{ totalPages }}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 w-7 p-0"
|
||||
:disabled="recordsPagination.current >= totalPages"
|
||||
@click="handlePageChange(recordsPagination.current + 1)"
|
||||
>
|
||||
<Icon icon="lucide:chevron-right" class="text-base" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 px-2 text-xs"
|
||||
:disabled="recordsPagination.current >= totalPages"
|
||||
@click="handlePageChange(totalPages)"
|
||||
>
|
||||
尾页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -384,326 +538,3 @@ onMounted(async () => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
padding: var(--space-6);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
text-align: center;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
background: var(--card);
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.user-info-header {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid rgba(var(--primary-color-rgb, 24, 144, 255), 0.1);
|
||||
}
|
||||
|
||||
.user-avatar-placeholder {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
border: 4px solid rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.user-role-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--foreground);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Stat Cards */
|
||||
.stat-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
||||
background: var(--card);
|
||||
padding: 20px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat-icon-wrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-icon-wrapper.blue {
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.stat-icon-wrapper.purple {
|
||||
background: rgba(114, 46, 209, 0.1);
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.stat-icon-wrapper.orange {
|
||||
background: rgba(250, 173, 20, 0.1);
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.stat-icon-wrapper.green {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: var(--muted-foreground);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.stat-desc {
|
||||
font-size: 12px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.stat-progress {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px 0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.custom-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(24, 144, 255, 0.2);
|
||||
border-top-color: #1890ff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Point Record List */
|
||||
.activity-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
||||
background: var(--card);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.activity-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.record-count {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.point-record-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.record-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.record-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.record-icon.increase {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.record-icon.decrease {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.record-reason {
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 12px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.record-amount.increase {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.record-amount.decrease {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.record-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 14px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user