Skip to content

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

fi的tab修改

上级 f3d5dc92
隐藏空白字符变更
内嵌 并排
正在显示 包含 537 行增加 和 61 行删除
data/src/goods/4.js 0 → 100644
浏览文件 @ 8213e9f5
export default [
{
category: 'system_course',
id: '4-1',
title: '学习如何高效-你需要方法和工具',
desc: '本课程通过介绍学习排序与固化的高效实现方式、三刷模式来帮助学员实现线上技能课的实践应用，具体内容包含学习前必须做到的三个明确规划、学习中要会检视和优化的三大心智模式和学习后要落实内化的四项效能习惯。',
for_people: '终身学习爱好者',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_banner.png',
type: '课程',
price: 99,
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'
},
{
category: 'system_course',
id: '4-2',
title: '做好有效的年度复盘与规划',
desc: '本课程会帮助学员做好有效年度规划与复盘，介绍并探讨年度规划与复盘方法，让学员学会与自己的小朋友做一次复盘规划。',
for_people: '提前计划工作和生活的人群',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_1.png',
type: '课程',
price: 199,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_compulsory: 6,
course_elective: 5,
course_chapter: '56',
course_total_hour: '80',
course_hour: '8课时',
course_id: '7016965097692069888',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018154999255400448',
spu_id: '7018154999087628288'
},
{
category: 'system_course',
id: '4-3',
title: '成交大单？你得敢问！',
desc: '本课程对会问和敢问的不同之处进行分析，对敢问的训练关键与方向进行探讨，列出问话的相关示例。最后让学员能找到其中的关键点，敢于提问。',
for_people: '金融服务业销售顾问',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_2.png',
type: '课程',
price: 199,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_chapter: '56',
course_compulsory: 6,
course_elective: 5,
course_total_hour: '80',
course_hour: '8课时',
course_id: '6778237795518382080',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155082088710144',
spu_id: '7018155081837051904'
},
{
category: 'system_course',
id: '4-4',
title: '成交大单？你得会问！',
desc: '本课程通过对焦发问功力的自检与系统修炼，深度探讨成交大单所需的四大重点和六项能力以及其优化和升级的内容，同时运用系统训练的模式，帮助学员学会发问路径与节奏的方法。',
for_people: '金融服务业销售顾问',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_3.png',
type: '课程',
price: 199,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_chapter: '56',
course_compulsory: 6,
course_elective: 5,
course_total_hour: '80',
course_hour: '8课时',
course_id: '7016965098560290816',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155124648312832',
spu_id: '7018155124409237504'
},
{
category: 'system_course',
id: '4-5',
title: '12项定期“体检”助力你持续成交大单',
desc: '本课程会帮助学员对焦自己大单养成系统的12项检验，剖析从大单到大单高手的成长系统，最后让学员找到自己持续突破大单的关键动作。',
for_people: '金融服务业销售顾问',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_4.png',
type: '课程',
price: 199,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_chapter: '56',
course_compulsory: 6,
course_elective: 5,
course_total_hour: '80',
course_hour: '8课时',
course_id: '7016965098941972480',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155185348280320',
spu_id: '7018155185100816384'
},
{
category: 'system_course',
id: '4-6',
title: '常态化持续经营大客户的秘诀',
desc: '本课程通过对T24超V客户进行三项重点的扫描，进行四大关键的经营、九维重点的盘点，最后让学员能真正把T24超V客户的经营策略作为常态化经营。',
for_people: '金融服务业销售顾问',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_5.png',
type: '课程',
price: 299,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_chapter: '56',
course_compulsory: 6,
course_elective: 5,
course_total_hour: '80',
course_hour: '8课时',
course_id: '7016965099420123136',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155221046001664',
spu_id: '7018155220798537728'
},
{
category: 'system_course',
id: '4-7',
title: '7类17+问题让你在【首次面谈】稳赢',
desc: '本课程对个人首次面谈功力的自检视及改善点、面谈必须目标和五项执行点及过程中要问出的7类17+问题进行了分析和探讨。',
for_people: '金融服务业销售顾问',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_6.png',
type: '课程',
price: 199,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_chapter: '56',
course_compulsory: 6,
course_elective: 5,
course_total_hour: '80',
course_hour: '8课时',
course_id: '7016965099835359232',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155258798931968',
spu_id: '7018155258513719296'
},
{
category: 'system_course',
id: '4-8',
title: '掌握三步六点 扫除沟通异议',
desc: '本课程帮助学员树立对待异议处理的正确认知，掌握异议处理的两条通路，了解异议出现的几种可能，清楚异议处理的三步法则，把握处理异议不同环节，学会异议前置处理。',
for_people: '金融服务业销售顾问',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_7.png',
type: '课程',
price: 99,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_chapter: '56',
course_compulsory: 6,
course_elective: 5,
course_total_hour: '80',
course_hour: '8课时',
course_id: '6778614801309368320',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155294282743808',
spu_id: '7018155294085611520'
},
{
category: 'system_course',
id: '4-9',
title: '深度刨析养老沟通中的异议问题',
desc: '本课程会帮助学员实现高效自我修炼的四层次闭环落实，介绍养老沟通中五类最常出现的显性异议，深度探讨自检显性异议下反应的五大深层问题，使用七段扫描法深度解析养老沟通中可能存在的异议。',
for_people: '金融服务业销售顾问、营销定位在养老主题的人员',
image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_8.png',
type: '课程',
price: 199,
lecturer_list: [
{
name: '张伟',
avatar: '',
title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
}
],
content_list: [
{
id: 1,
label: '第一章111',
children: []
},
{
id: 2,
label: '第二章222',
children: []
},
{
id: 3,
label: '第三章333',
children: []
}
],
course_card: '知名导师专家',
course_chapter: '56',
course_compulsory: 6,
course_elective: 5,
course_total_hour: '80',
course_hour: '8课时',
course_id: '6778614541019250688',
class_id: '7017001355222974464',
total_price_desc: '',
sku_id: '7018155330718662656',
spu_id: '7018155330425061376'
}
]
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
......@@ -6,16 +6,30 @@ export const SHOP_FILTERS = [
value: ''
},
{
label: 'PAAP(Ⅰ)认证系列课程',
value: 'PAAP（Ⅰ）'
label: '免费小课',
value: 'free_course'
},
{
label: 'PAAP(Ⅱ)认证系列课程',
value: 'PAAP（Ⅱ）'
label: '系统小课',
value: 'system_course'
},
{
label: 'PAAM认证系列课程',
value: 'PAAM'
label: 'PAA系列课程',
value: 'PAA',
children: [
{
label: 'PAAP(Ⅰ)认证系列课程',
value: 'PAAP（Ⅰ）'
},
{
label: 'PAAP(Ⅱ)认证系列课程',
value: 'PAAP（Ⅱ）'
},
{
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(() => {
return props.courseList.filter((item: any) => item.category === props.type || props.type === '')
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,49 +76,33 @@ 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;
box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 1200px;
height: 76px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 6px;
}
.el-tabs__content {
overflow: inherit;
}
.el-tabs__nav-scroll {
display: flex;
align-items: center;
justify-content: space-around;
}
:deep(.el-menu) {
box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 1200px;
height: 76px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 6px;
}
.el-tabs__item {
display: flex;
align-items: center;
justify-content: space-around;
padding: 9px 31px 10px 26px;
border-radius: 6px;
border-bottom: none;
font-size: 18px;
font-weight: 400;
color: #535353;
box-sizing: border-box;
:deep(.el-menu-item) {
display: flex;
align-items: center;
justify-content: space-around;
padding: 9px 31px 10px 26px;
border-radius: 6px;
border-bottom: none;
font-size: 18px;
font-weight: 400;
color: #535353;
box-sizing: border-box;
height: 50px;
&.is-active {
background-color: #e8c484;
color: #ffffff;
}
&.is-active {
background-color: #e8c484;
color: #ffffff;
}
}
}
......@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论