207 lines
5.1 KiB
Vue
207 lines
5.1 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>
|
|||
|
<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>
|