OfficeApp/subpkg/taskAdmin/taskAdmin.vue
2023-07-31 16:31:59 +08:00

207 lines
5.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>
<view class="task_card" v-for="item in 10" :key="item">
<view class="top">
<view class="title" :class="item%3?'title_tow':''">完成OA移动端界面设计移动端界面设计</view>
<view class="price">
<!-- <text>收益</text> -->
<image src="../../static/icons/price.png"></image>
<text>11.00</text>
</view>
</view>
<view class="center">
关于设计app常用页面的美化按照原型图美化页面
</view>
<view class="bottom">
<view class="left">负责人张三三</view>
<view class="right">指派时间2023-03-25 23:59</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
nowDate: {
y: '',
m: '',
d: ''
},
loadConfig: {
page: 1,
limit: 25,
loadingText: '努力加载中',
loadmoreText: '轻轻上拉',
nomoreText: '没有更多账单了~~',
status: 'loadmore'
},
}
},
onLoad() {
this.initDate();
},
onShow() {},
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';
console.log('加载任务');
},
// 选择月份
bindDateChangeMonth(e) {
this.nowDate.y = e.detail.value.split('-')[0];
let m = e.detail.value.split('-')[1];
this.nowDate.m = m < 10 ? +m : m;
}
},
onPullDownRefresh() {
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;
}
.task_card {
margin: 0 auto;
margin-bottom: 28rpx;
width: 694rpx;
background: #FFFFFF;
border-radius: 21rpx 21rpx 21rpx 21rpx;
opacity: 1;
box-sizing: border-box;
padding: 25rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
.top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8rpx;
.title {
font-size: 28rpx;
font-weight: 500;
line-height: 35rpx;
&::before {
content: '未完成';
display: inline-block;
color: #F24848;
padding: 2px 8px;
background: #FFE4E4;
margin-right: 20rpx;
border-radius: 7rpx 7rpx 7rpx 7rpx;
}
}
.title_tow {
&::before {
content: '已完成';
display: inline-block;
color: #3274F9;
padding: 2px 8px;
background: #E4EDFF;
margin-right: 20rpx;
border-radius: 7rpx 7rpx 7rpx 7rpx;
}
}
.price {
width: 158rpx;
// width: 200rpx;
height: 49rpx;
background: #FFF1DB;
border-radius: 74rpx 74rpx 74rpx 74rpx;
display: flex;
justify-content: center;
align-items: center;
color: #F9AA32;
image {
width: 28.99rpx;
height: 28.99rpx;
margin-right: 5.5rpx;
}
}
}
.center {
font-size: 25rpx;
font-weight: 400;
color: #333333;
line-height: 35rpx;
margin-bottom: 8rpx;
}
.bottom {
display: flex;
justify-content: space-between;
font-size: 25rpx;
font-weight: 400;
color: #999999;
line-height: 35rpx;
}
}
}
</style>