|
|
@@ -1,126 +1,275 @@
|
|
|
<template>
|
|
|
<!-- 头部 -->
|
|
|
- <nav-bar height="312" backPath="workspace" title="教师研修" :filterPickerData="state.filterPickerData" :tabList="state.tabList" :onlyTitle="false" :showFilterPicker="true" :showTabs="true" rightWidth="0rpx" @GoBack="GoBack"></nav-bar>
|
|
|
+ <nav-bar height="312" backPath="workspace" title="教师研修" :filterPickerData="state.filterPickerData" :tabList="state.tabList" :onlyTitle="false" :showFilterPicker="true" :showTabs="true" rightWidth="0rpx" @CommonFilterData="CommonFilterData"></nav-bar>
|
|
|
<view class="page_content">
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- <view class="item_time"><text class="time">2025-11-12</text></view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开国赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
- <view class="list_item">
|
|
|
- <image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
|
|
|
- <view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
|
|
|
- </view>
|
|
|
+ <scroll-view
|
|
|
+ class="scroll_view_y"
|
|
|
+ :scroll-top="state.scrollTop"
|
|
|
+ scroll-y="true"
|
|
|
+ :refresher-enabled="false"
|
|
|
+ :enable-back-to-top="true"
|
|
|
+ :show-scrollbar="false"
|
|
|
+ :scroll-with-animation="true"
|
|
|
+ refresher-default-style="none"
|
|
|
+ refresher-background="#F8F9FD"
|
|
|
+ :refresher-triggered="state.isRefreshing"
|
|
|
+ @scrolltolower="OnLoadMore"
|
|
|
+ @refresherrefresh="OnRefresh"
|
|
|
+ @scroll="OnScroll">
|
|
|
+ <view class="refresh_loading" v-if="state.isRefreshing"><uni-load-more status="loading" /></view>
|
|
|
+ <view class="page_list">
|
|
|
+ <view class="list_item" v-for="item in state.pageList" :key="item.id">
|
|
|
+ <image class="item_img" mode="aspectFill" :src="item.videoCoverUrl"></image>
|
|
|
+ <view class="item_title">2025{{item.courseName}}</view>
|
|
|
+ <view class="item_time">
|
|
|
+ <image class="img" src="@/static/image/icon/time2x.png"></image>
|
|
|
+ <text class="time">{{item.courseStartDatetime}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="no_data" v-if="!state.isLoading && state.pageList.length == 0">
|
|
|
+ <image class="no_data_img" src="@/static/image/bg/no_data.png"></image>
|
|
|
+ <text class="no_data_text">暂无数据</text>
|
|
|
+ </view>
|
|
|
+ <uni-load-more v-if="state.pageList.length > 0" :status="state.loadStatus" />
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import navBar from '@/components/nav-bar.vue';
|
|
|
+ import {queryCourseTypeDataList,centerPageListData} from '@/reqApi/teacherStudy.js';
|
|
|
import {
|
|
|
reactive,
|
|
|
- ref
|
|
|
+ ref,
|
|
|
+ onMounted,
|
|
|
+ nextTick
|
|
|
} from 'vue';
|
|
|
const state = reactive({
|
|
|
- filterPickerData: [
|
|
|
- ['全部类型', '全部类型1'],
|
|
|
- ['全部类型', '全部类型2'],
|
|
|
- ['全部类型', '全部类型2']
|
|
|
- ],
|
|
|
+ courseTypeData:[],//顶部查询数据
|
|
|
+ filterPickerData: [{
|
|
|
+ valueIndex:0,//默认值索引
|
|
|
+ defaultValue:'',//默认值
|
|
|
+ list:[]
|
|
|
+ },{
|
|
|
+ valueIndex:0,//默认值索引
|
|
|
+ defaultValue:'',//默认值
|
|
|
+ list:[]
|
|
|
+ }],
|
|
|
tabList: [{
|
|
|
- name: '最新发布',
|
|
|
- sortType: '0'
|
|
|
+ label: '最新发布',
|
|
|
+ value: '0'
|
|
|
}, {
|
|
|
- name: '播放最多',
|
|
|
- sortType: '1'
|
|
|
+ label: '播放最多',
|
|
|
+ value: '1'
|
|
|
}, {
|
|
|
- name: '关注最多',
|
|
|
- sortType: '2'
|
|
|
- }]
|
|
|
+ label: '关注最多',
|
|
|
+ value: '2'
|
|
|
+ }],
|
|
|
+ pageList:[],//列表数据
|
|
|
+ queryStr: '',
|
|
|
+ sortType: '0',//排序方式，课程中心参数，0-最新发布，1-播放最多，2-关注最多
|
|
|
+ teachCourseTypeClassId: '',//研修专题
|
|
|
+ teachCourseTypeId: '',//内容领域
|
|
|
+ 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 = () => {
|
|
|
+ queryCourseTypeDataList().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.teachCourseTypeId = filterPickerValue[0];
|
|
|
+ state.teachCourseTypeClassId = 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';
|
|
|
+ centerPageListData({
|
|
|
+ queryStr:state.queryStr,
|
|
|
+ teachCourseTypeId:state.teachCourseTypeId,
|
|
|
+ teachCourseTypeClassId:state.teachCourseTypeClassId,
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
.page_content{
|
|
|
- gap:32rpx;
|
|
|
- .list_item{
|
|
|
- &:nth-child(1){
|
|
|
- margin-top: 16rpx;
|
|
|
- }
|
|
|
- &:nth-child(2){
|
|
|
- margin-top: 16rpx;
|
|
|
+ height: calc(100% - 448rpx);
|
|
|
+ .scroll_view_y{
|
|
|
+ height: 100%;
|
|
|
+ .refresh_loading{
|
|
|
+ padding: 10rpx 0;
|
|
|
}
|
|
|
- width: calc((100% - 32rpx) / 2);
|
|
|
- overflow: hidden;
|
|
|
+ }
|
|
|
+ .page_list{
|
|
|
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;
|
|
|
+ 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;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .item_time{
|
|
|
display: flex;
|
|
|
- width: 100%;
|
|
|
- .time{
|
|
|
+ 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: #999999;
|
|
|
+ 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>
|
