You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.4 KiB
146 lines
3.4 KiB
<template>
|
|
<view class="page__view">
|
|
|
|
<navbar bgColor="#FFFFFF" >
|
|
<image class="nav-icon" :src="configList.icon_nav_dark" mode="widthFix"></image>
|
|
</navbar>
|
|
|
|
<view class="content">
|
|
<view id="productSwiper" class="swiper">
|
|
<productSwiper :autoplay="autoplay.productSwiper"></productSwiper>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<sectionHeader title="个性推荐" desc="Personal Recommendation"></sectionHeader>
|
|
<view id="recommendSwiper" class="swiper">
|
|
<recommend-swiper :autoplay="autoplay.recommendSwiper"></recommend-swiper>
|
|
</view>
|
|
<health-records-intro></health-records-intro>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<achievement-intro></achievement-intro>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<sectionHeader title="团队成员背景" desc="Background of Team Members"></sectionHeader>
|
|
<team-bg-intro></team-bg-intro>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<sectionHeader desc="Background of Team Members">
|
|
<template #title>
|
|
关注我们<br/>参与更多健康活动
|
|
</template>
|
|
</sectionHeader>
|
|
<follow-us-intro></follow-us-intro>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<tabber select="home" />
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import sectionHeader from '@/components/home/sectionHeader.vue'
|
|
import productSwiper from '@/components/home/productSwiper.vue'
|
|
import recommendSwiper from '@/pages_order/home/recommendSwiper.vue'
|
|
import healthRecordsIntro from '@/pages_order/home/healthRecordsIntro.vue'
|
|
import achievementIntro from '@/pages_order/home/achievementIntro.vue'
|
|
import teamBgIntro from '@/pages_order/home/teamBgIntro.vue'
|
|
import followUsIntro from '@/pages_order/home/followUsIntro.vue'
|
|
|
|
export default {
|
|
components: {
|
|
productSwiper,
|
|
sectionHeader,
|
|
recommendSwiper,
|
|
healthRecordsIntro,
|
|
achievementIntro,
|
|
teamBgIntro,
|
|
followUsIntro,
|
|
tabber,
|
|
},
|
|
data() {
|
|
return {
|
|
isMounted: false,
|
|
observer: null,
|
|
autoplay: {
|
|
productSwiper: false,
|
|
recommendSwiper: false,
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
if(uni.getStorageSync('token')){
|
|
this.$store.commit('getUserInfo')
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
if (this.isMounted) {
|
|
this.observeElement()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.observeElement()
|
|
this.isMounted = true
|
|
},
|
|
unmounted() {
|
|
this.observer.disconnect()
|
|
},
|
|
onHide() {
|
|
this.observer.disconnect()
|
|
this.observer = null
|
|
this.autoplay.productSwiper = false
|
|
this.autoplay.recommendSwiper = false
|
|
},
|
|
methods: {
|
|
observeElement() {
|
|
this.observer = uni.createIntersectionObserver(this, { observeAll: true, thresholds: [0, 1] });
|
|
|
|
this.observer.relativeTo('.content').observe('.swiper', res => {
|
|
if (res.intersectionRatio === 0) {
|
|
this.autoplay[res.id] = false
|
|
} else if (res.intersectionRatio === 1) {
|
|
this.autoplay[res.id] = true
|
|
}
|
|
})
|
|
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page__view {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-color: $uni-bg-color;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 200rpx;
|
|
height: auto;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.content {
|
|
width: 100vw;
|
|
height: calc(100vh - (var(--status-bar-height) + 120rpx) - (env(safe-area-inset-bottom) + 120rpx));
|
|
padding: 70rpx 0 182rpx 0;
|
|
// padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx + 182rpx);
|
|
box-sizing: border-box;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.section {
|
|
margin-top: 80rpx;
|
|
}
|
|
</style>
|