volunteer-4/src/pages/home/index/index.vue

147 lines
3.7 KiB
Vue

<route lang="json5" type="home">
{
style: {
navigationStyle: 'custom',
enableShareAppMessage: true,
enableShareTimeline: true,
},
}
</route>
<template>
<view class="flex flex-col relative">
<view class="sticky top-0 z-99">
<Navbar
safeAreaInsetTop
:bg-color="`rgba(255, 255, 255, ${opacity})`"
placeholder
:bordered="false"
>
<template #left>
<navigator open-type="navigate" class="left-icon" url="/pages-sub/home/city/index">
<view>
<text
class="color-[#303030] font-[28rpx] font-medium"
:selectable="false"
:decode="false"
>
{{ userStore.userInfo.city.provincename ?? '城市' }}
</text>
<view class="i-carbon-chevron-down"></view>
</view>
</navigator>
</template>
<template #title>
<view class="title">
<image
class="w-[198rpx] h-[32rpx]"
src="https://api.static.ycymedu.com/src/images/home/app-logo.svg"
></image>
</view>
</template>
</Navbar>
</view>
<view class="h-[700rpx] w-full custom-background absolute top-0 left-0 z-[-1]"></view>
<scroll-view class="flex-1" :scroll-y="true">
<view class="h-full mt-[38rpx]">
<Banner />
<HomeSubMenu />
<HotRank />
<Consultation />
<FabButton :initial-x="0" :initial-y="100" />
</view>
</scroll-view>
<TabBar :current-page="0"></TabBar>
</view>
</template>
<script setup lang="ts">
import TabBar from '@/components/bar/TabBar.vue'
import Navbar from '@/components/navbar/Navbar.vue'
import { useCityInfo } from '@/hooks/useCityInfoHook'
import { useUserStore } from '@/store'
import { ref } from 'vue'
import Banner from '@/components/home/Banner.vue'
import HomeSubMenu from '@/components/home/SubMenu.vue'
import HotRank from '@/components/home/HotRank.vue'
import Consultation from '@/components/home/Consultation.vue'
import FabButton from '@/components/fab/FabButton.vue'
import { getWxUserInfo } from '@/service/index/api'
const userStore = useUserStore()
useCityInfo()
const opacity = ref(0)
onPageScroll((e) => {
const scrollTop = e.scrollTop
opacity.value = Math.min(scrollTop / 100, 1)
})
onShow(() => {
if (userStore.userInfo.token) {
getWxUserInfo().then((resp) => {
const infoData = resp.result as unknown as {
userExtend: { provinceCode: string }
batchName: string
batchDataUrl: string
}
if (userStore.userInfo.city.code === infoData.userExtend.provinceCode) {
userStore.setEstimatedAchievement(infoData.userExtend)
userStore.setBatchName(infoData.batchName)
userStore.setBatchDataUrl(infoData.batchDataUrl)
return
}
})
}
})
onShareAppMessage(() => {
return {
title: '六维志愿',
path: '/pages/index/index',
imageUrl: 'https://api.static.ycymedu.com/src/images/home/app-logo.svg',
}
})
onShareTimeline(() => {
return {
title: '六维志愿',
}
})
</script>
<style lang="scss" scoped>
.left-icon {
position: absolute;
left: 32rpx;
width: max-content;
height: 40rpx;
color: #000;
}
.title {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
font-size: 32rpx;
color: #000;
}
.custom-background {
background-image: linear-gradient(
173deg,
rgb(177, 221, 250) 0,
rgb(177, 221, 250) 23%,
rgba(255, 255, 255, 1) 90%,
rgba(255, 255, 255, 1) 100%
);
background-position: 50% 50%;
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
}
</style>