|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <!-- 头部 -->
|
|
|
+ <nav-bar height="120" backPath="workspace" title="教师专业发展" :showHeaderborder="true" :showFilterPicker="false" :showTabs="false" :onlyTitle="false" rightWidth="0rpx" @CommonFilterData="CommonFilterData"></nav-bar>
|
|
|
+ <view class="page_content">
|
|
|
+ <view class="count_list"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import navBar from '@/components/nav-bar.vue';
|
|
|
+ import {queryTeacherCourseTypeList,teacherCenterPageData} from '@/reqApi/studentStudy.js';
|
|
|
+ import {
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ onMounted,
|
|
|
+ nextTick
|
|
|
+ } from 'vue';
|
|
|
+ const state = reactive({
|
|
|
+ courseTypeData:[],//顶部查询数据
|
|
|
+ filterPickerData: [{
|
|
|
+ valueIndex:0,//默认值索引
|
|
|
+ defaultValue:'',//默认值
|
|
|
+ list:[]
|
|
|
+ },{
|
|
|
+ valueIndex:0,//默认值索引
|
|
|
+ defaultValue:'',//默认值
|
|
|
+ list:[]
|
|
|
+ }],
|
|
|
+ tabList: [{
|
|
|
+ label: '最新发布',
|
|
|
+ value: '0'
|
|
|
+ }, {
|
|
|
+ label: '播放最多',
|
|
|
+ value: '1'
|
|
|
+ }, {
|
|
|
+ label: '关注最多',
|
|
|
+ value: '2'
|
|
|
+ }],
|
|
|
+ pageList:[],//列表数据
|
|
|
+ queryStr: '',
|
|
|
+ sortType: '0',//排序方式，课程中心参数，0-最新发布，1-播放最多，2-关注最多
|
|
|
+ studCourseTypeClassId: '',//学习专题
|
|
|
+ studCourseTypeId: '',//内容领域
|
|
|
+ pageSize: 30,
|
|
|
+ pageNum: 1,
|
|
|
+ scrollTop:0,
|
|
|
+ oldScrollTop:0,
|
|
|
+ isRefreshing:false,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
|
|
|
+ isLoading:true,//加载中
|
|
|
+ noMoreData:false,//没有更多数据了
|
|
|
+ loadStatus:'more',//loading状态
|
|
|
+ })
|
|
|
+ onMounted(() => {
|
|
|
+ getCourseTypeDataList();
|
|
|
+ OnLoadData(true);
|
|
|
+ });
|
|
|
+ //获取顶部查询项
|
|
|
+ const getCourseTypeDataList = () => {
|
|
|
+ queryTeacherCourseTypeList().then(res => {
|
|
|
+ if(res.code == 200){
|
|
|
+ const defaultData = [{
|
|
|
+ label:'内容领域',
|
|
|
+ id:'',
|
|
|
+ value:''
|
|
|
+ }];
|
|
|
+ const resData = res?.data || [];
|
|
|
+ state.courseTypeData = defaultData.concat(resData);
|
|
|
+ //一级条件
|
|
|
+ state.filterPickerData[0].list = state.courseTypeData.map(item=>({
|
|
|
+ ...item,
|
|
|
+ value:item.id
|
|
|
+ }))
|
|
|
+ }else{
|
|
|
+ state.courseTypeData = [];
|
|
|
+ state.filterPickerData = [{
|
|
|
+ valueIndex:0,//默认值索引
|
|
|
+ defaultValue:'',//默认值
|
|
|
+ list:[],
|
|
|
+ },{
|
|
|
+ valueIndex:0,
|
|
|
+ defaultValue:'',//默认值
|
|
|
+ list:[],
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //切换条件选择器
|
|
|
+ const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
|
|
|
+ const {valueIndex, index,filterPickerValue} = filterPicker;
|
|
|
+ if(type == 'filterPicker'){
|
|
|
+ if(index==0){//索引
|
|
|
+ state.filterPickerData[index].valueIndex = valueIndex;//一级条件选中项的索引
|
|
|
+ state.filterPickerData[1].valueIndex = 0;//二级条件选中项的索引
|
|
|
+ const childrenData = state.courseTypeData?.[valueIndex]?.children || [];
|
|
|
+ const childrenList = childrenData.map(item=>({
|
|
|
+ ...item,
|
|
|
+ value:item?.id ?? ''
|
|
|
+ }))
|
|
|
+ if(childrenList.length){
|
|
|
+ childrenList.unshift({
|
|
|
+ label:'学习专题',
|
|
|
+ id:'',
|
|
|
+ value:''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ state.filterPickerData[1].list = childrenList;//二级条件数据
|
|
|
+ }else{
|
|
|
+ state.filterPickerData[index].valueIndex = valueIndex;//二级条件选中项的索引
|
|
|
+ }
|
|
|
+ }
|
|
|
+ state.queryStr = searchWord;
|
|
|
+ state.studCourseTypeId = filterPickerValue[0];
|
|
|
+ state.studCourseTypeClassId = filterPickerValue[1];
|
|
|
+ state.sortType = tabsSelected;
|
|
|
+ OnLoadData(true)
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ *获取数据
|
|
|
+ * initPage:初始分页 从第一开始
|
|
|
+ */
|
|
|
+ const OnLoadData = (initPage) => {
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: '加载中'
|
|
|
+ // });
|
|
|
+ if (initPage) state.pageNum = 1;//如果是下拉刷新、重新查询 默认加载第一页
|
|
|
+ state.isLoading = true;
|
|
|
+ state.loadStatus = 'loading';
|
|
|
+ teacherCenterPageData({
|
|
|
+ queryStr:state.queryStr,
|
|
|
+ studCourseTypeId:state.studCourseTypeId,
|
|
|
+ studCourseTypeClassId:state.studCourseTypeClassId,
|
|
|
+ sortType:state.sortType,
|
|
|
+ pageSize:state.pageSize,
|
|
|
+ pageNum:state.pageNum
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ const total = Number(res.data.total) || 0;//总数
|
|
|
+ const pages = Math.ceil(total / state.pageSize);//总页数
|
|
|
+ const recordsData = res?.data?.records || [];
|
|
|
+ state.pageList = initPage ? recordsData : [...state.pageList,...recordsData];
|
|
|
+ state.noMoreData = state.pageNum == pages;
|
|
|
+ state.pageNum++;
|
|
|
+ }
|
|
|
+ }).finally(()=>{
|
|
|
+ // uni.hideLoading();
|
|
|
+ state.isLoading = false;
|
|
|
+ state.isRefreshing = false;//下拉刷新未被触发
|
|
|
+ if(state.noMoreData){
|
|
|
+ state.loadStatus = 'no-more';
|
|
|
+ }else{
|
|
|
+ state.loadStatus = 'more';
|
|
|
+ }
|
|
|
+ //返回到页面顶部
|
|
|
+ if(initPage){
|
|
|
+ GoTop();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 自定义下拉刷新被触发 下拉刷新
|
|
|
+ const OnRefresh = () =>{
|
|
|
+ state.isRefreshing = true;//下拉刷新已经被触发
|
|
|
+ OnLoadData(true);
|
|
|
+ }
|
|
|
+ //滚动到底部/右边 触发上拉刷新
|
|
|
+ const OnLoadMore = () => {
|
|
|
+ if (state.isLoading || state.noMoreData) return;
|
|
|
+ OnLoadData(false);
|
|
|
+ }
|
|
|
+ // 滚动时触发
|
|
|
+ const OnScroll = (e) => {
|
|
|
+ state.oldScrollTop = e.detail.scrollTop;
|
|
|
+ }
|
|
|
+ //返回到顶部
|
|
|
+ const GoTop = () => {
|
|
|
+ // 解决view层不同步的问题
|
|
|
+ state.scrollTop = state.oldScrollTop;
|
|
|
+ nextTick(() => {
|
|
|
+ state.scrollTop = 0
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //视频详情
|
|
|
+ const GoVideoDetails = (id) => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/studentStudy/videoDetails?id=${id}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page_content{
|
|
|
+ height: calc(100% - 448rpx);
|
|
|
+ .scroll_view_y{
|
|
|
+ height: 100%;
|
|
|
+ .refresh_loading{
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page_list{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap:32rpx;
|
|
|
+ .list_item{
|
|
|
+ &:nth-child(1){
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ width: calc((100% - 32rpx) / 2);
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .item_img{
|
|
|
+ width: 100%;
|
|
|
+ height: 220rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ .item_title{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ margin:8rpx 0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .item_time{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ .img{
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
