419 lines
14 KiB
Vue
419 lines
14 KiB
Vue
<script lang="ts" setup>
|
|
import { getCountdown, getFirstPageInfo, getMyScore, getTopNew } from '@/service'
|
|
import { useTokenStore } from '@/store'
|
|
import { systemInfo } from '@/utils/systemInfo'
|
|
import { useChannelLive } from './hooks/useChannelLive'
|
|
|
|
defineOptions({
|
|
name: 'Home',
|
|
})
|
|
|
|
// #ifdef MP-WEIXIN
|
|
definePage({
|
|
type: 'home',
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
},
|
|
})
|
|
// #endif
|
|
|
|
// #ifndef MP-WEIXIN
|
|
definePage({
|
|
type: 'home',
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
transparentTitle: 'always',
|
|
navigationBarTitleText: '',
|
|
},
|
|
})
|
|
// #endif
|
|
|
|
const tokenStore = useTokenStore()
|
|
const wechatVideoId = import.meta.env.VITE_WX_VIDEO_ID || ''
|
|
const { channelVideoList, getChannelLiveNoticeInfo, handleChannelVideoAction,goToLiveHomePage } = useChannelLive(wechatVideoId)
|
|
|
|
onShareAppMessage(() => {
|
|
return {
|
|
title: '六纬中考通',
|
|
path: '/pages/index/index',
|
|
imageUrl: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/qt/qt_fenxiang.png',
|
|
}
|
|
})
|
|
onShareTimeline(() => {
|
|
return {
|
|
title: '六纬中考通',
|
|
}
|
|
})
|
|
|
|
const subMenus = [
|
|
{ name: '历年分数', imgPath: 'https://lwzk.ycymedu.com/img/home/sy_fenshu.png', url: '/pages-sub/information/overTheYear' },
|
|
{ name: '高中汇总', imgPath: 'https://lwzk.ycymedu.com/img/home/sy_daoxiao.png', url: '/pages-sub/information/highSchool' },
|
|
{ name: '批次线', imgPath: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/sy_picixian.png', url: '/pages-sub/information/batchline' },
|
|
{ name: '位次查询', imgPath: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/syweici.png', url: '/pages-sub/information/rank' },
|
|
]
|
|
|
|
const notifies = ref<any[]>([])
|
|
|
|
const opacity = ref(0)
|
|
const totalScore = ref('0')
|
|
const schoolCount = ref('0')
|
|
const wishlistCount = ref('0')
|
|
|
|
function navigateToCreateWish() {
|
|
uni.navigateTo({ url: '/pages-sub/wishlist/create/first' })
|
|
}
|
|
|
|
onPageScroll((e) => {
|
|
const scrollTop = e.scrollTop
|
|
opacity.value = Math.min(scrollTop / 100, 1)
|
|
})
|
|
|
|
function navigateToCountdownPage() {
|
|
uni.navigateTo({ url: '/pages-sub/countdown/index' })
|
|
}
|
|
|
|
function navigateToSubPage(url: string) {
|
|
uni.navigateTo({ url })
|
|
}
|
|
|
|
function navigateToCustom() {
|
|
uni.navigateTo({ url: '/pages-sub/about/onlineCustom' })
|
|
}
|
|
|
|
function navigateToNewsPage() {
|
|
uni.navigateTo({
|
|
url: '/pages-sub/information/middleSchool',
|
|
})
|
|
}
|
|
|
|
function navigateToNewsDetail(id: number) {
|
|
uni.navigateTo({ url: `/pages-sub/information/middleDetail?id=${id}` })
|
|
}
|
|
|
|
const countdown = ref(0)
|
|
|
|
onLoad(() => {
|
|
const updateManager = uni.getUpdateManager()
|
|
updateManager.onCheckForUpdate((res) => {
|
|
// 请求完新版本信息的回调
|
|
if (res.hasUpdate) {
|
|
uni.showToast({
|
|
title: '更新提示',
|
|
content: '新版本已经准备好，将进行更新',
|
|
})
|
|
}
|
|
})
|
|
|
|
updateManager.onUpdateReady(() => {
|
|
uni.showModal({
|
|
title: '更新提示',
|
|
content: '新版本已经准备好，是否重启应用？',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
|
updateManager.applyUpdate()
|
|
}
|
|
},
|
|
})
|
|
})
|
|
|
|
updateManager.onUpdateFailed(() => {
|
|
// 新版本下载失败
|
|
uni.showToast({
|
|
title: '更新失败',
|
|
icon: 'none',
|
|
})
|
|
})
|
|
})
|
|
|
|
onShow(() => {
|
|
getTopNew({ query: { Top: 3 } }).then((resp) => {
|
|
if (resp.code === 200) {
|
|
notifies.value = resp.result
|
|
}
|
|
})
|
|
|
|
if (tokenStore.hasLogin) {
|
|
getMyScore().then((resp) => {
|
|
if (resp.code === 200 && resp.result) {
|
|
totalScore.value = resp.result.totalScore
|
|
}
|
|
})
|
|
getFirstPageInfo().then((resp) => {
|
|
if (resp.code === 200) {
|
|
schoolCount.value = resp.result.schoolCount
|
|
wishlistCount.value = resp.result.zyCount
|
|
}
|
|
})
|
|
}
|
|
getCountdown().then((resp) => {
|
|
if (resp.code === 200) {
|
|
countdown.value = resp.result
|
|
}
|
|
})
|
|
|
|
getChannelLiveNoticeInfo()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="custom-background flex flex-col">
|
|
<sar-navbar
|
|
:fixed="true" fixation-style="top:unset;"
|
|
:root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, ${opacity})`, '--sar-navbar-height': `${systemInfo?.statusBarHeight + 44}px` }"
|
|
>
|
|
<template #left>
|
|
<view
|
|
class="ml-[32rpx] flex items-center justify-center text-[32rpx] text-[#333]"
|
|
:style="{ 'padding-top': `${systemInfo?.statusBarHeight}px` }"
|
|
>
|
|
济南
|
|
</view>
|
|
</template>
|
|
<template #title>
|
|
<view :style="{ 'padding-top': `${systemInfo?.statusBarHeight}px` }" class="flex justify-center">
|
|
<view class="h-[32rpx] w-[226rpx] flex justify-center">
|
|
<image
|
|
class="h-[32rpx] w-[226rpx]" src="https://lwzk.ycymedu.com/img/home/sy_logo.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</sar-navbar>
|
|
<scroll-view scroll-y class="flex-1">
|
|
<view class="mx-[40rpx] mt-[20rpx] min-h-[460rpx] overflow-hidden rounded-[32rpx] bg-[#3D72FD] font-[DinBold]">
|
|
<view
|
|
v-if="countdown > 0"
|
|
class="flex items-baseline justify-center rounded-[32rpx] bg-[#4c7bfc] py-[18rpx] text-[36rpx] text-white font-[JinBuFont]" @click="navigateToCountdownPage"
|
|
>
|
|
距离中考还有 <text class="text-[52rpx] text-white">{{ countdown }}</text> 天
|
|
<view class="ml-[10rpx] h-[24rpx] w-[14rpx]">
|
|
<image
|
|
src="https://lwzk.ycymedu.com/img/home/sy_gengduo.png" mode="scaleToFill"
|
|
class="h-[24rpx] w-[14rpx]"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="flex items-baseline justify-center rounded-[32rpx] bg-[#4c7bfc] py-[18rpx] text-[36rpx] text-white font-[JinBuFont]"
|
|
>
|
|
正在考试
|
|
</view>
|
|
<view class="mt-[48rpx] flex items-center justify-between pl-[46rpx] pr-[64rpx]">
|
|
<view class="flex flex-col items-center gap-[8rpx] text-white">
|
|
<view class="flex items-center">
|
|
<text class="text-[68rpx] font-700">{{ totalScore }}</text>
|
|
<view class="ml-[4rpx] h-[30rpx] w-[30rpx]">
|
|
<image
|
|
class="h-[30rpx] w-[30rpx]"
|
|
src="https://lwzk.ycymedu.com/img/home/sy_bianji.png" mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="text-[30rpx] text-[#b0c6ff]">
|
|
预估成绩
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex flex-col items-center gap-[8rpx] text-white">
|
|
<view class="flex items-baseline">
|
|
<text class="text-[68rpx] font-700">{{ schoolCount }}</text>
|
|
<view class="ml-[4rpx] text-[32rpx]">
|
|
所
|
|
</view>
|
|
</view>
|
|
<view class="text-[30rpx] text-[#b0c6ff]">
|
|
适合普高
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex flex-col items-center gap-[8rpx] text-white">
|
|
<view class="flex items-baseline">
|
|
<text class="text-[68rpx] font-700">{{ wishlistCount }}</text>
|
|
<view class="ml-[4rpx] text-[32rpx]">
|
|
份
|
|
</view>
|
|
</view>
|
|
<view class="text-[30rpx] text-[#b0c6ff]">
|
|
志愿表
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="mx-[74rpx] my-[48rpx] flex items-center justify-center rounded-[52rpx] from-[#FCFDFF] to-[#B8D3FF] bg-gradient-to-b py-[28rpx] shadow-[0_8px_20px_-6px_rgba(38,129,255,0.39)]"
|
|
@click="navigateToCreateWish"
|
|
>
|
|
<view class="h-[40rpx] w-[40rpx]">
|
|
<image
|
|
class="h-[40rpx] w-[40rpx]"
|
|
src="https://lwzk.ycymedu.com/img/home/sy_chuangjian.png" mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
<view class="ml-[8rpx] text-[40rpx] text-[#3D72FD] font-600">
|
|
创建志愿表
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 咨询 -->
|
|
<view class="grid grid-cols-2 mx-[32rpx] mt-[60rpx] gap-[24rpx]">
|
|
<view
|
|
v-for="(item, index) in subMenus"
|
|
:key="index" class="flex items-center justify-between rounded-[24rpx] bg-[#F3F4F8] py-[20rpx] pl-[30rpx] pr-[24rpx]" @click="navigateToSubPage(item.url)"
|
|
>
|
|
<text class="text-[34rpx] text-[#333] font-600">{{ item.name }}</text>
|
|
<view class="h-[108rpx] w-[108rpx]">
|
|
<image :src="item.imgPath" mode="scaleToFill" class="h-[108rpx] w-[108rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mx-[30rpx] mt-[60rpx]">
|
|
<view class="mb-[20rpx] flex items-center">
|
|
<view class="mr-[12rpx] h-[48rpx] w-[48rpx]">
|
|
<image
|
|
src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/sy_zhibo.gif" mode="scaleToFill"
|
|
class="h-[48rpx] w-[48rpx]"
|
|
/>
|
|
</view>
|
|
<text class="text-[40rpx] text-black font-600">最新直播</text>
|
|
</view>
|
|
|
|
<scroll-view scroll-x class="w-full">
|
|
<view class="w-full flex gap-[30rpx] whitespace-nowrap" v-if="channelVideoList.length > 0">
|
|
<view
|
|
v-for="item in channelVideoList"
|
|
:key="item.id"
|
|
class="h-[430rpx] min-h-[430rpx] min-w-[440rpx] w-[440rpx] rounded-[18rpx] bg-[#F3F4F8]"
|
|
>
|
|
<view class="relative h-[280rpx] rounded-[18rpx]">
|
|
<image
|
|
:src="item.coverUrl"
|
|
mode="aspectFit"
|
|
class="h-full w-full"
|
|
/>
|
|
<view v-if="item.type === 'live'" class="absolute bottom-0 h-[48rpx] w-full flex items-center justify-between rounded-[0_0_18rpx_18rpx] bg-black bg-opacity-50">
|
|
<view class="ml-[20rpx] flex items-center">
|
|
<view class="mr-[8rpx] h-[12rpx] w-[12rpx] rounded-full bg-white" />
|
|
<view class="text-[24rpx] text-white">
|
|
{{ item.statusText }}
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="item.nickname" class="mr-[20rpx] flex items-center">
|
|
<view class="mr-[10rpx] h-[20rpx] w-[30rpx] flex items-center">
|
|
<image
|
|
src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/sy_liulan.png"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
<view class="text-[24rpx] text-white">
|
|
{{ item.nickname }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="absolute bottom-0 h-[48rpx] w-full flex items-center justify-between rounded-[0_0_18rpx_18rpx] bg-black bg-opacity-50">
|
|
<view class="ml-[20rpx] text-[24rpx] text-white">
|
|
{{ item.startTimeText }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mx-[20rpx] mt-[20rpx] text-[34rpx] text-[#333] font-500 overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{{ item.title }}
|
|
</view>
|
|
|
|
<view
|
|
class="ml-[20rpx] mt-[10rpx] h-[52rpx] w-[148rpx] flex items-center justify-center rounded-[376rpx] text-[26rpx]"
|
|
:class="item.type === 'live' ? 'text-white bg-[#3D72FD] border-solid border-[2rpx] border-[#3D72FD]' : 'bg-[#E0E6F8] text-[#3D72FD]'"
|
|
@click="handleChannelVideoAction(item)"
|
|
>
|
|
{{ item.buttonText }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="w-full flex flex-col items-center justify-center" @click="goToLiveHomePage()" v-if="channelVideoList.length === 0">
|
|
<view class="w-full h-[236rpx]">
|
|
<image
|
|
src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/home_zhibo.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="mx-[30rpx] mt-[60rpx]">
|
|
<view class="mb-[30rpx] flex items-center">
|
|
<view class="mr-[12rpx] h-[48rpx] w-[48rpx]">
|
|
<image
|
|
src="https://lwzk.ycymedu.com/img/home/sy_zixuntun.png" mode="scaleToFill"
|
|
class="h-[48rpx] w-[48rpx]"
|
|
/>
|
|
</view>
|
|
<text class="text-[40rpx] text-black font-600">最新资讯</text>
|
|
|
|
<view class="ml-auto text-[30rpx] text-[#A6A6A6]" @click="navigateToNewsPage">
|
|
更多
|
|
</view>
|
|
<view class="h-[30rpx] w-[14rpx] flex items-center">
|
|
<image
|
|
class="h-[30rpx] w-[14rpx]"
|
|
src="https://lwzk.ycymedu.com/img/home/sy_zixunjiantou.png" mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
v-for="(value, index) in notifies"
|
|
:key="index" class="mb-[28rpx] flex flex-col border-b-1 border-[#eee] border-b-solid pb-[22rpx]" @click="navigateToNewsDetail(value.id)"
|
|
>
|
|
<text class="text-[32rpx] text-[#333] font-400">{{ value.title }}</text>
|
|
<view class="mt-[20rpx] flex items-center justify-between text-[#999]">
|
|
<view class="flex items-center">
|
|
<view class="mr-[10rpx] h-[28rpx] w-[28rpx] flex items-center">
|
|
<image
|
|
src="https://lwzk.ycymedu.com/img/home/sy_shijian.png" mode="scaleToFill"
|
|
class="h-[28rpx] w-[28rpx]"
|
|
/>
|
|
</view>
|
|
<text class="text-[26rpx]">{{ value.pubtime }}</text>
|
|
</view>
|
|
<view class="flex items-center">
|
|
<view class="mr-[10rpx] h-[28rpx] w-[28rpx] flex items-center">
|
|
<image
|
|
src="https://lwzk.ycymedu.com/img/home/sy_chakan.png" mode="scaleToFill"
|
|
class="h-[28rpx] w-[28rpx]"
|
|
/>
|
|
</view>
|
|
<text class="text-[26rpx]">{{ value.viewcount }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fixed bottom-[200rpx] right-[60rpx]" @click="navigateToCustom">
|
|
<view class="h-[160rpx] w-[160rpx]">
|
|
<image
|
|
class="h-[160rpx] w-[160rpx]" src="https://lwzk.ycymedu.com/img/home/sy_kefu.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.custom-background {
|
|
background: linear-gradient(180deg, #c7e0ff 0%, rgba(199, 224, 255, 0) 530rpx);
|
|
background-position: 50% 50%;
|
|
background-origin: padding-box;
|
|
background-clip: border-box;
|
|
background-size: auto auto;
|
|
}
|
|
</style>
|