系统上线运行问题修改
This commit is contained in:
parent
c06bc5fbbd
commit
79b9349598
|
|
@ -110,6 +110,7 @@ export const constantRoutes = [
|
|||
component: () =>
|
||||
import('@/views/publicService/productCenter/index.vue'),
|
||||
name: 'ProductCenter',
|
||||
meta: { showSearch: true } // 需要搜索框
|
||||
},
|
||||
|
||||
// 产品中心 ---- 查看详情页面
|
||||
|
|
@ -120,6 +121,7 @@ export const constantRoutes = [
|
|||
'@/views/publicService/productCenter/product-detail.vue'
|
||||
),
|
||||
name: 'ProductDetail',
|
||||
meta: { showSearch: false } // 不需要搜索框
|
||||
},
|
||||
// 产品中心 ---- 查看案例页面
|
||||
{
|
||||
|
|
@ -129,6 +131,7 @@ export const constantRoutes = [
|
|||
'@/views/publicService/productCenter/product-case-list.vue'
|
||||
),
|
||||
name: 'ProductCaseList',
|
||||
meta: { showSearch: false } // 不需要搜索框
|
||||
},
|
||||
// 公共组件
|
||||
{
|
||||
|
|
@ -136,6 +139,7 @@ export const constantRoutes = [
|
|||
component: () =>
|
||||
import('@/views/publicService/commonCom/index.vue'),
|
||||
name: 'CommonCom',
|
||||
meta: { showSearch: true } // 需要搜索框
|
||||
},
|
||||
// 宣传物料
|
||||
{
|
||||
|
|
@ -143,6 +147,7 @@ export const constantRoutes = [
|
|||
component: () =>
|
||||
import('@/views/publicService/proMaterials/index.vue'),
|
||||
name: 'ProMaterials',
|
||||
meta: { showSearch: true } // 需要搜索框
|
||||
},
|
||||
// 文档中心
|
||||
{
|
||||
|
|
@ -150,6 +155,7 @@ export const constantRoutes = [
|
|||
component: () =>
|
||||
import('@/views/publicService/docCenter/index.vue'),
|
||||
name: 'DocCenter',
|
||||
meta: { showSearch: true } // 需要搜索框
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,377 +1,397 @@
|
|||
<template>
|
||||
<div class="header_new">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<!-- <div class="logo-section" @click="handleLogoClick">-->
|
||||
<div class="logo-section" >
|
||||
<img
|
||||
src="../../../assets/logo/logo.png"
|
||||
alt="Logo"
|
||||
class="logo"
|
||||
/>
|
||||
<span class="platform-title">{{ platformTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-nav">
|
||||
<div
|
||||
class="nav-item"
|
||||
:key="item.routePath"
|
||||
v-for="item in navItems"
|
||||
@click="handleNavClick(item)"
|
||||
:class="{ active: activeNav === item.routePath }"
|
||||
>
|
||||
<img :src="item.icon" :alt="item.label" class="nav-icon" />
|
||||
<span class="nav-text">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showRightSection" class="header-right"> </div>
|
||||
|
||||
<el-dropdown
|
||||
trigger="hover"
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleLogoClick">
|
||||
后台管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<div class="header_new">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<!-- <div class="logo-section" @click="handleLogoClick">-->
|
||||
<div class="logo-section">
|
||||
<img
|
||||
src="../../../assets/logo/logo.png"
|
||||
alt="Logo"
|
||||
class="logo"
|
||||
/>
|
||||
<span class="platform-title">{{ platformTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-nav">
|
||||
<div
|
||||
class="nav-item"
|
||||
:key="item.routePath"
|
||||
v-for="item in navItems"
|
||||
@click="handleNavClick(item)"
|
||||
:class="{ active: activeNav === item.routePath }"
|
||||
>
|
||||
<img :src="item.icon" :alt="item.label" class="nav-icon"/>
|
||||
<span class="nav-text">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showRightSection" class="header-right">
|
||||
<div v-if="showSearch" class="search-box">
|
||||
<input
|
||||
v-model="internalSearchKeyword"
|
||||
type="text"
|
||||
placeholder="输入关键词搜索"
|
||||
class="search-input"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<button class="search-btn" @click="handleSearch">
|
||||
<i class="el-icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dropdown
|
||||
trigger="hover"
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar"/>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleLogoClick">
|
||||
后台管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {getPermissions} from "../../../utils/auth";
|
||||
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
props: {
|
||||
logoUrl: {
|
||||
type: String,
|
||||
default: '/img/psp/productCenter/logo.png',
|
||||
},
|
||||
platformTitle: {
|
||||
type: String,
|
||||
default: '公共服务平台',
|
||||
},
|
||||
showRightSection: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showUserAvatar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
userAvatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
searchKeyword: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: 'NavBar',
|
||||
props: {
|
||||
logoUrl: {
|
||||
type: String,
|
||||
default: '/img/psp/productCenter/logo.png',
|
||||
},
|
||||
platformTitle: {
|
||||
type: String,
|
||||
default: '公共服务平台',
|
||||
},
|
||||
showRightSection: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showUserAvatar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
userAvatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
searchKeyword: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['avatar']),
|
||||
// 将 activeNav 改为计算属性，根据当前路由自动判断
|
||||
activeNav() {
|
||||
// 根据当前路由名称返回对应的导航项
|
||||
const routeName = this.$route.name;
|
||||
const routePath = this.$route.path;
|
||||
computed: {
|
||||
...mapGetters(['avatar']),
|
||||
// 将 activeNav 改为计算属性，根据当前路由自动判断
|
||||
activeNav() {
|
||||
// 根据当前路由名称返回对应的导航项
|
||||
const routeName = this.$route.name;
|
||||
const routePath = this.$route.path;
|
||||
|
||||
// 匹配路由名称
|
||||
if (routeName) {
|
||||
const matchedItem = this.navItems.find(item => item.routePath === routeName);
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath;
|
||||
}
|
||||
// 匹配路由名称
|
||||
if (routeName) {
|
||||
const matchedItem = this.navItems.find(item => item.routePath === routeName);
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath;
|
||||
}
|
||||
}
|
||||
|
||||
// 匹配路由路径
|
||||
if (routePath) {
|
||||
const matchedItem = this.navItems.find(item =>
|
||||
routePath.includes(item.routePath.toLowerCase())
|
||||
);
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath;
|
||||
}
|
||||
// 匹配路由路径
|
||||
if (routePath) {
|
||||
const matchedItem = this.navItems.find(item =>
|
||||
routePath.includes(item.routePath.toLowerCase())
|
||||
);
|
||||
if (matchedItem) {
|
||||
return matchedItem.routePath;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认返回产品中心
|
||||
return 'ProductCenter';
|
||||
// 默认返回产品中心
|
||||
return 'ProductCenter';
|
||||
},
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// activeNav: 'ProductCenter', // 默认选中产品中心
|
||||
userAvatarUrl: this.userAvatar,
|
||||
internalSearchKeyword: this.searchKeyword,
|
||||
permissions:getPermissions(),
|
||||
navItems: [
|
||||
{
|
||||
label: '产品中心',
|
||||
routePath: 'ProductCenter',
|
||||
icon: require('../../../assets/images/productCenter/products.png'),
|
||||
},
|
||||
{
|
||||
label: '公共组件',
|
||||
routePath: 'CommonCom',
|
||||
icon: require('../../../assets/images/productCenter/components.png'),
|
||||
},
|
||||
{
|
||||
label: '宣传物料',
|
||||
routePath: 'ProMaterials',
|
||||
icon: require('../../../assets/images/productCenter/materials.png'),
|
||||
},
|
||||
{
|
||||
label: '文档中心',
|
||||
routePath: 'DocCenter',
|
||||
icon: require('../../../assets/images/productCenter/docs.png'),
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'() {
|
||||
// 路由变化时会自动更新 activeNav 计算属性
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
},
|
||||
searchKeyword(newVal) {
|
||||
this.internalSearchKeyword = newVal
|
||||
},
|
||||
userAvatar(newVal) {
|
||||
this.userAvatarUrl = newVal
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleNavClick(item) {
|
||||
// this.activeNav = item.routePath
|
||||
this.$router.push({
|
||||
name: item.routePath,
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// activeNav: 'ProductCenter', // 默认选中产品中心
|
||||
userAvatarUrl: this.userAvatar,
|
||||
internalSearchKeyword: this.searchKeyword,
|
||||
permissions: getPermissions(),
|
||||
navItems: [
|
||||
{
|
||||
label: '产品中心',
|
||||
routePath: 'ProductCenter',
|
||||
icon: require('../../../assets/images/productCenter/products.png'),
|
||||
},
|
||||
handleSearch() {
|
||||
// 修复搜索功能，直接使用internalSearchKeyword
|
||||
this.$emit('update:searchKeyword', this.internalSearchKeyword)
|
||||
this.$emit('search', this.internalSearchKeyword)
|
||||
{
|
||||
label: '公共组件',
|
||||
routePath: 'CommonCom',
|
||||
icon: require('../../../assets/images/productCenter/components.png'),
|
||||
},
|
||||
|
||||
// 跳转后台
|
||||
handleLogoClick() {
|
||||
if(this.permissions.includes(2) ){
|
||||
this.$router.push('/')
|
||||
}else{
|
||||
// 提示没有权限
|
||||
this.$message.error('没有后台权限，请联系管理员')
|
||||
}
|
||||
|
||||
{
|
||||
label: '宣传物料',
|
||||
routePath: 'ProMaterials',
|
||||
icon: require('../../../assets/images/productCenter/materials.png'),
|
||||
},
|
||||
|
||||
logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href =
|
||||
process.env.VUE_APP_ENV === 'production'
|
||||
? '/pubSerPlatform/index'
|
||||
: '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
{
|
||||
label: '文档中心',
|
||||
routePath: 'DocCenter',
|
||||
icon: require('../../../assets/images/productCenter/docs.png'),
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'() {
|
||||
// 路由变化时会自动更新 activeNav 计算属性
|
||||
},
|
||||
searchKeyword(newVal) {
|
||||
this.internalSearchKeyword = newVal
|
||||
},
|
||||
userAvatar(newVal) {
|
||||
this.userAvatarUrl = newVal
|
||||
},
|
||||
internalSearchKeyword(newVal) {
|
||||
// 当搜索关键词变化时，实时通知父组件
|
||||
this.$emit('update:searchKeyword', newVal)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNavClick(item) {
|
||||
// this.activeNav = item.routePath
|
||||
this.$router.push({
|
||||
name: item.routePath,
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
console.log('执行搜索:', this.internalSearchKeyword)
|
||||
|
||||
// 发送搜索事件给父组件
|
||||
this.$emit('search', this.internalSearchKeyword.trim())
|
||||
},
|
||||
|
||||
// 跳转后台
|
||||
handleLogoClick() {
|
||||
if (this.permissions.includes(2)) {
|
||||
this.$router.push('/')
|
||||
} else {
|
||||
// 提示没有权限
|
||||
this.$message.error('没有后台权限，请联系管理员')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href =
|
||||
process.env.VUE_APP_ENV === 'production'
|
||||
? '/pubSerPlatform/index'
|
||||
: '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header_new {
|
||||
background-image: url('../../../assets/images/productCenter/topbg.png');
|
||||
color: white;
|
||||
padding: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-image: url('../../../assets/images/productCenter/topbg.png');
|
||||
color: white;
|
||||
padding: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
//cursor: pointer;
|
||||
cursor: context-menu;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
//cursor: pointer;
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item.active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
.header-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<div class="platform-container">
|
||||
<!-- 使用导航栏组件 -->
|
||||
<NavBar />
|
||||
<div class="platform-container">
|
||||
<!-- 使用导航栏组件 -->
|
||||
<NavBar
|
||||
@search="handleSearch"
|
||||
:searchKeyword.sync="searchKeyword"
|
||||
:showSearch="showSearch"
|
||||
/>
|
||||
|
||||
<div class="main-content-1">
|
||||
<!-- 主体内容 -->
|
||||
<router-view />
|
||||
</div>
|
||||
<div class="main-content-1">
|
||||
<!-- 主体内容 -->
|
||||
<router-view :search-keyword="searchKeyword"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -15,25 +19,48 @@
|
|||
import NavBar from './components/navBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'PublicService',
|
||||
components: {
|
||||
NavBar,
|
||||
},
|
||||
name: 'PublicService',
|
||||
components: {
|
||||
NavBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '' // 搜索关键词
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 根据路由元信息控制搜索框显示
|
||||
showSearch() {
|
||||
// 检查当前路由的元信息
|
||||
return this.$route.meta.showSearch !== false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理搜索事件
|
||||
handleSearch(keyword) {
|
||||
console.log('接收到搜索关键词:', keyword)
|
||||
this.searchKeyword = keyword
|
||||
|
||||
// 可以在这里添加全局搜索逻辑
|
||||
// 例如触发当前页面的搜索方法
|
||||
this.$refs.currentView?.search(keyword)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.platform-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content-1 {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
|
|
@ -45,273 +72,273 @@ export default {
|
|||
// }
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item.active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 主体内容 */
|
||||
.main-content {
|
||||
display: flex;
|
||||
max-width: 95%;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px;
|
||||
gap: 24px;
|
||||
display: flex;
|
||||
max-width: 95%;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 左侧分类菜单 */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background-color: #f0f7ff;
|
||||
color: #4a90e2;
|
||||
background-color: #f0f7ff;
|
||||
color: #4a90e2;
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 服务卡片区域 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
height: 100%; /* 让卡片高度撑满 grid 单元格 */
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
height: 100%; /* 让卡片高度撑满 grid 单元格 */
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 180px; /* 固定高度，可根据设计调整 */
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa; /* 图片加载前的占位背景 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 180px; /* 固定高度，可根据设计调整 */
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa; /* 图片加载前的占位背景 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
|
||||
transition: transform 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .card-image img {
|
||||
transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px 0;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px 0;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
border-color: #4a90e2;
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
border-color: #4a90e2;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #357abd;
|
||||
border-color: #357abd;
|
||||
background-color: #357abd;
|
||||
border-color: #357abd;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: #4a90e2;
|
||||
border-color: #4a90e2;
|
||||
background-color: transparent;
|
||||
color: #4a90e2;
|
||||
border-color: #4a90e2;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
.header-nav {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
}
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
.search-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,6 @@
|
|||
|
||||
<div
|
||||
class="primary-btn"
|
||||
|
||||
@click="handleDownload(item)"
|
||||
>
|
||||
下 载
|
||||
|
|
@ -77,6 +76,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="handleCloseDialogOuter"
|
||||
|
|
@ -105,8 +105,6 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -124,6 +122,12 @@ export default {
|
|||
DialogModel,
|
||||
},
|
||||
dicts: ['tb_product_type'],
|
||||
props: {
|
||||
searchKeyword: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloading: false, // 添加下载状态标识
|
||||
|
|
@ -189,37 +193,6 @@ export default {
|
|||
}, 300);
|
||||
},
|
||||
|
||||
// 统一的筛选方法
|
||||
// updateFilteredList() {
|
||||
// let filtered = this.proMaterialsListAll;
|
||||
//
|
||||
// // 应用分类筛选
|
||||
// if (this.activeTypeValue !== 'all') {
|
||||
// filtered = filtered.filter(item => item.typeId === Number(this.activeTypeValue));
|
||||
// }
|
||||
//
|
||||
// // 应用类型筛选
|
||||
// if (this.selectedTypes.length > 0) {
|
||||
// filtered = filtered.filter(item =>
|
||||
// this.selectedTypes.includes(item.fileType.toString())
|
||||
// );
|
||||
// }
|
||||
//
|
||||
// this.showProMaterialsDuctList = filtered;
|
||||
// },
|
||||
// 统一的筛选方法
|
||||
updateFilteredList() {
|
||||
this.currentPage = 1;
|
||||
// 添加防抖
|
||||
if (this.requestTimeout) {
|
||||
clearTimeout(this.requestTimeout);
|
||||
}
|
||||
this.requestTimeout = setTimeout(() => {
|
||||
this.getProductCenterListInScreenFun();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
|
||||
// 获取产品卡片宽度
|
||||
getItemWidth() {
|
||||
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
|
||||
|
|
@ -245,7 +218,6 @@ export default {
|
|||
}
|
||||
},
|
||||
// 下载
|
||||
// 下载
|
||||
async handleDownload(service) {
|
||||
|
||||
// 防止重复点击
|
||||
|
|
@ -319,31 +291,32 @@ export default {
|
|||
}
|
||||
|
||||
this.executeGetProductList();
|
||||
|
||||
},
|
||||
|
||||
// 实际执行获取列表的方法
|
||||
async executeGetProductList() {
|
||||
try {
|
||||
let fileType = "";
|
||||
if (this.selectedTypes.length > 0 && this.selectedTypes.length < 2) {
|
||||
fileType = this.selectedTypes.join(',');
|
||||
}
|
||||
// 根据图片中的参数格式，调整为 list 参数
|
||||
const requestParams = {
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
typeId: this.activeTypeValue !== 'all' ? this.activeTypeValue : undefined,
|
||||
fileType: fileType
|
||||
};
|
||||
let fileType = "";
|
||||
if (this.selectedTypes.length > 0 && this.selectedTypes.length < 2) {
|
||||
fileType = this.selectedTypes.join(',');
|
||||
}
|
||||
// 根据图片中的参数格式，调整为 list 参数
|
||||
const requestParams = {
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
typeId: this.activeTypeValue !== 'all' ? this.activeTypeValue : undefined,
|
||||
fileType: fileType,
|
||||
// 添加搜索关键词参数
|
||||
name: this.searchKeyword || undefined
|
||||
};
|
||||
|
||||
const res = await getMaterialListAPI(requestParams);
|
||||
this.proMaterialsListAll = res.rows;
|
||||
this.total = res.total || 0;
|
||||
this.showProMaterialsDuctList = this.proMaterialsListAll;
|
||||
} catch (error) {
|
||||
console.error('获取物料列表失败:', error);
|
||||
}
|
||||
const res = await getMaterialListAPI(requestParams);
|
||||
this.proMaterialsListAll = res.rows;
|
||||
this.total = res.total || 0;
|
||||
this.showProMaterialsDuctList = this.proMaterialsListAll;
|
||||
} catch (error) {
|
||||
console.error('获取物料列表失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
|
|
@ -419,9 +392,22 @@ export default {
|
|||
}, 300);
|
||||
},
|
||||
|
||||
// 根据搜索关键词过滤物料列表（前端过滤备用方法）
|
||||
filterMaterialsByKeyword(materials, keyword) {
|
||||
if (!keyword) return materials
|
||||
|
||||
const lowerKeyword = keyword.toLowerCase()
|
||||
return materials.filter(item =>
|
||||
// 在物料名称、描述等字段中搜索
|
||||
(item.name && item.name.toLowerCase().includes(lowerKeyword)) ||
|
||||
(item.description && item.description.toLowerCase().includes(lowerKeyword)) ||
|
||||
(item.version && item.version.toLowerCase().includes(lowerKeyword)) ||
|
||||
(item.typeName && item.typeName.toLowerCase().includes(lowerKeyword))
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
// 监听分类变化
|
||||
// 监听分类变化和搜索关键词变化
|
||||
watch: {
|
||||
activeTypeValue() {
|
||||
this.currentPage = 1;
|
||||
|
|
@ -433,6 +419,29 @@ export default {
|
|||
this.getProductCenterListInScreenFun();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
// 监听搜索关键词变化
|
||||
searchKeyword(newVal) {
|
||||
this.currentPage = 1;
|
||||
// 添加防抖
|
||||
if (this.requestTimeout) {
|
||||
clearTimeout(this.requestTimeout);
|
||||
}
|
||||
this.requestTimeout = setTimeout(() => {
|
||||
this.getProductCenterListInScreenFun();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
selectedTypes() {
|
||||
this.currentPage = 1;
|
||||
// 添加防抖
|
||||
if (this.requestTimeout) {
|
||||
clearTimeout(this.requestTimeout);
|
||||
}
|
||||
this.requestTimeout = setTimeout(() => {
|
||||
this.getProductCenterListInScreenFun();
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.requestTimeout) {
|
||||
|
|
|
|||
|
|
@ -1,296 +1,337 @@
|
|||
<template>
|
||||
<!-- 产品中心 -->
|
||||
<div class="product-center">
|
||||
<div class="sidebar">
|
||||
<div
|
||||
:key="item.value"
|
||||
class="category-item"
|
||||
v-for="item in leftMenuList"
|
||||
@click="activeTypeValue = item.value"
|
||||
:class="{ active: activeTypeValue == item.value }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 产品中心 -->
|
||||
<div class="product-center">
|
||||
<div class="sidebar">
|
||||
<div
|
||||
:key="item.value"
|
||||
class="category-item"
|
||||
v-for="item in leftMenuList"
|
||||
@click="activeTypeValue = item.value"
|
||||
:class="{ active: activeTypeValue == item.value }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-area"
|
||||
:class="{ 'compact-grid': showProductList.length >= 5 && showProductList.length <= 8 }"
|
||||
ref="servicesGrid">
|
||||
<div
|
||||
:key="item.id"
|
||||
class="services-grid"
|
||||
v-for="item in showProductList"
|
||||
>
|
||||
<div class="card-image">
|
||||
<ImagePreview
|
||||
:height="150"
|
||||
:borderRadius="10"
|
||||
:width="itemWidth"
|
||||
:src1="item.linkImage"
|
||||
:isShowMask="true"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="card-title"
|
||||
:style="{ width: itemWidth - 40 + 'px' }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div
|
||||
class="primary-btn"
|
||||
:class="{
|
||||
<div class="content-area"
|
||||
:class="{ 'compact-grid': showProductList.length >= 5 && showProductList.length <= 8 }"
|
||||
ref="servicesGrid">
|
||||
<div
|
||||
:key="item.id"
|
||||
class="services-grid"
|
||||
v-for="item in showProductList"
|
||||
>
|
||||
<div class="card-image">
|
||||
<ImagePreview
|
||||
:height="150"
|
||||
:borderRadius="10"
|
||||
:width="itemWidth"
|
||||
:src1="item.linkImage"
|
||||
:isShowMask="true"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="card-title"
|
||||
:style="{ width: itemWidth - 40 + 'px' }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div
|
||||
class="primary-btn"
|
||||
:class="{
|
||||
isDisabled: item.isAccess == 0,
|
||||
}"
|
||||
@click="handleDemo(item)"
|
||||
>
|
||||
访问演示
|
||||
</div>
|
||||
<div @click="handleDetail(item)"> 查看详情 </div>
|
||||
</div>
|
||||
</div>
|
||||
@click="handleDemo(item)"
|
||||
>
|
||||
访问演示
|
||||
</div>
|
||||
<div @click="handleDetail(item)"> 查看详情 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProductCenterListAPI } from '@/api/publicService/productCenter'
|
||||
export default {
|
||||
name: 'ProductCenter',
|
||||
dicts: ['tb_product_type'],
|
||||
data() {
|
||||
return {
|
||||
activeTypeValue: 'all', // 当前激活的分类
|
||||
leftMenuList: [
|
||||
{
|
||||
label: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
], // 左侧菜单列表
|
||||
productListAll: [], // 所有产品列表
|
||||
showProductList: [], // 需要显示的产品列表
|
||||
itemWidth: 0, // 产品卡片宽度
|
||||
}
|
||||
name: 'ProductCenter',
|
||||
dicts: ['tb_product_type'],
|
||||
props: {
|
||||
searchKeyword: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTypeValue: 'all', // 当前激活的分类
|
||||
leftMenuList: [
|
||||
{
|
||||
label: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
], // 左侧菜单列表
|
||||
productListAll: [], // 所有产品列表
|
||||
showProductList: [], // 需要显示的产品列表
|
||||
itemWidth: 0, // 产品卡片宽度
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getProductCenterListInScreenFun()
|
||||
},
|
||||
mounted() {
|
||||
// 监听字典数据加载完成事件
|
||||
this.$on('dictReady', (dict) => {
|
||||
this.initLeftMenuList()
|
||||
})
|
||||
|
||||
// 如果字典数据已经加载完成，直接初始化
|
||||
if (this.dict && this.dict.type && this.dict.type.tb_product_type) {
|
||||
this.initLeftMenuList()
|
||||
}
|
||||
|
||||
this.getItemWidth()
|
||||
},
|
||||
methods: {
|
||||
// 获取产品卡片宽度
|
||||
getItemWidth() {
|
||||
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getProductCenterListInScreenFun()
|
||||
},
|
||||
mounted() {
|
||||
// 监听字典数据加载完成事件
|
||||
this.$on('dictReady', (dict) => {
|
||||
this.initLeftMenuList()
|
||||
})
|
||||
|
||||
// 如果字典数据已经加载完成，直接初始化
|
||||
if (this.dict && this.dict.type && this.dict.type.tb_product_type) {
|
||||
this.initLeftMenuList()
|
||||
}
|
||||
|
||||
this.getItemWidth()
|
||||
},
|
||||
methods: {
|
||||
// 获取产品卡片宽度
|
||||
getItemWidth() {
|
||||
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
|
||||
},
|
||||
|
||||
// 初始化左侧菜单列表
|
||||
initLeftMenuList() {
|
||||
try {
|
||||
if (
|
||||
this.dict &&
|
||||
this.dict.type &&
|
||||
this.dict.type.tb_product_type
|
||||
) {
|
||||
// 添加字典数据到菜单
|
||||
this.dict.type.tb_product_type.forEach((item) => {
|
||||
this.leftMenuList.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
})
|
||||
})
|
||||
}
|
||||
} catch (error) {}
|
||||
},
|
||||
// 访问演示地址
|
||||
handleDemo(service) {
|
||||
if (service.isAccess == 0) {
|
||||
this.$modal.msgWarning('该产品不支持访问')
|
||||
return
|
||||
}
|
||||
|
||||
// 确保 URL 是完整的绝对路径
|
||||
let url = service.linkUrl
|
||||
// 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
// 如果 URL 以 www. 开头，直接添加 https://
|
||||
if (url.startsWith('www.')) {
|
||||
url = 'https://' + url
|
||||
} else {
|
||||
// 其他情况，添加 https://
|
||||
url = 'https://' + url
|
||||
}
|
||||
}
|
||||
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
// 查看详情
|
||||
handleDetail(service) {
|
||||
this.$router.push({
|
||||
name: 'ProductDetail',
|
||||
params: { id: service.id },
|
||||
// 初始化左侧菜单列表
|
||||
initLeftMenuList() {
|
||||
try {
|
||||
if (
|
||||
this.dict &&
|
||||
this.dict.type &&
|
||||
this.dict.type.tb_product_type
|
||||
) {
|
||||
// 添加字典数据到菜单
|
||||
this.dict.type.tb_product_type.forEach((item) => {
|
||||
this.leftMenuList.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
})
|
||||
},
|
||||
// 鼠标悬浮
|
||||
handleCardHover(serviceId) {
|
||||
this.hoveredCard = serviceId
|
||||
},
|
||||
// 鼠标离开
|
||||
handleCardLeave() {
|
||||
this.hoveredCard = null
|
||||
},
|
||||
})
|
||||
}
|
||||
} catch (error) {}
|
||||
},
|
||||
// 访问演示地址
|
||||
handleDemo(service) {
|
||||
if (service.isAccess == 0) {
|
||||
this.$modal.msgWarning('该产品不支持访问')
|
||||
return
|
||||
}
|
||||
|
||||
// 获取产品列表
|
||||
async getProductCenterListInScreenFun() {
|
||||
const res = await getProductCenterListAPI({})
|
||||
this.productListAll = res.data
|
||||
this.showProductList = this.productListAll
|
||||
},
|
||||
// 确保 URL 是完整的绝对路径
|
||||
let url = service.linkUrl
|
||||
// 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
// 如果 URL 以 www. 开头，直接添加 https://
|
||||
if (url.startsWith('www.')) {
|
||||
url = 'https://' + url
|
||||
} else {
|
||||
// 其他情况，添加 https://
|
||||
url = 'https://' + url
|
||||
}
|
||||
}
|
||||
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
// 查看详情
|
||||
handleDetail(service) {
|
||||
this.$router.push({
|
||||
name: 'ProductDetail',
|
||||
params: { id: service.id },
|
||||
})
|
||||
},
|
||||
// 鼠标悬浮
|
||||
handleCardHover(serviceId) {
|
||||
this.hoveredCard = serviceId
|
||||
},
|
||||
// 鼠标离开
|
||||
handleCardLeave() {
|
||||
this.hoveredCard = null
|
||||
},
|
||||
|
||||
// 监听分类变化
|
||||
watch: {
|
||||
activeTypeValue(newVal) {
|
||||
if (newVal === 'all') {
|
||||
this.showProductList = this.productListAll
|
||||
} else {
|
||||
this.showProductList = this.productListAll.filter(
|
||||
(item) => item.typeId === newVal,
|
||||
)
|
||||
}
|
||||
},
|
||||
// 获取产品列表
|
||||
async getProductCenterListInScreenFun() {
|
||||
const res = await getProductCenterListAPI({})
|
||||
this.productListAll = res.data
|
||||
this.showProductList = this.productListAll
|
||||
},
|
||||
|
||||
// 根据搜索关键词过滤产品列表
|
||||
filterProductsByKeyword(products, keyword) {
|
||||
if (!keyword) return products
|
||||
|
||||
const lowerKeyword = keyword.toLowerCase()
|
||||
return products.filter(item =>
|
||||
// 在产品名称、描述等字段中搜索
|
||||
(item.name && item.name.toLowerCase().includes(lowerKeyword)) ||
|
||||
(item.description && item.description.toLowerCase().includes(lowerKeyword)) ||
|
||||
(item.typeName && item.typeName.toLowerCase().includes(lowerKeyword))
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
// 监听分类变化和搜索关键词变化
|
||||
watch: {
|
||||
activeTypeValue(newVal) {
|
||||
let filteredProducts = []
|
||||
|
||||
if (newVal === 'all') {
|
||||
filteredProducts = this.productListAll
|
||||
} else {
|
||||
filteredProducts = this.productListAll.filter(
|
||||
(item) => item.typeId === newVal,
|
||||
)
|
||||
}
|
||||
|
||||
// 应用搜索过滤
|
||||
this.showProductList = this.filterProductsByKeyword(filteredProducts, this.searchKeyword)
|
||||
},
|
||||
|
||||
// 监听搜索关键词变化
|
||||
searchKeyword(newVal) {
|
||||
let filteredProducts = []
|
||||
|
||||
// 先根据分类过滤
|
||||
if (this.activeTypeValue === 'all') {
|
||||
filteredProducts = this.productListAll
|
||||
} else {
|
||||
filteredProducts = this.productListAll.filter(
|
||||
(item) => item.typeId === this.activeTypeValue,
|
||||
)
|
||||
}
|
||||
|
||||
// 再根据搜索关键词过滤
|
||||
this.showProductList = this.filterProductsByKeyword(filteredProducts, newVal)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.product-center {
|
||||
width: 100%;
|
||||
height: 100%; /* 设置视口高度 */
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 0;
|
||||
gap: 24px;
|
||||
box-sizing: border-box; /* 确保padding包含在高度内 */
|
||||
width: 100%;
|
||||
height: 100%; /* 设置视口高度 */
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 0;
|
||||
gap: 24px;
|
||||
box-sizing: border-box; /* 确保padding包含在高度内 */
|
||||
|
||||
/* 左侧分类菜单 */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
/* 左侧分类菜单 */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 12px;
|
||||
padding-top: 2px;
|
||||
max-height: calc(100vh - 80px); /* 减去顶部padding */
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 33px;
|
||||
|
||||
.services-grid {
|
||||
height: 260px; /* 给子元素设置固定高度以便测试滚动 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #d6d1d1;
|
||||
border-radius: 10px;
|
||||
align-content: flex-start;
|
||||
justify-items: center;
|
||||
|
||||
// background-color: skyblue;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 12px;
|
||||
padding-top: 2px;
|
||||
max-height: calc(100vh - 80px); /* 减去顶部padding */
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 33px;
|
||||
|
||||
.services-grid {
|
||||
height: 260px; /* 给子元素设置固定高度以便测试滚动 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #d6d1d1;
|
||||
border-radius: 10px;
|
||||
align-content: flex-start;
|
||||
justify-items: center;
|
||||
|
||||
// background-color: skyblue;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 165px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #d6d1d1;
|
||||
}
|
||||
|
||||
.services-grid:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
padding: 8px 0;
|
||||
font-weight: bold;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
// 多行文本溢出
|
||||
white-space: nowrap; /* 禁止文本换行 */
|
||||
overflow: hidden; /* 超出容器部分隐藏 */
|
||||
text-overflow: ellipsis; /* 溢出部分用省略号表示 */
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
div {
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& div:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
color: white;
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
}
|
||||
|
||||
& div:last-child {
|
||||
border: 1px solid #00c7ef;
|
||||
}
|
||||
|
||||
.isDisabled {
|
||||
border-color: #ccc !important;
|
||||
cursor: not-allowed !important;
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
}
|
||||
.card-image {
|
||||
height: 165px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #d6d1d1;
|
||||
}
|
||||
|
||||
.services-grid:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
padding: 8px 0;
|
||||
font-weight: bold;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
// 多行文本溢出
|
||||
white-space: nowrap; /* 禁止文本换行 */
|
||||
overflow: hidden; /* 超出容器部分隐藏 */
|
||||
text-overflow: ellipsis; /* 溢出部分用省略号表示 */
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
div {
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& div:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
color: white;
|
||||
background: linear-gradient(180deg, #00c7ef 0%, #005eef 100%);
|
||||
}
|
||||
|
||||
& div:last-child {
|
||||
border: 1px solid #00c7ef;
|
||||
}
|
||||
|
||||
.isDisabled {
|
||||
border-color: #ccc !important;
|
||||
cursor: not-allowed !important;
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compact-grid {
|
||||
flex: 1;
|
||||
height: 75%;
|
||||
|
|
@ -391,36 +432,34 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
text-align: center;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background-color: #f0f7ff;
|
||||
color: #4a90e2;
|
||||
transform: translateY(-2px);
|
||||
background-color: #f0f7ff;
|
||||
color: #4a90e2;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
// background-color: #4a90e2;
|
||||
background: url('../../../assets/images/publicService/btn-sel.png')
|
||||
no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: white;
|
||||
// background-color: #4a90e2;
|
||||
background: url('../../../assets/images/publicService/btn-sel.png')
|
||||
no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue