176 lines
3.8 KiB
Vue
176 lines
3.8 KiB
Vue
<template>
|
||
<view class="item" :class="getStatusClass(item.isFinish)" @click="click_item(item)">
|
||
<view class="img_div">
|
||
<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
|
||
<view class="subscript" v-if="item.isFinish === '02'">已完成</view>
|
||
<view class="subscript" v-else>未完成</view>
|
||
</view>
|
||
<view class="right_div">
|
||
<view class="title ellipsis-text">
|
||
{{ item.taskName }}
|
||
</view>
|
||
<view class="time_div" v-if="item.limitTyp === '02'">
|
||
起止时间：<text class="blod_color">{{ item.startTm?.substr(0, 10) }}至{{ item.endTm?.substr(0, 10) }}</text>
|
||
</view>
|
||
<view class="people_progress_div">
|
||
<view class="mr-10">
|
||
完成人数：<text class="">{{ item.taskFinishSums ?? 0 }}/{{ item.taskSums ?? 0 }}</text>
|
||
</view>
|
||
<view>
|
||
进度：
|
||
<text class="">{{ item.finishCrs ?? item.learnedNumber ?? 0 }}/{{ item.sumCrs ?? item.taskNumber ?? 0 }}门课程</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import { setPageCache } from '@/common/common';
|
||
import common from '@/common/common';
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
});
|
||
const emit = defineEmits(['click_item']);
|
||
const item = computed(() => props.item);
|
||
const getStatusClass = (isFinish) => {
|
||
// 00进行中、01已完成、02已超时
|
||
if (isFinish === '00') return 'in_progress';
|
||
if (isFinish === '01') return 'completed';
|
||
return 'expired';
|
||
};
|
||
// 跳转到详情
|
||
const click_item = (item) => {
|
||
if(item.limitTyp === '02') {
|
||
const startTm = new Date(item.startTm).getTime();
|
||
const endTm = new Date(item.endTm).getTime();
|
||
const currentTimestamp = Date.now();
|
||
if(currentTimestamp < startTm) {
|
||
return common.msg('任务未开始');
|
||
} else if(currentTimestamp > endTm) {
|
||
return common.msg('任务已结束');
|
||
}
|
||
}
|
||
setPageCache('learning_tasks_details', item);
|
||
common.navigateTo('/pages/learningTasks/details');
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.item.in_progress {
|
||
// 进行中
|
||
.subscript {
|
||
color: #0066ff;
|
||
background-color: #daf0ff;
|
||
}
|
||
|
||
.blod_color {
|
||
color: #0066ff;
|
||
}
|
||
}
|
||
|
||
.item.completed {
|
||
// 已完成
|
||
.subscript {
|
||
color: #ffffff;
|
||
background-color: #33c583 !important;
|
||
}
|
||
|
||
.blod_color {
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.item.expired {
|
||
// 已超时
|
||
.subscript {
|
||
color: #ffffff;
|
||
background-color: #ef5705;
|
||
}
|
||
|
||
.blod_color {
|
||
color: #d70c18;
|
||
}
|
||
}
|
||
.item {
|
||
height: 170rpx;
|
||
margin-top: 32rpx;
|
||
display: flex;
|
||
|
||
.img_div {
|
||
position: relative;
|
||
width: 224rpx;
|
||
height: 168rpx;
|
||
overflow: hidden;
|
||
border-radius: 22rpx;
|
||
|
||
.img {
|
||
width: 226rpx;
|
||
height: 168rpx;
|
||
}
|
||
|
||
.subscript {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 92rpx;
|
||
height: 46rpx;
|
||
border-radius: 0px 0px 0px 22rpx;
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
line-height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.right_div {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
margin-left: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
font-family: PingFangSC;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.time_div {
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
line-height: 24rpx;
|
||
flex-wrap: nowrap;
|
||
height: 24rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.people_progress_div {
|
||
display: flex;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
margin-bottom: 23rpx;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
flex-wrap: nowrap;
|
||
height: 24rpx;
|
||
// overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
</style>
|