<template>
<
div class="taskBox">
<
div v-for="(item,index) in list" class="itemList">
<
div class="top">【{{ item.userTypeName }}】{{ item.taskName }}</
div>
<
div class="centre">
<p>
<span><img :src="icon1"/></span>
<span>起止时间</span>
<span>：{{ item.startTime }}~{{ item.endTime }}</span>
</p>
<p>
<span> <img :src="icon2"/></span>
<span>适用范围</span>
<span>：{{ item.useRange }}</span>
</p>
<p>
<span> <img :src="icon3"/></span>
<span>说明</span>
<span>：{{ item.taskRemark }}</span>
</p>
</
div>
<
div class="bottom">
<
div class="statusBox statusBox1" v-if="item.status=='正在进行'">{{ item.status }}</
div>
<
div class="statusBox statusBox2" v-else>{{ item.status }}</
div>
<
div class="FillingBox" @click="goFillingFun(item.id)">快速填报 ></
div>
</
div>
</
div>
</
div>
</template>
<script setup>
import {useRoute, useRouter} from 'vue-router'
import {post} from "@/frame/request/http";
import {ref} from "vue";
import icon1 from '../../assets/image/taskFillingIcon1.png'
import icon2 from '../../assets/image/taskFillingIcon2.png'
import icon3 from '../../assets/image/taskFillingIcon3.png'
let router = useRouter()
function goFillingFun(id) {
router.push('/taskFilling?id=' + id)
}
let list = ref([])
const search = ref({
pageNum: 1,
pageSize: 2,
total: 0,
});
const currentDate = new Date();
// 状态判断函数
function getTaskStatus(startDateStr, endDateStr, currentDate) {
// 将字符串转换为日期对象
const startDate = new Date(startDateStr);
const endDate = new Date(endDateStr);
// 清除时间部分，只比较日期
startDate.setHours(0, 0, 0, 0);
endDate.setHours(0, 0, 0, 0);
const current = new Date(currentDate);
current.setHours(0, 0, 0, 0);
if (current < startDate) {
return "未开始";
} else if (current > endDate) {
return "已过期";
} else {
return "正在进行";
}
}
function getList() {
post('/system/module/task/set/teacherPageList', search.value).then(res => {
list.value = res.list
list.value.forEach(task => {
const status = getTaskStatus(task.startTime, task.endTime, currentDate);
task.status = status;
});
console.log(list.value, 78)
})
}
getList()
</script>
<style scoped lang="less">
.taskBox {
height: 235px;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.itemList {
flex: 1;
background-color: white;
border-radius: 10px;
padding: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
font-size: 18px;
font-weight: bolder;
}
.centre {
height: 114px;
width: 100%;
background-color: #f7f9fc;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
border-radius: 5px;
p {
display: flex;
//flex-direction: column;
//justify-content: center;
span {
&:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 5px;
}
}
&:nth-child(2) {
font-size: 14px;
color: #666666;
width: 72px;
display: inline-block;
text-align: justify;
text-align-last: justify;
}
&:nth-child(3) {
font-size: 14px;
color: #333333;
font-weight: 500;
}
}
}
}
.bottom {
display: flex;
justify-content: space-between;
.statusBox {
width: 100px;
height: 24px;
line-height: 24px;
display: flex;
justify-content: center;
color: white;
border-radius: 5px;
}
.statusBox1 {
background-image: linear-gradient(to right, #487ff7, #ffffff);
}
.statusBox2 {
background-image: linear-gradient(to right, #cecece, #ffffff);
}
.FillingBox {
color: #427bf7;
cursor: pointer;
}
}
}
</style>优化一下，把适用范围和说明改成一行显示，超出显示省略号
由于给定内容仅为“效果：”，缺乏关键信息，无法生成有效摘要。
扫一扫
2818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
