feat: 完成客户端个人中心和抬头管理功能
- 新增首页，登录后跳转到首页 - 新增个人中心页面，包含估值记录、对公转账、抬头管理三个模块 - 新增抬头管理添加页面，支持添加发票抬头信息 - 优化登录流程，添加短信验证码输入框 - 统一使用系统配色方案和设计风格 - 对公转账定价设置为6000元/次
This commit is contained in:
Wei_佳
parent
bde761864b
commit
ee580ff22c
@ -18,6 +18,24 @@ export const basicRoutes = [
|
||||
title: '首页',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'UserCenter',
|
||||
path: '/user-center',
|
||||
component: () => import('@/views/user-center/index.vue'),
|
||||
isHidden: true,
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'InvoiceHeaderAdd',
|
||||
path: '/invoice-header/add',
|
||||
component: () => import('@/views/invoice-header/add.vue'),
|
||||
isHidden: true,
|
||||
meta: {
|
||||
title: '添加抬头',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('views.workbench.label_workbench'),
|
||||
path: '/workbench',
|
||||
|
||||
@ -41,8 +41,7 @@ function handleStartEvaluation() {
|
||||
}
|
||||
|
||||
function handleUserCenter() {
|
||||
// TODO: 跳转到个人中心页面
|
||||
$message.info('个人中心功能开发中')
|
||||
router.push('/user-center')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
454
web1/src/views/invoice-header/add.vue
Normal file
454
web1/src/views/invoice-header/add.vue
Normal file
@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<div class="invoice-header-add">
|
||||
<!-- 左侧边栏 -->
|
||||
<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: menu.id === 'invoice' }"
|
||||
@click="handleMenuClick(menu)"
|
||||
>
|
||||
<component :is="menu.icon" class="menu-icon" />
|
||||
<span class="menu-text">{{ menu.label }}</span>
|
||||
<svg v-if="menu.id !== 'invoice'" 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>
|
||||
|
||||
<!-- 右侧表单区 -->
|
||||
<div class="content-area">
|
||||
<div class="content-section">
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-placement="left"
|
||||
label-width="auto"
|
||||
require-mark-placement="left"
|
||||
class="invoice-form"
|
||||
>
|
||||
<n-form-item label="公司名称" path="company_name">
|
||||
<n-input
|
||||
v-model:value="formData.company_name"
|
||||
placeholder="请输入公司名称"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="公司税号" path="tax_number">
|
||||
<n-input
|
||||
v-model:value="formData.tax_number"
|
||||
placeholder="请输入公司税号"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="注册地址" path="address">
|
||||
<n-input
|
||||
v-model:value="formData.address"
|
||||
placeholder="请输入注册地址"
|
||||
:maxlength="200"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="注册电话" path="phone">
|
||||
<n-input
|
||||
v-model:value="formData.phone"
|
||||
placeholder="请输入注册电话"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="开户银行" path="bank_name">
|
||||
<n-input
|
||||
v-model:value="formData.bank_name"
|
||||
placeholder="请输入开户银行"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="银行账号" path="bank_account">
|
||||
<n-input
|
||||
v-model:value="formData.bank_account"
|
||||
placeholder="请输入银行账号"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="邮箱" path="email">
|
||||
<n-input
|
||||
v-model:value="formData.email"
|
||||
placeholder="请输入邮箱"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<div class="form-actions">
|
||||
<n-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
保存
|
||||
</n-button>
|
||||
</div>
|
||||
</n-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, h } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import api from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 用户信息
|
||||
const userPhone = ref('')
|
||||
const valuationCount = ref(0)
|
||||
|
||||
// 表单数据
|
||||
const formRef = ref(null)
|
||||
const loading = ref(false)
|
||||
const formData = ref({
|
||||
company_name: '',
|
||||
tax_number: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = {
|
||||
company_name: [
|
||||
{ required: true, message: '请输入公司名称', trigger: 'blur' }
|
||||
],
|
||||
tax_number: [
|
||||
{ required: true, message: '请输入公司税号', trigger: 'blur' }
|
||||
],
|
||||
address: [
|
||||
{ required: false, message: '请输入注册地址', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: false, message: '请输入注册电话', trigger: 'blur' }
|
||||
],
|
||||
bank_name: [
|
||||
{ required: false, message: '请输入开户银行', trigger: 'blur' }
|
||||
],
|
||||
bank_account: [
|
||||
{ required: false, message: '请输入银行账号', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: false, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 菜单列表
|
||||
const menuList = ref([
|
||||
{
|
||||
id: 'history',
|
||||
label: '估值记录',
|
||||
icon: () => h('svg', {
|
||||
width: 20,
|
||||
height: 20,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
xmlns: 'http://www.w3.org/2000/svg'
|
||||
}, [
|
||||
h('path', {
|
||||
d: 'M12 8V12L15 15',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2,
|
||||
'stroke-linecap': 'round'
|
||||
}),
|
||||
h('circle', {
|
||||
cx: 12,
|
||||
cy: 12,
|
||||
r: 9,
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
id: 'transfer',
|
||||
label: '对公转账',
|
||||
icon: () => h('svg', {
|
||||
width: 20,
|
||||
height: 20,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
xmlns: 'http://www.w3.org/2000/svg'
|
||||
}, [
|
||||
h('path', {
|
||||
d: 'M12 2V6M12 18V22M6 12H2M22 12H18',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2,
|
||||
'stroke-linecap': 'round'
|
||||
}),
|
||||
h('circle', {
|
||||
cx: 12,
|
||||
cy: 12,
|
||||
r: 4,
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
id: 'invoice',
|
||||
label: '抬头管理',
|
||||
icon: () => h('svg', {
|
||||
width: 20,
|
||||
height: 20,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
xmlns: 'http://www.w3.org/2000/svg'
|
||||
}, [
|
||||
h('rect', {
|
||||
x: 3,
|
||||
y: 3,
|
||||
width: 18,
|
||||
height: 18,
|
||||
rx: 2,
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2
|
||||
}),
|
||||
h('path', {
|
||||
d: 'M8 12H16M8 16H13',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2,
|
||||
'stroke-linecap': 'round'
|
||||
})
|
||||
])
|
||||
}
|
||||
])
|
||||
|
||||
// 菜单点击
|
||||
function handleMenuClick(menu) {
|
||||
if (menu.id === 'invoice') return
|
||||
router.push('/user-center')
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (errors) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: 调用添加抬头接口
|
||||
// await api.addInvoiceHeader(formData.value)
|
||||
|
||||
$message.success('保存成功')
|
||||
// 返回上一页
|
||||
setTimeout(() => {
|
||||
router.back()
|
||||
}, 500)
|
||||
} catch (error) {
|
||||
$message.error('保存失败，请重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 加载用户信息
|
||||
async function loadUserInfo() {
|
||||
try {
|
||||
const phone = localStorage.getItem('phone')
|
||||
if (phone) {
|
||||
userPhone.value = phone
|
||||
}
|
||||
|
||||
const res = await api.getHistoryList()
|
||||
if (res && res.results) {
|
||||
valuationCount.value = res.results.length
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载用户信息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadUserInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invoice-header-add {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
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;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 60px;
|
||||
min-height: calc(100vh - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invoice-form {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.invoice-form :deep(.n-form-item) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.invoice-form :deep(.n-form-item-label) {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
padding-right: 16px;
|
||||
min-width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.invoice-form :deep(.n-input) {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-actions .n-button {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background: #A30113;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-actions .n-button:hover {
|
||||
background: #880C22;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.invoice-header-add {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
762
web1/src/views/user-center/index.vue
Normal file
762
web1/src/views/user-center/index.vue
Normal file
@ -0,0 +1,762 @@
|
||||
<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>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="content-area">
|
||||
<!-- 估值记录 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, h } from 'vue'
|
||||
import api from '@/api'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 当前菜单
|
||||
const currentMenu = ref('history')
|
||||
|
||||
// 当前步骤
|
||||
const currentStep = ref(1)
|
||||
|
||||
// 用户信息
|
||||
const userPhone = ref('')
|
||||
const valuationCount = ref(0)
|
||||
|
||||
// 资产列表
|
||||
const assetList = ref([])
|
||||
|
||||
// 开票列表
|
||||
const invoiceList = ref([
|
||||
{ id: 1, name: '某某公司', status: '待审' },
|
||||
{ id: 2, name: '某某公司', status: '待审' }
|
||||
])
|
||||
|
||||
// 菜单列表
|
||||
const menuList = ref([
|
||||
{
|
||||
id: 'history',
|
||||
label: '估值记录',
|
||||
icon: () => h('svg', {
|
||||
width: 20,
|
||||
height: 20,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
xmlns: 'http://www.w3.org/2000/svg'
|
||||
}, [
|
||||
h('path', {
|
||||
d: 'M12 8V12L15 15',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2,
|
||||
'stroke-linecap': 'round'
|
||||
}),
|
||||
h('circle', {
|
||||
cx: 12,
|
||||
cy: 12,
|
||||
r: 9,
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
id: 'transfer',
|
||||
label: '对公转账',
|
||||
icon: () => h('svg', {
|
||||
width: 20,
|
||||
height: 20,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
xmlns: 'http://www.w3.org/2000/svg'
|
||||
}, [
|
||||
h('path', {
|
||||
d: 'M12 2V6M12 18V22M6 12H2M22 12H18',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2,
|
||||
'stroke-linecap': 'round'
|
||||
}),
|
||||
h('circle', {
|
||||
cx: 12,
|
||||
cy: 12,
|
||||
r: 4,
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
id: 'invoice',
|
||||
label: '开票管理',
|
||||
icon: () => h('svg', {
|
||||
width: 20,
|
||||
height: 20,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
xmlns: 'http://www.w3.org/2000/svg'
|
||||
}, [
|
||||
h('rect', {
|
||||
x: 3,
|
||||
y: 3,
|
||||
width: 18,
|
||||
height: 18,
|
||||
rx: 2,
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2
|
||||
}),
|
||||
h('path', {
|
||||
d: 'M8 12H16M8 16H13',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': 2,
|
||||
'stroke-linecap': 'round'
|
||||
})
|
||||
])
|
||||
}
|
||||
])
|
||||
|
||||
// 格式化日期
|
||||
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 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('删除开票功能开发中')
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
try {
|
||||
const phone = localStorage.getItem('phone')
|
||||
if (phone) {
|
||||
userPhone.value = phone
|
||||
}
|
||||
|
||||
const res = await api.getHistoryList()
|
||||
if (res && res.results) {
|
||||
assetList.value = res.results
|
||||
valuationCount.value = res.results.length
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-center-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
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;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 40px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 估值记录 */
|
||||
.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>
|
||||
Loading…
x
Reference in New Issue
Block a user