|
@@ -20,21 +20,47 @@
|
|
|
<view class="sub-tabs-wrapper">
|
|
<view class="sub-tabs-wrapper">
|
|
|
<!-- 动态子标签 -->
|
|
<!-- 动态子标签 -->
|
|
|
<view class="sub-tabs">
|
|
<view class="sub-tabs">
|
|
|
- <view class="sub-tab-item" :class="{ active: currentSubTab === item.value }" @click="popShow = !popShow"
|
|
|
|
|
- v-for="(item, index) in currentSubTabsList" :key="index">
|
|
|
|
|
- <text>{{ item.label }}</text>
|
|
|
|
|
|
|
+ <view class="sub-tab-item" :class="{ active: currentSubTab === 'all' || currentSubTab === 'taskCreate' }" @click="openSubTabPopup('all')">
|
|
|
|
|
+ <text>{{ selectedSubTabOption === 'all' || selectedSubTabOption === 'taskCreate' ? (selectedSubTabOption === 'all' ? '全部审核' : '任务创建') : '全部审核' }}</text>
|
|
|
<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png" mode="widthFix"></image>
|
|
<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png" mode="widthFix"></image>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view class="sub-tab-item" :class="{ active: currentSubTab === 'unfinished' || currentSubTab === 'finished' }" @click="openSubTabPopup('unfinished')">
|
|
|
|
|
+ <text>{{ selectedSubTabOption === 'unfinished' || selectedSubTabOption === 'finished' ? (selectedSubTabOption === 'unfinished' ? '最新发起' : '最早发起') : '最新发起' }}</text>
|
|
|
|
|
+ <image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_expand.png" mode="widthFix"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 子标签弹窗 -->
|
|
|
|
|
+ <view class="sub-tab-popup-overlay" v-if="showSubTabPopup" @click="showSubTabPopup = false"></view>
|
|
|
|
|
+ <view class="sub-tab-popup" v-if="showSubTabPopup">
|
|
|
|
|
+ <view class="sub-tab-options">
|
|
|
|
|
+ <!-- 全部审核选项 -->
|
|
|
|
|
+ <template v-if="currentPopupType === 'all'">
|
|
|
|
|
+ <view class="sub-tab-option" :class="{ active: selectedSubTabOption === 'all' }" @click="selectSubTabOption('all', '全部审核')">
|
|
|
|
|
+ <text>全部审核</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="sub-tab-option" :class="{ active: selectedSubTabOption === 'taskCreate' }" @click="selectSubTabOption('taskCreate', '任务创建')">
|
|
|
|
|
+ <text>任务创建</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <!-- 最新发起选项 -->
|
|
|
|
|
+ <template v-else-if="currentPopupType === 'unfinished'">
|
|
|
|
|
+ <view class="sub-tab-option" :class="{ active: selectedSubTabOption === 'unfinished' }" @click="selectSubTabOption('unfinished', '最新发起')">
|
|
|
|
|
+ <text>最新发起</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="sub-tab-option" :class="{ active: selectedSubTabOption === 'finished' }" @click="selectSubTabOption('finished', '最早发起')">
|
|
|
|
|
+ <text>最早发起</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <!-- 使用tab-popup组件 -->
|
|
|
|
|
- <tab-popup v-model:show="popShow" :items="tabsList" :selected-item="selectedTabItem" @select="selectTabItem" />
|
|
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 列表内容 -->
|
|
<!-- 列表内容 -->
|
|
|
- <scroll-view class="content" scroll-y>
|
|
|
|
|
|
|
+ <scroll-view class="content" scroll-y refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
|
|
|
<view class="task-card" v-for="(item, index) in currentList" :key="index" @click="goDetails(item)">
|
|
<view class="task-card" v-for="(item, index) in currentList" :key="index" @click="goDetails(item)">
|
|
|
<!-- 任务/审核标题+状态 -->
|
|
<!-- 任务/审核标题+状态 -->
|
|
|
<view class="card-top">
|
|
<view class="card-top">
|
|
|
- <text class="card-task-title">{{ item.auditName || '未设置' }}</text>
|
|
|
|
|
|
|
+ <text class="card-task-title">{{ getAuditNameDisplay(item.auditName) }}</text>
|
|
|
|
|
+
|
|
|
<view class="status-tag" :class="item.statusClass">{{ item.statusText }}</view>
|
|
<view class="status-tag" :class="item.statusClass">{{ item.statusText }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
@@ -175,6 +201,11 @@ import utils from '@/utils/common.js'
|
|
|
finishStatus: '',
|
|
finishStatus: '',
|
|
|
belongType: ''
|
|
belongType: ''
|
|
|
},
|
|
},
|
|
|
|
|
+ refreshing: false,
|
|
|
|
|
+ showSubTabPopup: false,
|
|
|
|
|
+ currentPopupType: 'all',
|
|
|
|
|
+ selectedSubTabOption: 'all',
|
|
|
|
|
+ selectedSubTabLabel: '全部审核',
|
|
|
// 顶部选项卡数组
|
|
// 顶部选项卡数组
|
|
|
topTabs: [{
|
|
topTabs: [{
|
|
|
label: '待办',
|
|
label: '待办',
|
|
@@ -250,6 +281,29 @@ import utils from '@/utils/common.js'
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ onRefresh() {
|
|
|
|
|
+ this.refreshing = true;
|
|
|
|
|
+ this.loadData().finally(() => {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.refreshing = false;
|
|
|
|
|
+ }, 500);
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ onRestore() {
|
|
|
|
|
+ this.refreshing = false;
|
|
|
|
|
+ },
|
|
|
|
|
+ openSubTabPopup(type) {
|
|
|
|
|
+ this.currentPopupType = type;
|
|
|
|
|
+ this.showSubTabPopup = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ selectSubTabOption(value, label) {
|
|
|
|
|
+ this.selectedSubTabOption = value;
|
|
|
|
|
+ this.selectedSubTabLabel = label;
|
|
|
|
|
+ this.currentSubTab = value;
|
|
|
|
|
+ this.showSubTabPopup = false;
|
|
|
|
|
+ // 这里可以添加根据选择的子标签过滤数据的逻辑
|
|
|
|
|
+ this.loadData();
|
|
|
|
|
+ },
|
|
|
selectTabItem(item) {
|
|
selectTabItem(item) {
|
|
|
this.selectedTabItem = item;
|
|
this.selectedTabItem = item;
|
|
|
this.popShow = false;
|
|
this.popShow = false;
|
|
@@ -263,7 +317,10 @@ import utils from '@/utils/common.js'
|
|
|
switchTopTab(index) {
|
|
switchTopTab(index) {
|
|
|
this.currentTopTab = index;
|
|
this.currentTopTab = index;
|
|
|
this.currentSubTab = 'all';
|
|
this.currentSubTab = 'all';
|
|
|
|
|
+ this.selectedSubTabOption = 'all';
|
|
|
|
|
+ this.selectedSubTabLabel = '全部审核';
|
|
|
this.popShow = false;
|
|
this.popShow = false;
|
|
|
|
|
+ this.showSubTabPopup = false;
|
|
|
// 切换标签时重新加载数据
|
|
// 切换标签时重新加载数据
|
|
|
this.loadData();
|
|
this.loadData();
|
|
|
},
|
|
},
|
|
@@ -284,11 +341,24 @@ import utils from '@/utils/common.js'
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
confirmFilters() {
|
|
confirmFilters() {
|
|
|
- this.showFilter = false
|
|
|
|
|
- console.log('筛选条件:', this.filters)
|
|
|
|
|
- // 筛选后重新加载数据
|
|
|
|
|
- this.loadData()
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ this.showFilter = false
|
|
|
|
|
+ console.log('筛选条件:', this.filters)
|
|
|
|
|
+ // 筛选后重新加载数据
|
|
|
|
|
+ this.loadData()
|
|
|
|
|
+ },
|
|
|
|
|
+ getAuditNameDisplay(auditName) {
|
|
|
|
|
+ if (!auditName) return '未设置'
|
|
|
|
|
+ switch (auditName) {
|
|
|
|
|
+ case '完成任务审核':
|
|
|
|
|
+ return '"完成任务"审核'
|
|
|
|
|
+ case '定级审核':
|
|
|
|
|
+ return '"讲者定级"审核'
|
|
|
|
|
+ default:
|
|
|
|
|
+ // 对于其他审核类型,在最开始和审核前都加双引号
|
|
|
|
|
+ const prefix = auditName.replace('审核', '')
|
|
|
|
|
+ return '"' + prefix + '"审核'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
handleShare(item) {
|
|
handleShare(item) {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
title: '分享功能待实现',
|
|
title: '分享功能待实现',
|
|
@@ -602,6 +672,60 @@ import utils from '@/utils/common.js'
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /* 子标签弹窗样式 */
|
|
|
|
|
+ .sub-tab-popup-overlay {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 100%;
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: -1000rpx;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
+ z-index: 8;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sub-tab-popup {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 100%;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+ padding: 32rpx;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ z-index: 9;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sub-tab-options {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 24rpx;
|
|
|
|
|
+ border-radius: 70rpx 70rpx 70rpx 70rpx;
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sub-tab-option {
|
|
|
|
|
+ padding: 24rpx 14rpx;
|
|
|
|
|
+ border-radius: 70rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ border: 1rpx solid #e8e8e8;
|
|
|
|
|
+ transition: all 0.2s ease;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-width: 214rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ background: rgba(56,139,255,0.15);
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ color: #388BFF;
|
|
|
|
|
+ border: 1rpx solid #388BFF ;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
// 列表区域
|
|
// 列表区域
|
|
|
.content {
|
|
.content {
|
|
|
padding: 24rpx;
|
|
padding: 24rpx;
|