feat：前端初始化
This commit is contained in:
若拙_233
parent
3aa806ea6b
commit
dd58869332
@ -17,7 +17,7 @@ export const PROXY_CONFIG = {
|
||||
* @转发路径 http://localhost:9999/api/v1/user
|
||||
*/
|
||||
'/api/v1': {
|
||||
target: 'http://127.0.0.1:9999',
|
||||
target: 'http://124.222.245.240:8080',
|
||||
changeOrigin: true,
|
||||
},
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "vue-fastapi-admin-web",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
|
||||
@ -5,6 +5,13 @@ export default {
|
||||
getUserInfo: () => request.get('/base/userinfo'),
|
||||
getUserMenu: () => request.get('/base/usermenu'),
|
||||
getUserApi: () => request.get('/base/userapi'),
|
||||
// 手机号
|
||||
registerPhone: (data) => request.post('/app-user/register', data, { noNeedToken: true }),
|
||||
loginPhone: (data) => request.post('/app-user/login', data, { noNeedToken: true }),
|
||||
// pages
|
||||
getIndustryList: () => request.get('/industry/list'),
|
||||
getHistoryList: (params) => request.get('/valuations', { params }),
|
||||
valuations: (data = {}) => request.post('/valuations', data),
|
||||
// profile
|
||||
updatePassword: (data = {}) => request.post('/base/update_password', data),
|
||||
// users
|
||||
|
||||
BIN
web/src/assets/images/delete.png
Normal file
BIN
web/src/assets/images/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 B |
BIN
web/src/assets/images/go.png
Normal file
BIN
web/src/assets/images/go.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
BIN
web/src/assets/images/login_bg.png
Normal file
BIN
web/src/assets/images/login_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
web/src/assets/images/logo.png
Normal file
BIN
web/src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
web/src/assets/images/phone.png
Normal file
BIN
web/src/assets/images/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 662 B |
BIN
web/src/assets/images/说明@2x.png
Normal file
BIN
web/src/assets/images/说明@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -6,7 +6,7 @@ const Layout = () => import('@/layout/index.vue')
|
||||
export const basicRoutes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/workbench', // 默认跳转到首页
|
||||
redirect: '/pages', // 默认跳转到首页
|
||||
meta: { order: 0 },
|
||||
},
|
||||
{
|
||||
@ -95,6 +95,12 @@ export const basicRoutes = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'pages',
|
||||
path: '/pages',
|
||||
component: () => import('@/views/pages/index.vue'),
|
||||
isHidden: true,
|
||||
},
|
||||
{
|
||||
name: '403',
|
||||
path: '/403',
|
||||
|
||||
@ -77,13 +77,13 @@ export const usePermissionStore = defineStore('permission', {
|
||||
},
|
||||
actions: {
|
||||
async generateRoutes() {
|
||||
const res = await api.getUserMenu() // 调用接口获取后端传来的菜单路由
|
||||
this.accessRoutes = buildRoutes(res.data) // 处理成前端路由格式
|
||||
// const res = await api.getUserMenu() // 调用接口获取后端传来的菜单路由
|
||||
// this.accessRoutes = buildRoutes(res.data) // 处理成前端路由格式
|
||||
return this.accessRoutes
|
||||
},
|
||||
async getAccessApis() {
|
||||
const res = await api.getUserApi()
|
||||
this.accessApis = res.data
|
||||
// const res = await api.getUserApi()
|
||||
// this.accessApis = res.data
|
||||
return this.accessApis
|
||||
},
|
||||
resetPermission() {
|
||||
|
||||
@ -2,49 +2,40 @@
|
||||
<AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
|
||||
<div
|
||||
style="transform: translateY(25px)"
|
||||
class="m-auto max-w-1500 min-w-345 f-c-c rounded-10 bg-white bg-opacity-60 p-15 card-shadow"
|
||||
class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
|
||||
dark:bg-dark
|
||||
>
|
||||
<div hidden w-380 px-20 py-35 md:block>
|
||||
<icon-custom-front-page pt-10 text-300 color-primary></icon-custom-front-page>
|
||||
</div>
|
||||
|
||||
<div w-320 flex-col px-20 py-35>
|
||||
<h5 f-c-c text-24 font-normal color="#6a6a6a">
|
||||
<icon-custom-logo mr-10 text-50 color-primary />{{ $t('app_name') }}
|
||||
</h5>
|
||||
<div mt-30>
|
||||
<n-input
|
||||
v-model:value="loginInfo.username"
|
||||
autofocus
|
||||
class="h-50 items-center pl-10 text-16"
|
||||
placeholder="admin"
|
||||
:maxlength="20"
|
||||
/>
|
||||
<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 style="text-align: center; margin-top: 16px; color: #606266;">
|
||||
基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
|
||||
</div>
|
||||
<div mt-30>
|
||||
<n-input
|
||||
v-model:value="loginInfo.password"
|
||||
class="h-50 items-center pl-10 text-16"
|
||||
type="password"
|
||||
show-password-on="mousedown"
|
||||
placeholder="123456"
|
||||
v-model:value="loginInfo.phone"
|
||||
style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="20"
|
||||
@keypress.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div mt-20>
|
||||
<n-button
|
||||
h-50
|
||||
w-full
|
||||
rounded-5
|
||||
text-16
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
@keypress.enter="handleRegister"
|
||||
>
|
||||
{{ $t('views.login.text_login') }}
|
||||
<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>
|
||||
@ -54,7 +45,7 @@
|
||||
|
||||
<script setup>
|
||||
import { lStorage, setToken } from '@/utils'
|
||||
import bgImg from '@/assets/images/login_bg.webp'
|
||||
import bgImg from '@/assets/images/login_bg.png'
|
||||
import api from '@/api'
|
||||
import { addDynamicRoutes } from '@/router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -64,8 +55,7 @@ const { query } = useRoute()
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
|
||||
const loginInfo = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
})
|
||||
|
||||
initLoginInfo()
|
||||
@ -73,25 +63,34 @@ initLoginInfo()
|
||||
function initLoginInfo() {
|
||||
const localLoginInfo = lStorage.get('loginInfo')
|
||||
if (localLoginInfo) {
|
||||
loginInfo.value.username = localLoginInfo.username || ''
|
||||
loginInfo.value.phone = localLoginInfo.phone || ''
|
||||
loginInfo.value.password = localLoginInfo.password || ''
|
||||
}
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
async function handleLogin() {
|
||||
const { username, password } = loginInfo.value
|
||||
if (!username || !password) {
|
||||
$message.warning(t('views.login.message_input_username_password'))
|
||||
|
||||
async function handleRegister() {
|
||||
const { phone } = loginInfo.value
|
||||
if (!phone) {
|
||||
$message.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
try {
|
||||
loading.value = true
|
||||
$message.loading(t('views.login.message_verifying'))
|
||||
const res = await api.login({ username, password: password.toString() })
|
||||
$message.success(t('views.login.message_login_success'))
|
||||
setToken(res.data.access_token)
|
||||
await addDynamicRoutes()
|
||||
loading.value = true
|
||||
await api.registerPhone({ phone })
|
||||
.then(res=>{
|
||||
handleLogin()
|
||||
})
|
||||
.catch(res=>{
|
||||
handleLogin()
|
||||
})
|
||||
}
|
||||
|
||||
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
|
||||
console.log('path', { path, query })
|
||||
@ -100,9 +99,8 @@ async function handleLogin() {
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('login error', e.error)
|
||||
}
|
||||
loading.value = false
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
149
web/src/views/pages/components/StepProgressBar.vue
Normal file
149
web/src/views/pages/components/StepProgressBar.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="step-progress-bar">
|
||||
<div class="step-container">
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
>
|
||||
<div
|
||||
class="step-circle"
|
||||
:class="{
|
||||
'completed': currentStep > index,
|
||||
'current': currentStep === index,
|
||||
'pending': currentStep < index
|
||||
}"
|
||||
>
|
||||
<span>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
|
||||
<!-- 虚线连接线 -->
|
||||
<div v-if="index < steps.length - 1" class="step-line">
|
||||
<div
|
||||
class="line-progress"
|
||||
:style="{ width: lineProgress(index) }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue';
|
||||
|
||||
interface Step {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
steps: {
|
||||
type: Array as PropType<Step[]>,
|
||||
required: true
|
||||
},
|
||||
currentStep: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
validator: (val: number) => val >= 0
|
||||
}
|
||||
});
|
||||
|
||||
// 计算连接线的进度
|
||||
const lineProgress = (index: number) => {
|
||||
if (props.currentStep > index + 1) {
|
||||
return '100%';
|
||||
} else if (props.currentStep === index + 1) {
|
||||
return '50%';
|
||||
}
|
||||
return '0%';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.step-progress-bar {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.step-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.completed {
|
||||
color: #fff;
|
||||
background: #A30113;
|
||||
}
|
||||
|
||||
.current {
|
||||
color: #fff;
|
||||
background: #A30113;
|
||||
}
|
||||
|
||||
.pending {
|
||||
color: #000;
|
||||
background-color: #f5f5f5;
|
||||
/* border: 1px solid #d9d9d9; */
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.line-progress {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
/* 虚线背景 */
|
||||
.step-line::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 15%;
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(to right, #A30113 50%, transparent 50%);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 9px 3px;
|
||||
content: '';
|
||||
}
|
||||
</style>
|
||||
844
web/src/views/pages/index.vue
Normal file
844
web/src/views/pages/index.vue
Normal file
@ -0,0 +1,844 @@
|
||||
<template>
|
||||
<div class="pages">
|
||||
<div class="left">
|
||||
<img style="width: 198px; height: 32px; margin: 20px;" src="@/assets/images/logo.png" alt="">
|
||||
<div style="margin-left: 20px;">
|
||||
<div v-for="(item, index) in historyList" @click="selectTimeBox(item)" :class="{ timeBox: item.id != isSelected, timeBox2: item.id == isSelected}">
|
||||
{{ item.time }}
|
||||
<img v-if="item.id == isSelected" class="delete-icon" src="@/assets/images/delete.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<StepProgressBar style="width: 800px; margin: auto; margin-top: 40px;" :steps="steps" :currentStep="currentStep" />
|
||||
<div class="line"></div>
|
||||
<div class="form-title-box">
|
||||
<div class="title-left"></div>
|
||||
<div v-if="currentStep==0" class="title-form">基础信息</div>
|
||||
<div v-if="currentStep==1" class="title-form">财务状况</div>
|
||||
<div v-if="currentStep==2" class="title-form">非遗等级与技术</div>
|
||||
<div v-if="currentStep==3" class="title-form">非遗应用与推广</div>
|
||||
<div v-if="currentStep==4" class="title-form">非遗资产衍生商品信息</div>
|
||||
</div>
|
||||
<NForm
|
||||
style="margin:auto; margin-top:30px; width:900px; height: calc(100vh - 500px); overflow-y: auto;"
|
||||
ref="modalFormRef"
|
||||
label-placement="top"
|
||||
label-align="top"
|
||||
:label-width="80"
|
||||
:model="modalForm"
|
||||
:rules="modalRules"
|
||||
require-mark-placement = "left"
|
||||
>
|
||||
<n-grid v-if="currentStep == 0" :cols="24" :x-gap="24">
|
||||
<n-form-item-gi :span="24" class="form-item" label="资产名称" path="asset_name">
|
||||
<NInput v-model:value="modalForm.asset_name" placeholder="请输入资产名称" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="10" class="form-item" label="所属机构" path="institution">
|
||||
<NInput v-model:value="modalForm.institution" placeholder="请输入所属机构" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="所属行业" path="industry">
|
||||
<n-select
|
||||
v-model:value="modalForm.industry"
|
||||
placeholder="请选择所属行业"
|
||||
:options="industryOptions"
|
||||
filterable
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
<n-grid v-if="currentStep == 1" :cols="24" :x-gap="0">
|
||||
<n-form-item-gi :span="10" class="form-item" label="近12个月机构营收/万元" path="annual_revenue">
|
||||
<NInput v-model:value="modalForm.annual_revenue" placeholder="请输入近12个月机构营收" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="近12个月机构研发投入/万元" path="rd_investment">
|
||||
<NInput v-model:value="modalForm.rd_investment" placeholder="请输入近12个月机构研发投入" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="24" label="近三年机构收益/万元" path="three_year_income" style="margin-left: 20px;">
|
||||
<NInput v-model:value="modalForm.three_year_income[0]" placeholder="第一年" style="width: 220px;" />
|
||||
<NInput v-model:value="modalForm.three_year_income[1]" placeholder="第二年" style="width: 220px; margin-left: 10px;"/>
|
||||
<NInput v-model:value="modalForm.three_year_income[2]" placeholder="第三年" style="width: 220px; margin-left: 10px;"/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="资产受资助情况" path="funding_status">
|
||||
<n-select
|
||||
v-model:value="modalForm.funding_status"
|
||||
placeholder="请选择资产受资助情况"
|
||||
:options="fundingOptions"
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
<n-grid v-if="currentStep == 2" :cols="24" :x-gap="0">
|
||||
<n-form-item-gi :span="24" class="form-item" label="非遗传承人等级" path="inheritor_level">
|
||||
<n-select v-model:value="modalForm.inheritor_level" placeholder="非遗传承人等级" :options="fundingOptions2"/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="24" label="非遗传承人年龄水平及数量" path="inheritor_age_count" style="margin-left: 20px;">
|
||||
<NInput v-model:value="modalForm.inheritor_age_count[0]" placeholder="请输入≤50岁传承人数量" style="width: 220px;" />
|
||||
<NInput v-model:value="modalForm.inheritor_age_count[1]" placeholder="请输入50-70岁传承人数量" style="width: 220px; margin-left: 10px;"/>
|
||||
<NInput v-model:value="modalForm.inheritor_age_count[2]" placeholder="请输入≥70岁传承人数量" style="width: 220px; margin-left: 10px;"/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="24" class="form-item" label="非遗传承人等级证书" path="inheritor_certificates">
|
||||
<NInput v-model:value="modalForm.inheritor_certificates" placeholder="非遗传承人等级证书" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="10" class="form-item" label="非遗等级" path="heritage_level">
|
||||
<n-select v-model:value="modalForm.heritage_level" placeholder="非遗等级" :options="heritageOptions" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="非遗资产所用专利的申请号" path="patent_application_no">
|
||||
<NInput v-model:value="modalForm.patent_application_no" placeholder="非遗资产所用专利的申请号" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="20" label="非遗资产历史证明证据及数量" path="historical_evidence" style="margin-left: 20px; width: 800px;">
|
||||
<NInput v-model:value="modalForm.historical_evidence[0]" placeholder="请输入出土实物样本数量" style="width: 220px;" />
|
||||
<NInput v-model:value="modalForm.historical_evidence[1]" placeholder="请输入古代文献样本数量" style="width: 220px; margin-left: 10px;"/>
|
||||
<NInput v-model:value="modalForm.historical_evidence[2]" placeholder="请输入传承人佐证样本数量" style="width: 220px; margin-left: 10px;"/>
|
||||
<NInput v-model:value="modalForm.historical_evidence[3]" placeholder="请输入现代研究样本数量" style="width: 220px; margin-left: 10px;"/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="24" class="form-item" label="非遗资产所用专利的证书" path="patent_certificates">
|
||||
<NInput v-model:value="modalForm.patent_certificates" placeholder="非遗资产所用专利的证书" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="24" class="form-item" label="非遗纹样图片" path="pattern_images">
|
||||
<NInput v-model:value="modalForm.pattern_images" placeholder="非遗纹样图片" />
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
<n-grid v-if="currentStep == 3" :cols="24" :x-gap="0">
|
||||
<n-form-item-gi :span="24" class="form-item" label="非遗资产应用成熟度" path="application_maturity">
|
||||
<n-select
|
||||
v-model:value="modalForm.application_maturity"
|
||||
placeholder="请选择"
|
||||
:options="maturityOptions"
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="9" class="form-item" label="非遗资产应用覆盖范围" path="application_coverage">
|
||||
<n-select
|
||||
v-model:value="modalForm.application_coverage"
|
||||
placeholder="请选择"
|
||||
:options="coverageOptions"
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="非遗资产跨界合作深度" path="cooperation_depth">
|
||||
<n-select
|
||||
v-model:value="modalForm.cooperation_depth"
|
||||
placeholder="请选择"
|
||||
:options="depthOptions"
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="近12个月线下相关宣讲活动次数" path="offline_activities">
|
||||
<NInput v-model:value="modalForm.offline_activities" placeholder="近12个月线下相关宣讲活动次数" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="16" style="margin-left: 20px;" label="线上相关宣传账号信息" path="online_accounts">
|
||||
<n-select
|
||||
style="width: 330px;"
|
||||
v-model:value="modalForm.online_accounts[0]"
|
||||
placeholder="请选择"
|
||||
:options="accountsOptions"
|
||||
/>
|
||||
<NInput v-model:value="modalForm.online_accounts[1]" placeholder="请输入账号" style="width: 220px; margin-left: 10px;" />
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
<n-grid v-if="currentStep == 4" :cols="24" :x-gap="0">
|
||||
<n-form-item-gi :span="10" class="form-item" label="该商品近12个月销售量" path="sales_volume">
|
||||
<NInput v-model:value="modalForm.sales_volume" placeholder="请输入" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="该商品近12个月的链接浏览量" path="link_views">
|
||||
<NInput v-model:value="modalForm.link_views" placeholder="请输入" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="10" class="form-item" label="该商品的发行量" path="circulation">
|
||||
<n-select v-model:value="modalForm.circulation" placeholder="请选择" :options="circulationOptions"/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" class="form-item" label="该商品最近一次市场活动时间" path="last_market_activity">
|
||||
<n-select v-model:value="modalForm.last_market_activity" placeholder="请选择" :options="activityOptions"/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="10" class="form-item" label="月交易额" path="monthly_transaction">
|
||||
<n-select v-model:value="modalForm.monthly_transaction" placeholder="请选择" :options="transactionOptions"/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="6" class="form-item" label="该商品近30天价格波动区间" path="price_fluctuation">
|
||||
<NInput v-model:value="modalForm.price_fluctuation[0]" placeholder="最低价" style="width: 220px;" />
|
||||
<span style="display: inline-block; margin: 0 8px;">-</span>
|
||||
<NInput v-model:value="modalForm.price_fluctuation[1]" placeholder="最高价" style="width: 220px;"/>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
</NForm>
|
||||
<div class="submit-box">
|
||||
<div v-if="currentStep != 0" class="submit-btn2" @click="previousStep">
|
||||
上一步
|
||||
</div>
|
||||
<div v-if="currentStep != 4" class="submit-btn" @click="nextStep">
|
||||
下一步
|
||||
</div>
|
||||
<div v-if="currentStep == 4" class="submit-btn" @click="nextStep">
|
||||
立即评估
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
|
||||
import StepProgressBar from './components/StepProgressBar.vue';
|
||||
import api from '@/api'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
const message = useMessage()
|
||||
const modalFormRef = ref<FormInst | null>(null)
|
||||
const isSelected = ref<Number | null>(null)
|
||||
const steps = [
|
||||
{ title: '基础信息' },
|
||||
{ title: '财务状况' },
|
||||
{ title: '非遗等级与技术' },
|
||||
{ title: '非遗应用与推广' },
|
||||
{ title: '非遗资产衍生商品信息' }
|
||||
];
|
||||
const currentStep = ref(0)
|
||||
const historyList = ref([
|
||||
{
|
||||
id: 0,
|
||||
time: '2025-09-12 16:23',
|
||||
},{
|
||||
id: 1,
|
||||
time: '2025-09-13 20:09',
|
||||
},{
|
||||
id: 2,
|
||||
time: '2025-09-14 03:02',
|
||||
},
|
||||
])
|
||||
const modalForm = reactive({
|
||||
asset_name: '',
|
||||
institution: '',
|
||||
industry: null,
|
||||
annual_revenue: '',
|
||||
rd_investment: '',
|
||||
three_year_income: [],
|
||||
funding_status: null,
|
||||
sales_volume:'',
|
||||
link_views:'',
|
||||
circulation:'',
|
||||
last_market_activity:'',
|
||||
monthly_transaction: '',
|
||||
price_fluctuation: [],
|
||||
application_maturity: null,
|
||||
application_coverage: null,
|
||||
cooperation_depth: null,
|
||||
offline_activities: '',
|
||||
online_accounts: [],
|
||||
inheritor_level: null,
|
||||
inheritor_age_count: [],
|
||||
inheritor_certificates: '',
|
||||
heritage_level: null,
|
||||
historical_evidence:[],
|
||||
patent_certificates: '',
|
||||
pattern_images: '',
|
||||
patent_application_no: '',
|
||||
})
|
||||
const modalRules = {
|
||||
asset_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入资产名称',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
institution: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入所属机构',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
industry: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择所属行业',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
annual_revenue: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入近12个月机构营收',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
rd_investment: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入近三年机构收益',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
three_year_income: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: ['input', 'blur'],
|
||||
len: 3,
|
||||
fields: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入第一年机构收益',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入第二年机构收益',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入第三年机构收益',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
historical_evidence: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: ['input', 'blur'],
|
||||
len: 4,
|
||||
fields: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入出土实物样本数量',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入古代文献样本数量',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入传承人佐证样本数量',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入现代研究样本数量',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
funding_status: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择资产受资助情况',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
inheritor_level : [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择非遗传承人等级',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
inheritor_age_count: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: ['input', 'blur'],
|
||||
len: 3,
|
||||
fields: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入≤50岁传承人数量',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入50-70岁传承人数量',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入≥70岁传承人数量',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
heritage_level: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择非遗等级',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
application_maturity:[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择非遗资产应用成熟度',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
application_coverage:[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择非遗资产应用覆盖范围',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
cooperation_depth: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择非遗资产跨界合作深度',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
offline_activities: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入近12个月线下相关宣讲活动次数',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
online_accounts: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: ['input', 'blur'],
|
||||
len: 2,
|
||||
fields: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择线上相关宣传账号信息',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入账号',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
sales_volume: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入该商品近12个月销售量',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
link_views: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入该商品近12个月的链接浏览量',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
circulation: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择该商品的发行量',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
last_market_activity: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择该商品最近一次市场活动时间',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
monthly_transaction: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择月交易额',
|
||||
trigger: ['input', 'blur'],
|
||||
},
|
||||
],
|
||||
price_fluctuation: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: ['input', 'blur'],
|
||||
len: 2,
|
||||
fields: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入最高价',
|
||||
trigger: ['input', 'blur']
|
||||
},{
|
||||
required: true,
|
||||
message: '请输入最低价',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
const industryOptions = ref([])
|
||||
const fundingOptions = [
|
||||
{
|
||||
label:'国家级资助',
|
||||
value: '0',
|
||||
},{
|
||||
label:'省级资助',
|
||||
value: '1',
|
||||
},{
|
||||
label:'无资助',
|
||||
value: '2',
|
||||
},
|
||||
]
|
||||
const fundingOptions2 = [
|
||||
{
|
||||
label:'国家级传承人',
|
||||
value: '0',
|
||||
},{
|
||||
label:'省级传承人',
|
||||
value: '1',
|
||||
},{
|
||||
label:'市级传承人',
|
||||
value: '2',
|
||||
},
|
||||
]
|
||||
const circulationOptions = [
|
||||
{
|
||||
label:'孤品：全球唯一，不可复制（如特定版权、唯一实物）',
|
||||
value: '0',
|
||||
},{
|
||||
label:'限量：总发行份数 ≤100份',
|
||||
value: '1',
|
||||
},{
|
||||
label:'稀有：总发行份数∈[100, 1000]份，或二级市场流通率 < 5%',
|
||||
value: '2',
|
||||
},{
|
||||
label:'流通：总发行份数 >1000份，或二级市场流通率 ≥ 5%',
|
||||
value: '3',
|
||||
},
|
||||
]
|
||||
const activityOptions = [
|
||||
{
|
||||
label:'近一周',
|
||||
value: '0',
|
||||
},{
|
||||
label:'近一月',
|
||||
value: '1',
|
||||
},{
|
||||
label:'近一年',
|
||||
value: '2',
|
||||
},{
|
||||
label:'其他',
|
||||
value: '3',
|
||||
},
|
||||
]
|
||||
const transactionOptions = [
|
||||
{
|
||||
label:'月交易额<100万元',
|
||||
value: '0',
|
||||
},{
|
||||
label:'月交易额＞100万＜500万',
|
||||
value: '1',
|
||||
},{
|
||||
label:'月交易额≥500万',
|
||||
value: '2',
|
||||
}
|
||||
]
|
||||
const maturityOptions = [
|
||||
{
|
||||
label:'成熟应用',
|
||||
value: '0',
|
||||
},{
|
||||
label:'推广阶段',
|
||||
value: '1',
|
||||
},{
|
||||
label:'试点阶段',
|
||||
value: '2',
|
||||
}
|
||||
]
|
||||
const depthOptions = [
|
||||
{
|
||||
label:'无',
|
||||
value: '0',
|
||||
},{
|
||||
label:'品牌联名',
|
||||
value: '1',
|
||||
},{
|
||||
label:'科技载体',
|
||||
value: '2',
|
||||
},{
|
||||
label:'国家外交礼品',
|
||||
value: '3',
|
||||
},
|
||||
]
|
||||
const coverageOptions = [
|
||||
{
|
||||
label:'全球覆盖',
|
||||
value: '0',
|
||||
},{
|
||||
label:'全国覆盖',
|
||||
value: '1',
|
||||
},{
|
||||
label:'区域覆盖',
|
||||
value: '2',
|
||||
}
|
||||
]
|
||||
const accountsOptions = [
|
||||
{
|
||||
label:'b站',
|
||||
value: '0',
|
||||
},{
|
||||
label:'抖音',
|
||||
value: '1',
|
||||
},{
|
||||
label:'快手',
|
||||
value: '2',
|
||||
},{
|
||||
label:'其他',
|
||||
value: '3',
|
||||
}
|
||||
]
|
||||
const heritageOptions = [
|
||||
{
|
||||
label:'国家级非遗',
|
||||
value: '0',
|
||||
},{
|
||||
label:'省级非遗',
|
||||
value: '1',
|
||||
},{
|
||||
label:'纳入《国家文化数字化战略清单》',
|
||||
value: '2',
|
||||
},{
|
||||
label:'无',
|
||||
value: '3',
|
||||
}
|
||||
]
|
||||
const previousStep = () => {
|
||||
currentStep.value --
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
console.log(modalForm)
|
||||
modalFormRef.value?.validate((errors) => {
|
||||
if (!errors) {
|
||||
if(currentStep.value != 4){
|
||||
currentStep.value ++
|
||||
}
|
||||
if(currentStep.value == 4){
|
||||
submit()
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log(errors)
|
||||
message.error('验证失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
const submit = () => {
|
||||
const data = {
|
||||
...modalForm,
|
||||
industry: industryOptions.value.find(item => item.value === modalForm.industry).label,
|
||||
funding_status: fundingOptions.find(item => item.value === modalForm.funding_status).label,
|
||||
inheritor_level: fundingOptions2.find(item => item.value === modalForm.inheritor_level).label,
|
||||
// "inheritor_ages": [60, 42, 35], # 传承人年龄
|
||||
inheritor_certificates: ["http://example.com/国家级非遗传承人证书.jpg"],
|
||||
heritage_asset_level: heritageOptions.find(item => item.value === modalForm.heritage_level).label,
|
||||
inheritor_ages: modalForm.inheritor_age_count,
|
||||
historical_evidence: {
|
||||
artifacts: modalForm.historical_evidence[0],
|
||||
ancient_literature: modalForm.historical_evidence[1],
|
||||
inheritor_testimony: modalForm.historical_evidence[3],
|
||||
modern_research: modalForm.historical_evidence[4]
|
||||
},
|
||||
patent_certificates: ["http://example.com/专利证书1.jpg", "http://example.com/专利证书2.jpg"],
|
||||
pattern_images: ["pattern1.jpg"],
|
||||
implementation_stage: maturityOptions.find(item => item.value === modalForm.application_maturity).label,
|
||||
coverage_area: coverageOptions.find(item => item.value === modalForm.application_coverage).label,
|
||||
collaboration_type: depthOptions.find(item => item.value === modalForm.cooperation_depth).label,
|
||||
platform_accounts: {
|
||||
bilibili: {
|
||||
followers_count: 8000,
|
||||
likes: 1000,
|
||||
comments: 500,
|
||||
shares: 500
|
||||
},
|
||||
douyin: {
|
||||
followers_count: 8000,
|
||||
likes: 1000,
|
||||
comments: 500,
|
||||
shares: 500
|
||||
}
|
||||
},
|
||||
scarcity_level: circulationOptions.find(item => item.value === modalForm.circulation).label,
|
||||
market_activity_time: activityOptions.find(item => item.value === modalForm.last_market_activity).label,
|
||||
price_range: {
|
||||
highest: modalForm.price_fluctuation[0],
|
||||
lowest: modalForm.price_fluctuation[1]
|
||||
},
|
||||
monthly_transaction_amount: transactionOptions.find(item => item.value === modalForm.monthly_transaction).label,
|
||||
}
|
||||
api.valuations(data).then(res=>{
|
||||
console.log(res.data)
|
||||
})
|
||||
console.log('data',data)
|
||||
}
|
||||
const getHistoryList = () => {
|
||||
const params = {
|
||||
page: 1,
|
||||
size: 99
|
||||
};
|
||||
api.getHistoryList(params).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
|
||||
const selectTimeBox = (item) => {
|
||||
isSelected.value = item.id
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const params = {
|
||||
page: 1,
|
||||
page_size: 99
|
||||
};
|
||||
await getHistoryList()
|
||||
// 使用await提高可读性
|
||||
const res = await api.getIndustryList(params);
|
||||
|
||||
// 检查响应数据有效性
|
||||
if (!res?.data || !Array.isArray(res.data)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 复制原始数据并处理，避免直接修改响应数据
|
||||
industryOptions.value = await res.data.map((element, index) => {
|
||||
// 只处理有名称且索引<=10的元素
|
||||
if (element.name) {
|
||||
return {
|
||||
...element, // 保留原始属性
|
||||
value: index + '',
|
||||
label: element.name
|
||||
};
|
||||
}
|
||||
// 对于不满足条件的元素，返回原始值或进行其他处理
|
||||
return element;
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pages {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background: #F8F8F8;
|
||||
.left {
|
||||
width: 270px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
margin: 40px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.delete-icon{
|
||||
float: right;
|
||||
transform: translate(0,2px);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.timeBox {
|
||||
margin-top: 10px;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.timeBox2 {
|
||||
margin-top: 10px;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: auto;
|
||||
margin-top: 40px;
|
||||
width: 900px;
|
||||
height: 1px;
|
||||
background: #EEEEEE;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.form-item{
|
||||
display: inline-block;
|
||||
width: 330px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.form-title-box{
|
||||
margin: auto;
|
||||
margin-top: 40px;
|
||||
width: 900px;
|
||||
}
|
||||
.title-left{
|
||||
width: 6px;
|
||||
height: 24px;
|
||||
background: #A30113;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
transform: translate(0,3px);
|
||||
}
|
||||
.title-form{
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #303133;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.submit-box {
|
||||
width: 900px;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.submit-btn{
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
background: #A30113;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 14px;
|
||||
font-style: normal;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.submit-btn2{
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
font-style: normal;
|
||||
padding-top: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #BBBBBB;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user