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