<template>
<!-- 导航栏 -->
<navbar @find="findTeacher" :area="area" :subject="subject" />
<!-- 骨架屏-->
<indexSkeleton v-if="!isLoaded"></indexSkeleton>
<!-- 老师推荐区 -->
<scroll-view v-else class="scroll-view" scroll-y @scrolltolower="loadTeachers(findParams)">
<teacher-list class="teacher-list" :teachers="teachers" :isLoading="isLoading"></teacher-list>
</scroll-view>
</template>
<script setup>
import {
onMounted,
ref
} from 'vue'
import {
onLoad,
onUnload,
onShow,
onPullDownRefresh,
onShareAppMessage,
} from '@dcloudio/uni-app'
import Student from '../../api/student.js'
const area = ref('')
const subject = ref('')
const isLoaded = ref(false)
const app = getApp()
// 定义首页的列表数据
const teachers = ref([])
const pageID = ref(1)
const isLoading = ref(true)
// 首页查询参数
const findParams = ref({
area: '',
subject: '',
search: ''
})
onLoad(async () => {
// Promise.all让数组参数内的异步函数们并发执行
await Promise.all([findTeacher()])
isLoaded.value = true
// 获取微信群聊场景下的小程序启动信息,抖音小程序不兼容
// uni.getGroupEnterInfo({
// success: (e) => {
// // console.log("shareTicket:", e)
// }
// })
// 设置分享页面
uni.showShareMenu({
withShareTicket: true,
})
// console.log("accessToken", uni.getStorageSync("accessToken"))
// let {
// code
// } = await uni.login({})
// console.log("code:", code)
})
onMounted(() => {
// 获取选择的地区
uni.$on('navbarCitySelected', async (data) => {
findParams.value.area = data
area.value = data
await findTeacher(findParams.value)
// console.log("findParams: ", findParams.value)
})
// 获取选择的科目
uni.$on('subjectSelected', async (data) => {
findParams.value.subject = data
subject.value = data
await findTeacher(findParams.value)
// console.log("findParams: ", findParams.value)
})
})
onUnload(() => {
uni.$off('navbarCitySelected')
uni.$off('subjectSelected')
})
// 下拉刷新老师列表
onPullDownRefresh(async () => {
findParams.value.area = ''
findParams.value.subject = ''
area.value = ''
subject.value = ''
await findTeacher(findParams.value)
// 停止刷新
uni.stopPullDownRefresh()
})
// 分享的参数配置
onShareAppMessage(() => {
return {
title: "某某小程序",
imageUrl: 'pages/static/images/icons/finder/area.png',
desc: '某某小程序,嘿嘿',
path: "pages/index/index",
}
})
// 筛选老师
const findTeacher = async (params = {
area: '',
subject: '',
search: '',
}) => {
resetTeachers()
await loadTeachers(params)
}
// 重置数据
const resetTeachers = () => {
pageID.value = 1
teachers.value = []
isLoading.value = true
}
// 加载老师列表
const loadTeachers = async (params = {
area: '',
subject: '',
search: '',
}) => {
if (isLoading.value) {
let {
data
} = await Student.apiListTeachers({
area: params.area,
subject: params.subject,
search: params.search,
page_id: pageID.value,
page_size: app.globalData.pageSize,
})
// teachers数组追加数据
teachers.value.push(...data.data ? data.data : [])
pageID.value = data.page_id + 1
if (data.page_id >= data.pages) {
isLoading.value = false
}
}
}
</script>
<style>
page {
background-color: #F3F3F3;
height: 100%;
display: flex;
flex-direction: column;
}
.teacher-list {
display: flex;
justify-content: center;
}
.scroll-view {
flex: 1;
height: 700rpx;
/* border: red 10px solid; */
}
</style>
b***@163.com (作者)
谢谢
2024-08-10 19:57