387浏览记录bug
This commit is contained in:
gaoyuanwei
parent
89a73222e6
commit
7b6dfa8b93
|
|
@ -199,7 +199,14 @@ export function updateVisits(params) {
|
|||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 保存浏览记录
|
||||
export function browsingInsert(data) {
|
||||
return request({
|
||||
url: '/resourceBrowse/insert',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 最新能力
|
||||
export function selectNewest(data) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -10,182 +10,159 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
|
||||
<!-- 导航 -->
|
||||
<algorithm-navigation
|
||||
:dataList="dataList.data"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></algorithm-navigation>
|
||||
<algorithm-navigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
|
||||
</algorithm-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<algorithm-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="algorithm-associated-ability"
|
||||
class="scrollBox"
|
||||
></algorithm-associated-ability>
|
||||
<algorithm-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="algorithm-associated-ability" class="scrollBox"></algorithm-associated-ability>
|
||||
<!-- 算法展示 视频 -->
|
||||
<algorithm-display
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-display"
|
||||
class="scrollBox"
|
||||
></algorithm-display>
|
||||
<algorithm-display :dataList="dataList.data" id="algorithm-display" class="scrollBox"></algorithm-display>
|
||||
<!-- 算法优势 -->
|
||||
<algorithm-advantage
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-advantage"
|
||||
class="scrollBox"
|
||||
></algorithm-advantage>
|
||||
<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-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-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-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-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>
|
||||
<algorithm-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</algorithm-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
|
||||
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
|
||||
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
|
||||
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
|
||||
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
|
||||
import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
|
||||
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
|
||||
import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
|
||||
import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
|
||||
import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
|
||||
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const loading = ref(true)
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
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
|
||||
}
|
||||
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
|
||||
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
|
||||
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
|
||||
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
|
||||
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
|
||||
import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
|
||||
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
|
||||
import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
|
||||
import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
|
||||
import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
|
||||
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const loading = ref(true)
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
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) => {
|
||||
console.log(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)
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
console.log(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)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} 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;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,12 @@ import ApplicationPresentation from '@/views/detailsAll/components/Application/A
|
|||
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
|
|
@ -124,6 +129,12 @@ const init = (id) => {
|
|||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
|
|
|
|||
|
|
@ -10,165 +10,149 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<business-top-details :dataList="dataList.data"></business-top-details>
|
||||
<!-- 导航 -->
|
||||
<business-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></business-navigation>
|
||||
<business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<business-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="business-associated-ability"
|
||||
class="scrollBox"
|
||||
></business-associated-ability>
|
||||
<business-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="business-associated-ability" class="scrollBox"></business-associated-ability>
|
||||
<!-- 组件展示 -->
|
||||
<business-presentation
|
||||
:dataList="dataList.data"
|
||||
id="business-presentation"
|
||||
class="scrollBox"
|
||||
></business-presentation>
|
||||
<business-presentation :dataList="dataList.data" id="business-presentation" class="scrollBox">
|
||||
</business-presentation>
|
||||
<!-- 功能介绍-->
|
||||
<business-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></business-function-intorduction>
|
||||
<business-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</business-function-intorduction>
|
||||
<!-- 应用场景 -->
|
||||
<business-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></business-application-scenarios>
|
||||
<business-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</business-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<business-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></business-application-case>
|
||||
<business-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</business-application-case>
|
||||
<!-- 使用方式 -->
|
||||
<business-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="business-usage-mode"
|
||||
class="scrollBox"
|
||||
></business-usage-mode>
|
||||
<business-usage-mode :dataList="dataList.data" id="business-usage-mode" class="scrollBox"></business-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<business-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></business-common-problem>
|
||||
<business-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox"></business-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
|
||||
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
|
||||
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
|
||||
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
|
||||
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
|
||||
import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
|
||||
import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
|
||||
import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
|
||||
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId2 } 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'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
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
|
||||
}
|
||||
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
|
||||
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
|
||||
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
|
||||
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
|
||||
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
|
||||
import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
|
||||
import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
|
||||
import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
|
||||
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} 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'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
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)
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
})
|
||||
|
||||
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)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} 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;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,175 +10,157 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<developer-top-details :dataList="dataList.data"></developer-top-details>
|
||||
<!-- 导航 -->
|
||||
<developer-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponentsFunction()"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></developer-navigation>
|
||||
<developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<developer-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="developer-associated-ability"
|
||||
class="scrollBox"
|
||||
></developer-associated-ability>
|
||||
<developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="developer-associated-ability" class="scrollBox"></developer-associated-ability>
|
||||
<!-- 组件展示 视频 -->
|
||||
<Developer-presentation
|
||||
:dataList="dataList.data"
|
||||
id="eveloper-presentation"
|
||||
class="scrollBox"
|
||||
></Developer-presentation>
|
||||
<Developer-presentation :dataList="dataList.data" id="eveloper-presentation" class="scrollBox">
|
||||
</Developer-presentation>
|
||||
<!-- 功能介绍-->
|
||||
<developer-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></developer-function-intorduction>
|
||||
<developer-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</developer-function-intorduction>
|
||||
<!-- 应用场景 -->
|
||||
<developer-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></developer-application-scenarios>
|
||||
<developer-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</developer-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<developer-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></developer-application-case>
|
||||
<developer-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</developer-application-case>
|
||||
<!-- 组件试用 -->
|
||||
<developer-trial
|
||||
:dataList="dataList.data"
|
||||
id="developer-trial"
|
||||
class="scrollBox"
|
||||
></developer-trial>
|
||||
<developer-trial :dataList="dataList.data" id="developer-trial" class="scrollBox"></developer-trial>
|
||||
<!-- 归属部门与服务商-->
|
||||
<developer-owning-department-and-service-provider
|
||||
:dataList="dataList.data"
|
||||
id="department-and-service-provider"
|
||||
class="scrollBox"
|
||||
></developer-owning-department-and-service-provider>
|
||||
<developer-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
|
||||
class="scrollBox"></developer-owning-department-and-service-provider>
|
||||
<!-- 常见问题-->
|
||||
<developer-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></developer-common-problem>
|
||||
<developer-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</developer-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
|
||||
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
|
||||
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
|
||||
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
|
||||
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
|
||||
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
|
||||
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
|
||||
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
|
||||
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
|
||||
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId2 } 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'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
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
|
||||
}
|
||||
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
|
||||
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
|
||||
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
|
||||
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
|
||||
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
|
||||
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
|
||||
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
|
||||
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
|
||||
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
|
||||
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} 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'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
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) {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[0].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: 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)
|
||||
)
|
||||
})
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[0].dataList = res.data.data
|
||||
loading.value = false
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
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)
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
})
|
||||
associatedComponents.value.map((item, index) => { })
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
init(id)
|
||||
const associatedComponentsFunction = () => {
|
||||
if (associatedComponents.value[0].dataList.length > 0) {
|
||||
return associatedComponents.value
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
const associatedComponentsFunction = () => {
|
||||
if (associatedComponents.value[0].dataList.length > 0) {
|
||||
return associatedComponents.value
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
}
|
||||
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;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,176 +8,156 @@
|
|||
<template>
|
||||
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<layer-service-top-details
|
||||
:dataList="dataList.data"
|
||||
></layer-service-top-details>
|
||||
<layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
|
||||
<!-- 导航 -->
|
||||
<layer-service-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></layer-service-navigation>
|
||||
<layer-service-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></layer-service-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<layer-service-associated-ability
|
||||
:associatedComponents="associatedComponents"
|
||||
id="layer-service-associated-ability"
|
||||
class="scrollBox"
|
||||
v-if="!loading"
|
||||
></layer-service-associated-ability>
|
||||
<layer-service-associated-ability :associatedComponents="associatedComponents" id="layer-service-associated-ability"
|
||||
class="scrollBox" v-if="!loading"></layer-service-associated-ability>
|
||||
<!-- 图层展示 视频 -->
|
||||
<layer-service-presentation
|
||||
:dataList="dataList.data"
|
||||
id="service-presentation"
|
||||
class="scrollBox"
|
||||
></layer-service-presentation>
|
||||
<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-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-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-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-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-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>
|
||||
<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 LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
|
||||
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, queryPartAppByKeyId2 } 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'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
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
|
||||
}
|
||||
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
|
||||
import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
|
||||
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,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} 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'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
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)
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
})
|
||||
|
||||
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)
|
||||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} 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;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue