PunchSettle-MiniProgram/src/pages/taskList.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="goTaskEditPage()">
        <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.weekendDoubleFlag">周末双倍</view>
        </view>
        <view class="item-desc">
          描述：{{ task.description }}
        </view>
        <view class="item-detail-list">
          <view class="item-detail" v-for="punchInRecord in task.piTaskHistorySimpleVOS"
            :key="punchInRecord.punchInDate">
            <view class="detail-text">
              <uni-dateformat :date="punchInRecord.punchInDate" format="M/d"></uni-dateformat>
            </view>
            <view class="detail-box" style="background-color: #E5E5E5;"
              v-if="punchInRecord.punchInResult == 'NOT_NEED'"></view>
            <view class="detail-box" style="background-color: #A5D63F;" v-if="punchInRecord.punchInResult == 'DONE'">
            </view>
            <view class="detail-box" style="background-color: #D43030;" v-if="punchInRecord.punchInResult == 'UNDONE'">
            </view>
            <view class="detail-box" v-if="punchInRecord.punchInResult == 'FUTURE'">
            </view>
          </view>
        </view>
      </view>
      <view class="btn-group">
        <view class="btn-item" @click="deleteDialogOpen(task.id)">删除</view>
        <view class="btn-item" @click="archiveDialogOpen(task.id)">归档</view>
        <view class="btn-item" @click="revokeDialogOpen(task.id)">撤销</view>
        <view class="btn-item" @click="goTaskEditPage(task.id)">编辑</view>
      </view>
    </view>

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

    <!-- 删除确认框 -->
    <uni-popup ref="deleteDialog" type="dialog">
      <uni-popup-dialog mode="base" :before-close="true" title="删除提示" content="确认删除当前任务？" @confirm="deleteDialogConfirm"
        @close="deleteDialogClose"></uni-popup-dialog>
    </uni-popup>

    <!-- 归档确认框 -->
    <uni-popup ref="archiveDialog" type="dialog">
      <uni-popup-dialog mode="base" :before-close="true" title="归档提示" content="确认归档当前任务？"
        @confirm="archiveDialogConfirm" @close="archiveDialogClose"></uni-popup-dialog>
    </uni-popup>

    <!-- 撤销确认框 -->
    <uni-popup ref="revokeDialog" type="dialog">
      <uni-popup-dialog mode="base" :before-close="true" title="撤销提示" content="确认撤销打卡？" @confirm="revokeDialogConfirm"
        @close="revokeDialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</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';

// 组件
/**
 * 删除弹出框
 */
const deleteDialog = ref(null);

/**
 * 归档弹出框
 */
const archiveDialog = ref(null);

/**
 * 撤销弹出框
 */
const revokeDialog = ref(null);

// 属性
/**
 * 当前操作的的任务ID
 */
const currentTaskId = ref(null);

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

// 方法

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

/**
 * 跳转打卡任务编辑页
 */
const goTaskEditPage = (id) => {
  uni.navigateTo({
    url: id ? router.TASK_EDIT_PAGE + "?id=" + id : router.TASK_EDIT_PAGE
  });
};

/**
 * 加载数据
 */
const loadData = async () => {
  // 获取打卡
  let res = await punchInApi.queryTaskList();
  tasks.value = res;
};

/**
 * 打开删除对话框
 */
const deleteDialogOpen = (id) => {
  currentTaskId.value = id;
  deleteDialog.value.open();
}

/**
 * 打开归档对话框
 */
const archiveDialogOpen = (id) => {
  currentTaskId.value = id;
  archiveDialog.value.open();
}

/**
 * 打开撤销对话框
 */
const revokeDialogOpen = (id) => {
  currentTaskId.value = id;
  revokeDialog.value.open();
}

/**
 * 删除确认
 */
const deleteDialogConfirm = async () => {
  punchInApi.deleteTask({ id: currentTaskId.value })
    .then(ret => {
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      });
    })
    .catch(err => {
      uni.showToast({
        title: '删除失败',
        icon: 'error'
      });
    }).finally(() => {
      currentTaskId.value = null;
      deleteDialog.value.close();
      loadData();
    })
    ;
}

/**
 * 删除取消
 */
const deleteDialogClose = () => {
  currentTaskId.value = null;
  deleteDialog.value.close();
}

/**
 * 归档确认
 */
const archiveDialogConfirm = async () => {
  punchInApi.archiveTask({ id: currentTaskId.value })
    .then(ret => {
      uni.showToast({
        title: '归档成功',
        icon: 'success'
      });
    })
    .catch(err => {
      uni.showToast({
        title: '归档失败',
        icon: 'error'
      });
    })
    .finally(() => {
      currentTaskId.value = null;
      archiveDialog.value.close();
      loadData();
    });
}

/**
 * 归档取消
 */
const archiveDialogClose = () => {
  currentTaskId.value = null;
  archiveDialog.value.close();
}

/**
 * 撤销确认
 */
const revokeDialogConfirm = async () => {
  punchInApi.revokePunchIn({ id: currentTaskId.value })
    .then(ret => {
      uni.showToast({
        title: '撤销成功',
        icon: 'success'
      });
    })
    .catch(err => {
      currentTaskId.value = null;
      uni.showToast({
        title: '撤销失败',
        icon: 'error'
      });
    })
    .finally(() => {
      currentTaskId.value = null;
      revokeDialog.value.close();
      loadData();
    });
}

/**
 * 撤销取消
 */
const revokeDialogClose = () => {
  currentTaskId.value = null;
  revokeDialog.value.close();
}

// 生命周期
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;

    .main-box {
      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;
      }

      .item-detail-list {
        margin-top: 16rpx;
        display: grid;
        grid-template-columns: repeat(7, 1fr);

        .item-detail {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .detail-text {
            font-size: 20rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 28.96rpx;
            color: rgba(0, 0, 0, 1);
          }

          .detail-box {
            // display: block;
            width: 42rpx;
            height: 42rpx;
            margin-top: 5rpx;
            border: 5rpx solid #000000;
          }
        }
      }
    }

    .btn-group {
      margin-top: 16rpx;
      display: flex;
      border-top: 1px solid #C7C7C7;

      .btn-item {
        flex-grow: 1;

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

        padding: 0rpx 16rpx;
        font-size: 28rpx;
        font-weight: 400;
        letter-spacing: 0prx;
        line-height: 40.54rpx;
        color: #6A6A6A;
      }

      .btn-item:not(:last-child) {
        border-right: 1px solid #C7C7C7;
      }
    }
  }
}
</style>