|
|
@@ -1,8 +1,324 @@
|
|
|
<template>
|
|
|
+ <!-- 头部 -->
|
|
|
+ <nav-bar height="336" title="教师专业发展" :tabList="state.tabList" :tabBtns="state.tabBtns" :onlyTitle="false" :showFilterPicker="false" :showTabs="true" :showTabBtns="true" rightWidth="0rpx" @CommonFilterData="CommonFilterData" @GoBack="GoBack">
|
|
|
+ <template #tab_btns_lef>
|
|
|
+ <uni-data-select class="date_select" v-model="state.dateType" :clear="false" placeholder="请选择" :localdata="state.dateTypeList">
|
|
|
+ </uni-data-select>
|
|
|
+ </template>
|
|
|
+ </nav-bar>
|
|
|
+ <view class="page_content">
|
|
|
+ <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" @click="PreviewHonorDetail(item.id)">
|
|
|
+ <view class="item_honor_type">
|
|
|
+ <view class="honor_type_item">{{item.awardDatetime}}</view>
|
|
|
+ <view class="honor_type_item">{{item.awardDatetime}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="honor_content">
|
|
|
+ <image class="honor_pic" :src="item.certPicUrl"></image>
|
|
|
+ <view class="honor_info">
|
|
|
+ <view class="honor_info_top">
|
|
|
+ <view class="honor_name">{{item.honorName}}</view>
|
|
|
+ <view class="teacher_name">获奖人：{{item.teacherName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="created_at">上传时间：{{item.createdAt}}</view>
|
|
|
+ </view>
|
|
|
+ </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>
|
|
|
+<script setup>
|
|
|
+ import navBar from '@/components/navBar.vue';
|
|
|
+ import {queryHonorTypeList,queryHonorTeacherListDetail} from '@/reqApi/teacherHonor.js';
|
|
|
+ import {
|
|
|
+ reactive,
|
|
|
+ nextTick,
|
|
|
+ onMounted
|
|
|
+ } from 'vue';
|
|
|
+ const state = reactive({
|
|
|
+ tabList:[],
|
|
|
+ dateTypeList:[{
|
|
|
+ text:'全部',
|
|
|
+ value:'',
|
|
|
+ },{
|
|
|
+ text:'最近3月',
|
|
|
+ value:'3',
|
|
|
+ },{
|
|
|
+ text:'最近半年',
|
|
|
+ value:'6',
|
|
|
+ },{
|
|
|
+ text:'最近1年',
|
|
|
+ value:'12',
|
|
|
+ }],
|
|
|
+ tabBtns:[{
|
|
|
+ label:'全部',
|
|
|
+ value:'',
|
|
|
+ },{
|
|
|
+ label:'待审核',
|
|
|
+ value:'0',
|
|
|
+ },{
|
|
|
+ label:'已完成',
|
|
|
+ value:'1',
|
|
|
+ },{
|
|
|
+ label:'已驳回',
|
|
|
+ value:'2',
|
|
|
+ }],
|
|
|
+ pageLists:[],//全部数据
|
|
|
+ pageList:[],//列表数据
|
|
|
+ honorTypeId:'',//荣誉类型
|
|
|
+ teacherId: '',//教师id
|
|
|
+ dateType:'',//获奖时间
|
|
|
+ pageSize: 30,
|
|
|
+ pageNum: 1,
|
|
|
+ pages:0,
|
|
|
+ scrollTop:0,
|
|
|
+ oldScrollTop:0,
|
|
|
+ isRefreshing:false,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
|
|
|
+ isLoading:true,//加载中
|
|
|
+ noMoreData:false,//没有更多数据了
|
|
|
+ loadStatus:'more',//loading状态
|
|
|
+ })
|
|
|
+ onMounted((option) => {
|
|
|
+ GetHonorTypeList();
|
|
|
+ OnLoadData(true);
|
|
|
+ });
|
|
|
+ //查询荣誉类型列表
|
|
|
+ const GetHonorTypeList = () => {
|
|
|
+ queryHonorTypeList().then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ const list = res?.data || [];
|
|
|
+ const tabList = list.map(item=>({
|
|
|
+ ...item,
|
|
|
+ label:item.honorTypeName,
|
|
|
+ value:item.id
|
|
|
+ }))
|
|
|
+ state.tabList = [{label:'全部',value:''},...tabList];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //切换条件选择器
|
|
|
+ const CommonFilterData = (filterOptions,type) => {
|
|
|
+ const { tabsSelected,tabBtnSelected } = filterOptions;
|
|
|
+ state.honorTypeId = tabsSelected;
|
|
|
+ state.dateType = tabBtnSelected;
|
|
|
+ OnLoadData(true)
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ *获取数据
|
|
|
+ * initPage:初始分页 从第一开始
|
|
|
+ */
|
|
|
+ const OnLoadData = (initPage) => {
|
|
|
+ state.isLoading = true;
|
|
|
+ state.loadStatus = 'loading';
|
|
|
+ if (initPage) {
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: '加载中'
|
|
|
+ // });
|
|
|
+ state.pageNum = 1;//如果是下拉刷新、重新查询 默认加载第一页
|
|
|
+ queryHonorTeacherListDetail({
|
|
|
+ honorTypeId:state.honorTypeId,//荣誉类型id
|
|
|
+ teacherId:state.teacherId,
|
|
|
+ dateType:state.dateType,
|
|
|
+ startDatetime:'',
|
|
|
+ endDatetime:''
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ const tableData = res?.data?.tableData || [];
|
|
|
+ state.pageLists = tableData;//全部数据
|
|
|
+ const total = tableData?.length || 0;//总数
|
|
|
+ state.pages = Math.ceil(total / state.pageSize);//总页数
|
|
|
+ //默认加载
|
|
|
+ state.pageList = state.pageLists.slice(0, state.pageSize);
|
|
|
+ //没有更多了
|
|
|
+ state.noMoreData = state.pageNum == state.pages;
|
|
|
+ //分页+1
|
|
|
+ state.pageNum++;
|
|
|
+ state.isLoading = false;
|
|
|
+ state.isRefreshing = false;//下拉刷新未被触发
|
|
|
+ state.loadStatus = state.noMoreData?'no-more':'more';
|
|
|
+ }
|
|
|
+ }).finally(()=>{
|
|
|
+ // uni.hideLoading();
|
|
|
+ //返回到页面顶部
|
|
|
+ if(initPage){
|
|
|
+ GoTop();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ const start = (state.pageNum - 1) * state.pageSize;
|
|
|
+ const end = start + state.pageSize;
|
|
|
+ const list = state.pageLists.slice(start, end);
|
|
|
+ state.pageList = [...state.pageList, ...list];
|
|
|
+ state.noMoreData = state.pageNum == state.pages;
|
|
|
+ state.pageNum++;
|
|
|
+ setTimeout(() => {
|
|
|
+ state.isLoading = false;
|
|
|
+ state.isRefreshing = false; //下拉刷新未被触发
|
|
|
+ state.loadStatus = state.noMoreData?'no-more':'more';
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 自定义下拉刷新被触发 下拉刷新
|
|
|
+ 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 GoBack = () => {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const PreviewHonorDetail = () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/teacherHonor/honorTeacher/honorTeacherDetail?teacherId=${teacherId}`
|
|
|
+ });
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .date_select{
|
|
|
+ width: 196rpx;
|
|
|
+ flex: auto;
|
|
|
+ flex-shrink: 0;
|
|
|
+ :deep(.uni-select__selector){
|
|
|
+ position: fixed;
|
|
|
+ top:313rpx !important;
|
|
|
+ left: 24rpx;
|
|
|
+ width: 196rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page_content{
|
|
|
+ height: calc(100% - 472rpx);
|
|
|
+ .scroll_view_y{
|
|
|
+ height: 100%;
|
|
|
+ .refresh_loading{
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page_list{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ .list_item{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ &:nth-child(1){
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .item_honor_type{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ .honor_type_item{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ &:nth-child(1){
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .honor_content{
|
|
|
+ margin-top: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #F8FAFE;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ border: 2rpx solid #EBEEF5;
|
|
|
+ .honor_pic{
|
|
|
+ width: 320rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .honor_info{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .honor_info_top{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ .honor_name{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .teacher_name{
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .created_at{
|
|
|
+ width: 100%;
|
|
|
+ line-height: 1.4;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
