|
|
@@ -1,8 +1,470 @@
|
|
|
<template>
|
|
|
- <div class="task">task</div>
|
|
|
+ <!-- 打卡任务 -->
|
|
|
+ <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.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 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">编辑</view>
|
|
|
+ </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 goPunchInDetailPage = (id) => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: router.PUNCHIN_DETAIL_URL + "?id=" + id
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 加载数据
|
|
|
+ */
|
|
|
+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></style>
|
|
|
+<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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|