|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<app-view class="home-main">
|
|
|
<template #header>
|
|
|
- <app-statusbar class="home-main__header" :style="{ backgroundImage: `url(${getFileUrl(topBanners)})` }">
|
|
|
+ <app-statusbar class="home-main__header" @ready="onReady" :style="{ backgroundImage: `url(${getFileUrl(topBanners)})` }">
|
|
|
<div class="searchbar">
|
|
|
<Search shape="round" background="transparent" :placeholder="$t('tss.tips1')"
|
|
|
@click="$router.push({ name: 'search' })" />
|
|
|
@@ -10,7 +10,7 @@
|
|
|
</div>
|
|
|
</app-statusbar>
|
|
|
</template>
|
|
|
- <div class="home-main__container" :style="{ backgroundImage: `url(${getFileUrl(topBanners)})` }">
|
|
|
+ <div ref="containerRef" class="home-main__container" :style="{ backgroundImage: `url(${getFileUrl(topBanners)})` }">
|
|
|
<app-block class="home-main__notice">
|
|
|
<h4 @click="$router.push({ name: 'notice-list' })">
|
|
|
<span>{{ $t('routes.notice') }}</span>
|
|
|
@@ -51,13 +51,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, onMounted, onActivated } from 'vue'
|
|
|
+import { shallowRef, onMounted, onActivated, onDeactivated } from 'vue'
|
|
|
import { Cell, CellGroup, Search, Icon } from 'vant'
|
|
|
import { getFileUrl } from '@/filters'
|
|
|
import { queryImageConfigs } from '@/services/api/common'
|
|
|
import { queryNewTitles } from '@/services/api/news'
|
|
|
import { queryTouristGoods, queryTouristQuoteDay } from '@/services/api/goods'
|
|
|
import { useLoginStore, useNoticeStore, useGoodsCollectionStore, useFuturesStore } from '@/stores'
|
|
|
+import plus from '@/utils/h5plus'
|
|
|
import ProductList from '../../product/list/components/waterfall-list/index.vue'
|
|
|
|
|
|
const loginStore = useLoginStore()
|
|
|
@@ -65,6 +66,7 @@ const noticeStore = useNoticeStore()
|
|
|
const goodsCollectionStore = useGoodsCollectionStore()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
|
|
|
+const containerRef = shallowRef<HTMLDivElement>()
|
|
|
const refreshing = shallowRef(false) // 是否处于加载中状态
|
|
|
const topBanners = shallowRef(''); // 背景图片
|
|
|
const newsList = shallowRef<Model.NewTitlesRsp[]>([]) // 资讯列表
|
|
|
@@ -96,6 +98,11 @@ const onRefresh = () => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+const onReady = (el: HTMLDivElement) => {
|
|
|
+ // 设置背景图位置
|
|
|
+ containerRef.value?.style.setProperty('background-position', `0 -${el.clientHeight}px`)
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
onRefresh()
|
|
|
|
|
|
@@ -125,7 +132,14 @@ onMounted(() => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- onActivated(() => onRefresh())
|
|
|
+ onActivated(() => {
|
|
|
+ plus.setStatusBarStyle('light')
|
|
|
+ onRefresh()
|
|
|
+ })
|
|
|
+
|
|
|
+ onDeactivated(() => {
|
|
|
+ plus.setStatusBarStyle('dark')
|
|
|
+ })
|
|
|
})
|
|
|
</script>
|
|
|
|