PunchSettle-MiniProgram/src/pages/taskTodo.vue

<template>

  <!-- 打卡任务 -->
  <view class="task-container">
    <view class="task-header">
      <view class="task-title" v-if="tasks.length && tasks.length > 0">任务（{{ tasks.length }}个）
      </view>
      <view class="task-title" v-else>任务</view>
      <view class="task-add-btn" @click="goPunchInEditPage">
        <uni-icons type="plusempty" size="30" color="#406CE7"></uni-icons>
      </view>
    </view>
    <view class="task-item" v-for="task in tasks" :key="task.id">
      <view class="main-box" @click="goPunchInDetailPage(task.id)">
        <view class="item-header">
          <span class="item-title">{{ task.taskName }}</span>
          <span class="item-reward">x{{ task.points }}</span>
          <view class="item-tag" v-if="task.fullAttendanceFlag">全勤奖励</view>
          <view class="item-tag" v-if="task.holidayFlag">节假日双倍</view>
        </view>
        <view class="item-desc"
          v-if="task.punchInMethod == PUNCH_IN_METHOD.COUNT || task.punchInMethod == PUNCH_IN_METHOD.TIMING">
          <span v-if="task.punchInMethod == PUNCH_IN_METHOD.COUNT">规则：打卡次数</span>
          <span v-if="task.punchInMethod == PUNCH_IN_METHOD.TIMING">规则：计时时间</span>
          <dict-item :dictCode="dict.PUNCH_IN_RULE" :itemCode="task.rule"></dict-item>
          <span v-if="task.compareRule == COMPARE_RULE.GTE">大于等于</span>
          <span v-if="task.compareRule == COMPARE_RULE.LTE">小于等于等于</span>
          <span v-if="task.punchInMethod == PUNCH_IN_METHOD.COUNT">{{ holidayFlag ? task.holidayCountTrack :
            task.countTrack }}次</span>
          <span v-if="task.punchInMethod == PUNCH_IN_METHOD.TIMING">{{ holidayFlag ? task.holidayTimeTrack :
            task.timeTrack.slice(0, 5) }}</span>
        </view>
        <view class="item-desc">
          描述：{{ task.description }}
        </view>
      </view>
      <view
        :class="task.punchInResult == PUNCH_IN_RESULT.DONE ? 'func-box func-box-finish' : 'func-box func-box-unfinish'"
        v-if="task.punchInMethod == PUNCH_IN_METHOD.SINGLE" @click="doPunchIn(task.id)">
        <span v-if="task.punchInResult == PUNCH_IN_RESULT.UNDONE">打卡</span>
        <span v-else>已完成</span>
      </view>
      <view
        :class="task.punchInResult == PUNCH_IN_RESULT.DONE ? 'func-box func-box-finish' : 'func-box func-box-unfinish'"
        v-if="task.punchInMethod == PUNCH_IN_METHOD.COUNT" @click="doPunchIn(task.id)">
        <span>{{ task.currentCountTrack }}</span>
        <span>计数</span>
      </view>
      <view
        :class="task.punchInResult == PUNCH_IN_RESULT.DONE ? 'func-box func-box-finish' : 'func-box func-box-unfinish'"
        v-if="task.punchInMethod == PUNCH_IN_METHOD.TIMING" @click="doPunchInForTimeTrack(task.id, task.timeTrack)">
        <span>
          {{ task.currentTimeTrack.slice(0, 5) }}
        </span>
        <span>计时</span>
      </view>
    </view>

    <uni-load-more status="no-more" v-if="!tasks || tasks.length == 0" />
  </view>

  <!-- 计时弹出框 -->
  <uni-popup ref="timeTrackInputDialog" type="dialog" :is-mask-click="false">
    <uni-popup-dialog mode="input" :before-close="true" title="计时记录" confirmText="保存" @confirm="timeTrackFormConfirm"
      @close="timeTrackFormClose">
      <view class="pick-box" @click="timeTrackClick">
        <picker mode="time" :value="timeTrackFormData.timeTrack" @change="timeTrackChange">
          <view class="pick-box-time">{{ timeTrackFormData.timeTrack }}</view>
        </picker>
      </view>
      <view style="display: none;">
        <uni-forms ref="timeTrackForm" :modelValue="timeTrackFormData" :rules="timeTrackFormRules">
          <uni-forms-item name="timeTrack">
            <uni-easyinput v-model="timeTrackFormData.timeTrack" />
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
import { punchInApi } from '@/apis/apis.js';
import router from '@/common/router.js';
import dict from '@/common/dict.js';
import { PUNCH_IN_METHOD, PUNCH_IN_RESULT, COMPARE_RULE } from '@/common/enums.js';

// 组件

/**
 * 计时弹出框
 */
const timeTrackInputDialog = ref(null);

/**
 * 计时表单
 */
const timeTrackForm = ref(null);


// 属性
/**
 * 打卡任务
 */
const tasks = ref([]);

