feat: 新增用户中心估值记录、对公转账、发票管理和侧边栏组件，并重构用户中心页面。
This commit is contained in:
Wei_佳
parent
26701c25cf
commit
62354c9e23
@ -22,10 +22,37 @@ export const basicRoutes = [
|
|||||||
name: 'UserCenter',
|
name: 'UserCenter',
|
||||||
path: '/user-center',
|
path: '/user-center',
|
||||||
component: () => import('@/views/user-center/index.vue'),
|
component: () => import('@/views/user-center/index.vue'),
|
||||||
|
redirect: '/user-center/history',
|
||||||
isHidden: true,
|
isHidden: true,
|
||||||
meta: {
|
meta: {
|
||||||
title: '个人中心',
|
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',
|
name: 'InvoiceHeaderAdd',
|
||||||
|
|||||||
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;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #EEEEEE;
|
||||||
|
color: #909399;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step.active .step-number {
|
||||||
|
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step.active .step-label {
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line {
|
||||||
|
width: 100px;
|
||||||
|
height: 2px;
|
||||||
|
background: #EEEEEE;
|
||||||
|
margin: 0 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line.active {
|
||||||
|
background: #A30113;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-info {
|
||||||
|
background: #F5F7FA;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid #EEEEEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-left: 12px;
|
||||||
|
border-left: 4px solid #A30113;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row .label {
|
||||||
|
color: #606266;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row .value {
|
||||||
|
color: #303133;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row .value.highlight {
|
||||||
|
color: #A30113;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn {
|
||||||
|
width: 180px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #A30113;
|
||||||
|
color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn:hover,
|
||||||
|
.next-btn:focus,
|
||||||
|
.next-btn:active {
|
||||||
|
background: #A30113;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第二步：上传凭证 */
|
||||||
|
.upload-section {
|
||||||
|
background: #F5F7FA;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid #EEEEEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-area {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
height: 200px;
|
||||||
|
border: 2px dashed #DCDFE6;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: white;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-area:hover {
|
||||||
|
border-color: #4A90E2;
|
||||||
|
background: #F5F9FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-placeholder {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-hint {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-preview img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-remove {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-remove:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn {
|
||||||
|
width: 180px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 20px auto 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #A30113;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn:disabled {
|
||||||
|
background: #fab6b6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn:not(:disabled):hover,
|
||||||
|
.upload-btn:not(:disabled):focus,
|
||||||
|
.upload-btn:not(:disabled):active {
|
||||||
|
background: #A30113;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第三步：等待到账 */
|
||||||
|
.success-section {
|
||||||
|
background: #F5F7FA;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 60px 24px;
|
||||||
|
border: 1px solid #EEEEEE;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-message {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-btn {
|
||||||
|
width: 180px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #A30113;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-btn:hover,
|
||||||
|
.return-btn:focus,
|
||||||
|
.return-btn:active {
|
||||||
|
background: #A30113;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
157
web1/src/views/user-center/components/InvoiceManagement.vue
Normal file
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;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-card {
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
width: 80px;
|
||||||
|
height: 32px;
|
||||||
|
background: #A30113;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-card:hover {
|
||||||
|
background: #880C22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-text {
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-card {
|
||||||
|
background: #F5F7FA;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #EEEEEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
|
||||||
|
border-color: #A30113;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-status {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-action {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-action:hover {
|
||||||
|
background: rgba(163, 1, 19, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.invoice-list {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
140
web1/src/views/user-center/components/UserSidebar.vue
Normal file
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;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-card {
|
||||||
|
background: #F5F7FA;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #EEEEEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
|
||||||
|
border-color: #A30113;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-date {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #A30113;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #EEEEEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-item:hover {
|
||||||
|
background: #A30113;
|
||||||
|
color: white;
|
||||||
|
border-color: #A30113;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-item:hover svg path {
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-status {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pending {
|
||||||
|
background: #FFF3E0;
|
||||||
|
color: #F57C00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-approved {
|
||||||
|
background: #E8F5E9;
|
||||||
|
color: #2E7D32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-rejected {
|
||||||
|
background: #FFEBEE;
|
||||||
|
color: #C62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-processing {
|
||||||
|
background: #E3F2FD;
|
||||||
|
color: #1565C0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.asset-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,36 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="user-center-container">
|
<div class="user-center-container">
|
||||||
<!-- 左侧边栏 -->
|
<!-- 左侧边栏 -->
|
||||||
<div class="sidebar">
|
<UserSidebar
|
||||||
<!-- 用户信息 -->
|
:user-phone="userPhone"
|
||||||
<div class="user-info">
|
:valuation-count="valuationCount"
|
||||||
<div class="avatar">
|
:current-menu="currentMenu"
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
:menu-list="menuList"
|
||||||
<circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
|
@menu-click="handleMenuClick"
|
||||||
<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 class="content-area">
|
||||||
@ -42,151 +19,33 @@
|
|||||||
<span>返回首页</span>
|
<span>返回首页</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 估值记录 -->
|
<!-- 子路由视图 -->
|
||||||
<div v-if="currentMenu === 'history'" class="content-section">
|
<router-view
|
||||||
<div class="asset-grid">
|
:asset-list="assetList"
|
||||||
<div
|
:invoice-list="invoiceList"
|
||||||
v-for="item in assetList"
|
@return-home="handleBackToHome"
|
||||||
: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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, h } from 'vue'
|
import { ref, onMounted, h, watch, computed } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import api from '@/api'
|
import api from '@/api'
|
||||||
|
import UserSidebar from './components/UserSidebar.vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
// 当前菜单
|
// 当前菜单（从路由路径计算）
|
||||||
const currentMenu = ref('history')
|
const currentMenu = computed(() => {
|
||||||
|
const path = route.path
|
||||||
// 当前步骤
|
if (path.includes('/history')) return 'history'
|
||||||
const currentStep = ref(1)
|
if (path.includes('/transfer')) return 'transfer'
|
||||||
|
if (path.includes('/invoice')) return 'invoice'
|
||||||
|
return 'history'
|
||||||
|
})
|
||||||
|
|
||||||
// 用户信息
|
// 用户信息
|
||||||
const userPhone = ref('')
|
const userPhone = ref('')
|
||||||
@ -282,38 +141,6 @@ const menuList = ref([
|
|||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
// 格式化日期
|
|
||||||
function formatDate(dateStr) {
|
|
||||||
if (!dateStr) return ''
|
|
||||||
return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取状态文本
|
|
||||||
function getStatusText(status) {
|
|
||||||
const statusMap = {
|
|
||||||
'pending': '审核中',
|
|
||||||
'approved': '已通过',
|
|
||||||
'rejected': '已拒绝',
|
|
||||||
'processing': '评估中'
|
|
||||||
}
|
|
||||||
return statusMap[status] || status
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取状态样式类
|
|
||||||
function getStatusClass(status) {
|
|
||||||
return `status-${status}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// 下载报告
|
|
||||||
function handleDownloadReport(item) {
|
|
||||||
$message.info('下载报告功能开发中')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 下载证书
|
|
||||||
function handleDownloadCertificate(item) {
|
|
||||||
$message.info('下载证书功能开发中')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 返回首页
|
// 返回首页
|
||||||
function handleBackToHome() {
|
function handleBackToHome() {
|
||||||
router.push('/home')
|
router.push('/home')
|
||||||
@ -321,24 +148,8 @@ function handleBackToHome() {
|
|||||||
|
|
||||||
// 菜单点击
|
// 菜单点击
|
||||||
function handleMenuClick(menu) {
|
function handleMenuClick(menu) {
|
||||||
currentMenu.value = menu.id
|
// 使用路由导航
|
||||||
}
|
router.push(`/user-center/${menu.id}`)
|
||||||
|
|
||||||
// 下一步
|
|
||||||
function handleNextStep() {
|
|
||||||
if (currentStep.value < 3) {
|
|
||||||
currentStep.value++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加开票
|
|
||||||
function handleAddInvoice() {
|
|
||||||
router.push('/invoice-header/add')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除开票
|
|
||||||
function handleDeleteInvoice(invoice) {
|
|
||||||
$message.info('删除开票功能开发中')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载数据
|
// 加载数据
|
||||||
@ -371,80 +182,6 @@ onMounted(() => {
|
|||||||
background: #F5F7FA;
|
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 {
|
.content-area {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -483,325 +220,9 @@ onMounted(() => {
|
|||||||
transform: translateX(-2px);
|
transform: translateX(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-section {
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 24px;
|
|
||||||
min-height: calc(100vh - 40px);
|
|
||||||
position: relative;
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 估值记录 */
|
|
||||||
.asset-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-card {
|
|
||||||
background: #F5F7FA;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 16px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
border: 1px solid #EEEEEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
|
|
||||||
border-color: #A30113;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #303133;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-date {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #909399;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #A30113;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
border: 1px solid #EEEEEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-item:hover {
|
|
||||||
background: #A30113;
|
|
||||||
color: white;
|
|
||||||
border-color: #A30113;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-item:hover svg path {
|
|
||||||
stroke: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-status {
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-pending {
|
|
||||||
background: #FFF3E0;
|
|
||||||
color: #F57C00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-approved {
|
|
||||||
background: #E8F5E9;
|
|
||||||
color: #2E7D32;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-rejected {
|
|
||||||
background: #FFEBEE;
|
|
||||||
color: #C62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-processing {
|
|
||||||
background: #E3F2FD;
|
|
||||||
color: #1565C0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 对公转账 */
|
|
||||||
.transfer-container {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-number {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #EEEEEE;
|
|
||||||
color: #909399;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step.active .step-number {
|
|
||||||
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step.active .step-label {
|
|
||||||
color: #303133;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-line {
|
|
||||||
width: 100px;
|
|
||||||
height: 2px;
|
|
||||||
background: #EEEEEE;
|
|
||||||
margin: 0 16px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-line.active {
|
|
||||||
background: #A30113;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transfer-info {
|
|
||||||
background: #F5F7FA;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 24px;
|
|
||||||
border: 1px solid #EEEEEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #303133;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-left: 12px;
|
|
||||||
border-left: 4px solid #A30113;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row {
|
|
||||||
display: flex;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row .label {
|
|
||||||
color: #606266;
|
|
||||||
min-width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row .value {
|
|
||||||
color: #303133;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row .value.highlight {
|
|
||||||
color: #A30113;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-btn {
|
|
||||||
width: 180px;
|
|
||||||
height: 40px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: block;
|
|
||||||
background: #A30113;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next-btn:hover {
|
|
||||||
background: #880C22;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 开票管理 */
|
|
||||||
.invoice-container {
|
|
||||||
max-width: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-card {
|
|
||||||
position: absolute;
|
|
||||||
top: 24px;
|
|
||||||
right: 24px;
|
|
||||||
width: 80px;
|
|
||||||
height: 32px;
|
|
||||||
background: #A30113;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-card:hover {
|
|
||||||
background: #880C22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-text {
|
|
||||||
color: white;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-list {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-card {
|
|
||||||
background: #F5F7FA;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
border: 1px solid #EEEEEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
|
|
||||||
border-color: #A30113;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-info {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-name {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #303133;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-status {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-action {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invoice-action:hover {
|
|
||||||
background: rgba(163, 1, 19, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.user-center-container {
|
.user-center-container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-grid,
|
|
||||||
.invoice-list {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user