168 lines
3.0 KiB
Vue
168 lines
3.0 KiB
Vue
<template>
|
|
<view class="notify">
|
|
<u-sticky bgColor="#fff">
|
|
<u-tabs :list="tabsList" lineWidth="42" :inactiveStyle="{color:'#909399'}" :activeStyle="{color:'#303133'}"
|
|
@click="clickTabs"></u-tabs>
|
|
</u-sticky>
|
|
|
|
<view class="content">
|
|
<view class="card" v-for="(item,index) in todoList" :key="index" @click="toTask(item)">
|
|
<view class="left">
|
|
<text class="name">项目名称</text>
|
|
<text class="create-time">创建时间</text>
|
|
<text class="deadline">截止时间</text>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title-state">
|
|
<text :class="item.status != '0'?'state':'error'">{{item.status | fileState}}</text>
|
|
<text>{{item.taskName}}</text>
|
|
</view>
|
|
<text class="create-time">{{ moment(item.startTime).format("yyyy-MM-DD") }}</text>
|
|
<text class="deadline">{{moment(item.endTime).format("yyyy-MM-DD") }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<zero-loading v-if="loading"></zero-loading>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {listTodo,listOwnTodo} from "@/api/toApi.js";
|
|
import moment from "moment";
|
|
export default {
|
|
data() {
|
|
return {
|
|
moment,
|
|
loading:false,
|
|
todoList : [],
|
|
tabsList: [{
|
|
name: "全部"
|
|
},
|
|
// {
|
|
// name: "完成"
|
|
// },
|
|
// {
|
|
// name: "未完成"
|
|
// }
|
|
],
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getTodo()
|
|
},
|
|
methods: {
|
|
toTask(v){
|
|
try{
|
|
uni.switchTab({
|
|
url:v.url
|
|
})
|
|
}catch(e){
|
|
console.log(e)
|
|
}finally{
|
|
uni.navigateTo({
|
|
url:"/pages/step/index"
|
|
})
|
|
}
|
|
|
|
},
|
|
async getTodo() {
|
|
this.loading = true;
|
|
let res = await listOwnTodo();
|
|
this.loading = false;
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
this.todoList = res.rows;
|
|
}
|
|
|
|
},
|
|
|
|
clickTabs(item) {
|
|
|
|
}
|
|
},
|
|
filters: {
|
|
fileState(value) {
|
|
if (value != '0')
|
|
return "已完成"
|
|
return "未完成"
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.state,
|
|
.error {
|
|
margin: 6rpx 0 0 12rpx;
|
|
display: block;
|
|
width: 90rpx;
|
|
height: 40rpx;
|
|
font-size: 20rpx;
|
|
background-color: #85CE61;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
color: white;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.error {
|
|
background-color: #F78989;
|
|
}
|
|
|
|
.notify {
|
|
min-height: 100vh;
|
|
background-color: #F6F7F9;
|
|
|
|
.content {
|
|
padding: 28rpx;
|
|
|
|
.card {
|
|
height: 200rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 25rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx;
|
|
|
|
.left,
|
|
.right {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.create-time,
|
|
.deadline {
|
|
color: #808080;
|
|
}
|
|
|
|
.left {
|
|
.name {
|
|
color: #4A90E2;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
align-items: flex-end;
|
|
|
|
.create-time,
|
|
.deadline {}
|
|
|
|
.title-state {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text:nth-child(2) {
|
|
margin-left: 20rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
color: #525252;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |