应用详情页
This commit is contained in:
a0049873
parent
afbf59cc50
commit
ea9fffad7f
|
|
@ -0,0 +1,171 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:32:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 12:01:31
|
||||
* @Description: 算法详情页
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
|
||||
<!-- 导航 -->
|
||||
<algorithm-navigation
|
||||
:dataList="dataList.data"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></algorithm-navigation>
|
||||
<!-- 算法展示 视频 -->
|
||||
<algorithm-display
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-display"
|
||||
class="scrollBox"
|
||||
></algorithm-display>
|
||||
<!-- 算法优势 -->
|
||||
<algorithm-advantage
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-advantage"
|
||||
class="scrollBox"
|
||||
></algorithm-advantage>
|
||||
<!-- 应用场景和应用案例 -->
|
||||
<!-- <application-scenarios-and-case
|
||||
id="application-scenarios-and-case"
|
||||
class="scrollBox"
|
||||
></application-scenarios-and-case> -->
|
||||
<algorithm-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></algorithm-application-scenarios>
|
||||
<algorithm-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></algorithm-application-case>
|
||||
<!-- 算法试用 -->
|
||||
<algorithm-on-trial
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-on-trial"
|
||||
class="scrollBox"
|
||||
></algorithm-on-trial>
|
||||
<!-- 计费标准 -->
|
||||
<algorithm-charging-standard
|
||||
:dataList="dataList.data"
|
||||
id="charging-standard"
|
||||
class="scrollBox"
|
||||
></algorithm-charging-standard>
|
||||
<!-- 使用方式 -->
|
||||
<algorithm-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="usage-mode"
|
||||
class="scrollBox"
|
||||
></algorithm-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<algorithm-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></algorithm-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AlgorithmTopDetails from '@/views/detailsAll/components/AlgorithmTopDetails.vue'
|
||||
import AlgorithmNavigation from '@/views/detailsAll/components/AlgorithmNavigation.vue'
|
||||
import AlgorithmDisplay from '@/views/detailsAll/components/AlgorithmDisplay.vue'
|
||||
import AlgorithmAdvantage from '@/views/detailsAll/components/AlgorithmAdvantage.vue'
|
||||
import AlgorithmOnTrial from '@/views/detailsAll/components/AlgorithmOnTrial.vue'
|
||||
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/AlgorithmApplicationScenarios'
|
||||
import AlgorithmApplicationCase from '@/views/detailsAll/components/AlgorithmApplicationCase'
|
||||
import AlgorithmUsageMode from '@/views/detailsAll/components/AlgorithmUsageMode' //使用方式
|
||||
import AlgorithmChargingStandard from '@/views/detailsAll/components/AlgorithmChargingStandard' //计费标准
|
||||
import AlgorithmCommonProblem from '@/views/detailsAll/components/AlgorithmCommonProblem' //常见问题
|
||||
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.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: 84px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue