zfc/guzhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增用户中心估值记录、对公转账、发票管理和侧边栏组件，并重构用户中心页面。

Browse Source
This commit is contained in:
Wei_佳 2025-11-19 14:39:07 +08:00
parent 26701c25cf
commit 62354c9e23
6 changed files with 1070 additions and 606 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web1/src/router/routes/index.js
View File

@ -22,10 +22,37 @@ export const basicRoutes = [
name: 'UserCenter',
path: '/user-center',
component: () => import('@/views/user-center/index.vue'),
redirect: '/user-center/history',
isHidden: true,
meta: {
title: '个人中心',
},
children: [
{
name: 'ValuationHistory',
path: 'history',
component: () => import('@/views/user-center/components/ValuationHistory.vue'),
meta: {
title: '估值记录',
},
},
{
name: 'CorporateTransfer',
path: 'transfer',
component: () => import('@/views/user-center/components/CorporateTransfer.vue'),
meta: {
title: '对公转账',
},
},
{
name: 'InvoiceManagement',
path: 'invoice',
component: () => import('@/views/user-center/components/InvoiceManagement.vue'),
meta: {
title: '开票管理',
},
},
],
},
{
name: 'InvoiceHeaderAdd',

532
web1/src/views/user-center/components/CorporateTransfer.vue Normal file
View File

@ -0,0 +1,532 @@
<template>
<div class="content-section">
<div class="transfer-container">
<!-- 步骤条 -->
<div class="steps">
<div class="step" :class="{ active: currentStep >= 1 }">
<div class="step-number">1</div>
<div class="step-label">对公汇款</div>
</div>
<div class="step-line" :class="{ active: currentStep >= 2 }"></div>
<div class="step" :class="{ active: currentStep >= 2 }">
<div class="step-number">2</div>
<div class="step-label">上传凭证</div>
</div>
<div class="step-line" :class="{ active: currentStep >= 3 }"></div>
<div class="step" :class="{ active: currentStep >= 3 }">
<div class="step-number">3</div>
<div class="step-label">等待到账</div>
</div>
</div>
<!-- 第一步：转账信息 -->
<div v-if="currentStep === 1" class="transfer-info">
<div class="info-title">第一步</div>
<div class="info-content">
<div class="info-row">
<span class="label">评估收费标准：</span>
<span class="value highlight">6000元/次</span>
</div>
<div class="info-row">
<span class="label">请汇款以下账户：</span>
</div>
<div class="info-row">
<span class="label">公司名称：</span>
<span class="value">成都文化产权交易所有限公司</span>
</div>
<div class="info-row">
<span class="label">税号：</span>
<span class="value">91510104586429590T</span>
</div>
<div class="info-row">
<span class="label">注册地址：</span>
<span class="value">成都市锦江区工业园区三色路38号</span>
</div>
<div class="info-row">
<span class="label">开户行：</span>
<span class="value">中国民生银行股份有限公司成都科华支行</span>
</div>
<div class="info-row">
<span class="label">开户账号：</span>
<span class="value">6343 8264 7</span>
</div>
<div class="info-row">
<span class="label">电话：</span>
<span class="value">(028) 85915289</span>
</div>
</div>
<n-button class="next-btn" @click="handleNextStep">
下一步
</n-button>
</div>
<!-- 第二步：上传凭证 -->
<div v-if="currentStep === 2" class="upload-section">
<div class="info-title">第二步：</div>
<div class="upload-form">
<!-- 上传支付凭证 -->
<div class="form-item">
<div class="form-label">上传支付凭证：</div>
<div class="upload-area" @click="triggerFileInput">
<input
ref="fileInput"
type="file"
accept="image/*"
style="display: none"
@change="handleFileChange"
/>
<div v-if="!uploadedFile" class="upload-placeholder">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M5 12H19" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
</svg>
<div class="upload-hint">仅支持图片格式</div>
</div>
<div v-else class="upload-preview">
<img :src="uploadedFileUrl" alt="支付凭证" />
<div class="upload-remove" @click.stop="removeFile">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</div>
</div>
</div>
<!-- 开票抬头 -->
<div class="form-item">
<div class="form-label">开票抬头：</div>
<n-select
v-model:value="selectedInvoiceHeader"
:options="invoiceHeaderOptions"
placeholder="请选择开票抬头"
/>
</div>
<!-- 开票类型 -->
<div class="form-item">
<div class="form-label">开票类型：</div>
<n-select
v-model:value="selectedInvoiceType"
:options="invoiceTypeOptions"
placeholder="请选择开票类型"
/>
</div>
<!-- 上传按钮 -->
<n-button
class="upload-btn"
:disabled="!uploadedFile || !selectedInvoiceHeader || !selectedInvoiceType"
@click="handleUploadSubmit"
>
上传
</n-button>
</div>
</div>
<!-- 第三步：等待到账 -->
<div v-if="currentStep === 3" class="success-section">
<div class="success-message">
<div class="success-title">上传成功！预计N个小时内到账</div>
<div class="success-subtitle">请耐心等待</div>
</div>
<n-button class="return-btn" @click="handleReturnHome">
返回首页
</n-button>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['return-home'])
// 当前步骤
const currentStep = ref(1)
// 文件上传相关
const fileInput = ref(null)
const uploadedFile = ref(null)
const uploadedFileUrl = ref('')
// 表单选择相关
const selectedInvoiceHeader = ref(null)
const selectedInvoiceType = ref(null)
// 开票抬头选项
const invoiceHeaderOptions = ref([
{ label: '抬头1', value: 'header1' },
{ label: '抬头2', value: 'header2' },
{ label: '抬头3', value: 'header3' }
])
// 开票类型选项
const invoiceTypeOptions = ref([
{ label: '普通发票', value: 'normal' },
{ label: '增值税专用发票', value: 'vat' }
])
// 下一步
function handleNextStep() {
if (currentStep.value < 3) {
currentStep.value++
}
}
// 触发文件选择
function triggerFileInput() {
fileInput.value?.click()
}
// 处理文件选择
function handleFileChange(event) {
const file = event.target.files?.[0]
if (file) {
// 验证文件类型
if (!file.type.startsWith('image/')) {
$message.warning('请上传图片格式的文件')
return
}
uploadedFile.value = file
uploadedFileUrl.value = URL.createObjectURL(file)
}
}
// 移除文件
function removeFile() {
uploadedFile.value = null
uploadedFileUrl.value = ''
if (fileInput.value) {
fileInput.value.value = ''
}
}
// 提交上传
function handleUploadSubmit() {
if (!uploadedFile.value || !selectedInvoiceHeader.value || !selectedInvoiceType.value) {
$message.warning('请完成所有必填项')
return
}
// 这里可以调用API上传文件
// 暂时直接进入下一步
$message.success('上传成功')
currentStep.value = 3
}
// 返回首页
function handleReturnHome() {
emit('return-home')
}
// 重置步骤
function resetStep() {
currentStep.value = 1
}
defineExpose({
resetStep
})
</script>
<style scoped>
.content-section {
background: white;
border-radius: 8px;
padding: 24px;
min-height: calc(100vh - 40px);
position: relative;
margin-top: 50px;
}
.transfer-container {
max-width: 800px;
margin: 0 auto;
}
.steps {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #EEEEEE;
color: #909399;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
}
.step.active .step-number {
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
color: white;
}
.step-label {
font-size: 14px;
color: #909399;
}
.step.active .step-label {
color: #303133;
font-weight: 500;
}
.step-line {
width: 100px;
height: 2px;
background: #EEEEEE;
margin: 0 16px;
transition: all 0.3s ease;
}
.step-line.active {
background: #A30113;
}
.transfer-info {
background: #F5F7FA;
border-radius: 8px;
padding: 24px;
border: 1px solid #EEEEEE;
}
.info-title {
font-size: 18px;
font-weight: 600;
color: #303133;
margin-bottom: 20px;
padding-left: 12px;
border-left: 4px solid #A30113;
}
.info-content {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.info-row {
display: flex;
font-size: 14px;
line-height: 1.8;
}
.info-row .label {
color: #606266;
min-width: 120px;
}
.info-row .value {
color: #303133;
flex: 1;
}
.info-row .value.highlight {
color: #A30113;
font-weight: 600;
}
.next-btn {
width: 180px;
height: 40px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: #A30113;
color: white;
border-radius: 4px;
border: none;
}
.next-btn:hover,
.next-btn:focus,
.next-btn:active {
background: #A30113;
opacity: 1;
}
/* 第二步：上传凭证 */
.upload-section {
background: #F5F7FA;
border-radius: 8px;
padding: 24px;
border: 1px solid #EEEEEE;
}
.upload-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-item {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-label {
font-size: 14px;
color: #606266;
font-weight: 500;
}
.upload-area {
width: 100%;
max-width: 400px;
height: 200px;
border: 2px dashed #DCDFE6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
background: white;
position: relative;
overflow: hidden;
}
.upload-area:hover {
border-color: #4A90E2;
background: #F5F9FF;
}
.upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.upload-hint {
font-size: 12px;
color: #909399;
}
.upload-preview {
width: 100%;
height: 100%;
position: relative;
}
.upload-preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.upload-remove {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.upload-remove:hover {
background: rgba(0, 0, 0, 0.7);
transform: scale(1.1);
}
.upload-btn {
width: 180px;
height: 40px;
margin: 20px auto 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: #A30113;
color: white;
border: none;
}
.upload-btn:disabled {
background: #fab6b6;
cursor: not-allowed;
opacity: 0.7;
}
.upload-btn:not(:disabled):hover,
.upload-btn:not(:disabled):focus,
.upload-btn:not(:disabled):active {
background: #A30113;
opacity: 1;
}
/* 第三步：等待到账 */
.success-section {
background: #F5F7FA;
border-radius: 8px;
padding: 60px 24px;
border: 1px solid #EEEEEE;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.success-message {
text-align: center;
}
.success-title {
font-size: 18px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
}
.success-subtitle {
font-size: 14px;
color: #606266;
}
.return-btn {
width: 180px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: #A30113;
color: white;
border: none;
}
.return-btn:hover,
.return-btn:focus,
.return-btn:active {
background: #A30113;
opacity: 1;
}
</style>

157
web1/src/views/user-center/components/InvoiceManagement.vue Normal file
View File

@ -0,0 +1,157 @@
<template>
<div class="content-section">
<div class="invoice-container">
<div class="add-card" @click="handleAddInvoice">
<div class="add-text">添加</div>
</div>
<div class="invoice-list">
<div
v-for="invoice in invoiceList"
:key="invoice.id"
class="invoice-card"
>
<div class="invoice-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="18" height="18" rx="2" stroke="#909399" stroke-width="2"/>
<path d="M8 12H16M8 16H13" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<div class="invoice-info">
<div class="invoice-name">{{ invoice.name }}</div>
<div class="invoice-status">{{ invoice.status }}</div>
</div>
<div class="invoice-action" @click="handleDeleteInvoice(invoice)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
invoiceList: {
type: Array,
default: () => []
}
})
const emit = defineEmits(['add-invoice', 'delete-invoice'])
// 添加开票
function handleAddInvoice() {
router.push('/invoice-header/add')
}
// 删除开票
function handleDeleteInvoice(invoice) {
$message.info('删除开票功能开发中')
}
</script>
<style scoped>
.content-section {
background: white;
border-radius: 8px;
padding: 24px;
min-height: calc(100vh - 40px);
position: relative;
margin-top: 50px;
}
.invoice-container {
max-width: 1000px;
}
.add-card {
position: absolute;
top: 24px;
right: 24px;
width: 80px;
height: 32px;
background: #A30113;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.add-card:hover {
background: #880C22;
}
.add-text {
color: white;
font-size: 14px;
}
.invoice-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-top: 60px;
}
.invoice-card {
background: #F5F7FA;
border-radius: 8px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
transition: all 0.3s ease;
border: 1px solid #EEEEEE;
}
.invoice-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
border-color: #A30113;
}
.invoice-icon {
flex-shrink: 0;
}
.invoice-info {
flex: 1;
}
.invoice-name {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 4px;
}
.invoice-status {
font-size: 12px;
color: #909399;
}
.invoice-action {
cursor: pointer;
padding: 8px;
border-radius: 4px;
transition: all 0.3s ease;
}
.invoice-action:hover {
background: rgba(163, 1, 19, 0.1);
}
@media (max-width: 768px) {
.invoice-list {
grid-template-columns: 1fr;
}
}
</style>

