Skip to content

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

修改tab定位

上级 39a9be5c
隐藏空白字符变更
内嵌 并排
正在显示 包含 192 行增加 和 55 行删除
src/modules/home/components/ProjectSystem.vue
浏览文件 @ 8a70ca55
......@@ -10,6 +10,8 @@ interface List {
h1: string
card: {
id: string
tabIndex: number | null
type: string
img: string
tit: string
h5Img: string
......@@ -29,6 +31,8 @@ const list: List[] = [
card: [
{
id: '1',
tabIndex: 41,
type: 'PAAP（Ⅰ）',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_1.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-1-1.png',
tit: '资产分析规划师(一级/二级)/ PAAP(I/II)',
......@@ -45,6 +49,8 @@ const list: List[] = [
},
{
id: '3',
tabIndex: 43,
type: 'PAAM',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_2.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-1-2.png',
tit: '高级资产分析管理师 / PAAM',
......@@ -61,6 +67,8 @@ const list: List[] = [
},
{
id: '',
tabIndex: null,
type: '',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_3.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-1-3.png',
tit: '公司金融管理师（CFM）',
......@@ -85,6 +93,8 @@ const list: List[] = [
card: [
{
id: '',
tabIndex: null,
type: '',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_1.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-2-1.png',
tit: '金融保险高级经理人班',
......@@ -101,6 +111,8 @@ const list: List[] = [
},
{
id: '',
tabIndex: null,
type: '',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_2.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-2-2.png',
tit: '金融保险董事长总裁班',
......@@ -123,32 +135,10 @@ const list: List[] = [
btnIconActive: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_hover.png',
h1: '针对行业内所有相关人士，提供行业从业人员终身学习的底层逻辑和专业知识架构，建立系统思维，养成学习与从业的习惯，建立自我成长和职业发展的心智模式。',
card: [
{
id: '5-1',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
tit: '免费小课',
list: [
{
tit: '适用人群',
desc: '从事金融服务业销售人员'
}
]
},
{
id: '4-1',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
tit: '系统小课',
list: [
{
tit: '适用人群',
desc: '终身学习爱好者'
}
]
},
{
id: '',
tabIndex: null,
type: '',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
tit: '私人财富风险管理顾问 / PRP',
......@@ -165,6 +155,8 @@ const list: List[] = [
},
{
id: '',
tabIndex: null,
type: '',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_2.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-2.png',
tit: '紫荆卓越保险理财规划师养成计划100天',
......@@ -182,6 +174,34 @@ const list: List[] = [
desc: '行业必备的专业知识、经营管理、服务技能、可持续发展理念，以及终身学习思维。'
}
]
},
{
id: '',
tabIndex: 2,
type: 'free_course',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
tit: '免费小课',
list: [
{
tit: '适用人群',
desc: '从事金融服务业销售人员'
}
]
},
{
id: '',
tabIndex: 3,
type: 'system_course',
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
tit: '系统小课',
list: [
{
tit: '适用人群',
desc: '终身学习爱好者'
}
]
}
]
}
......@@ -192,8 +212,8 @@ const tab = function (e: number) {
tabIndex = e
}
const handleDetail = (item: any) => {
if (item.id !== '') {
router.push(`/shop/detail/${item.id}`)
if (item.tabIndex !== null) {
router.push(`/shop/?activeIndex=${item.tabIndex}&type=${item.type}`)
} else {
ElMessage.warning('该课程暂未开通')
}
......@@ -213,7 +233,7 @@ const handleDetail = (item: any) => {
</div>
<div class="con_content">
<el-tabs class="my-tabs">
<el-tab-pane v-for="fItem in list" :key="fItem.btnIcon">
<el-tab-pane v-for="fItem in list.slice(0, 2)" :key="fItem.btnIcon">
<template #label>
<img :src="fItem.btnIcon" class="icon" />
<img :src="fItem.btnIconActive" class="active-icon" />
......@@ -236,6 +256,53 @@ const handleDetail = (item: any) => {
</div>
<div class="content_btn" @click="router.push('/shop')">查看更多</div>
</el-tab-pane>
<el-tab-pane v-for="fItem in list.slice(-1)" :key="fItem.btnIcon">
<template #label>
<img :src="fItem.btnIcon" class="icon" />
<img :src="fItem.btnIconActive" class="active-icon" />
<p>{{ fItem.btnName }}</p>
</template>
<div class="content_tit">
{{ fItem.h1 }}
</div>
<div class="content_part">
<div class="content_main1">
<div
class="main_list"
v-for="(item, index) in fItem.card.slice(0, 2)"
:key="index"
@click="handleDetail(item)"
>
<img :src="item.img" alt="" class="list_img1" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
<li class="list_desc" v-for="(it, index) in item.list" :key="index">
<div class="desc_tit">{{ it.tit }}</div>
<div class="desc_con">{{ it.desc }}</div>
</li>
</ul>
</div>
</div>
<div class="content_main2">
<div
class="main_list"
v-for="(item, index) in fItem.card.slice(-2)"
:key="index"
@click="handleDetail(item)"
>
<img :src="item.img" alt="" class="list_img1" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
<li class="list_desc" v-for="(it, index) in item.list" :key="index">
<div class="desc_tit">{{ it.tit }}</div>
<div class="desc_con">{{ it.desc }}</div>
</li>
</ul>
</div>
</div>
</div>
<div class="content_btn" @click="router.push('/shop')">查看更多</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
......@@ -371,7 +438,7 @@ const handleDetail = (item: any) => {
.content_main {
margin-top: 29px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
.main_list {
......@@ -557,4 +624,70 @@ const handleDetail = (item: any) => {
}
}
}
:deep(.el-tab-pane:last-child) {
.content_part {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.content_main1 {
display: flex;
.main_list {
cursor: pointer;
background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
padding: 15px;
box-sizing: border-box;
margin-right: 30px;
img {
width: 350px;
}
}
}
.content_main2 {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
.main_list {
cursor: pointer;
height: 275px;
background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
padding: 15px;
img {
width: 350px;
}
}
}
}
.list_tit {
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
margin-top: 24px;
white-space: nowrap;
}
ul {
margin-top: 23px;
color: #c1ab85;
padding-left: 20px;
.list_desc {
list-style-type: square;
.desc_tit {
font-size: 16px;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.desc_con {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #666666;
}
}
}
</style>
src/modules/shop/views/Index.vue
浏览文件 @ 8a70ca55
......@@ -7,15 +7,22 @@ const route = useRoute()
const { mobile } = useDevice()
const shopStore = useShopStore()
let activeIndex = $ref('1')
const type = ref('')
let type = $ref('')
const handleClickTab = (val: any) => {
type.value = val
type = val
if (val === 'PRP') {
window.open('https://prp.ezijing.com')
window.location.reload()
}
}
watchEffect(() => {
if (route.query.activeIndex) {
activeIndex = route.query.activeIndex.toString()
}
if (route.query.type) {
type = route.query.type.toString()
}
})
// tab
let menuValue = $ref('')
onMounted(() => {
......@@ -23,7 +30,6 @@ onMounted(() => {
let defaultMenu = ''
const activeH5Index = route.query.activeIndex
if (activeH5Index) {
activeIndex = activeH5Index?.toString()
defaultMenu = activeH5Index === '2' ? 'free_course' : activeH5Index === '3' ? 'system_course' : ''
}
shopStore.filters.map((item: any) => item.value === defaultMenu && (item.isActive = true))
......@@ -81,7 +87,7 @@ const clearActive = function () {
<el-sub-menu index="4">
<template #title>{{ shopStore.filters[3].label }} </template>
<el-menu-item
:index="'4' + index"
:index="'4' + (index + 1)"
v-for="(item, index) in shopStore.filters[3]?.children"
:key="index"
@click="handleClickTab(item.value)"
......
src/modules/shop/views/View.vue
浏览文件 @ 8a70ca55
......@@ -19,17 +19,6 @@ const courseItem: any = ref([]) // 课程所属课程包
courseItem.value = shopStore.shopList.filter(
(item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id)
)
const recommendCourse = computed(() => {
if (shopStore.shopItem?.type === '课程包' && shopStore.shopItem?.category !== 'free_course') {
// 课程包推荐课程
return shopStore.shopRelatedList
} else if (shopStore.shopItem?.type === '课程' && shopStore.shopItem?.category !== 'free_course') {
// 单一课程推荐的课程
return shopStore.shopRelatedListOther
} else if (shopStore.shopItem?.category === 'free_course') {
return shopStore.shopList.filter(item => item.category === 'system_course')
}
})
</script>
<template>
......@@ -61,7 +50,7 @@ const recommendCourse = computed(() => {
</div>
<div class="con_right">
<!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
<RecommendCourse :shopRelatedList="recommendCourse" />
<RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
</div>
</div>
<CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type == '课程包'" />
......@@ -88,7 +77,7 @@ const recommendCourse = computed(() => {
<!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
<CourseCatalogH5 :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type === '课程包'" />
</div>
<RecommendCourse :shopRelatedList="recommendCourse" />
<RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
<CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" />
</div>
</template>
......
src/stores/shop.ts
浏览文件 @ 8a70ca55
......@@ -39,15 +39,24 @@ export const useShopStore = defineStore('shop', () => {
// 相关推荐商品列表
const shopRelatedList = computed(() => {
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 === '课程'
)
if (shopItem.value?.type === '课程包') {
return shopList.value.filter(
item => item.category !== shopItem.value?.category && item.type === '课程包' && item.is_test === false
)
} else if (shopItem.value?.type === '课程') {
if (shopItem.value?.category === 'free_course') {
return shopList.value.filter(item => item.category === 'system_course' && item.is_test === false)
} else {
return shopList.value.filter(
item =>
item.category === shopItem.value?.category &&
item.id !== shopItem.value?.id &&
item.type === '课程' &&
item.is_test === false
)
}
}
})
return { filters, list, shopList, shopItem, shopRelatedList, shopRelatedListOther }
return { filters, list, shopList, shopItem, shopRelatedList }
})
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论