/**
 * 计时表单数据
 */
const timeTrackFormData = ref({
  timeTrack: '00:00'
});

/**
 * 计时表单规则
 */
const timeTrackFormRules = ref({
  timeTrack: {
    rules: [{
      required: true,
      errorMessage: "请输入时间"
    }]
  }
});


// 方法
/**
 * 计时时间选择监听
 */
const timeTrackChange = (e) => {
  timeTrackFormData.value.timeTrack = e.detail.value;
}

/**
 * 打卡（计时）
 */
const doPunchInForTimeTrack = (id, timeTrack) => {
  // 重置上一轮的表单数据
  timeTrackFormData.value = {
    id,
    timeTrack: timeTrack ? timeTrack.slice(0, 5) : '00:00'
  };
  timeTrackInputDialog.value.open();
}

/**
 * 计时表单提交
 */
const timeTrackFormConfirm = async () => {
  timeTrackForm.value.validate(['id']).then(data => {
    return punchInApi.doPunchIn(data);
  }).then(e => {
    timeTrackInputDialog.value.close();
    loadData();
  });
}


/**
 * 打卡
 */
const doPunchIn = async (id) => {
  await punchInApi.doPunchIn({
    id
  });
  loadData();
}

/**
 * 跳转打卡编辑页面
 */
const goPunchInEditPage = () => {
  uni.navigateTo({
    url: router.PUNCHIN_EDIT_URL
  });
};

/**
 * 跳转打卡详情页面
 */
const goPunchInDetailPage = (id) => {
  uni.navigateTo({
    url: router.PUNCHIN_DETAIL_URL + "?id=" + id
  });
};

/**
 * 获取待办任务
 */
const loadData = async () => {
  let res = await punchInApi.queryToDoList();
  tasks.value = res;
};

onShow(() => {
  loadData();
});

onPullDownRefresh(() => {
  loadData();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
.task-container {
  padding: 0rpx 24rpx;

  .task-header {
    position: relative;
    height: 80rpx;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */

    .task-title {
      position: absolute;
      left: 0rpx;
      font-size: 30rpx;
      font-weight: 400;
      line-height: 43.44rpx;
      color: rgba(0, 0, 0, 1);
    }

    .task-add-btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 0rpx;
      width: 60rpx;
      height: 60rpx;
      border-radius: 10rpx;
      border: 3px solid rgba(64, 108, 231, 1);
    }
  }

  .task-item {
    margin-top: 16rpx;
    width: 100%;
    // height: 239rpx;
    border-radius: 24rpx;
    background: #FFFFFF;
    border: 0.5px solid #E4E4E4;
    box-shadow: 0px 1px 6px #D8D8D8;

    display: flex;

    .main-box {
      flex-grow: 1;
      padding: 16rpx 16rpx 16rpx 24rpx;

      .item-header {
        // position: relative;
        display: flex;
        align-items: center;

        .item-title {
          font-size: 30rpx;
          font-weight: 400;
          letter-spacing: 0rpx;
          line-height: 43.44rpx;
          color: #000000;
        }

        .item-reward {
          margin-left: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          letter-spacing: 0rpx;
          line-height: 34.75rpx;
          color: #000000;
        }

        .item-tag:first-child {
          margin-left: 24rpx;
        }

        .item-tag {
          margin-left: 16rpx;
          width: 94rpx;
          height: 38rpx;
          opacity: 1;
          border-radius: 24rpx;
          background: #FFFFFF;
          border: 1px solid #406CE7;

          display: inline-flex;
          justify-content: center;
          align-items: center;

          font-size: 18rpx;
          font-weight: 400;
          letter-spacing: 0rpx;
          // line-height: 26.06rpx;
          color: #406CE7;

        }

        .item-btn {
          display: inline-flex;
          position: absolute;
          right: 0rpx;
          width: 123rpx;
          height: 42rpx;
          border-radius: 30rpx;
          border: 1rpx solid #2A82E4;
          justify-content: center;
          align-items: center;

          font-size: 20rpx;
          font-weight: 400;
          line-height: 28.96px;
          color: rgba(64, 108, 231, 1);
        }
      }

      .item-desc {
        margin-top: 16rpx;
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 34.75rpx;
        color: #000000;
      }
    }

    .func-box {
      flex-shrink: 0;
      width: 160rpx;
      border-radius: 0rpx 24rpx 24rpx 0rpx;


      font-size: 36rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 52.13rpx;
      color: #FFFFFF;

      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .func-box-finish {
      background: #F2607A;
    }

    .func-box-unfinish {
      background: #406CE7;
    }
  }
}

.pick-box {
  width: 100%;
  height: 100rpx;
  border-radius: 8px;
  background: #ffffff;
  // 阴影
  border: 0.5px solid #e4e4e4;

  picker {
    width: 100%;
    height: 100%;

    .pick-box-time {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000000;
      border-radius: 24rpx;
      text-align: center;
    }
  }
}
</style>