710 lines
17 KiB
Vue
710 lines
17 KiB
Vue
<script setup>
|
||
import { computed, onMounted, ref, reactive } from 'vue'
|
||
import { Icon } from '@iconify/vue'
|
||
import { toast } from 'vue-sonner'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { getPointRecordPage } from '@/api/pointRecord'
|
||
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 {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
DialogDescription
|
||
} from '@/components/ui/dialog'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
// 兑换码相关
|
||
const showRedeemDialog = ref(false)
|
||
const redeemCodeInput = ref('')
|
||
const redeeming = ref(false)
|
||
|
||
// 积分记录数据
|
||
const pointRecords = ref([])
|
||
const recordsLoading = ref(false)
|
||
const recordsPagination = reactive({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
})
|
||
|
||
// 存储空间数据
|
||
const GB_TO_MB = 1024
|
||
const totalStorage = computed(() => userStore.totalStorage * GB_TO_MB)
|
||
const usedStorage = computed(() => userStore.usedStorage * GB_TO_MB)
|
||
const storagePercent = computed(() => {
|
||
if (totalStorage.value === 0) return 0
|
||
return Math.min(100, (usedStorage.value / totalStorage.value) * 100)
|
||
})
|
||
|
||
// 格式化函数
|
||
function formatStorage(mb) {
|
||
if (mb >= 1024) {
|
||
return (mb / 1024).toFixed(1) + ' GB'
|
||
}
|
||
return Math.round(mb) + ' MB'
|
||
}
|
||
|
||
function formatMoney(amount) {
|
||
return amount?.toFixed(2) || '0.00'
|
||
}
|
||
|
||
function formatCredits(credits) {
|
||
return credits?.toLocaleString() || '0'
|
||
}
|
||
|
||
// 格式化日期
|
||
function formatDate(dateStr) {
|
||
if (!dateStr) return '未设置'
|
||
const date = new Date(dateStr)
|
||
return date.toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit'
|
||
}).replace(/\//g, '-')
|
||
}
|
||
|
||
// 脱敏手机号
|
||
function maskMobile(mobile) {
|
||
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({
|
||
pageNo: recordsPagination.current,
|
||
pageSize: recordsPagination.pageSize,
|
||
status: 'confirmed'
|
||
})
|
||
if (res.data) {
|
||
pointRecords.value = res.data.list || []
|
||
recordsPagination.total = res.data.total || 0
|
||
}
|
||
} catch (e) {
|
||
console.error('获取积分记录失败:', e)
|
||
} finally {
|
||
recordsLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 分页变化
|
||
function handlePageChange(page) {
|
||
recordsPagination.current = page
|
||
fetchPointRecords()
|
||
}
|
||
|
||
// 计算总页数
|
||
const totalPages = computed(() => {
|
||
return Math.ceil(recordsPagination.total / recordsPagination.pageSize)
|
||
})
|
||
|
||
// 格式化积分记录时间
|
||
function formatRecordTime(dateStr) {
|
||
if (!dateStr) return ''
|
||
const date = new Date(dateStr)
|
||
return date.toLocaleString('zh-CN', {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})
|
||
}
|
||
|
||
// 获取业务类型显示名称
|
||
function getBizTypeName(bizType) {
|
||
const typeMap = {
|
||
'signin': '签到',
|
||
'recharge': '充值',
|
||
'exchange': '兑换',
|
||
'admin': '后台调整',
|
||
'gift': '礼包赠送',
|
||
'dify_chat': 'AI文案',
|
||
'digital_human': '数字人',
|
||
'voice_tts': '语音克隆',
|
||
'tikhub_fetch': '数据采集',
|
||
'forecast_rewrite': '文案改写'
|
||
}
|
||
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' }
|
||
}
|
||
|
||
// 兑换码兑换
|
||
async function handleRedeem() {
|
||
const code = redeemCodeInput.value.trim()
|
||
if (!code) {
|
||
toast.error('请输入兑换码')
|
||
return
|
||
}
|
||
|
||
redeeming.value = true
|
||
try {
|
||
await redeemCodeApi(code)
|
||
toast.success('兑换成功，积分已到账')
|
||
showRedeemDialog.value = false
|
||
redeemCodeInput.value = ''
|
||
// 刷新用户信息和积分记录
|
||
await userStore.fetchUserProfile()
|
||
await fetchPointRecords()
|
||
} catch (e) {
|
||
const msg = e?.response?.data?.msg || e?.message || '兑换失败'
|
||
toast.error(msg)
|
||
} finally {
|
||
redeeming.value = false
|
||
}
|
||
}
|
||
|
||
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="lg:col-span-4">
|
||
<div class="user-card">
|
||
<div class="user-info-header">
|
||
<div class="avatar-wrapper">
|
||
<img
|
||
v-if="userStore.displayAvatar"
|
||
class="user-avatar"
|
||
:src="userStore.displayAvatar"
|
||
alt="avatar"
|
||
/>
|
||
<div v-else class="user-avatar-placeholder">
|
||
{{ userStore.displayName?.charAt(0) || 'U' }}
|
||
</div>
|
||
</div>
|
||
<h2 class="user-name">{{ userStore.displayName }}</h2>
|
||
<div class="user-role-badge">普通用户</div>
|
||
</div>
|
||
|
||
<div class="divider"></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>
|
||
<div class="detail-item">
|
||
<span class="detail-label">绑定手机</span>
|
||
<span class="detail-value">{{ maskMobile(userStore.mobile || userStore.profile?.mobile) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：资源统计与活动 -->
|
||
<div class="lg:col-span-8">
|
||
<!-- 资源概览卡片 -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<!-- 存储空间 -->
|
||
<div class="stat-card">
|
||
<div class="stat-icon-wrapper blue">
|
||
<Icon icon="lucide:database" class="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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
|
||
<!-- 兑换码充值 -->
|
||
<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>
|
||
</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>
|
||
|
||
<!-- 加载状态 -->
|
||
<div v-if="recordsLoading" class="loading-state">
|
||
<span class="custom-spinner"></span>
|
||
<span>加载中...</span>
|
||
</div>
|
||
|
||
<!-- 积分记录列表 -->
|
||
<div v-else-if="pointRecords.length > 0" class="point-record-list">
|
||
<div
|
||
v-for="item in pointRecords"
|
||
:key="item.id"
|
||
class="record-item"
|
||
>
|
||
<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>
|
||
<div class="record-info">
|
||
<div class="record-reason">{{ getBizTypeName(item.bizType) }}</div>
|
||
<div class="record-time">{{ formatRecordTime(item.createTime) }}</div>
|
||
</div>
|
||
</div>
|
||
<div :class="['record-amount', item.type === 'increase' ? 'increase' : 'decrease']">
|
||
{{ 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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 兑换码弹窗 -->
|
||
<Dialog v-model:open="showRedeemDialog">
|
||
<DialogContent class="sm:max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>兑换码充值</DialogTitle>
|
||
<DialogDescription>
|
||
输入您的兑换码，积分将立即到账
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div class="py-4">
|
||
<Input
|
||
v-model="redeemCodeInput"
|
||
placeholder="请输入兑换码"
|
||
class="w-full"
|
||
@keyup.enter="handleRedeem"
|
||
/>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" @click="showRedeemDialog = false">
|
||
取消
|
||
</Button>
|
||
<Button @click="handleRedeem" :disabled="redeeming">
|
||
{{ redeeming ? '兑换中...' : '立即兑换' }}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.profile-container {
|
||
padding: var(--space-6);
|
||
max-width: 1200px;
|
||
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>
|