Compare commits
No commits in common. "ee580ff22c559b81eb732596749334baf41f3bae" and "ebf41d74c8830e185f78c2f10c9cf74706b7412c" have entirely different histories.
ee580ff22c
...
ebf41d74c8
@ -8,9 +8,6 @@ export default {
|
|||||||
// 手机号
|
// 手机号
|
||||||
registerPhone: (data) => request.post('/app-user/register', data, { noNeedToken: true }),
|
registerPhone: (data) => request.post('/app-user/register', data, { noNeedToken: true }),
|
||||||
loginPhone: (data) => request.post('/app-user/login', data, { noNeedToken: true }),
|
loginPhone: (data) => request.post('/app-user/login', data, { noNeedToken: true }),
|
||||||
// 短信验证码（待后端实现）
|
|
||||||
sendVerifyCode: (data) => request.post('/app-user/send-verify-code', data, { noNeedToken: true }),
|
|
||||||
loginWithVerifyCode: (data) => request.post('/app-user/login-with-code', data, { noNeedToken: true }),
|
|
||||||
// pages
|
// pages
|
||||||
getIndustryList: () => request.get('/industry/list'),
|
getIndustryList: () => request.get('/industry/list'),
|
||||||
getHistoryList: (params) => request.get('/app-valuations/', { params }),
|
getHistoryList: (params) => request.get('/app-valuations/', { params }),
|
||||||
|
|||||||
@ -6,36 +6,9 @@ const Layout = () => import('@/layout/index.vue')
|
|||||||
export const basicRoutes = [
|
export const basicRoutes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/home', // 默认跳转到首页
|
redirect: '/pages', // 默认跳转到首页
|
||||||
meta: { order: 0 },
|
meta: { order: 0 },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: 'Home',
|
|
||||||
path: '/home',
|
|
||||||
component: () => import('@/views/home/index.vue'),
|
|
||||||
isHidden: true,
|
|
||||||
meta: {
|
|
||||||
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'),
|
name: t('views.workbench.label_workbench'),
|
||||||
path: '/workbench',
|
path: '/workbench',
|
||||||
|
|||||||
@ -1,162 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="home-container">
|
|
||||||
<div class="header">
|
|
||||||
<div class="logo-section">
|
|
||||||
<img src="@/assets/images/logo.png" alt="logo" class="logo" />
|
|
||||||
<div class="user-center" @click="handleUserCenter">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
|
|
||||||
<path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
||||||
</svg>
|
|
||||||
<span>个人中心</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<div class="title-section">
|
|
||||||
<h1 class="main-title">非遗IP价值评估系统</h1>
|
|
||||||
<p class="subtitle">基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-section">
|
|
||||||
<n-button
|
|
||||||
type="primary"
|
|
||||||
size="large"
|
|
||||||
class="start-btn"
|
|
||||||
@click="handleStartEvaluation"
|
|
||||||
>
|
|
||||||
开始评估
|
|
||||||
</n-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
function handleStartEvaluation() {
|
|
||||||
router.push('/pages')
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleUserCenter() {
|
|
||||||
router.push('/user-center')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.home-container {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
padding: 20px 40px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 32px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-center {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #303133;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-center:hover {
|
|
||||||
background: rgba(136, 12, 34, 0.05);
|
|
||||||
color: #880C22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-center svg {
|
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-section {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-title {
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #303133;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #606266;
|
|
||||||
line-height: 1.6;
|
|
||||||
max-width: 700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-section {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-btn {
|
|
||||||
height: 50px;
|
|
||||||
padding: 0 60px;
|
|
||||||
font-size: 18px;
|
|
||||||
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-btn:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 16px rgba(136, 12, 34, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.main-title {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-btn {
|
|
||||||
height: 44px;
|
|
||||||
padding: 0 40px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,454 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -5,7 +5,7 @@
|
|||||||
class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
|
class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
|
||||||
dark:bg-dark
|
dark:bg-dark
|
||||||
>
|
>
|
||||||
<div w-750 px-20 style="height: 480px; padding-top: 50px; text-align: center;">
|
<div w-750 px-20 style="height: 400px; padding-top: 50px; text-align: center;">
|
||||||
<img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
|
<img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
|
||||||
<div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
|
<div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
|
||||||
非遗IP价值评估系统
|
非遗IP价值评估系统
|
||||||
@ -18,8 +18,8 @@
|
|||||||
v-model:value="loginInfo.phone"
|
v-model:value="loginInfo.phone"
|
||||||
style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
|
style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
|
||||||
placeholder="请输入手机号"
|
placeholder="请输入手机号"
|
||||||
:maxlength="11"
|
:maxlength="20"
|
||||||
@keypress.enter="handleLogin"
|
@keypress.enter="handleRegister"
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
|
<img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
|
||||||
@ -32,29 +32,12 @@
|
|||||||
rounded-5
|
rounded-5
|
||||||
type="primary"
|
type="primary"
|
||||||
style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
|
style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
|
||||||
@click="handleLogin"
|
@click="handleRegister"
|
||||||
>
|
>
|
||||||
立即登录
|
立即登录
|
||||||
<img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
|
<img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div mt-20 style="display: flex; justify-content: center; align-items: center;">
|
|
||||||
<n-input
|
|
||||||
v-model:value="loginInfo.verifyCode"
|
|
||||||
style="width: 260px; height: 42px;"
|
|
||||||
placeholder="验证码"
|
|
||||||
:maxlength="6"
|
|
||||||
@keypress.enter="handleLogin"
|
|
||||||
/>
|
|
||||||
<n-button
|
|
||||||
style="width: 126px; height: 42px; margin-left: 12px; font-size: 14px;"
|
|
||||||
:disabled="countdown > 0"
|
|
||||||
@click="handleSendCode"
|
|
||||||
>
|
|
||||||
{{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
|
|
||||||
</n-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AppPage>
|
</AppPage>
|
||||||
@ -73,12 +56,8 @@ const { t } = useI18n({ useScope: 'global' })
|
|||||||
|
|
||||||
const loginInfo = ref({
|
const loginInfo = ref({
|
||||||
phone: '',
|
phone: '',
|
||||||
verifyCode: '',
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const countdown = ref(0)
|
|
||||||
let countdownTimer = null
|
|
||||||
|
|
||||||
initLoginInfo()
|
initLoginInfo()
|
||||||
|
|
||||||
function initLoginInfo() {
|
function initLoginInfo() {
|
||||||
@ -94,110 +73,37 @@ function initLoginInfo() {
|
|||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
// 验证手机号格式
|
async function handleRegister() {
|
||||||
function validatePhone(phone) {
|
|
||||||
const phoneReg = /^1[3-9]\d{9}$/
|
|
||||||
return phoneReg.test(phone)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发送验证码
|
|
||||||
async function handleSendCode() {
|
|
||||||
const { phone } = loginInfo.value
|
const { phone } = loginInfo.value
|
||||||
|
|
||||||
if (!phone) {
|
if (!phone) {
|
||||||
$message.warning('请输入手机号')
|
$message.warning('请输入手机号')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
loading.value = true
|
||||||
if (!validatePhone(phone)) {
|
await api.registerPhone({ phone })
|
||||||
$message.warning('请输入正确的手机号')
|
.then(res=>{
|
||||||
return
|
handleLogin()
|
||||||
}
|
})
|
||||||
|
.catch(res=>{
|
||||||
try {
|
handleLogin()
|
||||||
// TODO: 调用发送验证码接口
|
})
|
||||||
// await api.sendVerifyCode({ phone })
|
|
||||||
|
|
||||||
// 模拟发送成功
|
|
||||||
$message.success('验证码已发送')
|
|
||||||
|
|
||||||
// 开始倒计时
|
|
||||||
countdown.value = 60
|
|
||||||
countdownTimer = setInterval(() => {
|
|
||||||
countdown.value--
|
|
||||||
if (countdown.value <= 0) {
|
|
||||||
clearInterval(countdownTimer)
|
|
||||||
countdownTimer = null
|
|
||||||
}
|
|
||||||
}, 1000)
|
|
||||||
} catch (error) {
|
|
||||||
$message.error('验证码发送失败，请重试')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 登录
|
|
||||||
async function handleLogin() {
|
async function handleLogin() {
|
||||||
const { phone, verifyCode } = loginInfo.value
|
const { phone } = loginInfo.value
|
||||||
|
|
||||||
if (!phone) {
|
|
||||||
$message.warning('请输入手机号')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!validatePhone(phone)) {
|
|
||||||
$message.warning('请输入正确的手机号')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: 等待后端接口完成后再启用验证码验证
|
|
||||||
// if (!verifyCode) {
|
|
||||||
// $message.warning('请输入验证码')
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// if (verifyCode.length < 4) {
|
|
||||||
// $message.warning('请输入完整的验证码')
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
|
|
||||||
loading.value = true
|
loading.value = true
|
||||||
|
await api.loginPhone({ phone, password: phone.slice(5,11) }).catch(res=>{
|
||||||
try {
|
|
||||||
// TODO: 调用登录接口，传入手机号和验证码
|
|
||||||
// const res = await api.loginWithVerifyCode({ phone, verifyCode })
|
|
||||||
// setToken(res.access_token)
|
|
||||||
|
|
||||||
// 模拟登录成功（暂时使用原有的注册+登录逻辑）
|
|
||||||
await api.registerPhone({ phone })
|
|
||||||
.then(res => {
|
|
||||||
return api.loginPhone({ phone, password: phone.slice(5, 11) })
|
|
||||||
})
|
|
||||||
.catch(res => {
|
|
||||||
if (res.error && res.error.access_token) {
|
|
||||||
setToken(res.error.access_token)
|
setToken(res.error.access_token)
|
||||||
localStorage.setItem('phone', phone)
|
|
||||||
|
|
||||||
if (query.redirect) {
|
if (query.redirect) {
|
||||||
const path = query.redirect
|
const path = query.redirect
|
||||||
|
localStorage.setItem('phone', phone)
|
||||||
Reflect.deleteProperty(query, 'redirect')
|
Reflect.deleteProperty(query, 'redirect')
|
||||||
router.push({ path, query })
|
router.push({ path, query })
|
||||||
} else {
|
} else {
|
||||||
router.push('/home')
|
router.push('/')
|
||||||
}
|
}
|
||||||
}
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
$message.error('登录失败，请重试')
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
})
|
||||||
}
|
|
||||||
|
|
||||||
// 组件卸载时清除定时器
|
}
|
||||||
onBeforeUnmount(() => {
|
|
||||||
if (countdownTimer) {
|
|
||||||
clearInterval(countdownTimer)
|
|
||||||
countdownTimer = null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,762 +0,0 @@
|
|||||||
<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