140
web1/src/views/user-center/components/UserSidebar.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<div class="sidebar">
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
<path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<div class="user-phone">{{ userPhone }}</div>
<div class="user-count">累计估值次数: {{ valuationCount }}</div>
</div>
<!-- 菜单列表 -->
<div class="menu-list">
<div
v-for="menu in menuList"
:key="menu.id"
class="menu-item"
:class="{ active: currentMenu === menu.id }"
@click="handleMenuClick(menu)"
>
<component :is="menu.icon" class="menu-icon" />
<span class="menu-text">{{ menu.label }}</span>
<svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
userPhone: {
type: String,
default: ''
},
valuationCount: {
type: Number,
default: 0
},
currentMenu: {
type: String,
required: true
},
menuList: {
type: Array,
default: () => []
}
})
const emit = defineEmits(['menu-click'])
function handleMenuClick(menu) {
emit('menu-click', menu)
}
</script>
<style scoped>
.sidebar {
width: 240px;
background: white;
padding: 20px;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.user-info {
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid #EEEEEE;
margin-bottom: 20px;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
}
.user-phone {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 8px;
}
.user-count {
font-size: 12px;
color: #909399;
}
.menu-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
color: #606266;
}
.menu-item:hover {
background: #F5F7FA;
}
.menu-item.active {
background: rgba(163, 1, 19, 0.08);
color: #A30113;
}
.menu-icon {
width: 20px;
height: 20px;
margin-right: 12px;
}
.menu-text {
flex: 1;
font-size: 14px;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
}
}
</style>

