141 lines
3.5 KiB
Vue
141 lines
3.5 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="calendar">
|
|
<picker mode="date" fields="month" @change="bindDateChangeMonth">
|
|
<view class="date">
|
|
<view class="month">{{nowDate.m}}月</view>
|
|
<view>{{nowDate.y}}</view>
|
|
</view>
|
|
</picker>
|
|
<uni-calendar :insert="true" @change="changeDate" :date="nowYMD" :showMonth="false" />
|
|
</view>
|
|
<view class="task_list">
|
|
<uni-section class="title" titleFontSize="32rpx" :title="'任务清单 '+ nowYMD" type="line"></uni-section>
|
|
<u-skeleton :loading="skeleton" :style="{margin: skeleton?'0 28rpx':'0'}" :animate="true" title rows="2" rows-width="100%" rowsHeight="56">
|
|
<block v-for="item in list" :key="item.id">
|
|
<taskItem :datas="item"></taskItem>
|
|
</block>
|
|
</u-skeleton>
|
|
<u-empty v-if="!skeleton&&list.length==0" icon="/static/img/empty/data.png" text="没有任务"></u-empty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import taskItem from "@/components/task/taskItem.vue"
|
|
import { taskLists } from "@/api/task.js"
|
|
export default {
|
|
components:{
|
|
taskItem
|
|
},
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
skeleton: true,
|
|
nowDate: {
|
|
y: '',
|
|
m: '',
|
|
d: ''
|
|
},
|
|
loadConfig: {
|
|
page: 1,
|
|
limit: 25,
|
|
loadingText: '努力加载中',
|
|
loadmoreText: '轻轻上拉',
|
|
nomoreText: '没有更多账单了~~',
|
|
status: 'loadmore'
|
|
},
|
|
list: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initDate();
|
|
},
|
|
onReady() {
|
|
this.loadTaskList();
|
|
},
|
|
computed: {
|
|
nowYMD() {
|
|
let m = this.nowDate.m < 10 ? '0' + this.nowDate.m : this.nowDate.m;
|
|
let d = this.nowDate.d < 10 ? '0' + this.nowDate.d : this.nowDate.d;
|
|
return this.nowDate.y + '-' + m + '-' + d;
|
|
},
|
|
},
|
|
methods: {
|
|
initDate() {
|
|
let date = new Date();
|
|
this.nowDate.y = date.getFullYear();
|
|
this.nowDate.m = date.getMonth() + 1;
|
|
this.nowDate.d = date.getDate();
|
|
},
|
|
// 选择日期
|
|
changeDate(e) {
|
|
this.nowDate.y = e.year;
|
|
this.nowDate.m = +e.month;
|
|
this.nowDate.d = e.date;
|
|
this.loadConfig.page = 1;
|
|
this.loadConfig.status = 'loadmore';
|
|
this.loadTaskList();
|
|
},
|
|
async loadTaskList(){
|
|
this.skeleton = true;
|
|
let res = await taskLists({
|
|
page: 1,
|
|
date_time: this.nowYMD
|
|
})
|
|
this.list = res.data;
|
|
this.$u.sleep(200).then(()=>this.skeleton = false);
|
|
},
|
|
// 选择月份
|
|
bindDateChangeMonth(e) {
|
|
this.nowDate.y = e.detail.value.split('-')[0];
|
|
let m = e.detail.value.split('-')[1];
|
|
this.nowDate.m = m < 10 ? +m : m;
|
|
},
|
|
navTo(url) {
|
|
url ?
|
|
uni.navigateTo({
|
|
url: url
|
|
}) : Toast('暂未开放')
|
|
},
|
|
},
|
|
onPullDownRefresh() {
|
|
this.loadConfig.page = 1;
|
|
this.loadConfig.status = 'loadmore';
|
|
this.loadTaskList().then(()=>{
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.calendar {
|
|
background-color: #fff;
|
|
padding-bottom: 28rpx;
|
|
|
|
.date {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
background-color: #fff;
|
|
padding: 28rpx;
|
|
color: #333333;
|
|
font-size: 25rpx;
|
|
|
|
.month {
|
|
margin-right: 15rpx;
|
|
height: 49rpx;
|
|
font-size: 35rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task_list {
|
|
.title {
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |