|
|
@@ -2,13 +2,81 @@
|
|
|
<!-- 头部 -->
|
|
|
<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 class="count_list">
|
|
|
+ <view class="count_item">
|
|
|
+ <text class="title">全部荣誉</text>
|
|
|
+ <text class="count">{{state.countList.honorCount}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="count_item">
|
|
|
+ <text class="title">待审核</text>
|
|
|
+ <text class="count">{{state.countList.reViewCount}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="count_item">
|
|
|
+ <text class="title">已完成</text>
|
|
|
+ <text class="count">{{state.countList.overCount}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="count_item">
|
|
|
+ <text class="title">已驳回</text>
|
|
|
+ <text class="count">{{state.countList.overruleCount}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list_title">
|
|
|
+ <view class="title">荣誉类型</view>
|
|
|
+ <view class="add_btn" @click="AddEditHonorType('add')">
|
|
|
+ <uni-icons class="btn_icon" type="plusempty"></uni-icons>
|
|
|
+ <text class="btn_text">新建类型</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="honor_list">
|
|
|
+ <template v-if="state.tableData.length > 0">
|
|
|
+ <view class="list_item" v-for="item in state.tableData" :key="item.honorTypeId">
|
|
|
+ <view class="item_name">
|
|
|
+ <text class="name">{{item.honorTypeName}}</text>
|
|
|
+ <view class="more_icon" @click="ShowMorePopupDialog(item.honorTypeName,item.honorTypeId,item.deleteStatus)">
|
|
|
+ <uni-icons type="more-filled" style="color: #999999;font-size: 32rpx;"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item_sum">
|
|
|
+ <image class="cup" src="@/static/image/icon/honor_cup.png"></image>
|
|
|
+ <view class="sum">共{{item.number}}项</view>
|
|
|
+ <template v-if="Number(item.reviewStatus) === 0">
|
|
|
+ <image class="seal" src="@/static/image/icon/honor_seal.png"></image>
|
|
|
+ <view class="audit">需审核</view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <no-data v-if="!state.isLoading && state.tableData.length == 0" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <custom-popup-dialog ref="popupDialogRef" :title="state.popupDialog.title" :isMaskClick="true" :showDialogClose="false" :showDialogFooter="false" @DialogConfirm="DialogConfirm">
|
|
|
+ <view class="popup_content">
|
|
|
+ <view class="content_item" @click="AddEditHonorType('edit')">
|
|
|
+ <view class="content_item_left">
|
|
|
+ <image class="img" src="/static/image/icon/edit.png"></image>
|
|
|
+ <text class="text">编辑</text>
|
|
|
+ </view>
|
|
|
+ <uni-icons class="content_item_right" type="right" style="color: #333333;font-size: 36rpx;"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view class="content_item" @click="DeleteHonorTypeItem">
|
|
|
+ <view class="content_item_left">
|
|
|
+ <image class="img" src="/static/image/icon/delete.png"></image>
|
|
|
+ <text :class="['text',{'red':state.popupDelDialog.deleteStatus!=1,'disabled':state.popupDelDialog.deleteStatus==1}]">删除</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </custom-popup-dialog>
|
|
|
+ <!-- 删除确认框 -->
|
|
|
+ <popup-dialog ref="popupDelDialogRef" :showFootBorder="true" :content="state.popupDelDialog.content" @DialogConfirm="DialogDelConfirm" />
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import navBar from '@/components/nav-bar.vue';
|
|
|
- import {queryTeacherCourseTypeList,teacherCenterPageData} from '@/reqApi/studentStudy.js';
|
|
|
+ import noData from '@/components/no-data.vue';
|
|
|
+ import customPopupDialog from '@/components/custom-popup-dialog.vue';
|
|
|
+ import popupDialog from '@/components/popup-dialog.vue';
|
|
|
+ import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
|
|
|
+ import {queryHonorTypeOverView,deleteHonorType} from '@/reqApi/teacherHonor.js';
|
|
|
import {
|
|
|
reactive,
|
|
|
ref,
|
|
|
@@ -16,236 +84,262 @@
|
|
|
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 表示下拉刷新未被触发
|
|
|
+ countList:{
|
|
|
+ honorCount:'',//全部荣誉
|
|
|
+ reViewCount:'',//待审核
|
|
|
+ overCount:'',//已完成
|
|
|
+ overruleCount:''//已驳回
|
|
|
+ },
|
|
|
isLoading:true,//加载中
|
|
|
- noMoreData:false,//没有更多数据了
|
|
|
- loadStatus:'more',//loading状态
|
|
|
+ tableData:[],
|
|
|
+ popupDialog:{
|
|
|
+ title:'',
|
|
|
+ id:'',//荣誉id
|
|
|
+ deleteStatus:0//0 可删 1 不可删
|
|
|
+ },
|
|
|
+ popupDelDialog:{
|
|
|
+ content:''
|
|
|
+ }
|
|
|
})
|
|
|
+ //提示框
|
|
|
+ const popupDialogRef = ref(null);
|
|
|
+ const popupDelDialogRef = ref(null);
|
|
|
onMounted(() => {
|
|
|
- getCourseTypeDataList();
|
|
|
- OnLoadData(true);
|
|
|
+ OnLoadData();
|
|
|
});
|
|
|
- //获取顶部查询项
|
|
|
- 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
|
|
|
- }))
|
|
|
+ const OnLoadData = () => {
|
|
|
+ state.isLoading = true;
|
|
|
+ queryHonorTypeOverView({
|
|
|
+ queryStr:state.queryStr
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.code == 200 && res.data){
|
|
|
+ const { honorCount, reViewCount, overCount, overruleCount,tableData } = res.data;
|
|
|
+ state.countList.honorCount = honorCount || 0;
|
|
|
+ state.countList.reViewCount = reViewCount || 0;
|
|
|
+ state.countList.overCount = overCount || 0;
|
|
|
+ state.countList.overruleCount = overruleCount || 0;
|
|
|
+ state.tableData = tableData || [];
|
|
|
}else{
|
|
|
- state.courseTypeData = [];
|
|
|
- state.filterPickerData = [{
|
|
|
- valueIndex:0,//默认值索引
|
|
|
- defaultValue:'',//默认值
|
|
|
- list:[],
|
|
|
- },{
|
|
|
- valueIndex:0,
|
|
|
- defaultValue:'',//默认值
|
|
|
- list:[],
|
|
|
- }]
|
|
|
+ state.countList.honorCount = '';
|
|
|
+ state.countList.reViewCount = '';
|
|
|
+ state.countList.overCount = '';
|
|
|
+ state.countList.overruleCount = '';
|
|
|
+ state.tableData = [];
|
|
|
}
|
|
|
+ }).finally(()=>{
|
|
|
+ state.isLoading = false;
|
|
|
})
|
|
|
}
|
|
|
- //切换条件选择器
|
|
|
+ //搜索
|
|
|
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;//二级条件选中项的索引
|
|
|
- }
|
|
|
+ if(type=='search'){
|
|
|
+ state.queryStr = searchWord;
|
|
|
+ OnLoadData();
|
|
|
}
|
|
|
- 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=>{
|
|
|
+ //编辑 删除
|
|
|
+ const ShowMorePopupDialog = (title,id,deleteStatus) => {
|
|
|
+ state.popupDialog.title = title;
|
|
|
+ state.popupDialog.id = id;
|
|
|
+ state.popupDelDialog.deleteStatus = deleteStatus;
|
|
|
+ popupDialogRef.value.OpenDialog('bottom');
|
|
|
+ }
|
|
|
+ //删除弹框
|
|
|
+ const DeleteHonorTypeItem = () => {
|
|
|
+ if(state.popupDelDialog.deleteStatus == 1) return false
|
|
|
+ state.popupDelDialog.content = `确定要删除【${state.popupDialog.title}】吗？`;
|
|
|
+ popupDelDialogRef.value.OpenDialog();
|
|
|
+ }
|
|
|
+ //确定删除
|
|
|
+ const DialogDelConfirm = () => {
|
|
|
+ deleteHonorType(state.popupDialog.id).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';
|
|
|
+ uni.showToast({
|
|
|
+ title: '删除成功!',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ OnLoadData();
|
|
|
}else{
|
|
|
- state.loadStatus = 'more';
|
|
|
- }
|
|
|
- //返回到页面顶部
|
|
|
- if(initPage){
|
|
|
- GoTop();
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- // 自定义下拉刷新被触发 下拉刷新
|
|
|
- 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) => {
|
|
|
+ //新建或编辑荣誉类型
|
|
|
+ const AddEditHonorType = (type) => {
|
|
|
+ const id = type=='add'?'':state.popupDialog.id;
|
|
|
uni.navigateTo({
|
|
|
- url: `/pages/studentStudy/videoDetails?id=${id}`
|
|
|
+ url: `/pages/teacherHonor/honorOverview/honorTypeDetail?id=${id}`
|
|
|
});
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .page_content{
|
|
|
- height: calc(100% - 448rpx);
|
|
|
- .scroll_view_y{
|
|
|
- height: 100%;
|
|
|
- .refresh_loading{
|
|
|
- padding: 10rpx 0;
|
|
|
+ .count_list{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ gap: 20rpx;
|
|
|
+ .count_item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ width: calc((100% - 60rpx) / 4);
|
|
|
+ background-color: #F7FAFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ border: 2rpx solid #E4E7ED;
|
|
|
+ padding: 18rpx 16rpx 16rpx;
|
|
|
+ height: 136rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .count{
|
|
|
+ margin-top: 6rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
}
|
|
|
- .page_list{
|
|
|
+ }
|
|
|
+ .list_title{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .title{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .add_btn{
|
|
|
+ width: 204rpx;
|
|
|
+ height: 72rpx;
|
|
|
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;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #2E64FA;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 2rpx solid #2E64FA;
|
|
|
+ color: #FFFFFF;
|
|
|
+ .btn_icon{
|
|
|
+ color: #FFFFFF !important;
|
|
|
+ font-size: 28rpx !important;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .btn_text{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .honor_list{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 22rpx;
|
|
|
+ padding-top: 22rpx;
|
|
|
+ .list_item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: calc((100% - 22rpx) / 2);
|
|
|
+ background: linear-gradient( 180deg, #EDF4FF 0%, #FFFFFF 100%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ border: 2rpx solid #E4E7ED;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .item_name{
|
|
|
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;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ .name{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36rpx;
|
|
|
color: #333333;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ flex:1;
|
|
|
+ white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
- .item_time{
|
|
|
- display: flex;
|
|
|
+ .more_icon{
|
|
|
+ display: inline-flex;
|
|
|
align-items: center;
|
|
|
- width: 100%;
|
|
|
- .img{
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
+ justify-content: center;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item_sum{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 38rpx;
|
|
|
+ .cup,.seal{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .sum,.audit{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ color: #2E64FA;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ .audit{
|
|
|
+ color: #F56C6C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup_content{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ .content_item{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 0 48rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .content_item_left{
|
|
|
+ display: flex;
|
|
|
+ height:100%;
|
|
|
+ align-items: center;
|
|
|
+ .img{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ &.red{
|
|
|
+ color: #F56C6C;
|
|
|
}
|
|
|
- .time{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
+ &.disabled{
|
|
|
+ color: #bbb;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
</style>
|