187
web1/src/views/user-center/components/ValuationHistory.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<div class="content-section">
<div class="asset-grid">
<div
v-for="item in assetList"
:key="item.id"
class="asset-card"
>
<div class="asset-header">
<div class="asset-title">资产名称</div>
<div class="asset-status" :class="getStatusClass(item.status)">
{{ getStatusText(item.status) }}
</div>
</div>
<div class="asset-date">{{ formatDate(item.created_at) }}</div>
<div class="asset-actions">
<div class="action-item" @click="handleDownloadReport(item)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>报告</span>
</div>
<div class="action-item" @click="handleDownloadCertificate(item)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>证书</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
assetList: {
type: Array,
default: () => []
}
})
// 格式化日期
function formatDate(dateStr) {
if (!dateStr) return ''
return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
}
// 获取状态文本
function getStatusText(status) {
const statusMap = {
'pending': '审核中',
'approved': '已通过',
'rejected': '已拒绝',
'processing': '评估中'
}
return statusMap[status] || status
}
// 获取状态样式类
function getStatusClass(status) {
return `status-${status}`
}
// 下载报告
function handleDownloadReport(item) {
$message.info('下载报告功能开发中')
}
// 下载证书
function handleDownloadCertificate(item) {
$message.info('下载证书功能开发中')
}
</script>
<style scoped>
.content-section {
background: white;
border-radius: 8px;
padding: 24px;
min-height: calc(100vh - 40px);
position: relative;
margin-top: 50px;
}
.asset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.asset-card {
background: #F5F7FA;
border-radius: 8px;
padding: 16px;
transition: all 0.3s ease;
border: 1px solid #EEEEEE;
}
.asset-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
border-color: #A30113;
}
.asset-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.asset-title {
font-size: 14px;
font-weight: 500;
color: #303133;
}
.asset-date {
font-size: 12px;
color: #909399;
margin-bottom: 12px;
}
.asset-actions {
display: flex;
gap: 8px;
}
.action-item {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: white;
border-radius: 4px;
font-size: 12px;
color: #A30113;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid #EEEEEE;
}
.action-item:hover {
background: #A30113;
color: white;
border-color: #A30113;
}
.action-item:hover svg path {
stroke: white;
}
.asset-status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-pending {
background: #FFF3E0;
color: #F57C00;
}
.status-approved {
background: #E8F5E9;
color: #2E7D32;
}
.status-rejected {
background: #FFEBEE;
color: #C62828;
}
.status-processing {
background: #E3F2FD;
color: #1565C0;
}
@media (max-width: 768px) {
.asset-grid {
grid-template-columns: 1fr;
}
}
</style>

