OfficeApp/subpkg/taskAdmin/taskAdmin.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>