feat: 新增用户中心模块及短信登录功能
- 新增用户中心模块，包含估值记录、对公转账和开票管理功能 - 实现短信验证码登录功能，优化登录流程 - 新增首页和个人中心页面设计 - 更新API接口以支持新功能 - 调整环境变量配置，更新API基础路径 - 优化用户管理界面，增加ID查询和操作记录展示 - 重构开票记录页面，简化操作流程 - 添加菜单初始化SQL脚本 - 修复若干已知问题，优化用户体验
This commit is contained in:
commit
1dd9a313e6
74
menu_init.sql
Normal file
74
menu_init.sql
Normal file
@ -0,0 +1,74 @@
|
||||
-- 完整菜单初始化SQL
|
||||
-- 创建时间: 2025-11-20
|
||||
-- 说明: 包含所有新增的菜单项和权限分配
|
||||
|
||||
-- ========================================
|
||||
-- 1. 工作台菜单
|
||||
-- ========================================
|
||||
INSERT INTO menu (id, name, menu_type, icon, path, "order", parent_id, is_hidden, component, keepalive, redirect, created_at, updated_at)
|
||||
VALUES
|
||||
(22, '工作台', 'menu', 'carbon:dashboard', '/workbench', 1, 0, 0, '/workbench', 1, NULL, datetime('now'), datetime('now'));
|
||||
|
||||
-- ========================================
|
||||
-- 2. 交易管理菜单
|
||||
-- ========================================
|
||||
-- 插入一级目录：交易管理
|
||||
INSERT INTO menu (id, name, menu_type, icon, path, "order", parent_id, is_hidden, component, keepalive, redirect, created_at, updated_at)
|
||||
VALUES
|
||||
(16, '交易管理', 'catalog', 'carbon:receipt', '/transaction', 3, 0, 0, 'Layout', 0, '/transaction/invoice', datetime('now'), datetime('now'));
|
||||
|
||||
-- 插入二级菜单：交易管理
|
||||
INSERT INTO menu (id, name, menu_type, icon, path, "order", parent_id, is_hidden, component, keepalive, redirect, created_at, updated_at)
|
||||
VALUES
|
||||
(17, '交易管理', 'menu', 'carbon:document', 'invoice', 1, 16, 0, '/transaction/invoice', 0, NULL, datetime('now'), datetime('now'));
|
||||
|
||||
-- ========================================
|
||||
-- 3. 估值管理菜单
|
||||
-- ========================================
|
||||
-- 插入一级目录：估值管理
|
||||
INSERT INTO menu (id, name, menu_type, icon, path, "order", parent_id, is_hidden, component, keepalive, redirect, created_at, updated_at)
|
||||
VALUES
|
||||
(18, '估值管理', 'catalog', 'carbon:calculator', '/valuation', 4, 0, 0, 'Layout', 0, '/valuation/audit', datetime('now'), datetime('now'));
|
||||
|
||||
-- 插入二级菜单：审核列表
|
||||
INSERT INTO menu (id, name, menu_type, icon, path, "order", parent_id, is_hidden, component, keepalive, redirect, created_at, updated_at)
|
||||
VALUES
|
||||
(19, '审核列表', 'menu', 'carbon:task-approved', 'audit', 1, 18, 0, '/valuation/audit', 0, NULL, datetime('now'), datetime('now'));
|
||||
|
||||
-- ========================================
|
||||
-- 4. 用户管理菜单
|
||||
-- ========================================
|
||||
-- 插入一级目录：用户管理
|
||||
INSERT INTO menu (id, name, menu_type, icon, path, "order", parent_id, is_hidden, component, keepalive, redirect, created_at, updated_at)
|
||||
VALUES
|
||||
(20, '用户管理', 'catalog', 'carbon:user-multiple', '/user-management', 5, 0, 0, 'Layout', 0, '/user-management/user-list', datetime('now'), datetime('now'));
|
||||
|
||||
-- 插入二级菜单：用户列表
|
||||
INSERT INTO menu (id, name, menu_type, icon, path, "order", parent_id, is_hidden, component, keepalive, redirect, created_at, updated_at)
|
||||
VALUES
|
||||
(21, '用户列表', 'menu', 'carbon:user', 'user-list', 1, 20, 0, '/user-management/user-list', 0, NULL, datetime('now'), datetime('now'));
|
||||
|
||||
-- ========================================
|
||||
-- 角色权限分配
|
||||
-- ========================================
|
||||
|
||||
-- 为管理员角色(role_id=1)分配所有菜单权限
|
||||
INSERT INTO role_menu (role_id, menu_id)
|
||||
VALUES
|
||||
(1, 22), -- 工作台
|
||||
(1, 16), -- 交易管理
|
||||
(1, 17), -- 交易管理
|
||||
(1, 18), -- 估值管理
|
||||
(1, 19), -- 审核列表
|
||||
(1, 20), -- 用户管理
|
||||
(1, 21); -- 用户列表
|
||||
|
||||
-- 为普通用户角色(role_id=2)分配基础菜单权限
|
||||
INSERT INTO role_menu (role_id, menu_id)
|
||||
VALUES
|
||||
(2, 22), -- 工作台
|
||||
(2, 16), -- 交易管理
|
||||
(2, 17), -- 交易管理
|
||||
(2, 18), -- 估值管理
|
||||
(2, 19); -- 审核列表
|
||||
-- 注意：普通用户不分配用户管理权限
|
||||
@ -5,4 +5,4 @@ VITE_PUBLIC_PATH = '/'
|
||||
VITE_USE_PROXY = true
|
||||
|
||||
# base api
|
||||
VITE_BASE_API = '/api/v1'
|
||||
VITE_BASE_API = 'http://139.224.70.152:9990/api/v1'
|
||||
|
||||
@ -723,9 +723,6 @@ export default {
|
||||
remindInvoice: (data = {}) => request.post('/invoice/remind', data),
|
||||
refundInvoice: (data = {}) => request.post('/invoice/refund', data),
|
||||
sendInvoice: (data = {}) => request.post('/invoice/send', data),
|
||||
// transactions (对公转账记录)
|
||||
getReceiptList: (params = {}) => request.get('/transactions/receipts', { params }),
|
||||
getReceiptById: (params = {}) => request.get(`/transactions/receipts/${params.id}`),
|
||||
// valuation (估值评估)
|
||||
getValuationList: (params = {}) => {
|
||||
// 模拟分页和搜索
|
||||
|
||||
@ -1,26 +1,14 @@
|
||||
<script setup>
|
||||
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
|
||||
import {
|
||||
NButton,
|
||||
NForm,
|
||||
NFormItem,
|
||||
NInput,
|
||||
NTag,
|
||||
NPopconfirm,
|
||||
NSelect,
|
||||
NDatePicker,
|
||||
} from 'naive-ui'
|
||||
import { NButton, NInput, NTag, NSelect, NDatePicker } from 'naive-ui'
|
||||
|
||||
import CommonPage from '@/components/page/CommonPage.vue'
|
||||
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
|
||||
import CrudModal from '@/components/table/CrudModal.vue'
|
||||
import CrudTable from '@/components/table/CrudTable.vue'
|
||||
import InvoiceModal from './InvoiceModal.vue'
|
||||
|
||||
import { formatDate, renderIcon } from '@/utils'
|
||||
import { useCRUD } from '@/composables'
|
||||
import { formatDate } from '@/utils'
|
||||
import api from '@/api'
|
||||
import TheIcon from '@/components/icon/TheIcon.vue'
|
||||
|
||||
defineOptions({ name: '开票记录' })
|
||||
|
||||
@ -30,50 +18,17 @@ const vPermission = resolveDirective('permission')
|
||||
|
||||
// 开票/查看弹窗相关状态
|
||||
const invoiceModalVisible = ref(false)
|
||||
const invoiceModalMode = ref('invoice') // 'invoice' 或 'view'
|
||||
const invoiceModalMode = ref('view') // 'send' 或 'view'
|
||||
const currentInvoice = ref(null)
|
||||
|
||||
// 状态选项
|
||||
const statusOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '未开票', value: 'pending' },
|
||||
{ label: '已开票', value: 'invoiced' },
|
||||
{ label: '已退款', value: 'refunded' },
|
||||
{ label: '已拒绝', value: 'rejected' },
|
||||
{ label: '已退款', value: 'refunded' },
|
||||
]
|
||||
|
||||
// 开票类型选项
|
||||
const invoiceTypeOptions = [
|
||||
{ label: '增值税普通发票', value: 'normal' },
|
||||
{ label: '增值税专用发票', value: 'special' },
|
||||
]
|
||||
|
||||
// 供票类型选项
|
||||
const ticketTypeOptions = [
|
||||
{ label: '纸质发票', value: 'paper' },
|
||||
{ label: '电子发票', value: 'electronic' },
|
||||
]
|
||||
|
||||
const {
|
||||
modalVisible,
|
||||
modalTitle,
|
||||
modalAction,
|
||||
modalLoading,
|
||||
handleSave,
|
||||
modalForm,
|
||||
modalFormRef,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handleAdd,
|
||||
} = useCRUD({
|
||||
name: '开票记录',
|
||||
initForm: {},
|
||||
doCreate: api.createInvoice,
|
||||
doUpdate: api.updateInvoice,
|
||||
doDelete: api.deleteInvoice,
|
||||
refresh: () => $table.value?.handleSearch(),
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
$table.value?.handleSearch()
|
||||
})
|
||||
@ -83,10 +38,10 @@ const renderStatus = (status) => {
|
||||
const statusMap = {
|
||||
pending: { type: 'warning', text: '未开票' },
|
||||
invoiced: { type: 'success', text: '已开票' },
|
||||
refunded: { type: 'info', text: '已退款' },
|
||||
rejected: { type: 'error', text: '已拒绝' },
|
||||
refunded: { type: 'info', text: '已退款' },
|
||||
}
|
||||
const config = statusMap[status] || { type: 'default', text: '未知' }
|
||||
const config = statusMap[status] || { type: 'default', text: '-' }
|
||||
return h(NTag, { type: config.type }, { default: () => config.text })
|
||||
}
|
||||
|
||||
@ -99,50 +54,73 @@ const renderInvoiceType = (type) => {
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
// 供票类型渲染
|
||||
const renderTicketType = (type) => {
|
||||
const typeMap = {
|
||||
paper: '纸质发票',
|
||||
electronic: '电子发票',
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '提交时间',
|
||||
key: 'created_at',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
return formatDate(row.created_at)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '供票类型',
|
||||
key: 'ticket_type',
|
||||
key: 'receiptId',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
return renderTicketType(row.ticket_type)
|
||||
return row.receipt?.id || '-'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '提交时间',
|
||||
key: 'submitted_at',
|
||||
width: 140,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
return formatDate(row.submitted_at)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '付款凭证',
|
||||
key: 'receipt',
|
||||
width: 140,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
const list = Array.isArray(row.receipt) ? row.receipt : row.receipt ? [row.receipt] : []
|
||||
const urls = list
|
||||
.map((item) => (typeof item === 'string' ? item : item?.url))
|
||||
.filter(Boolean)
|
||||
if (!urls.length) return '-'
|
||||
return h(
|
||||
'div',
|
||||
{ style: 'display:flex; gap:6px; justify-content:center;' },
|
||||
urls.slice(0, 3).map((url, idx) =>
|
||||
h(
|
||||
'a',
|
||||
{
|
||||
href: url,
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
key: `${url}-${idx}`,
|
||||
style: 'display:inline-block',
|
||||
},
|
||||
{
|
||||
default: () =>
|
||||
h('img', {
|
||||
src: url,
|
||||
style:
|
||||
'width:46px;height:46px;object-fit:cover;border-radius:4px;border:1px solid #e5e6eb;',
|
||||
alt: '付款凭证',
|
||||
}),
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'phone',
|
||||
width: 100,
|
||||
width: 110,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
},
|
||||
{
|
||||
title: '邮箱号',
|
||||
key: 'email',
|
||||
title: '微信号',
|
||||
key: 'wechat',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
@ -164,35 +142,42 @@ const columns = [
|
||||
{
|
||||
title: '注册地址',
|
||||
key: 'register_address',
|
||||
width: 150,
|
||||
width: 180,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
},
|
||||
{
|
||||
title: '注册电话',
|
||||
key: 'register_phone',
|
||||
width: 100,
|
||||
width: 120,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
},
|
||||
{
|
||||
title: '开户银行',
|
||||
key: 'bank_name',
|
||||
width: 120,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
},
|
||||
{
|
||||
title: '银行账号',
|
||||
key: 'bank_account',
|
||||
width: 150,
|
||||
width: 180,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
},
|
||||
{
|
||||
title: '接收邮箱',
|
||||
key: 'email',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
},
|
||||
{
|
||||
title: '开票类型',
|
||||
key: 'invoice_type',
|
||||
width: 120,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
return renderInvoiceType(row.invoice_type)
|
||||
@ -201,7 +186,7 @@ const columns = [
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 80,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
return renderStatus(row.status)
|
||||
@ -210,159 +195,63 @@ const columns = [
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 180,
|
||||
width: 80,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row) {
|
||||
return [
|
||||
// 开票按钮 - 未开票状态显示
|
||||
row.status === 'pending' &&
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
type: 'success',
|
||||
style: 'margin-right: 8px;',
|
||||
onClick: () => handleInvoice(row),
|
||||
},
|
||||
{
|
||||
default: () => '开票',
|
||||
}
|
||||
),
|
||||
// 退款按钮 - 未开票状态显示
|
||||
row.status === 'pending' &&
|
||||
h(
|
||||
NPopconfirm,
|
||||
{
|
||||
onPositiveClick: () => handleRefund(row),
|
||||
},
|
||||
{
|
||||
trigger: () =>
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
type: 'primary',
|
||||
style: 'margin-right: 8px;',
|
||||
},
|
||||
{
|
||||
default: () => '退款',
|
||||
}
|
||||
),
|
||||
default: () => h('div', {}, '确认退款？'),
|
||||
}
|
||||
),
|
||||
// 查看按钮 - 已开票状态显示
|
||||
row.status === 'invoiced' &&
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
type: 'warning',
|
||||
style: 'margin-right: 8px;',
|
||||
onClick: () => handleView(row),
|
||||
},
|
||||
{
|
||||
default: () => '查看',
|
||||
}
|
||||
),
|
||||
]
|
||||
const editable = row.status === 'pending'
|
||||
return withDirectives(
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
type: editable ? 'primary' : 'default',
|
||||
onClick: () => handleInvoice(row),
|
||||
},
|
||||
{ default: () => '开票' }
|
||||
),
|
||||
[[vPermission, 'post/api/v1/transactions/send-email']]
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
// 更新状态
|
||||
async function handleUpdateStatus(row, status) {
|
||||
// 开票按钮：未开票可编辑，其余只读
|
||||
async function handleInvoice(row) {
|
||||
const editable = row.status === 'pending'
|
||||
invoiceModalMode.value = editable ? 'send' : 'view'
|
||||
invoiceModalVisible.value = true
|
||||
await fetchDetail(row)
|
||||
}
|
||||
|
||||
async function fetchDetail(row) {
|
||||
try {
|
||||
await api.updateInvoiceStatus({ id: row.id, status })
|
||||
$message.success('开票成功')
|
||||
$table.value?.handleSearch()
|
||||
const id = row?.receipt?.id || row.id
|
||||
const { data } = await api.getInvoiceById({ id })
|
||||
currentInvoice.value = data || row
|
||||
} catch (error) {
|
||||
$message.error('开票失败: ' + error.message)
|
||||
currentInvoice.value = row
|
||||
$message.error(error?.message || '获取详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 退款处理
|
||||
async function handleRefund(row) {
|
||||
try {
|
||||
// 如果是pending状态，直接退款并更新状态为refunded
|
||||
if (row.status === 'pending') {
|
||||
await api.updateInvoiceStatus({ id: row.id, status: 'refunded' })
|
||||
$message.success('退款成功')
|
||||
} else {
|
||||
await api.refundInvoice({ id: row.id })
|
||||
$message.success('退款成功')
|
||||
}
|
||||
$table.value?.handleSearch()
|
||||
} catch (error) {
|
||||
$message.error('退款失败: ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 开票处理
|
||||
function handleInvoice(row) {
|
||||
currentInvoice.value = row
|
||||
invoiceModalMode.value = 'invoice'
|
||||
invoiceModalVisible.value = true
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function handleView(row) {
|
||||
currentInvoice.value = row
|
||||
invoiceModalMode.value = 'view'
|
||||
invoiceModalVisible.value = true
|
||||
}
|
||||
|
||||
// 确认开票/查看操作
|
||||
// 确认发送邮件
|
||||
async function handleInvoiceConfirm(data) {
|
||||
try {
|
||||
if (invoiceModalMode.value === 'invoice') {
|
||||
// 开票操作
|
||||
await api.sendInvoice(data)
|
||||
await api.updateInvoiceStatus({ id: data.id, status: 'invoiced' })
|
||||
$message.success('开票成功')
|
||||
} else {
|
||||
// 查看操作（可能是重新发送）
|
||||
await api.sendInvoice(data)
|
||||
$message.success('发送成功')
|
||||
}
|
||||
await api.sendInvoice({
|
||||
email: data.email,
|
||||
subject: data.subject,
|
||||
body: data.body,
|
||||
file_url: data.file_url || currentInvoice.value?.receipt?.url,
|
||||
})
|
||||
$message.success('发送成功')
|
||||
invoiceModalVisible.value = false
|
||||
$table.value?.handleSearch()
|
||||
} catch (error) {
|
||||
$message.error('操作失败: ' + error.message)
|
||||
$message.error(error?.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const validateForm = {
|
||||
company_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入公司名称',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
tax_number: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入公司税号',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入邮箱',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -372,12 +261,13 @@ const validateForm = {
|
||||
ref="$table"
|
||||
v-model:query-items="queryItems"
|
||||
:columns="columns"
|
||||
:row-key="(row) => row.receipt?.id || row.id"
|
||||
:get-data="api.getInvoiceList"
|
||||
>
|
||||
<template #queryBar>
|
||||
<QueryBarItem label="提交时间" :label-width="80">
|
||||
<NDatePicker
|
||||
v-model:value="queryItems.created_at"
|
||||
v-model:value="queryItems.submitted_at"
|
||||
type="daterange"
|
||||
clearable
|
||||
placeholder="请选择提交时间"
|
||||
@ -428,70 +318,6 @@ const validateForm = {
|
||||
</template>
|
||||
</CrudTable>
|
||||
|
||||
<!-- 新增/编辑 弹窗 -->
|
||||
<CrudModal
|
||||
v-model:visible="modalVisible"
|
||||
:title="modalTitle"
|
||||
:loading="modalLoading"
|
||||
@save="handleSave"
|
||||
>
|
||||
<NForm
|
||||
ref="modalFormRef"
|
||||
label-placement="left"
|
||||
label-align="left"
|
||||
:label-width="100"
|
||||
:model="modalForm"
|
||||
:rules="validateForm"
|
||||
>
|
||||
<NFormItem label="公司名称" path="company_name">
|
||||
<NInput v-model:value="modalForm.company_name" clearable placeholder="请输入公司名称" />
|
||||
</NFormItem>
|
||||
<NFormItem label="公司税号" path="tax_number">
|
||||
<NInput v-model:value="modalForm.tax_number" clearable placeholder="请输入公司税号" />
|
||||
</NFormItem>
|
||||
<NFormItem label="手机号" path="phone">
|
||||
<NInput v-model:value="modalForm.phone" clearable placeholder="请输入手机号" />
|
||||
</NFormItem>
|
||||
<NFormItem label="邮箱" path="email">
|
||||
<NInput v-model:value="modalForm.email" clearable placeholder="请输入邮箱" />
|
||||
</NFormItem>
|
||||
<NFormItem label="注册地址" path="register_address">
|
||||
<NInput
|
||||
v-model:value="modalForm.register_address"
|
||||
clearable
|
||||
placeholder="请输入注册地址"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="注册电话" path="register_phone">
|
||||
<NInput
|
||||
v-model:value="modalForm.register_phone"
|
||||
clearable
|
||||
placeholder="请输入注册电话"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="开户银行" path="bank_name">
|
||||
<NInput v-model:value="modalForm.bank_name" clearable placeholder="请输入开户银行" />
|
||||
</NFormItem>
|
||||
<NFormItem label="银行账号" path="bank_account">
|
||||
<NInput v-model:value="modalForm.bank_account" clearable placeholder="请输入银行账号" />
|
||||
</NFormItem>
|
||||
<NFormItem label="供票类型" path="ticket_type">
|
||||
<NSelect
|
||||
v-model:value="modalForm.ticket_type"
|
||||
:options="ticketTypeOptions"
|
||||
placeholder="请选择供票类型"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="开票类型" path="invoice_type">
|
||||
<NSelect
|
||||
v-model:value="modalForm.invoice_type"
|
||||
:options="invoiceTypeOptions"
|
||||
placeholder="请选择开票类型"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</CrudModal>
|
||||
|
||||
<!-- 开票/查看弹窗 -->
|
||||
<InvoiceModal
|
||||
v-model:visible="invoiceModalVisible"
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import {
|
||||
NModal,
|
||||
NButton,
|
||||
NSelect,
|
||||
NInput,
|
||||
NDivider,
|
||||
} from 'naive-ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { NModal, NButton, NSelect, NInput, NDivider, NInputNumber } from 'naive-ui'
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
@ -25,44 +19,37 @@ const emit = defineEmits(['update:visible', 'save'])
|
||||
|
||||
// 本地状态
|
||||
const limitForm = ref({
|
||||
remainingCount: 0,
|
||||
type: '免费体验',
|
||||
experienceCount: 1,
|
||||
notes: ''
|
||||
targetCount: 0,
|
||||
quotaType: '免费体验',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
// 类型选项
|
||||
const typeOptions = [
|
||||
{ label: '免费体验', value: '免费体验' },
|
||||
{ label: '付费用户', value: '付费用户' },
|
||||
{ label: 'VIP用户', value: 'VIP用户' }
|
||||
{ label: '付费评估', value: '付费评估' }
|
||||
]
|
||||
|
||||
const currentRemaining = computed(() => props.userData?.remaining_count ?? 0)
|
||||
|
||||
// 监听用户数据变化，初始化表单
|
||||
watch(() => props.userData, (newData) => {
|
||||
if (newData && Object.keys(newData).length > 0) {
|
||||
limitForm.value = {
|
||||
remainingCount: newData.remaining_count || 0,
|
||||
type: newData.user_type || '免费体验',
|
||||
experienceCount: newData.experience_count || 1,
|
||||
notes: newData.notes || ''
|
||||
targetCount: newData.remaining_count || 0,
|
||||
quotaType: newData.user_type || '免费体验',
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// 体验次数增减
|
||||
function handleExperienceCountChange(delta) {
|
||||
const newCount = limitForm.value.experienceCount + delta
|
||||
if (newCount >= 0) {
|
||||
limitForm.value.experienceCount = newCount
|
||||
}
|
||||
}
|
||||
|
||||
// 保存设置
|
||||
function handleSave() {
|
||||
const data = {
|
||||
user_id: props.userData.id,
|
||||
...limitForm.value
|
||||
target_count: Number(limitForm.value.targetCount || 0),
|
||||
op_type: limitForm.value.quotaType,
|
||||
remark: limitForm.value.remark
|
||||
}
|
||||
emit('save', data)
|
||||
}
|
||||
@ -72,10 +59,9 @@ function handleCancel() {
|
||||
emit('update:visible', false)
|
||||
// 重置表单
|
||||
limitForm.value = {
|
||||
remainingCount: 0,
|
||||
type: '免费体验',
|
||||
experienceCount: 1,
|
||||
notes: ''
|
||||
targetCount: 0,
|
||||
quotaType: '免费体验',
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -96,7 +82,7 @@ function handleCancel() {
|
||||
<!-- 剩余估值次数 -->
|
||||
<div class="form-row">
|
||||
<span class="label">剩余估值次数：</span>
|
||||
<span class="value">{{ limitForm.remainingCount }}</span>
|
||||
<span class="value">{{ currentRemaining }}</span>
|
||||
</div>
|
||||
|
||||
<NDivider style="margin: 16px 0;" />
|
||||
@ -105,31 +91,20 @@ function handleCancel() {
|
||||
<div class="form-row">
|
||||
<span class="label">类型：</span>
|
||||
<NSelect
|
||||
v-model:value="limitForm.type"
|
||||
v-model:value="limitForm.quotaType"
|
||||
:options="typeOptions"
|
||||
style="width: 120px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 体验次数 -->
|
||||
<!-- 目标次数 -->
|
||||
<div class="form-row">
|
||||
<span class="label">体验次数：</span>
|
||||
<div class="count-control">
|
||||
<NButton
|
||||
size="small"
|
||||
@click="handleExperienceCountChange(-1)"
|
||||
:disabled="limitForm.experienceCount <= 0"
|
||||
>
|
||||
-
|
||||
</NButton>
|
||||
<span class="count-value">{{ limitForm.experienceCount }}</span>
|
||||
<NButton
|
||||
size="small"
|
||||
@click="handleExperienceCountChange(1)"
|
||||
>
|
||||
+
|
||||
</NButton>
|
||||
</div>
|
||||
<span class="label">估值次数：</span>
|
||||
<NInputNumber
|
||||
v-model:value="limitForm.targetCount"
|
||||
:min="0"
|
||||
style="width: 160px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
@ -137,7 +112,7 @@ function handleCancel() {
|
||||
<span class="label">备注：</span>
|
||||
</div>
|
||||
<NInput
|
||||
v-model:value="limitForm.notes"
|
||||
v-model:value="limitForm.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注信息"
|
||||
:rows="4"
|
||||
@ -184,19 +159,6 @@ function handleCancel() {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -45,18 +45,9 @@ const invoiceColumns = [
|
||||
]
|
||||
|
||||
const logColumns = [
|
||||
{ title: '操作时间', key: 'time', width: 160 },
|
||||
{ title: '操作人', key: 'operator', width: 100 },
|
||||
{
|
||||
title: '操作记录',
|
||||
key: 'records',
|
||||
render: (row) =>
|
||||
h(
|
||||
'div',
|
||||
{ class: 'log-record' },
|
||||
row.records?.map((item, idx) => h('div', { key: idx }, item))
|
||||
),
|
||||
},
|
||||
{ title: '操作时间', key: 'operation_time', width: 180 },
|
||||
{ title: '操作人', key: 'operator_name', width: 120 },
|
||||
{ title: '操作记录', key: 'operation_detail', ellipsis: { tooltip: true } },
|
||||
]
|
||||
|
||||
function handleClose() {
|
||||
@ -209,10 +200,6 @@ function handleClose() {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.log-record div + div {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
<script setup>
|
||||
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
|
||||
import {
|
||||
NButton,
|
||||
NForm,
|
||||
NFormItem,
|
||||
NInput,
|
||||
NSpace,
|
||||
NSwitch,
|
||||
NTag,
|
||||
NPopconfirm,
|
||||
NDatePicker,
|
||||
} from 'naive-ui'
|
||||
import { NButton, NForm, NFormItem, NInput, NDatePicker } from 'naive-ui'
|
||||
|
||||
import CommonPage from '@/components/page/CommonPage.vue'
|
||||
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
|
||||
@ -142,7 +132,7 @@ const columns = [
|
||||
icon: renderIcon('material-symbols:info', { size: 16 }),
|
||||
}
|
||||
),
|
||||
[[vPermission, 'get/api/v1/app_user/detail']]
|
||||
[[vPermission, 'get/api/v1/app-user-admin/list']]
|
||||
),
|
||||
withDirectives(
|
||||
h(
|
||||
@ -158,7 +148,7 @@ const columns = [
|
||||
icon: renderIcon('material-symbols:settings', { size: 16 }),
|
||||
}
|
||||
),
|
||||
[[vPermission, 'post/api/v1/app_user/set_limit']]
|
||||
[[vPermission, 'post/api/v1/app-user-admin/quota']]
|
||||
),
|
||||
]
|
||||
},
|
||||
@ -170,23 +160,26 @@ async function handleViewDetail(row) {
|
||||
detailModalVisible.value = true
|
||||
detailLoading.value = true
|
||||
try {
|
||||
const detail = await api.getAppUserById({ id: row.id })
|
||||
const baseInfoFromServer = detail?.baseInfo || {}
|
||||
const { data: logs = [] } = await api.getAppUserQuotaLogs({
|
||||
user_id: row.id,
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
})
|
||||
userDetail.value = {
|
||||
baseInfo: {
|
||||
...baseInfoFromServer,
|
||||
id: row.id,
|
||||
phone: row.phone,
|
||||
wechat: row.wechat,
|
||||
register_time: row.created_at ? formatDate(row.created_at) : '-',
|
||||
notes: row.notes,
|
||||
remaining_count: row.remaining_count,
|
||||
user_type: row.user_type || '-',
|
||||
},
|
||||
invoiceHeaders: detail?.invoiceHeaders || [],
|
||||
operationLogs: detail?.operationLogs || [],
|
||||
invoiceHeaders: [],
|
||||
operationLogs: logs,
|
||||
}
|
||||
} catch (error) {
|
||||
$message.error('获取用户详情失败')
|
||||
$message.error(error?.message || '获取用户详情失败')
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
@ -201,13 +194,17 @@ function handleSetLimit(row) {
|
||||
// 保存次数设置
|
||||
async function handleSaveLimitSetting(data) {
|
||||
try {
|
||||
// 这里调用API保存次数设置
|
||||
// await api.setUserLimit(data)
|
||||
await api.updateAppUserQuota({
|
||||
user_id: data.user_id,
|
||||
target_count: data.target_count,
|
||||
op_type: data.op_type,
|
||||
remark: data.remark,
|
||||
})
|
||||
$message.success('次数设置保存成功')
|
||||
limitModalVisible.value = false
|
||||
$table.value?.handleSearch()
|
||||
} catch (error) {
|
||||
$message.error('保存失败: ' + error.message)
|
||||
$message.error(error?.message || '保存失败')
|
||||
}
|
||||
}
|
||||
|
||||
@ -269,6 +266,16 @@ const validateForm = {
|
||||
@keypress.enter="$table?.handleSearch()"
|
||||
/>
|
||||
</QueryBarItem>
|
||||
<QueryBarItem label="ID" :label-width="60">
|
||||
<NInput
|
||||
v-model:value="queryItems.id"
|
||||
clearable
|
||||
type="text"
|
||||
placeholder="请输入ID"
|
||||
style="width: 200px"
|
||||
@keypress.enter="$table?.handleSearch()"
|
||||
/>
|
||||
</QueryBarItem>
|
||||
<QueryBarItem label="注册时间" :label-width="70">
|
||||
<NDatePicker
|
||||
v-model:value="queryItems.created_at"
|
||||
|
||||
@ -5,4 +5,5 @@ VITE_PUBLIC_PATH = '/'
|
||||
VITE_USE_PROXY = true
|
||||
|
||||
# base api
|
||||
VITE_BASE_API = 'https://value.cdcee.net/api/v1'
|
||||
VITE_BASE_API = 'http://139.224.70.152:9990/api/v1'
|
||||
# VITE_BASE_API = 'https://value.cdcee.net/api/v1'
|
||||
|
||||
@ -8,6 +8,9 @@ export default {
|
||||
// 手机号
|
||||
registerPhone: (data) => request.post('/app-user/register', data, { noNeedToken: true }),
|
||||
loginPhone: (data) => request.post('/app-user/login', data, { noNeedToken: true }),
|
||||
// 短信验证码
|
||||
sendVerifyCode: (data) => request.post('/sms/send-code', data, { noNeedToken: true }),
|
||||
loginWithVerifyCode: (data) => request.post('/sms/login', data, { noNeedToken: true }),
|
||||
// pages
|
||||
getIndustryList: () => request.get('/industry/list'),
|
||||
getHistoryList: (params) => request.get('/app-valuations/', { params }),
|
||||
|
||||
@ -6,9 +6,63 @@ const Layout = () => import('@/layout/index.vue')
|
||||
export const basicRoutes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/pages', // 默认跳转到首页
|
||||
redirect: '/home', // 默认跳转到首页
|
||||
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'),
|
||||
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',
|
||||
path: '/invoice-header/add',
|
||||
component: () => import('@/views/invoice-header/add.vue'),
|
||||
isHidden: true,
|
||||
meta: {
|
||||
title: '添加抬头',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('views.workbench.label_workbench'),
|
||||
path: '/workbench',
|
||||
|
||||
162
web1/src/views/home/index.vue
Normal file
162
web1/src/views/home/index.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<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>
|
||||
496
web1/src/views/invoice-header/add.vue
Normal file
496
web1/src/views/invoice-header/add.vue
Normal file
@ -0,0 +1,496 @@
|
||||
<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">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-button" @click="handleBack">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
|
||||
<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 handleBack() {
|
||||
router.push('/user-center')
|
||||
}
|
||||
|
||||
// 菜单点击
|
||||
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.push('/user-center')
|
||||
}, 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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: #F5F7FA;
|
||||
color: #A30113;
|
||||
}
|
||||
|
||||
.back-button svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.back-button:hover svg {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.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"
|
||||
dark:bg-dark
|
||||
>
|
||||
<div w-750 px-20 style="height: 400px; padding-top: 50px; text-align: center;">
|
||||
<div w-750 px-20 style="height: 480px; padding-top: 50px; text-align: center;">
|
||||
<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; ">
|
||||
非遗IP价值评估系统
|
||||
@ -18,8 +18,8 @@
|
||||
v-model:value="loginInfo.phone"
|
||||
style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="20"
|
||||
@keypress.enter="handleRegister"
|
||||
:maxlength="11"
|
||||
@keypress.enter="handleLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
|
||||
@ -32,12 +32,29 @@
|
||||
rounded-5
|
||||
type="primary"
|
||||
style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
|
||||
@click="handleRegister"
|
||||
@click="handleLogin"
|
||||
>
|
||||
立即登录
|
||||
<img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
|
||||
</n-button>
|
||||
</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>
|
||||
</AppPage>
|
||||
@ -56,8 +73,12 @@ const { t } = useI18n({ useScope: 'global' })
|
||||
|
||||
const loginInfo = ref({
|
||||
phone: '',
|
||||
verifyCode: '',
|
||||
})
|
||||
|
||||
const countdown = ref(0)
|
||||
let countdownTimer = null
|
||||
|
||||
initLoginInfo()
|
||||
|
||||
function initLoginInfo() {
|
||||
@ -73,37 +94,98 @@ function initLoginInfo() {
|
||||
|
||||
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
|
||||
|
||||
if (!phone) {
|
||||
$message.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
await api.registerPhone({ phone })
|
||||
.then(res=>{
|
||||
handleLogin()
|
||||
})
|
||||
.catch(res=>{
|
||||
handleLogin()
|
||||
})
|
||||
|
||||
if (!validatePhone(phone)) {
|
||||
$message.warning('请输入正确的手机号')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await api.sendVerifyCode({ phone })
|
||||
$message.success('验证码已发送')
|
||||
|
||||
// 开始倒计时
|
||||
countdown.value = 60
|
||||
countdownTimer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(countdownTimer)
|
||||
countdownTimer = null
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
// error is handled by interceptor usually, but we can catch specific ones if needed
|
||||
}
|
||||
}
|
||||
|
||||
// 登录
|
||||
async function handleLogin() {
|
||||
const { phone } = loginInfo.value
|
||||
loading.value = true
|
||||
await api.loginPhone({ phone, password: phone.slice(5,11) }).catch(res=>{
|
||||
setToken(res.error.access_token)
|
||||
if (query.redirect) {
|
||||
const path = query.redirect
|
||||
localStorage.setItem('phone', phone)
|
||||
Reflect.deleteProperty(query, 'redirect')
|
||||
router.push({ path, query })
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
const { phone, verifyCode } = loginInfo.value
|
||||
|
||||
if (!phone) {
|
||||
$message.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
|
||||
if (!validatePhone(phone)) {
|
||||
$message.warning('请输入正确的手机号')
|
||||
return
|
||||
}
|
||||
|
||||
if (!verifyCode) {
|
||||
$message.warning('请输入验证码')
|
||||
return
|
||||
}
|
||||
|
||||
if (verifyCode.length < 4) {
|
||||
$message.warning('请输入完整的验证码')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const res = await api.loginWithVerifyCode({ phone, code: verifyCode })
|
||||
if (res.data?.access_token) {
|
||||
setToken(res.data.access_token)
|
||||
localStorage.setItem('phone', phone)
|
||||
|
||||
if (query.redirect) {
|
||||
const path = query.redirect
|
||||
Reflect.deleteProperty(query, 'redirect')
|
||||
router.push({ path, query })
|
||||
} else {
|
||||
router.push('/home')
|
||||
}
|
||||
} else {
|
||||
$message.error('登录失败：未获取到token')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer)
|
||||
countdownTimer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
532
web1/src/views/user-center/components/CorporateTransfer.vue
Normal file
532
web1/src/views/user-center/components/CorporateTransfer.vue
Normal 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;
|
||||
|
||||
}
|
||||
|
||||
.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
157
web1/src/views/user-center/components/InvoiceManagement.vue
Normal 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;
|
||||
|
||||
}
|
||||
|
||||
.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
140
web1/src/views/user-center/components/UserSidebar.vue
Normal 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
187
web1/src/views/user-center/components/ValuationHistory.vue
Normal 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;
|
||||
|
||||
}
|
||||
|
||||
.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>
|
||||
227
web1/src/views/user-center/index.vue
Normal file
227
web1/src/views/user-center/index.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="user-center-container">
|
||||
<!-- 左侧边栏 -->
|
||||
<UserSidebar
|
||||
:user-phone="userPhone"
|
||||
:valuation-count="valuationCount"
|
||||
:current-menu="currentMenu"
|
||||
:menu-list="menuList"
|
||||
@menu-click="handleMenuClick"
|
||||
/>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="content-area">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-button" @click="handleBackToHome">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>返回首页</span>
|
||||
</div>
|
||||
|
||||
<!-- 子路由视图 -->
|
||||
<router-view
|
||||
:asset-list="assetList"
|
||||
:invoice-list="invoiceList"
|
||||
@return-home="handleBackToHome"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 = 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('')
|
||||
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 handleBackToHome() {
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
// 菜单点击
|
||||
function handleMenuClick(menu) {
|
||||
// 使用路由导航
|
||||
router.push(`/user-center/${menu.id}`)
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
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;
|
||||
}
|
||||
|
||||
/* 右侧内容区 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 44px; /* Align with the content card's top padding area */
|
||||
left: 44px; /* Align with the content card's left padding area */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
z-index: 10;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
color: #A30113;
|
||||
}
|
||||
|
||||
.back-button svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.back-button:hover svg {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-center-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user