633
web1/src/views/user-center/index.vue
View File

@ -1,36 +1,13 @@
<template>
<div class="user-center-container">
<!-- 左侧边栏 -->
<div class="sidebar">
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
<path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<div class="user-phone">{{ userPhone }}</div>
<div class="user-count">累计估值次数: {{ valuationCount }}</div>
</div>
<!-- 菜单列表 -->
<div class="menu-list">
<div
v-for="menu in menuList"
:key="menu.id"
class="menu-item"
:class="{ active: currentMenu === menu.id }"
@click="handleMenuClick(menu)"
>
<component :is="menu.icon" class="menu-icon" />
<span class="menu-text">{{ menu.label }}</span>
<svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<UserSidebar
:user-phone="userPhone"
:valuation-count="valuationCount"
:current-menu="currentMenu"
:menu-list="menuList"
@menu-click="handleMenuClick"
/>
<!-- 右侧内容区 -->
<div class="content-area">
@ -42,151 +19,33 @@
<span>返回首页</span>
</div>
<!-- 估值记录 -->
<div v-if="currentMenu === 'history'" class="content-section">
<div class="asset-grid">
<div
v-for="item in assetList"
:key="item.id"
class="asset-card"
>
<div class="asset-header">
<div class="asset-title">资产名称</div>
<div class="asset-status" :class="getStatusClass(item.status)">
{{ getStatusText(item.status) }}
</div>
</div>
<div class="asset-date">{{ formatDate(item.created_at) }}</div>
<div class="asset-actions">
<div class="action-item" @click="handleDownloadReport(item)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>报告</span>
</div>
<div class="action-item" @click="handleDownloadCertificate(item)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="#4A90E2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 20H21" stroke="#4A90E2" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>证书</span>
</div>
</div>
</div>
</div>
</div>
<!-- 对公转账 -->
<div v-if="currentMenu === 'transfer'" class="content-section">
<div class="transfer-container">
<!-- 步骤条 -->
<div class="steps">
<div class="step" :class="{ active: currentStep >= 1 }">
<div class="step-number">1</div>
<div class="step-label">对公汇款</div>
</div>
<div class="step-line" :class="{ active: currentStep >= 2 }"></div>
<div class="step" :class="{ active: currentStep >= 2 }">
<div class="step-number">2</div>
<div class="step-label">上传凭证</div>
</div>
<div class="step-line" :class="{ active: currentStep >= 3 }"></div>
<div class="step" :class="{ active: currentStep >= 3 }">
<div class="step-number">3</div>
<div class="step-label">等待到账</div>
</div>
</div>
<!-- 转账信息 -->
<div class="transfer-info">
<div class="info-title">第一步</div>
<div class="info-content">
<div class="info-row">
<span class="label">评估收费标准：</span>
<span class="value highlight">6000元/次</span>
</div>
<div class="info-row">
<span class="label">请汇款以下账户：</span>
</div>
<div class="info-row">
<span class="label">公司名称：</span>
<span class="value">成都文化产权交易所有限公司</span>
</div>
<div class="info-row">
<span class="label">税号：</span>
<span class="value">91510104586429590T</span>
</div>
<div class="info-row">
<span class="label">注册地址：</span>
<span class="value">成都市锦江区工业园区三色路38号</span>
</div>
<div class="info-row">
<span class="label">开户行：</span>
<span class="value">中国民生银行股份有限公司成都科华支行</span>
</div>
<div class="info-row">
<span class="label">开户账号：</span>
<span class="value">6343 8264 7</span>
</div>
<div class="info-row">
<span class="label">电话：</span>
<span class="value">(028) 85915289</span>
</div>
</div>
<n-button type="info" class="next-btn" @click="handleNextStep">
下一步
</n-button>
</div>
</div>
</div>
<!-- 开票管理 -->
<div v-if="currentMenu === 'invoice'" class="content-section">
<div class="invoice-container">
<div class="add-card" @click="handleAddInvoice">
<div class="add-text">添加</div>
</div>
<div class="invoice-list">
<div
v-for="invoice in invoiceList"
:key="invoice.id"
class="invoice-card"
>
<div class="invoice-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="18" height="18" rx="2" stroke="#909399" stroke-width="2"/>
<path d="M8 12H16M8 16H13" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<div class="invoice-info">
<div class="invoice-name">{{ invoice.name }}</div>
<div class="invoice-status">{{ invoice.status }}</div>
</div>
<div class="invoice-action" @click="handleDeleteInvoice(invoice)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- 子路由视图 -->
<router-view
:asset-list="assetList"
:invoice-list="invoiceList"
@return-home="handleBackToHome"
/>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, h } from 'vue'
import { ref, onMounted, h, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import api from '@/api'
import UserSidebar from './components/UserSidebar.vue'
const router = useRouter()
const route = useRoute()
// 当前菜单
const currentMenu = ref('history')
// 当前步骤
const currentStep = ref(1)
// 当前菜单（从路由路径计算）
const currentMenu = computed(() => {
const path = route.path
if (path.includes('/history')) return 'history'
if (path.includes('/transfer')) return 'transfer'
if (path.includes('/invoice')) return 'invoice'
return 'history'
})
// 用户信息
const userPhone = ref('')
@ -282,38 +141,6 @@ const menuList = ref([
}
])
// 格式化日期
function formatDate(dateStr) {
if (!dateStr) return ''
return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
}
// 获取状态文本
function getStatusText(status) {
const statusMap = {
'pending': '审核中',
'approved': '已通过',
'rejected': '已拒绝',
'processing': '评估中'
}
return statusMap[status] || status
}
// 获取状态样式类
function getStatusClass(status) {
return `status-${status}`
}
// 下载报告
function handleDownloadReport(item) {
$message.info('下载报告功能开发中')
}
// 下载证书
function handleDownloadCertificate(item) {
$message.info('下载证书功能开发中')
}
// 返回首页
function handleBackToHome() {
router.push('/home')
@ -321,24 +148,8 @@ function handleBackToHome() {
// 菜单点击
function handleMenuClick(menu) {
currentMenu.value = menu.id
}
// 下一步
function handleNextStep() {
if (currentStep.value < 3) {
currentStep.value++
}
}
// 添加开票
function handleAddInvoice() {
router.push('/invoice-header/add')
}
// 删除开票
function handleDeleteInvoice(invoice) {
$message.info('删除开票功能开发中')
// 使用路由导航
router.push(`/user-center/${menu.id}`)
}
// 加载数据
@ -371,80 +182,6 @@ onMounted(() => {
background: #F5F7FA;
}
/* 左侧边栏 */
.sidebar {
width: 240px;
background: white;
padding: 20px;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.user-info {
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid #EEEEEE;
margin-bottom: 20px;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
}
.user-phone {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 8px;
}
.user-count {
font-size: 12px;
color: #909399;
}
.menu-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
color: #606266;
}
.menu-item:hover {
background: #F5F7FA;
}
.menu-item.active {
background: rgba(163, 1, 19, 0.08);
color: #A30113;
}
.menu-icon {
width: 20px;
height: 20px;
margin-right: 12px;
}
.menu-text {
flex: 1;
font-size: 14px;
}
/* 右侧内容区 */
.content-area {
flex: 1;
@ -483,325 +220,9 @@ onMounted(() => {
transform: translateX(-2px);
}
.content-section {
background: white;
border-radius: 8px;
padding: 24px;
min-height: calc(100vh - 40px);
position: relative;
margin-top: 50px;
}
/* 估值记录 */
.asset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.asset-card {
background: #F5F7FA;
border-radius: 8px;
padding: 16px;
transition: all 0.3s ease;
border: 1px solid #EEEEEE;
}
.asset-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
border-color: #A30113;
}
.asset-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.asset-title {
font-size: 14px;
font-weight: 500;
color: #303133;
}
.asset-date {
font-size: 12px;
color: #909399;
margin-bottom: 12px;
}
.asset-actions {
display: flex;
gap: 8px;
}
.action-item {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: white;
border-radius: 4px;
font-size: 12px;
color: #A30113;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid #EEEEEE;
}
.action-item:hover {
background: #A30113;
color: white;
border-color: #A30113;
}
.action-item:hover svg path {
stroke: white;
}
.asset-status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-pending {
background: #FFF3E0;
color: #F57C00;
}
.status-approved {
background: #E8F5E9;
color: #2E7D32;
}
.status-rejected {
background: #FFEBEE;
color: #C62828;
}
.status-processing {
background: #E3F2FD;
color: #1565C0;
}
/* 对公转账 */
.transfer-container {
max-width: 800px;
margin: 0 auto;
}
.steps {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #EEEEEE;
color: #909399;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
}
.step.active .step-number {
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
color: white;
}
.step-label {
font-size: 14px;
color: #909399;
}
.step.active .step-label {
color: #303133;
font-weight: 500;
}
.step-line {
width: 100px;
height: 2px;
background: #EEEEEE;
margin: 0 16px;
transition: all 0.3s ease;
}
.step-line.active {
background: #A30113;
}
.transfer-info {
background: #F5F7FA;
border-radius: 8px;
padding: 24px;
border: 1px solid #EEEEEE;
}
.info-title {
font-size: 18px;
font-weight: 600;
color: #303133;
margin-bottom: 20px;
padding-left: 12px;
border-left: 4px solid #A30113;
}
.info-content {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.info-row {
display: flex;
font-size: 14px;
line-height: 1.8;
}
.info-row .label {
color: #606266;
min-width: 120px;
}
.info-row .value {
color: #303133;
flex: 1;
}
.info-row .value.highlight {
color: #A30113;
font-weight: 600;
}
.next-btn {
width: 180px;
height: 40px;
margin: 0 auto;
display: block;
background: #A30113;
border-radius: 4px;
border: none;
}
.next-btn:hover {
background: #880C22;
}
/* 开票管理 */
.invoice-container {
max-width: 1000px;
}
.add-card {
position: absolute;
top: 24px;
right: 24px;
width: 80px;
height: 32px;
background: #A30113;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.add-card:hover {
background: #880C22;
}
.add-text {
color: white;
font-size: 14px;
}
.invoice-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-top: 60px;
}
.invoice-card {
background: #F5F7FA;
border-radius: 8px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
transition: all 0.3s ease;
border: 1px solid #EEEEEE;
}
.invoice-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
border-color: #A30113;
}
.invoice-icon {
flex-shrink: 0;
}
.invoice-info {
flex: 1;
}
.invoice-name {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 4px;
}
.invoice-status {
font-size: 12px;
color: #909399;
}
.invoice-action {
cursor: pointer;
padding: 8px;
border-radius: 4px;
transition: all 0.3s ease;
}
.invoice-action:hover {
background: rgba(163, 1, 19, 0.1);
}
@media (max-width: 768px) {
.user-center-container {
flex-direction: column;
}
.sidebar {
width: 100%;
}
.asset-grid,
.invoice-list {
grid-template-columns: 1fr;
}
}
</style>