164 lines
5.8 KiB
Vue
164 lines
5.8 KiB
Vue
![]() |
<!--
|
||
|
* @Author: hisense.liangjunhua
|
||
|
* @Date: 2022-06-08 11:32:22
|
||
|
* @LastEditors: hisense.liangjunhua
|
||
|
* @LastEditTime: 2022-06-20 18:59:01
|
||
|
* @Description: 图层服务详情页
|
||
|
-->
|
||
|
<template>
|
||
|
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||
|
<!-- 头部基本信息 -->
|
||
|
<layer-service-top-details
|
||
|
:dataList="dataList.data"
|
||
|
></layer-service-top-details>
|
||
|
<!-- 导航 -->
|
||
|
<layer-service-navigation
|
||
|
:dataList="dataList.data"
|
||
|
:class="{ fixed: scrollTop >= 600 }"
|
||
|
:selectNow="selectNow"
|
||
|
></layer-service-navigation>
|
||
|
<!-- 图层展示 视频 -->
|
||
|
<layer-service-presentation
|
||
|
:dataList="dataList.data"
|
||
|
id="service-presentation"
|
||
|
class="scrollBox"
|
||
|
></layer-service-presentation>
|
||
|
<!-- 图层信息-->
|
||
|
<layer-service-information
|
||
|
:dataList="dataList.data"
|
||
|
id="service-information"
|
||
|
class="scrollBox"
|
||
|
></layer-service-information>
|
||
|
<!-- 应用场景 -->
|
||
|
<layer-service-application-scenarios
|
||
|
:dataList="dataList.data"
|
||
|
id="service-application-scenarios"
|
||
|
class="scrollBox"
|
||
|
></layer-service-application-scenarios>
|
||
|
<!-- 应用案例 -->
|
||
|
<layer-service-application-case
|
||
|
:dataList="dataList.data"
|
||
|
id="service-application-case"
|
||
|
class="scrollBox"
|
||
|
></layer-service-application-case>
|
||
|
<!-- 图层预览 -->
|
||
|
<layer-service-preview
|
||
|
:dataList="dataList.data"
|
||
|
id="service-preview"
|
||
|
class="scrollBox"
|
||
|
></layer-service-preview>
|
||
|
<!-- 使用方式-->
|
||
|
<layer-service-usage-mode
|
||
|
:dataList="dataList.data"
|
||
|
id="service-usage-mode"
|
||
|
class="scrollBox"
|
||
|
></layer-service-usage-mode>
|
||
|
<!-- 常见问题-->
|
||
|
<layer-service-common-problem
|
||
|
:dataList="dataList.data"
|
||
|
id="service-common-problem"
|
||
|
class="scrollBox"
|
||
|
></layer-service-common-problem>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script setup>
|
||
|
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
|
||
|
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
|
||
|
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
|
||
|
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
|
||
|
import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
|
||
|
import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
|
||
|
import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
|
||
|
import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
|
||
|
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
|
||
|
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||
|
import { useRouter } from 'vue-router'
|
||
|
import { updateVisits, selectOne } from '@/api/home'
|
||
|
import mybus from '@/myplugins/mybus'
|
||
|
const router = useRouter()
|
||
|
const scrollTop = ref(0)
|
||
|
const domArr = ref([])
|
||
|
const selectNow = ref('')
|
||
|
const dataList = reactive({ data: {} })
|
||
|
const id = router.currentRoute.value.query.id
|
||
|
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||
|
document.documentElement.style.transition = 'all 0.3s ease'
|
||
|
document.documentElement.scrollTop = 0
|
||
|
document.body.style.transition = 'all 0.3s ease'
|
||
|
document.body.scrollTop = 0
|
||
|
mybus.on('flyToView', (id) => {
|
||
|
let top = document.querySelector('#' + id).offsetTop - 50
|
||
|
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||
|
document.documentElement.scrollTop = top
|
||
|
document.body.scrollTop = top
|
||
|
})
|
||
|
onMounted(() => {
|
||
|
// console.clear()
|
||
|
window.addEventListener('scroll', () => {
|
||
|
domArr.value = document.querySelectorAll('.scrollBox')
|
||
|
scrollTop.value =
|
||
|
document.documentElement.scrollTop || document.body.scrollTop
|
||
|
for (let i = 0; i < domArr.value.length; i++) {
|
||
|
if (i === 0) {
|
||
|
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||
|
selectNow.value = domArr.value[i].id
|
||
|
}
|
||
|
} else if (i == domArr.value.length - 1) {
|
||
|
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||
|
selectNow.value = domArr.value[i].id
|
||
|
}
|
||
|
} else {
|
||
|
if (
|
||
|
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||
|
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||
|
) {
|
||
|
selectNow.value = domArr.value[i].id
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
})
|
||
|
|
||
|
const init = (id) => {
|
||
|
if (id) {
|
||
|
selectOne(id).then((res) => {
|
||
|
// console.clear()
|
||
|
dataList.data = res.data.data
|
||
|
console.log('初始化详情页=========================>', dataList.data)
|
||
|
const arrList = ref([])
|
||
|
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||
|
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||
|
arrList.value.push(id)
|
||
|
updateVisits({
|
||
|
id: res.data.data.id,
|
||
|
visits: res.data.data.visits || '0',
|
||
|
}).then(() => {
|
||
|
window.sessionStorage.setItem(
|
||
|
'visits',
|
||
|
JSON.stringify(arrList.value)
|
||
|
)
|
||
|
})
|
||
|
}
|
||
|
})
|
||
|
} else if (obj) {
|
||
|
dataList.data = obj
|
||
|
console.log('预览==============', obj)
|
||
|
}
|
||
|
}
|
||
|
init(id)
|
||
|
onBeforeUnmount(() => {
|
||
|
mybus.off('flyToView')
|
||
|
})
|
||
|
</script>
|
||
|
<style lang="less" scoped>
|
||
|
.fixed {
|
||
|
position: fixed;
|
||
|
z-index: 2000;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
}
|
||
|
.fixed2 > div:nth-of-type(3) {
|
||
|
margin-top: 0.84rem;
|
||
|
}
|
||
|
</style>
|