Skip to content

P
project-online-fi
提交 8213e9f5 authored 作者: matian's avatar matian
浏览文件
操作

fi的tab修改

上级 f3d5dc92
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 118 行增加 和 32 行删除
data/src/goods/4.js 0 → 100644
浏览文件 @ 8213e9f5
差异被折叠。
data/src/goods/5.js 0 → 100644
浏览文件 @ 8213e9f5
export default [
{
category: 'free_course',
id: '5-1',
title: '如何全年持续成交大客户',
desc: '首席教练与一线实战伙伴，线上针对前线问题，共同研讨持续成交大客户的秘诀。有方法、有工具，有案例，有刨析。',
for_people: '从事金融服务业销售人员',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_banner.png',
type: '课程',
price: 0,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
course_card: '知名导师专家',
course_compulsory: 6,
course_elective: 5,
course_chapter: '56',
course_total_hour: '80',
course_hour: '8课时',
course_id: '7016965100288344064',
class_id: '7017001355222974464',
total_price_desc: '课程费用12000元/人，考试费/认证费/教材费合计980元/人',
sku_id: '7014130543629434880',
spu_id: '7014130542861877248'
}
]
data/src/shop.js
浏览文件 @ 8213e9f5
......@@ -5,6 +5,18 @@ export const SHOP_FILTERS = [
label: '全部',
value: ''
},
{
label: '免费小课',
value: 'free_course'
},
{
label: '系统小课',
value: 'system_course'
},
{
label: 'PAA系列课程',
value: 'PAA',
children: [
{
label: 'PAAP(Ⅰ)认证系列课程',
value: 'PAAP（Ⅰ）'
......@@ -16,6 +28,8 @@ export const SHOP_FILTERS = [
{
label: 'PAAM认证系列课程',
value: 'PAAM'
}
]
},
{
label: 'PRP',
......
src/modules/shop/components/CourseList.vue
浏览文件 @ 8213e9f5
......@@ -12,7 +12,11 @@ const page = reactive({ size: 10, currentPage: 1 })
// 筛选之后的数据
const courseFilterList = $computed(() => {
if (props.type === 'PAA') {
return props.courseList
} else {
return props.courseList.filter((item: any) => item.category === props.type || props.type === '')
}
})
// 当前页的数据
......
src/modules/shop/components/CourseListItem.vue
浏览文件 @ 8213e9f5
......@@ -111,6 +111,7 @@ const handleBuy = (courseItem: any) => {
position: absolute;
top: 10px;
right: 10px;
text-align: center;
}
}
.con_right {
......@@ -190,6 +191,7 @@ const handleBuy = (courseItem: any) => {
line-height: 32px;
color: #e2971d;
cursor: pointer;
text-align: center;
}
.btn_buy {
width: 96px;
......@@ -202,6 +204,7 @@ const handleBuy = (courseItem: any) => {
color: #ffffff;
margin-left: 20px;
cursor: pointer;
text-align: center;
}
}
}
......@@ -241,6 +244,7 @@ const handleBuy = (courseItem: any) => {
position: absolute;
top: 10px;
right: 10px;
text-align: center;
}
}
.con_right {
......
src/modules/shop/views/Index.vue
浏览文件 @ 8213e9f5
......@@ -2,11 +2,13 @@
import CourseList from '../components/CourseList.vue'
import { useShopStore } from '@/stores/shop'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const shopStore = useShopStore()
const handleTabClick = (tab: any) => {
if (tab.index === '4') {
const activeIndex = ref('1')
const type = ref('')
const handleClickTab = (val: any) => {
type.value = val
if (val === 'PRP') {
window.open('https://prp.ezijing.com')
window.location.reload()
}
......@@ -18,14 +20,31 @@ const handleTabClick = (tab: any) => {
<img src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" class="shop_banner" />
<div class="shop_con">
<div class="con_tab">
<el-tabs class="my-tabs" @tab-click="handleTabClick">
<el-tab-pane v-for="(item, index) in shopStore.filters" :key="index" lazy>
<template #label>
{{ item.label }}
</template>
<CourseList :type="item.value" :courseList="shopStore.shopList" :key="index" />
</el-tab-pane>
</el-tabs>
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item index="1" @click="handleClickTab(shopStore.filters[0].value)"
>{{ shopStore.filters[0].label }}
</el-menu-item>
<el-menu-item index="2" @click="handleClickTab(shopStore.filters[1].value)"
>{{ shopStore.filters[1].label }}
</el-menu-item>
<el-menu-item index="3" @click="handleClickTab(shopStore.filters[2].value)"
>{{ shopStore.filters[2].label }}
</el-menu-item>
<el-sub-menu index="4">
<template #title>{{ shopStore.filters[3].label }} </template>
<el-menu-item
:index="'4' + index"
v-for="(item, index) in shopStore.filters[3]?.children"
:key="index"
@click="handleClickTab(item.value)"
>{{ item.label }}</el-menu-item
>
</el-sub-menu>
<el-menu-item index="5" @click="handleClickTab(shopStore.filters[4].value)"
>{{ shopStore.filters[4].label }}
</el-menu-item>
</el-menu>
<CourseList :type="type" :courseList="shopStore.shopList" />
</div>
</div>
</div>
......@@ -57,15 +76,7 @@ const handleTabClick = (tab: any) => {
box-sizing: border-box;
.con_tab {
margin-bottom: 20px;
:deep(.my-tabs) {
text-align: center;
box-sizing: border-box;
.el-tabs__active-bar,
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__nav {
background: #ffffff;
:deep(.el-menu) {
box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 1200px;
......@@ -75,16 +86,8 @@ const handleTabClick = (tab: any) => {
align-items: center;
border-radius: 6px;
}
.el-tabs__content {
overflow: inherit;
}
.el-tabs__nav-scroll {
display: flex;
align-items: center;
justify-content: space-around;
}
.el-tabs__item {
:deep(.el-menu-item) {
display: flex;
align-items: center;
justify-content: space-around;
......@@ -95,6 +98,7 @@ const handleTabClick = (tab: any) => {
font-weight: 400;
color: #535353;
box-sizing: border-box;
height: 50px;
&.is-active {
background-color: #e8c484;
......@@ -104,7 +108,6 @@ const handleTabClick = (tab: any) => {
}
}
}
}
}
.is-h5 {
......@@ -181,4 +184,33 @@ const handleTabClick = (tab: any) => {
overflow: scroll;
white-space: nowrap;
}
:deep(.el-dropdown) {
span {
font-size: 18px;
}
}
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
background-color: #e8c484;
color: #fff !important;
border-bottom: none;
}
:deep(.el-sub-menu) {
font-size: 18px;
font-weight: 400;
color: #535353;
}
:deep(.el-sub-menu__title) {
font-size: 18px;
font-weight: 400;
color: #535353;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
background-color: #e8c484;
color: #fff !important;
border-bottom: none;
border-radius: 6px;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
color: #535353 !important;
}
</style>
src/stores/shop.ts
浏览文件 @ 8213e9f5
......@@ -3,6 +3,7 @@ import { useUserStore } from './user'
interface ShopFilter {
label: string
value: string
children?: any
courseList: any
}
type ShopListItem = Record<string, any>
......@@ -37,12 +38,13 @@ export const useShopStore = defineStore('shop', () => {
// 相关推荐商品列表
const shopRelatedList = computed(() => {
return shopList.value.filter(item => item.category !== shopItem.value?.category && item.type==='课程包')
return shopList.value.filter(item => item.category !== shopItem.value?.category && item.type === '课程包')
})
const shopRelatedListOther = computed(() => {
return shopList.value.filter(
(item: ShopListItem) => item.category === shopItem.value?.category && item.id !== shopItem.value?.id && item.type=== '课程'
(item: ShopListItem) =>
item.category === shopItem.value?.category && item.id !== shopItem.value?.id && item.type === '课程'
)
})
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论