12 changed files with 454 additions and 275 deletions
-
36src/assets/styles/index.scss
-
10src/router/index.js
-
17src/store/column.js
-
92src/views/columnLayout copy.vue
-
146src/views/columnLayout.vue
-
234src/views/columnListMix.vue
-
4src/views/columnListMixDetail.vue
-
7src/views/imgTxtDetail.vue
-
6src/views/index.vue
-
174src/views/menu.vue
-
2src/views/module/waterfall.vue
-
1src/views/waterfallFlow.vue
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<div class="content-main introduction-main"> |
|||
<div class="nav-menu"> |
|||
<ul> |
|||
<li |
|||
v-for="(item,index) in tabList" |
|||
:key="index" |
|||
:class="{ 'is-active': selectMenuIndex === index }" |
|||
@click="selectMenuChange(item, index)" |
|||
> |
|||
{{ item.title }} |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="introduction-info"> |
|||
<router-view /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchQueryTopicDetails } from '@/api/inquiryMachine' |
|||
export default { |
|||
name: 'ColumnLayout', |
|||
data() { |
|||
return { |
|||
libcode: '', |
|||
tabList: [], |
|||
selectMenuIndex: 0 |
|||
} |
|||
}, |
|||
created() { |
|||
const savedIndex = localStorage.getItem('selectIndex') |
|||
if (savedIndex !== null) { |
|||
this.selectMenuIndex = parseInt(savedIndex) |
|||
} |
|||
this.getQueryTopicDetails() |
|||
}, |
|||
methods: { |
|||
getQueryTopicDetails() { |
|||
const params = { 'id': this.$route.query.menuId } |
|||
FetchQueryTopicDetails(params).then(res => { |
|||
console.log('接口返回数据:', res) |
|||
if (res && res.queryTopicList && res.queryTopicList.length > 0) { |
|||
this.tabList = res.queryTopicList |
|||
this.libcode = res.queryMenu.libcode |
|||
// this.$store.commit |
|||
this.$store.commit('column/setColumnData', { |
|||
tabList: this.tabList, |
|||
libcode: this.libcode, |
|||
selectMenuIndex: this.selectMenuIndex |
|||
}) |
|||
console.log('Vuex设置成功:', this.$store.state.column.tabList) |
|||
} else { |
|||
console.error('接口返回的queryTopicList为空或格式错误') |
|||
} |
|||
}).catch(err => { |
|||
console.error('接口请求失败:', err) |
|||
this.$message.error('接口错误') |
|||
}) |
|||
}, |
|||
selectMenuChange(item, index) { |
|||
this.selectMenuIndex = index |
|||
localStorage.setItem('selectIndex', index) |
|||
this.$store.commit('column/setSelectMenuIndex', index) |
|||
// 重置分页为第一页（关键） |
|||
this.$store.commit('column/updatePagination', { currentPage: 0 }) |
|||
|
|||
const listMixComponent = this.$children.find(child => child.$options.name === 'ColumnListMix') |
|||
if (listMixComponent) { |
|||
// 清空列表数据+解绑滚动监听 |
|||
listMixComponent.infoList = [] |
|||
listMixComponent.unbindScrollListener() |
|||
// 强制重新请求第一页数据 |
|||
listMixComponent.getInitQueryTopicContext(item) |
|||
} |
|||
|
|||
// 路由相同则无需跳转，不同则跳转后重新请求 |
|||
const targetRoute = { name: 'ColumnListMix', query: this.$route.query } |
|||
const currentRoute = this.$router.currentRoute |
|||
if (currentRoute.name !== targetRoute.name || |
|||
JSON.stringify(currentRoute.query) !== JSON.stringify(targetRoute.query)) { |
|||
this.$router.push(targetRoute) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
@ -1,174 +0,0 @@ |
|||
<template> |
|||
<!-- 活动咨询 --> |
|||
<div class="content-main introduction-main"> |
|||
<div class="nav-menu"> |
|||
<ul> |
|||
<li |
|||
v-for="(item,index) in tabList" |
|||
:key="index" |
|||
:class="{ 'is-active': selectMenuIndex === index }" |
|||
@click="selectMenuChange(item, index)" |
|||
> |
|||
{{ item.title }} |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="introduction-info"> |
|||
<ul v-if="rightColumnTab.length !== 0" class="menu-tab-list"> |
|||
<li |
|||
v-for="(item,index) in rightColumnTab" |
|||
:key="item.id" |
|||
:class="{ 'active': columeIndex === index }" |
|||
@click="handleColumnClick(item, index)" |
|||
> |
|||
{{ item.title }} |
|||
</li> |
|||
</ul> |
|||
<div style="height: calc(100% - 60px);"> |
|||
<ul v-if="infoList.length !== 0" class="activity-list"> |
|||
<li v-for="item in infoList" :key="item.id" @click="toDetail(item)"> |
|||
<div class="activity-title">{{ item.overTitle?item.overTitle:'' }}</div> |
|||
<span class="date">{{ item.create_time }}</span> |
|||
</li> |
|||
</ul> |
|||
<div v-else style="height:calc(100%);display: flex; flex-direction: column; justify-content:center ; align-items: center;"> |
|||
<img style="display: block;" src="~@/assets/images/empty.png"> |
|||
<p style="font-size: 30px;">暂无相关数据</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchQueryTopicDetails, FetchInitQueryTopicContext } from '@/api/inquiryMachine' |
|||
export default { |
|||
name: 'ActivityFeed', |
|||
data() { |
|||
return { |
|||
libcode: '', |
|||
tabList: [], |
|||
selectMenuIndex: 0, |
|||
rightColumnTab: [], |
|||
columeIndex: 0, |
|||
infoList: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getQueryTopicDetails() |
|||
}, |
|||
methods: { |
|||
getQueryTopicDetails() { |
|||
const params = { 'id': this.$route.query.menuId } |
|||
FetchQueryTopicDetails(params).then(res => { |
|||
console.log('接口返回数据:', res) |
|||
if (res && res.queryMenu) { |
|||
this.tabList = res.queryMenu.children |
|||
this.libcode = res.queryMenu.libcode |
|||
this.rightColumnTab = [] |
|||
this.tabList.forEach(childMenu => { |
|||
if (childMenu.queryMenuTopics && childMenu.queryMenuTopics.length > 0) { |
|||
childMenu.queryMenuTopics.forEach(menuTopic => { |
|||
if (menuTopic.queryTopic) { |
|||
this.rightColumnTab.push(menuTopic.queryTopic) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
if (this.rightColumnTab.length > 0) { |
|||
this.columeIndex = 0 // 默认选中第一个 |
|||
const defaultTopic = this.rightColumnTab[0] // 获取默认选中的queryTopic |
|||
this.getInitQueryTopicContext(defaultTopic) // 传入默认topic请求数据 |
|||
} |
|||
} else { |
|||
this.tabList = [] |
|||
this.rightColumnTab = [] |
|||
this.infoList = [] |
|||
} |
|||
}).catch(err => { |
|||
console.error('接口请求失败:', err) |
|||
this.$message.error('接口错误') |
|||
this.rightColumnTab = [] |
|||
this.infoList = [] |
|||
}) |
|||
}, |
|||
getInitQueryTopicContext(currentTopic) { |
|||
const params = { |
|||
'page': 0, |
|||
'size': 10, |
|||
'libcode': this.libcode, |
|||
'topicId': currentTopic.id, // 传当前选中queryTopic的id（原代码传result.id错误） |
|||
'topicType': currentTopic.type // 传当前选中queryTopic的type（原代码传result.type错误） |
|||
} |
|||
FetchInitQueryTopicContext(params).then(res => { |
|||
if (res && res.content.length > 0) { |
|||
this.infoList = res.content |
|||
} else { |
|||
this.infoList = [] // 无数据时清空列表 |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('接口错误') |
|||
this.infoList = [] |
|||
}) |
|||
}, |
|||
handleColumnClick(currentTopic, index) { |
|||
this.columeIndex = index // 更新选中索引 |
|||
this.getInitQueryTopicContext(currentTopic) // 传入当前topic请求数据 |
|||
}, |
|||
selectMenuChange(childMenu, index) { |
|||
this.selectMenuIndex = index |
|||
this.rightColumnTab = [] |
|||
if (childMenu.queryMenuTopics && childMenu.queryMenuTopics.length > 0) { |
|||
childMenu.queryMenuTopics.forEach(menuTopic => { |
|||
if (menuTopic.queryTopic) { |
|||
this.rightColumnTab.push(menuTopic.queryTopic) |
|||
} |
|||
}) |
|||
if (this.rightColumnTab.length > 0) { |
|||
this.columeIndex = 0 |
|||
this.getInitQueryTopicContext(this.rightColumnTab[0]) |
|||
} else { |
|||
this.infoList = [] |
|||
} |
|||
} else { |
|||
this.rightColumnTab = [] |
|||
this.infoList = [] |
|||
} |
|||
}, |
|||
toDetail(item) { |
|||
this.$router.push('/ActivityDetail') |
|||
localStorage.setItem('selectIndex', JSON.stringify(this.selectMenuIndex)) |
|||
localStorage.setItem('activityDetail', JSON.stringify(item)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/index.scss"; |
|||
.menu-tab-list{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
font-size: 26px; |
|||
// padding: 10px 0; |
|||
border-bottom: 2px solid #D9D9D9; |
|||
li{ |
|||
padding: 10px 20px; |
|||
margin-right: 20px; |
|||
&.active{ |
|||
position: relative; |
|||
color:#5394F1; |
|||
&::before{ |
|||
position: absolute; |
|||
bottom: -2px; |
|||
left: 0; |
|||
content: ''; |
|||
width: 100%; |
|||
height: 2px; |
|||
background-color: #5394F1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue