feat: 新增发票弹窗组件，并优化登录页、首页样式及用户中心相关功能
This commit is contained in:
Wei_佳
parent
ba2bc6c53e
commit
77af212fc2
BIN
web1/src/assets/img/home_bg.png
Normal file
BIN
web1/src/assets/img/home_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@ -3,41 +3,40 @@
|
||||
<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 class="user-section">
|
||||
<div class="user-avatar" @click="handleUserCenter">
|
||||
<img src="@/assets/img/icon_user.png" alt="User" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="title-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="glass-card">
|
||||
<div class="card-logo">
|
||||
<img src="@/assets/images/logo.png" alt="logo" />
|
||||
</div>
|
||||
<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 class="action-section">
|
||||
<button class="start-btn" @click="handleStartEvaluation">
|
||||
开始评估
|
||||
<img src="@/assets/images/go.png" alt="arrow" class="arrow-icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function handleStartEvaluation() {
|
||||
router.push('/pages')
|
||||
router.push('/valuation/list')
|
||||
}
|
||||
|
||||
function handleUserCenter() {
|
||||
@ -48,115 +47,145 @@ function handleUserCenter() {
|
||||
<style scoped>
|
||||
.home-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
|
||||
width: 100%;
|
||||
background-image: url('@/assets/img/home_bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.user-center {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-center:hover {
|
||||
background: rgba(136, 12, 34, 0.05);
|
||||
color: #880C22;
|
||||
.user-avatar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.user-center svg {
|
||||
color: currentColor;
|
||||
.user-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.content {
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 24px;
|
||||
padding: 60px 80px;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
.card-logo {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.card-logo img {
|
||||
height: 48px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 20px 0;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #555;
|
||||
line-height: 1.8;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 50px;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
height: 50px;
|
||||
padding: 0 60px;
|
||||
font-size: 18px;
|
||||
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
|
||||
background: linear-gradient(90deg, #880C22 0%, #B81C36 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 40px;
|
||||
font-size: 18px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(136, 12, 34, 0.3);
|
||||
}
|
||||
|
||||
.start-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(136, 12, 34, 0.3);
|
||||
box-shadow: 0 6px 16px rgba(136, 12, 34, 0.4);
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.glass-card {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
height: 44px;
|
||||
padding: 0 40px;
|
||||
font-size: 16px;
|
||||
.header {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,595 +1,109 @@
|
||||
<template>
|
||||
<div class="page flex-col">
|
||||
<div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
|
||||
<div class="box_1 flex-row">
|
||||
<div class="section_2 flex-col">
|
||||
<div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
|
||||
<AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
|
||||
<div
|
||||
style="transform: translateY(25px)"
|
||||
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;">
|
||||
<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价值评估系统
|
||||
</div>
|
||||
<div class="section_3 flex-col">
|
||||
<img
|
||||
class="image_1"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="loginTitleImg"
|
||||
/>
|
||||
<n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
|
||||
<n-form-item path="phone">
|
||||
<div class="block_1 flex-row">
|
||||
<div class="image-text_1 flex-row">
|
||||
<img
|
||||
class="thumbnail_1"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="iconUserImg"
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="loginInfo.phone"
|
||||
class="input-reset text-group_1 custom-n-input"
|
||||
placeholder="请输入账号"
|
||||
type="text"
|
||||
:bordered="false"
|
||||
@keypress.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<div class="block_2 flex-row justify-between">
|
||||
<n-form-item path="verifyCode" class="verify-code-item">
|
||||
<div class="section_4 flex-row">
|
||||
<div class="image-text_2 flex-row">
|
||||
<img
|
||||
class="thumbnail_2"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="iconCodeImg"
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="loginInfo.verifyCode"
|
||||
class="input-reset text-group_2 custom-n-input"
|
||||
placeholder="请输入验证码"
|
||||
type="text"
|
||||
:bordered="false"
|
||||
@keypress.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<div
|
||||
class="text-wrapper_1 flex-col cursor-pointer"
|
||||
@click="handleSendCode"
|
||||
:class="{ 'disabled': countdown > 0 }"
|
||||
>
|
||||
<span class="text_1">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</n-form>
|
||||
<div class="block_3 flex-row">
|
||||
<n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
|
||||
<span class="text-group_3">阅读并同意</span>
|
||||
<span class="text_2">《用户协议》</span>
|
||||
</n-checkbox>
|
||||
</div>
|
||||
<div
|
||||
class="text-wrapper_2 flex-col cursor-pointer"
|
||||
@click="handleLogin"
|
||||
:style="{ backgroundImage: `url(${loginBtnBg})` }"
|
||||
<div style="text-align: center; margin-top: 16px; color: #606266;">
|
||||
基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
|
||||
</div>
|
||||
<div mt-30>
|
||||
<n-input
|
||||
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"
|
||||
>
|
||||
<span class="text_3">立即登录</span>
|
||||
</div>
|
||||
<template #prefix>
|
||||
<img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
|
||||
</template>
|
||||
</n-input>
|
||||
|
||||
<n-button
|
||||
w-126
|
||||
h-42
|
||||
rounded-5
|
||||
type="primary"
|
||||
style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
|
||||
@click="handleRegister"
|
||||
>
|
||||
立即登录
|
||||
<img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { setToken } from '@/utils'
|
||||
import { lStorage, setToken } from '@/utils'
|
||||
import bgImg from '@/assets/images/login_bg.png'
|
||||
import api from '@/api'
|
||||
|
||||
// Images
|
||||
import loginTitleImg from '@/assets/img/login_title.png'
|
||||
import iconUserImg from '@/assets/img/icon_user.png'
|
||||
import iconCodeImg from '@/assets/img/icon_code.png'
|
||||
import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
|
||||
import loginBgFull from '@/assets/img/login_bg_full.png'
|
||||
import loginBoxLeft from '@/assets/img/login_box_left.png'
|
||||
import loginBtnBg from '@/assets/img/login_btn_bg.png'
|
||||
import { addDynamicRoutes } from '@/router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const { query } = useRoute()
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
|
||||
const loginInfo = ref({
|
||||
phone: '',
|
||||
verifyCode: '',
|
||||
})
|
||||
|
||||
const isAgreed = ref(false)
|
||||
const countdown = ref(0)
|
||||
let countdownTimer = null
|
||||
initLoginInfo()
|
||||
|
||||
function initLoginInfo() {
|
||||
if(localStorage.getItem('phone')){
|
||||
loginInfo.value.phone = localStorage.getItem('phone')
|
||||
}
|
||||
// const localLoginInfo = lStorage.get('loginInfo')
|
||||
// if (localLoginInfo) {
|
||||
// loginInfo.value.phone = localLoginInfo.phone || ''
|
||||
// loginInfo.value.password = localLoginInfo.password || ''
|
||||
// }
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
// Initialize login info
|
||||
if(localStorage.getItem('phone')){
|
||||
loginInfo.value.phone = localStorage.getItem('phone')
|
||||
}
|
||||
|
||||
const formRef = ref(null)
|
||||
const rules = {
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] }
|
||||
],
|
||||
verifyCode: [
|
||||
{ required: true, message: '请输入验证码', trigger: ['input', 'blur'] }
|
||||
]
|
||||
}
|
||||
|
||||
// Validate phone
|
||||
function validatePhone(phone) {
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
return phoneReg.test(phone)
|
||||
}
|
||||
|
||||
// Send verification code
|
||||
async function handleSendCode() {
|
||||
if (countdown.value > 0) return
|
||||
|
||||
async function handleRegister() {
|
||||
const { phone } = loginInfo.value
|
||||
|
||||
if (!phone) {
|
||||
$message.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
|
||||
if (!validatePhone(phone)) {
|
||||
$message.warning('请输入正确的手机号')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await api.sendVerifyCode({ phone })
|
||||
$message.success('验证码已发送')
|
||||
|
||||
// Start countdown
|
||||
countdown.value = 60
|
||||
countdownTimer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(countdownTimer)
|
||||
countdownTimer = null
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
// Login
|
||||
async function handleLogin() {
|
||||
const { phone, verifyCode } = loginInfo.value
|
||||
|
||||
if (!isAgreed.value) {
|
||||
$message.warning('请阅读并同意用户协议')
|
||||
return
|
||||
}
|
||||
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
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
|
||||
}
|
||||
}
|
||||
loading.value = true
|
||||
await api.registerPhone({ phone })
|
||||
.then(res=>{
|
||||
handleLogin()
|
||||
})
|
||||
.catch(res=>{
|
||||
handleLogin()
|
||||
})
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer)
|
||||
countdownTimer = null
|
||||
}
|
||||
})
|
||||
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
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Utility Classes */
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-reset {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Page Styles */
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #f0f2f5; /* Fallback */
|
||||
}
|
||||
|
||||
.section_1 {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box_1 {
|
||||
box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section_2 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 0px 100px 0px 0px;
|
||||
height: 500px;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
/* Matches reference: width 841px, margin-left -270px inside a 400px container */
|
||||
width: 841px;
|
||||
height: 500px;
|
||||
margin-left: -270px;
|
||||
background-repeat: no-repeat;
|
||||
/* Ensure the image covers this specific area if needed, or default */
|
||||
}
|
||||
|
||||
.section_3 {
|
||||
width: 331px;
|
||||
height: 298px;
|
||||
margin: 101px 85px 0 84px;
|
||||
}
|
||||
|
||||
.image_1 {
|
||||
width: 260px;
|
||||
height: 42px;
|
||||
margin-left: 1px;
|
||||
/* Removed object-fit: contain to match reference behavior */
|
||||
}
|
||||
|
||||
.block_1 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
width: 330px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
margin: 50px 0 0 1px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-text_1 {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin: 0 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumbnail_1 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text-group_1 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.text-group_1::placeholder {
|
||||
color: rgba(189, 189, 189, 1);
|
||||
}
|
||||
|
||||
.block_2 {
|
||||
width: 330px;
|
||||
height: 42px;
|
||||
margin: 20px 0 0 1px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
width: 191px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-text_2 {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin: 0 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumbnail_2 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text-group_2 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.text-group_2::placeholder {
|
||||
color: rgba(189, 189, 189, 1);
|
||||
}
|
||||
|
||||
.text-wrapper_1 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
width: 131px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_1:hover:not(.disabled) {
|
||||
border-color: rgba(163, 1, 19, 1);
|
||||
background-color: rgba(163, 1, 19, 0.05);
|
||||
}
|
||||
|
||||
.text-wrapper_1:active:not(.disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_1:hover:not(.disabled) .text_1 {
|
||||
color: rgba(163, 1, 19, 1);
|
||||
}
|
||||
|
||||
.block_3 {
|
||||
width: 100%;
|
||||
margin-top: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-group_3 {
|
||||
color: rgba(136, 136, 136, 1);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
line-height: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.text_2 {
|
||||
color: rgba(163, 1, 19, 1);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32px;
|
||||
font-family: Alibaba-PuHuiTi-M, sans-serif;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
line-height: 12px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text_2:hover {
|
||||
text-decoration: underline;
|
||||
color: rgba(180, 1, 21, 1);
|
||||
}
|
||||
|
||||
.text-wrapper_2 {
|
||||
height: 42px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 330px;
|
||||
margin: 10px 0 0 1px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-wrapper_2:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
|
||||
}
|
||||
|
||||
.text-wrapper_2:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
|
||||
}
|
||||
|
||||
.text_3 {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba-PuHuiTi-M, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_2:hover .text_3 {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Custom Naive UI Overrides */
|
||||
.custom-n-input {
|
||||
background-color: transparent !important;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input-wrapper) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input__input-el) {
|
||||
height: 16px !important;
|
||||
line-height: 16px !important;
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input__placeholder) {
|
||||
color: rgba(189, 189, 189, 1) !important;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input__state-border),
|
||||
.custom-n-input :deep(.n-input__border) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Fix Form Item Layout to prevent shifts */
|
||||
:deep(.n-form-item-feedback-wrapper) {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
padding-top: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
:deep(.n-form-item) {
|
||||
display: block;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure the code input item doesn't break flex layout */
|
||||
.verify-code-item {
|
||||
flex: 1;
|
||||
/* The section_4 inside has fixed width, so we just let it be */
|
||||
max-width: 191px;
|
||||
}
|
||||
|
||||
/* Input Container Interactions */
|
||||
.block_1,
|
||||
.section_4 {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.block_1:hover,
|
||||
.section_4:hover {
|
||||
border-color: rgba(163, 1, 19, 0.5);
|
||||
}
|
||||
|
||||
.block_1:focus-within,
|
||||
.section_4:focus-within {
|
||||
border-color: rgba(163, 1, 19, 1);
|
||||
box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
|
||||
}
|
||||
|
||||
/* Error State Styling */
|
||||
:deep(.n-form-item.n-form-item--error) .block_1,
|
||||
:deep(.n-form-item.n-form-item--error) .section_4 {
|
||||
border-color: #d03050;
|
||||
}
|
||||
|
||||
:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
|
||||
:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
|
||||
border-color: #d03050;
|
||||
box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
|
||||
}
|
||||
|
||||
/* Checkbox Customization */
|
||||
:deep(.agreement-checkbox .n-checkbox-box) {
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Checked State - Solid Red */
|
||||
:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
|
||||
background-color: rgba(163, 1, 19, 1) !important;
|
||||
border: 1px solid rgba(163, 1, 19, 1) !important;
|
||||
}
|
||||
|
||||
/* Hide the separate border element when checked to prevent color overlap/double borders */
|
||||
:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hover State - Red Border */
|
||||
:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
|
||||
border-color: rgba(163, 1, 19, 1) !important;
|
||||
}
|
||||
|
||||
/* Focus State - Red Border & Shadow */
|
||||
:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
|
||||
border-color: rgba(163, 1, 19, 1) !important;
|
||||
}
|
||||
|
||||
:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
|
||||
box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Ensure checkmark is white */
|
||||
:deep(.agreement-checkbox .n-checkbox-icon) {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
601
web1/src/views/login/index.vue.backup
Normal file
601
web1/src/views/login/index.vue.backup
Normal file
@ -0,0 +1,601 @@
|
||||
<template>
|
||||
<div class="page flex-col">
|
||||
<div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
|
||||
<div class="box_1 flex-row">
|
||||
<div class="section_2 flex-col">
|
||||
<div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
|
||||
</div>
|
||||
<div class="section_3 flex-col">
|
||||
<img
|
||||
class="image_1"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="loginTitleImg"
|
||||
/>
|
||||
<n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
|
||||
<n-form-item path="phone">
|
||||
<div class="block_1 flex-row" @click="phoneInputRef?.focus()">
|
||||
<div class="image-text_1 flex-row">
|
||||
<img
|
||||
class="thumbnail_1"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="iconUserImg"
|
||||
/>
|
||||
<n-input
|
||||
ref="phoneInputRef"
|
||||
v-model:value="loginInfo.phone"
|
||||
class="input-reset text-group_1 custom-n-input"
|
||||
placeholder="请输入账号"
|
||||
type="text"
|
||||
:bordered="false"
|
||||
@keypress.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<div class="block_2 flex-row justify-between">
|
||||
<n-form-item path="verifyCode" class="verify-code-item">
|
||||
<div class="section_4 flex-row" @click="codeInputRef?.focus()">
|
||||
<div class="image-text_2 flex-row">
|
||||
<img
|
||||
class="thumbnail_2"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="iconCodeImg"
|
||||
/>
|
||||
<n-input
|
||||
ref="codeInputRef"
|
||||
v-model:value="loginInfo.verifyCode"
|
||||
class="input-reset text-group_2 custom-n-input"
|
||||
placeholder="请输入验证码"
|
||||
type="text"
|
||||
:bordered="false"
|
||||
@keypress.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<div
|
||||
class="text-wrapper_1 flex-col cursor-pointer"
|
||||
@click="handleSendCode"
|
||||
:class="{ 'disabled': countdown > 0 }"
|
||||
>
|
||||
<span class="text_1">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</n-form>
|
||||
<div class="block_3 flex-row">
|
||||
<n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
|
||||
<span class="text-group_3">阅读并同意</span>
|
||||
<span class="text_2">《用户协议》</span>
|
||||
</n-checkbox>
|
||||
</div>
|
||||
<div
|
||||
class="text-wrapper_2 flex-col cursor-pointer"
|
||||
@click="handleLogin"
|
||||
:style="{ backgroundImage: `url(${loginBtnBg})` }"
|
||||
>
|
||||
<span class="text_3">立即登录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { setToken } from '@/utils'
|
||||
import api from '@/api'
|
||||
|
||||
// Images
|
||||
import loginTitleImg from '@/assets/img/login_title.png'
|
||||
import iconUserImg from '@/assets/img/icon_user.png'
|
||||
import iconCodeImg from '@/assets/img/icon_code.png'
|
||||
import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
|
||||
import loginBgFull from '@/assets/img/login_bg_full.png'
|
||||
import loginBoxLeft from '@/assets/img/login_box_left.png'
|
||||
import loginBtnBg from '@/assets/img/login_btn_bg.png'
|
||||
|
||||
const router = useRouter()
|
||||
const { query } = useRoute()
|
||||
|
||||
const loginInfo = ref({
|
||||
phone: '',
|
||||
verifyCode: '',
|
||||
})
|
||||
|
||||
const isAgreed = ref(false)
|
||||
const countdown = ref(0)
|
||||
let countdownTimer = null
|
||||
const loading = ref(false)
|
||||
|
||||
// Initialize login info
|
||||
if(localStorage.getItem('phone')){
|
||||
loginInfo.value.phone = localStorage.getItem('phone')
|
||||
}
|
||||
|
||||
const formRef = ref(null)
|
||||
const phoneInputRef = ref(null)
|
||||
const codeInputRef = ref(null)
|
||||
|
||||
const rules = {
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] }
|
||||
],
|
||||
verifyCode: [
|
||||
{ required: true, message: '请输入验证码', trigger: ['input', 'blur'] }
|
||||
]
|
||||
}
|
||||
|
||||
// Validate phone
|
||||
function validatePhone(phone) {
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
return phoneReg.test(phone)
|
||||
}
|
||||
|
||||
// Send verification code
|
||||
async function handleSendCode() {
|
||||
if (countdown.value > 0) return
|
||||
|
||||
const { phone } = loginInfo.value
|
||||
|
||||
if (!phone) {
|
||||
$message.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
|
||||
if (!validatePhone(phone)) {
|
||||
$message.warning('请输入正确的手机号')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await api.sendVerifyCode({ phone })
|
||||
$message.success('验证码已发送')
|
||||
|
||||
// Start countdown
|
||||
countdown.value = 60
|
||||
countdownTimer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(countdownTimer)
|
||||
countdownTimer = null
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
// Login
|
||||
async function handleLogin() {
|
||||
const { phone, verifyCode } = loginInfo.value
|
||||
|
||||
if (!isAgreed.value) {
|
||||
$message.warning('请阅读并同意用户协议')
|
||||
return
|
||||
}
|
||||
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
/* Utility Classes */
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-reset {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Page Styles */
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #f0f2f5; /* Fallback */
|
||||
}
|
||||
|
||||
.section_1 {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box_1 {
|
||||
box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section_2 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 0px 100px 0px 0px;
|
||||
height: 500px;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
/* Matches reference: width 841px, margin-left -270px inside a 400px container */
|
||||
width: 841px;
|
||||
height: 500px;
|
||||
margin-left: -270px;
|
||||
background-repeat: no-repeat;
|
||||
/* Ensure the image covers this specific area if needed, or default */
|
||||
}
|
||||
|
||||
.section_3 {
|
||||
width: 331px;
|
||||
height: 298px;
|
||||
margin: 101px 85px 0 84px;
|
||||
}
|
||||
|
||||
.image_1 {
|
||||
width: 260px;
|
||||
height: 42px;
|
||||
margin-left: 1px;
|
||||
/* Removed object-fit: contain to match reference behavior */
|
||||
}
|
||||
|
||||
.block_1 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
width: 330px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
margin: 50px 0 0 1px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-text_1 {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin: 0 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumbnail_1 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text-group_1 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.text-group_1::placeholder {
|
||||
color: rgba(189, 189, 189, 1);
|
||||
}
|
||||
|
||||
.block_2 {
|
||||
width: 330px;
|
||||
height: 42px;
|
||||
margin: 20px 0 0 1px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section_4 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
width: 191px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-text_2 {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin: 0 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumbnail_2 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text-group_2 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.text-group_2::placeholder {
|
||||
color: rgba(189, 189, 189, 1);
|
||||
}
|
||||
|
||||
.text-wrapper_1 {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(229, 229, 229, 1);
|
||||
width: 131px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_1:hover:not(.disabled) {
|
||||
border-color: rgba(163, 1, 19, 1);
|
||||
background-color: rgba(163, 1, 19, 0.05);
|
||||
}
|
||||
|
||||
.text-wrapper_1:active:not(.disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_1:hover:not(.disabled) .text_1 {
|
||||
color: rgba(163, 1, 19, 1);
|
||||
}
|
||||
|
||||
.block_3 {
|
||||
width: 100%;
|
||||
margin-top: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-group_3 {
|
||||
color: rgba(136, 136, 136, 1);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32px;
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
line-height: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.text_2 {
|
||||
color: rgba(163, 1, 19, 1);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32px;
|
||||
font-family: Alibaba-PuHuiTi-M, sans-serif;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
line-height: 12px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text_2:hover {
|
||||
text-decoration: underline;
|
||||
color: rgba(180, 1, 21, 1);
|
||||
}
|
||||
|
||||
.text-wrapper_2 {
|
||||
height: 42px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 330px;
|
||||
margin: 10px 0 0 1px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-wrapper_2:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
|
||||
}
|
||||
|
||||
.text-wrapper_2:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
|
||||
}
|
||||
|
||||
.text_3 {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba-PuHuiTi-M, sans-serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.text-wrapper_2:hover .text_3 {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Custom Naive UI Overrides */
|
||||
.custom-n-input {
|
||||
background-color: transparent !important;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input-wrapper) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input__input-el) {
|
||||
height: 16px !important;
|
||||
line-height: 16px !important;
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-family: Alibaba-PuHuiTi-R, sans-serif;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input__placeholder) {
|
||||
color: rgba(189, 189, 189, 1) !important;
|
||||
}
|
||||
|
||||
.custom-n-input :deep(.n-input__state-border),
|
||||
.custom-n-input :deep(.n-input__border) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Fix Form Item Layout to prevent shifts */
|
||||
:deep(.n-form-item-feedback-wrapper) {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
padding-top: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
:deep(.n-form-item) {
|
||||
display: block;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure the code input item doesn't break flex layout */
|
||||
.verify-code-item {
|
||||
flex: 1;
|
||||
/* The section_4 inside has fixed width, so we just let it be */
|
||||
max-width: 191px;
|
||||
}
|
||||
|
||||
/* Input Container Interactions */
|
||||
.block_1,
|
||||
.section_4 {
|
||||
transition: all 0.3s ease;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.block_1:hover,
|
||||
.section_4:hover {
|
||||
border-color: rgba(163, 1, 19, 0.5);
|
||||
}
|
||||
|
||||
.block_1:focus-within,
|
||||
.section_4:focus-within {
|
||||
border-color: rgba(163, 1, 19, 1);
|
||||
box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
|
||||
}
|
||||
|
||||
/* Error State Styling */
|
||||
:deep(.n-form-item.n-form-item--error) .block_1,
|
||||
:deep(.n-form-item.n-form-item--error) .section_4 {
|
||||
border-color: #d03050;
|
||||
}
|
||||
|
||||
:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
|
||||
:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
|
||||
border-color: #d03050;
|
||||
box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
|
||||
}
|
||||
|
||||
/* Checkbox Customization */
|
||||
:deep(.agreement-checkbox .n-checkbox-box) {
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Checked State - Solid Red */
|
||||
:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
|
||||
background-color: rgba(163, 1, 19, 1) !important;
|
||||
border: 1px solid rgba(163, 1, 19, 1) !important;
|
||||
}
|
||||
|
||||
/* Hide the separate border element when checked to prevent color overlap/double borders */
|
||||
:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hover State - Red Border */
|
||||
:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
|
||||
border-color: rgba(163, 1, 19, 1) !important;
|
||||
}
|
||||
|
||||
/* Focus State - Red Border & Shadow */
|
||||
:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
|
||||
border-color: rgba(163, 1, 19, 1) !important;
|
||||
}
|
||||
|
||||
:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
|
||||
box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Ensure checkmark is white */
|
||||
:deep(.agreement-checkbox .n-checkbox-icon) {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,74 +1,92 @@
|
||||
<template>
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">对公转账</div>
|
||||
</div>
|
||||
|
||||
<div class="transfer-container">
|
||||
<!-- 步骤条 -->
|
||||
<div class="steps">
|
||||
<div class="step" :class="{ active: currentStep >= 1 }">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-icon">
|
||||
<span v-if="currentStep === 1">1</span>
|
||||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 6L9 17L4 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="step-label">对公汇款</div>
|
||||
</div>
|
||||
<div class="step-line" :class="{ active: currentStep >= 2 }"></div>
|
||||
<div class="step-line">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 18L15 12L9 6" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="step" :class="{ active: currentStep >= 2 }">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-icon">
|
||||
<span v-if="currentStep <= 2">2</span>
|
||||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 6L9 17L4 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="step-label">上传凭证</div>
|
||||
</div>
|
||||
<div class="step-line" :class="{ active: currentStep >= 3 }"></div>
|
||||
<div class="step-line">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 18L15 12L9 6" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="step" :class="{ active: currentStep >= 3 }">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-icon">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 v-if="currentStep === 1" class="step-content">
|
||||
<div class="info-card">
|
||||
<div class="info-title">评估收费标准：<span class="highlight">6000元/次</span></div>
|
||||
<div class="info-subtitle">请汇款至以下账户：</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="label">公司名称：</span>
|
||||
<span class="value">成都文化产权交易所有限公司</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">税号：</span>
|
||||
<span class="value">91510104586429590T</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">注册地址：</span>
|
||||
<span class="value">成都市锦江区工业园区三色路38号</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">开户行：</span>
|
||||
<span class="value">中国民生银行股份有限公司成都科华支行</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">开户账号：</span>
|
||||
<span class="value">6343 8264 7</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">电话：</span>
|
||||
<span class="value">(028) 85915289</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<n-button class="next-btn" @click="handleNextStep">
|
||||
下一步
|
||||
</n-button>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="primary-btn" @click="handleNextStep">下一步</button>
|
||||
</div>
|
||||
</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">
|
||||
<div v-if="currentStep === 2" class="step-content">
|
||||
<div class="form-container">
|
||||
<div class="form-group">
|
||||
<div class="form-label required">上传支付凭证</div>
|
||||
<div class="upload-box" @click="triggerFileInput">
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
@ -77,69 +95,80 @@
|
||||
@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 class="upload-icon">+</div>
|
||||
<div class="upload-text">点击上传</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 class="upload-remove" @click.stop="removeFile">×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-tip">支持jpg、png、jpeg格式，大小不超过5M</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-label required">开票抬头</div>
|
||||
<div class="select-wrapper">
|
||||
<select v-model="selectedInvoiceHeader" class="custom-select">
|
||||
<option value="" disabled selected>请选择开票抬头</option>
|
||||
<option v-for="opt in invoiceHeaderOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="add-header-link" @click="handleAddHeader">+ 添加抬头</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开票抬头 -->
|
||||
<div class="form-item">
|
||||
<div class="form-label">开票抬头：</div>
|
||||
<n-select
|
||||
v-model:value="selectedInvoiceHeader"
|
||||
:options="invoiceHeaderOptions"
|
||||
placeholder="请选择开票抬头"
|
||||
/>
|
||||
<div class="form-group">
|
||||
<div class="form-label required">开票类型</div>
|
||||
<select v-model="selectedInvoiceType" class="custom-select">
|
||||
<option value="" disabled selected>请选择开票类型</option>
|
||||
<option v-for="opt in invoiceTypeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 开票类型 -->
|
||||
<div class="form-item">
|
||||
<div class="form-label">开票类型：</div>
|
||||
<n-select
|
||||
v-model:value="selectedInvoiceType"
|
||||
:options="invoiceTypeOptions"
|
||||
placeholder="请选择开票类型"
|
||||
/>
|
||||
<div class="btn-container">
|
||||
<button
|
||||
class="primary-btn"
|
||||
:disabled="!uploadedFile || !selectedInvoiceHeader || !selectedInvoiceType"
|
||||
@click="handleUploadSubmit"
|
||||
>
|
||||
确认上传
|
||||
</button>
|
||||
</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 v-if="currentStep === 3" class="step-content success-content">
|
||||
<div class="success-icon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="#67C23A"/>
|
||||
<path d="M17 8L10 15L7 12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="success-title">上传成功</div>
|
||||
<div class="success-desc">预计1-3个工作日内到账，请耐心等待</div>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="primary-btn" @click="handleReturnHome">返回首页</button>
|
||||
</div>
|
||||
<n-button class="return-btn" @click="handleReturnHome">
|
||||
返回首页
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引入抬头管理弹窗 -->
|
||||
<InvoiceModal
|
||||
v-model:show="showInvoiceModal"
|
||||
@submit="handleInvoiceModalSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import InvoiceModal from './InvoiceModal.vue'
|
||||
|
||||
const emit = defineEmits(['return-home'])
|
||||
|
||||
@ -152,14 +181,14 @@ const uploadedFile = ref(null)
|
||||
const uploadedFileUrl = ref('')
|
||||
|
||||
// 表单选择相关
|
||||
const selectedInvoiceHeader = ref(null)
|
||||
const selectedInvoiceType = ref(null)
|
||||
const selectedInvoiceHeader = ref('')
|
||||
const selectedInvoiceType = ref('')
|
||||
const showInvoiceModal = ref(false)
|
||||
|
||||
// 开票抬头选项
|
||||
const invoiceHeaderOptions = ref([
|
||||
{ label: '抬头1', value: 'header1' },
|
||||
{ label: '抬头2', value: 'header2' },
|
||||
{ label: '抬头3', value: 'header3' }
|
||||
{ label: '上海某某科技有限公司', value: 'header1' },
|
||||
{ label: '北京某某文化有限公司', value: 'header2' }
|
||||
])
|
||||
|
||||
// 开票类型选项
|
||||
@ -204,6 +233,21 @@ function removeFile() {
|
||||
}
|
||||
}
|
||||
|
||||
// 添加抬头
|
||||
function handleAddHeader() {
|
||||
showInvoiceModal.value = true
|
||||
}
|
||||
|
||||
// 处理抬头弹窗提交
|
||||
function handleInvoiceModalSubmit(data) {
|
||||
// 模拟添加抬头
|
||||
const newOption = { label: data.name, value: 'header_' + Date.now() }
|
||||
invoiceHeaderOptions.value.push(newOption)
|
||||
selectedInvoiceHeader.value = newOption.value
|
||||
showInvoiceModal.value = false
|
||||
$message.success('添加抬头成功')
|
||||
}
|
||||
|
||||
// 提交上传
|
||||
function handleUploadSubmit() {
|
||||
if (!uploadedFile.value || !selectedInvoiceHeader.value || !selectedInvoiceType.value) {
|
||||
@ -238,8 +282,26 @@ defineExpose({
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 40px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #A30113;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.transfer-container {
|
||||
@ -247,286 +309,267 @@ defineExpose({
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 步骤条样式 */
|
||||
.steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 60px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.step-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #EEEEEE;
|
||||
color: #909399;
|
||||
background: #C0C4CC;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step.active .step-number {
|
||||
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
|
||||
color: white;
|
||||
.step.active .step-icon {
|
||||
background: #A30113;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.step-line.active {
|
||||
background: #A30113;
|
||||
}
|
||||
|
||||
.transfer-info {
|
||||
background: #F5F7FA;
|
||||
/* 第一步内容 */
|
||||
.info-card {
|
||||
background: #F9FAFC;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
border: 1px solid #EEEEEE;
|
||||
padding: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 12px;
|
||||
border-left: 4px solid #A30113;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.info-title .highlight {
|
||||
color: #A30113;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
.info-subtitle {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
color: #909399;
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* 第二步内容 */
|
||||
.form-container {
|
||||
max-width: 500px;
|
||||
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-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 200px;
|
||||
border: 2px dashed #DCDFE6;
|
||||
border-radius: 8px;
|
||||
.form-label.required::before {
|
||||
content: '*';
|
||||
color: #F56C6C;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 1px dashed #DCDFE6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
transition: border-color 0.3s;
|
||||
background: #F5F7FA;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #4A90E2;
|
||||
background: #F5F9FF;
|
||||
.upload-box:hover {
|
||||
border-color: #A30113;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
.upload-icon {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.upload-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.upload-remove {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-btn:disabled {
|
||||
background: #fab6b6;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: #C0C4CC;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.upload-btn:not(:disabled):hover,
|
||||
.upload-btn:not(:disabled):focus,
|
||||
.upload-btn:not(:disabled):active {
|
||||
background: #A30113;
|
||||
opacity: 1;
|
||||
.select-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 第三步：等待到账 */
|
||||
.success-section {
|
||||
background: #F5F7FA;
|
||||
border-radius: 8px;
|
||||
padding: 60px 24px;
|
||||
border: 1px solid #EEEEEE;
|
||||
.custom-select {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
outline: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.custom-select:focus {
|
||||
border-color: #A30113;
|
||||
}
|
||||
|
||||
.add-header-link {
|
||||
font-size: 14px;
|
||||
color: #A30113;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 第三步内容 */
|
||||
.success-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
text-align: center;
|
||||
.success-icon {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.success-subtitle {
|
||||
.success-desc {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
color: #909399;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.return-btn {
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
/* 通用按钮 */
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
background: #A30113;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.return-btn:hover,
|
||||
.return-btn:focus,
|
||||
.return-btn:active {
|
||||
background: #A30113;
|
||||
opacity: 1;
|
||||
.primary-btn:hover {
|
||||
background: #880C22;
|
||||
}
|
||||
|
||||
.primary-btn:disabled {
|
||||
background: #fab6b6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,58 +1,105 @@
|
||||
<template>
|
||||
<div class="content-section">
|
||||
<div class="invoice-container">
|
||||
<div class="add-card" @click="handleAddInvoice">
|
||||
<div class="add-text">添加</div>
|
||||
<div class="section-header">
|
||||
<div class="header-left">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-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 class="add-btn" @click="handleAddInvoice">
|
||||
<span class="plus-icon">+</span>
|
||||
<span>添加抬头</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%">公司名称</th>
|
||||
<th style="width: 35%">税号</th>
|
||||
<th style="width: 25%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="invoice in invoiceList" :key="invoice.id">
|
||||
<td>{{ invoice.name }}</td>
|
||||
<td>{{ invoice.taxId || '123456789012345678' }}</td>
|
||||
<td>
|
||||
<div class="action-group">
|
||||
<div class="action-btn edit" @click="handleEditInvoice(invoice)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 4H4C3.44772 4 3 4.44772 3 5V20C3 20.5523 3.44772 21 4 21H19C19.5523 21 20 20.5523 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="action-btn delete" @click="handleDeleteInvoice(invoice)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="invoiceList.length === 0">
|
||||
<td colspan="3" class="empty-text">暂无抬头信息...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<InvoiceModal
|
||||
v-model:show="showModal"
|
||||
:edit-data="currentInvoice"
|
||||
@submit="handleModalSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
import InvoiceModal from './InvoiceModal.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
invoiceList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['add-invoice', 'delete-invoice'])
|
||||
const emit = defineEmits(['add-invoice', 'delete-invoice', 'update-invoice'])
|
||||
|
||||
const showModal = ref(false)
|
||||
const currentInvoice = ref(null)
|
||||
|
||||
// 添加开票
|
||||
function handleAddInvoice() {
|
||||
router.push('/invoice-header/add')
|
||||
currentInvoice.value = null
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// 编辑开票
|
||||
function handleEditInvoice(invoice) {
|
||||
currentInvoice.value = { ...invoice }
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// 删除开票
|
||||
function handleDeleteInvoice(invoice) {
|
||||
$message.info('删除开票功能开发中')
|
||||
// TODO: Add confirmation dialog
|
||||
emit('delete-invoice', invoice)
|
||||
}
|
||||
|
||||
// 处理弹窗提交
|
||||
function handleModalSubmit(data) {
|
||||
if (currentInvoice.value) {
|
||||
emit('update-invoice', { ...currentInvoice.value, ...data })
|
||||
} else {
|
||||
emit('add-invoice', data)
|
||||
}
|
||||
showModal.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -62,96 +109,114 @@ function handleDeleteInvoice(invoice) {
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 40px);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.invoice-container {
|
||||
max-width: 1000px;
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.add-card {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
background: #A30113;
|
||||
border-radius: 4px;
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.add-card:hover {
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #A30113;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 16px;
|
||||
background: #A30113;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background: #880C22;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
color: white;
|
||||
.plus-icon {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.invoice-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 60px;
|
||||
.custom-table th {
|
||||
text-align: left;
|
||||
padding: 12px 24px;
|
||||
background: #F5F7FA;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.invoice-card {
|
||||
background: #F5F7FA;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
.custom-table td {
|
||||
padding: 16px 24px;
|
||||
color: #606266;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.custom-table tr:hover td {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
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 {
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.invoice-action:hover {
|
||||
background: rgba(163, 1, 19, 0.1);
|
||||
.action-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.invoice-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.action-btn.edit {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.action-btn.delete {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
275
web1/src/views/user-center/components/InvoiceModal.vue
Normal file
275
web1/src/views/user-center/components/InvoiceModal.vue
Normal file
@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div v-if="show" class="modal-overlay" @click="handleClose">
|
||||
<div class="modal-content" @click.stop>
|
||||
<div class="modal-header">
|
||||
<div class="header-title">{{ editData ? '编辑抬头' : '添加抬头' }}</div>
|
||||
<div class="close-btn" @click="handleClose">
|
||||
<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="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="form-item">
|
||||
<div class="label required">公司名称</div>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
placeholder="请输入公司名称"
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="label required">税号</div>
|
||||
<input
|
||||
v-model="formData.taxId"
|
||||
type="text"
|
||||
placeholder="请输入纳税人识别号"
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="label">注册地址</div>
|
||||
<input
|
||||
v-model="formData.address"
|
||||
type="text"
|
||||
placeholder="请输入注册地址"
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="label">注册电话</div>
|
||||
<input
|
||||
v-model="formData.phone"
|
||||
type="text"
|
||||
placeholder="请输入注册电话"
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="label">开户银行</div>
|
||||
<input
|
||||
v-model="formData.bank"
|
||||
type="text"
|
||||
placeholder="请输入开户银行"
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="label">银行账号</div>
|
||||
<input
|
||||
v-model="formData.account"
|
||||
type="text"
|
||||
placeholder="请输入银行账号"
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-note">
|
||||
* 电子发票（PDF）和纸质发票具有同等法律效力，可支持报销入账
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn cancel" @click="handleClose">取消</button>
|
||||
<button class="btn submit" @click="handleSubmit">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
editData: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'submit'])
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
taxId: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
bank: '',
|
||||
account: ''
|
||||
})
|
||||
|
||||
watch(() => props.show, (newVal) => {
|
||||
if (newVal) {
|
||||
if (props.editData) {
|
||||
formData.value = { ...props.editData }
|
||||
} else {
|
||||
formData.value = {
|
||||
name: '',
|
||||
taxId: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
bank: '',
|
||||
account: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function handleClose() {
|
||||
emit('update:show', false)
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (!formData.value.name || !formData.value.taxId) {
|
||||
$message.warning('请填写必填项')
|
||||
return
|
||||
}
|
||||
emit('submit', formData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
width: 600px;
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.label.required::before {
|
||||
content: '*';
|
||||
color: #F56C6C;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.custom-input:focus {
|
||||
border-color: #A30113;
|
||||
}
|
||||
|
||||
.custom-input::placeholder {
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.form-note {
|
||||
font-size: 12px;
|
||||
color: #A30113;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid #EBEEF5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.btn.cancel {
|
||||
background: white;
|
||||
border-color: #DCDFE6;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.btn.cancel:hover {
|
||||
color: #A30113;
|
||||
border-color: #fde2e2;
|
||||
background-color: #fef0f0;
|
||||
}
|
||||
|
||||
.btn.submit {
|
||||
background: #A30113;
|
||||
border-color: #A30113;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.submit:hover {
|
||||
background: #880C22;
|
||||
border-color: #880C22;
|
||||
}
|
||||
</style>
|
||||
@ -1,35 +1,47 @@
|
||||
<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 class="section-header">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">估值记录</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%">资产名称</th>
|
||||
<th style="width: 25%">时间</th>
|
||||
<th style="width: 35%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in assetList" :key="item.id">
|
||||
<td>{{ item.name || '未知资产' }}</td>
|
||||
<td>{{ formatDate(item.created_at) }}</td>
|
||||
<td>
|
||||
<div class="action-group">
|
||||
<div class="action-btn" @click="handleDownloadReport(item)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 20H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>下载报告</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="handleDownloadCertificate(item)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 20H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>下载证书</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="assetList.length === 0">
|
||||
<td colspan="3" class="empty-text">暂无估值记录...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -48,22 +60,6 @@ function formatDate(dateStr) {
|
||||
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('下载报告功能开发中')
|
||||
@ -81,107 +77,78 @@ function handleDownloadCertificate(item) {
|
||||
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 {
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.asset-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #A30113;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.asset-date {
|
||||
font-size: 12px;
|
||||
.table-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-table th {
|
||||
text-align: left;
|
||||
padding: 12px 24px;
|
||||
background: #F5F7FA;
|
||||
color: #909399;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.asset-actions {
|
||||
.custom-table td {
|
||||
padding: 16px 24px;
|
||||
color: #606266;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.custom-table tr:hover td {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #A30113;
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #EEEEEE;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.action-item:hover {
|
||||
background: #A30113;
|
||||
color: white;
|
||||
border-color: #A30113;
|
||||
.action-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.empty-text {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user