|
@@ -10,9 +10,9 @@
|
|
|
<view class="settle-container">
|
|
<view class="settle-container">
|
|
|
<view class="settle-text-container">
|
|
<view class="settle-text-container">
|
|
|
<view class="settle-title">待领取奖励数</view>
|
|
<view class="settle-title">待领取奖励数</view>
|
|
|
- <view class="settle-num">3</view>
|
|
|
|
|
|
|
+ <view class="settle-num">{{reward}}</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="settle-btn">领取</view>
|
|
|
|
|
|
|
+ <view class="settle-btn" @click="claimReward">领取</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="task-container">
|
|
<view class="task-container">
|
|
|
<view class="task-header">
|
|
<view class="task-header">
|
|
@@ -23,55 +23,107 @@
|
|
|
</navigator>
|
|
</navigator>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="task-item" v-for="item in 10">
|
|
|
|
|
|
|
+ <view class="task-item" v-for="punchIn in punchIns" :key="punchIn.punchInId">
|
|
|
<view class="item-header">
|
|
<view class="item-header">
|
|
|
- <view class="item-title">锻炼身体</view>
|
|
|
|
|
- <navigator url="/pages/detail/detail">
|
|
|
|
|
|
|
+ <view class="item-title">{{punchIn.taskName}}</view>
|
|
|
|
|
+ <navigator :url="'/pages/detail/detail?id='+punchIn.punchInId">
|
|
|
<uni-icons class="item-icon" type="settings" size="30" color="#C4C4C4"></uni-icons>
|
|
<uni-icons class="item-icon" type="settings" size="30" color="#C4C4C4"></uni-icons>
|
|
|
</navigator>
|
|
</navigator>
|
|
|
<view class="item-tag-container">
|
|
<view class="item-tag-container">
|
|
|
- <view class="item-tag">全勤奖励</view>
|
|
|
|
|
- <view class="item-tag">周末双倍</view>
|
|
|
|
|
|
|
+ <view class="item-tag" v-if="punchIn.fullAttendanceFlag">全勤奖励</view>
|
|
|
|
|
+ <view class="item-tag" v-if="punchIn.weekendDoubleFlag">周末双倍</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="item-btn">完成</view>
|
|
|
|
|
|
|
+ <view class="item-btn" @click="doPunchIn(punchIn.punchInId)">完成</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="item-detail-list">
|
|
<view class="item-detail-list">
|
|
|
- <view class="item-detail">
|
|
|
|
|
- <view class="detail-text">11月20日</view>
|
|
|
|
|
- <view class="detail-box"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="item-detail">
|
|
|
|
|
- <view class="detail-text">11月21日</view>
|
|
|
|
|
- <view class="detail-box"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="item-detail">
|
|
|
|
|
- <view class="detail-text">11月22日</view>
|
|
|
|
|
- <view class="detail-box"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="item-detail">
|
|
|
|
|
- <view class="detail-text">11月22日</view>
|
|
|
|
|
- <view class="detail-box"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="item-detail">
|
|
|
|
|
- <view class="detail-text">11月22日</view>
|
|
|
|
|
- <view class="detail-box"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="item-detail">
|
|
|
|
|
- <view class="detail-text">11月22日</view>
|
|
|
|
|
- <view class="detail-box"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="item-detail">
|
|
|
|
|
- <view class="detail-text">11月22日</view>
|
|
|
|
|
- <view class="detail-box"></view>
|
|
|
|
|
|
|
+ <view class="item-detail" v-for="punchInRecord in punchIn.punchInRecords">
|
|
|
|
|
+ <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.punchInStatus == 'uncreated'"></view>
|
|
|
|
|
+ <view class="detail-box" style="background-color: #A5D63F;" v-if="punchInRecord.punchInStatus == 'punchIn'"></view>
|
|
|
|
|
+ <view class="detail-box" style="background-color: #D43030;" v-if="punchInRecord.punchInStatus == 'unPunchIn'"></view>
|
|
|
|
|
+ <view class="detail-box" v-if="punchInRecord.punchInStatus == 'futureTime' || punchInRecord.punchInStatus == 'todayUnknown'"></view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <uni-popup ref="claimRewardDialog" type="dialog">
|
|
|
|
|
+ <uni-popup-dialog ref="inputClose" mode="input" title="领取奖励" value="对话框预置提示内容!"
|
|
|
|
|
+ placeholder="请输入领取的奖励数" @confirm="claimRewardConfirm"></uni-popup-dialog>
|
|
|
|
|
+ </uni-popup>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-
|
|
|
|
|
|
|
+ import { onMounted, ref } from 'vue';
|
|
|
|
|
+ import { rewardApi, punchInApi } from '@/service/apis.js';
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 可领取奖励
|
|
|
|
|
+ */
|
|
|
|
|
+ const reward = ref(0);
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 打卡任务
|
|
|
|
|
+ */
|
|
|
|
|
+ const punchIns = ref([]);
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 领取奖励对话框
|
|
|
|
|
+ */
|
|
|
|
|
+ const claimRewardDialog = ref(null);
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 领取奖励
|
|
|
|
|
+ */
|
|
|
|
|
+ const claimReward = () => {
|
|
|
|
|
+ claimRewardDialog.value.open();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 确认领取奖励
|
|
|
|
|
+ */
|
|
|
|
|
+ const claimRewardConfirm = async (val) => {
|
|
|
|
|
+ await rewardApi.claimReward({"claimRewardNum": val});
|
|
|
|
|
+ getReward();
|
|
|
|
|
+ claimRewardDialog.value.close();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 获取奖励
|
|
|
|
|
+ */
|
|
|
|
|
+ const getReward = async () => {
|
|
|
|
|
+ let res = await rewardApi.queryReward();
|
|
|
|
|
+ reward.value = res.unclaimedRewardNum;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 获取打卡
|
|
|
|
|
+ */
|
|
|
|
|
+ const getPunchIn = async () => {
|
|
|
|
|
+ let res = await punchInApi.queryPunchIn();
|
|
|
|
|
+ punchIns.value = res;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 打卡
|
|
|
|
|
+ */
|
|
|
|
|
+ const doPunchIn = async (id) => {
|
|
|
|
|
+ await punchInApi.doPunchIn({id});
|
|
|
|
|
+ getPunchIn();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ onMounted(() => {
|
|
|
|
|
+ // 获取奖励
|
|
|
|
|
+ getReward();
|
|
|
|
|
+ // 获取打卡
|
|
|
|
|
+ getPunchIn();
|
|
|
|
|
+ })
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -79,59 +131,63 @@
|
|
|
width: 100vw;
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
padding: 16rpx;
|
|
padding: 16rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.header-container {
|
|
.header-container {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
height: 83rpx;
|
|
height: 83rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.user-info {
|
|
.user-info {
|
|
|
width: 83rpx;
|
|
width: 83rpx;
|
|
|
height: 83rpx;
|
|
height: 83rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: center; /* 水平居中 */
|
|
|
|
|
- align-items: center; /* 垂直居中 */
|
|
|
|
|
-
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ /* 水平居中 */
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ /* 垂直居中 */
|
|
|
|
|
+
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
right: 0rpx;
|
|
right: 0rpx;
|
|
|
top: 0rpx;
|
|
top: 0rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
background: rgba(210, 239, 243, 1);
|
|
background: rgba(210, 239, 243, 1);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.settle-container {
|
|
.settle-container {
|
|
|
margin-top: 16rpx;
|
|
margin-top: 16rpx;
|
|
|
height: 228rpx;
|
|
height: 228rpx;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
background: rgba(64, 108, 231, 1);
|
|
background: rgba(64, 108, 231, 1);
|
|
|
- box-shadow: 1rpx 2rpx 4rpx rgba(0, 0, 0, 0.25);
|
|
|
|
|
-
|
|
|
|
|
|
|
+ box-shadow: 1rpx 2rpx 4rpx rgba(0, 0, 0, 0.25);
|
|
|
|
|
+
|
|
|
.settle-text-container {
|
|
.settle-text-container {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 108rpx;
|
|
left: 108rpx;
|
|
|
top: 20rpx;
|
|
top: 20rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.settle-title {
|
|
.settle-title {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
line-height: 34.75rpx;
|
|
line-height: 34.75rpx;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.settle-num {
|
|
.settle-num {
|
|
|
font-size: 100rpx;
|
|
font-size: 100rpx;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
line-height: 144.8rpx;
|
|
line-height: 144.8rpx;
|
|
|
color: rgba(255, 255, 255, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: center; /* 水平居中 */
|
|
|
|
|
- align-items: center; /* 垂直居中 */
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ /* 水平居中 */
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ /* 垂直居中 */
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.settle-btn {
|
|
.settle-btn {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 503rpx;
|
|
left: 503rpx;
|
|
@@ -146,21 +202,25 @@
|
|
|
line-height: 69.5px;
|
|
line-height: 69.5px;
|
|
|
color: rgba(64, 108, 231, 1);
|
|
color: rgba(64, 108, 231, 1);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: center; /* 水平居中 */
|
|
|
|
|
- align-items: center; /* 垂直居中 */
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ /* 水平居中 */
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ /* 垂直居中 */
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.task-container {
|
|
.task-container {
|
|
|
margin-top: 16rpx;
|
|
margin-top: 16rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.task-header {
|
|
.task-header {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
height: 80rpx;
|
|
height: 80rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: center; /* 水平居中 */
|
|
|
|
|
- align-items: center; /* 垂直居中 */
|
|
|
|
|
-
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ /* 水平居中 */
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ /* 垂直居中 */
|
|
|
|
|
+
|
|
|
.task-title {
|
|
.task-title {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 0rpx;
|
|
left: 0rpx;
|
|
@@ -169,7 +229,7 @@
|
|
|
line-height: 43.44rpx;
|
|
line-height: 43.44rpx;
|
|
|
color: rgba(0, 0, 0, 1);
|
|
color: rgba(0, 0, 0, 1);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.task-add-btn {
|
|
.task-add-btn {
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -179,26 +239,26 @@
|
|
|
width: 60rpx;
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
height: 60rpx;
|
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
|
- border: 3px solid rgba(64, 108, 231, 1);
|
|
|
|
|
|
|
+ border: 3px solid rgba(64, 108, 231, 1);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.task-item {
|
|
.task-item {
|
|
|
margin-top: 16rpx;
|
|
margin-top: 16rpx;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 201rpx;
|
|
height: 201rpx;
|
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
|
- box-shadow: 1px 2px 4px #000000;
|
|
|
|
|
|
|
+ box-shadow: 1px 2px 4px #000000;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
padding: 16rpx;
|
|
padding: 16rpx;
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
.item-header {
|
|
.item-header {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-title {
|
|
.item-title {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
// margin-left: 20rpx;
|
|
// margin-left: 20rpx;
|
|
@@ -208,19 +268,19 @@
|
|
|
line-height: 52.13rpx;
|
|
line-height: 52.13rpx;
|
|
|
color: rgba(0, 0, 0, 1);
|
|
color: rgba(0, 0, 0, 1);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-icon {
|
|
.item-icon {
|
|
|
margin-left: 10rpx;
|
|
margin-left: 10rpx;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-tag-container {
|
|
.item-tag-container {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
margin-left: 10rpx;
|
|
margin-left: 10rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-tag:not(:first-child) {
|
|
.item-tag:not(:first-child) {
|
|
|
margin-left: 10rpx;
|
|
margin-left: 10rpx;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-tag {
|
|
.item-tag {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
background-color: #F2F7FF;
|
|
background-color: #F2F7FF;
|
|
@@ -235,7 +295,7 @@
|
|
|
vertical-align: top;
|
|
vertical-align: top;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-btn {
|
|
.item-btn {
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -246,25 +306,25 @@
|
|
|
border: 1rpx solid #2A82E4;
|
|
border: 1rpx solid #2A82E4;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
font-size: 20rpx;
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
line-height: 28.96px;
|
|
line-height: 28.96px;
|
|
|
color: rgba(64, 108, 231, 1);
|
|
color: rgba(64, 108, 231, 1);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-detail-list {
|
|
.item-detail-list {
|
|
|
margin-top: 16rpx;
|
|
margin-top: 16rpx;
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns: repeat(7, 1fr);
|
|
grid-template-columns: repeat(7, 1fr);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.item-detail {
|
|
.item-detail {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.detail-text {
|
|
.detail-text {
|
|
|
font-size: 20rpx;
|
|
font-size: 20rpx;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
@@ -272,7 +332,7 @@
|
|
|
line-height: 28.96rpx;
|
|
line-height: 28.96rpx;
|
|
|
color: rgba(0, 0, 0, 1);
|
|
color: rgba(0, 0, 0, 1);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.detail-box {
|
|
.detail-box {
|
|
|
// display: block;
|
|
// display: block;
|
|
|
width: 42rpx;
|
|
width: 42rpx;
|
|
@@ -285,4 +345,4 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>
|