推荐任务 + 每日任务

src/locales/en.js

@@ -229,6 +229,8 @@ export default {
   // 任务中心
   taskCenter: {
     taskCenter: 'Task Center',
+    suggestTask: 'Recommended tasks',
+    dailyTask: 'Daily tasks',
   },
   publicRecruitment: {
     // 众聘

src/locales/zh-CN.js

@@ -229,6 +229,8 @@ export default {
   // 任务中心
   taskCenter: {
     taskCenter: '任务中心',
+    suggestTask: '推荐任务',
+    dailyTask: '每日任务',
   },
   publicRecruitment: {
     // 众聘

src/views/personal/taskCenter/components/daily.vue

@@ -1,10 +1,36 @@
 <!-- 每日任务 -->
 <template>
-  <div>每日任务</div>
+  <div>
+    <div class="resume-title my-5">{{ $t('taskCenter.dailyTask') }}</div>
+    <div v-for="(item, index) in list" :key="'suggest' + index">
+      <div class="d-flex ml-2 my-5">
+        <div class="ellipsis" style="width: 50%;">{{ item.title }}</div>
+        <div class="ellipsis d-flex" style="width: calc(50% - 88px);">
+          <svg t="1719285689429" class="icon mx-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38595" width="24" height="24"><path d="M98.0992 511.7952c0 228.5568 185.1392 413.696 413.696 413.696s413.696-185.1392 413.696-413.696-185.1392-413.696-413.696-413.696c-109.7728 0-214.8352 43.6224-292.4544 121.2416-77.6192 77.4144-121.2416 182.6816-121.2416 292.4544z m0 0" fill="#FBE945" p-id="38596"></path><path d="M804.2496 219.3408L219.3408 804.4544c162.2016 158.1056 421.2736 156.4672 581.2224-3.6864 160.1536-160.1536 161.792-419.2256 3.6864-581.4272z m0 0" fill="#F2D636" p-id="38597"></path><path d="M210.944 511.7952c0 121.6512 73.3184 231.2192 185.5488 277.9136 112.4352 46.4896 241.664 20.8896 327.68-65.1264s111.8208-215.4496 65.1264-327.68c-46.4896-112.4352-156.2624-185.5488-277.9136-185.5488C345.7024 210.944 210.944 345.7024 210.944 511.7952z m0 0" fill="#FBB11B" p-id="38598"></path><path d="M717.824 293.2736c-118.1696-112.0256-303.9232-109.568-419.0208 5.5296-115.0976 115.0976-117.5552 301.056-5.5296 419.0208l424.5504-424.5504z m0 0" fill="#FDC72F" p-id="38599"></path><path d="M648.3968 566.4768c23.7568 125.1328-22.9376 157.696-138.4448 97.8944-118.1696 64.3072-163.0208 32.5632-136.6016-93.3888-96.0512-85.4016-77.6192-137.4208 54.6816-156.0576 58.1632-116.3264 114.688-117.1456 170.1888-2.6624 131.2768 14.1312 148.0704 65.3312 50.176 154.2144z m0 0" fill="#F4EA2A" p-id="38600"></path><path d="M598.2208 412.2624c131.2768 14.1312 148.0704 65.1264 50.176 154.2144 23.7568 125.1328-22.9376 157.696-138.4448 97.8944-90.112 49.152-137.6256 42.1888-143.36-19.8656l231.6288-232.2432z m50.176 154.2144" fill="#F2D636" p-id="38601"></path></svg>
+          <span class="" style="color: #f98b1f;">{{ item.奖励积分数 }}</span>
+        </div>
+        <v-btn
+          class="half-button"
+          :disabled="item.状态 !== 1"
+          :color="item.状态 === 0 ? '' : 'warning'" size="small"
+        >
+          {{ item.状态 === 0 ? '未完成' : item.状态 === 1 ? '立即领取' : '已领取' }}
+        </v-btn>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 defineOptions({name: 'personal-taskCenter-daily'})
+const list = [
+  { title: '收藏5个职位', 奖励积分数: '5', 状态: 0 },
+  { title: '收藏5个公司', 奖励积分数: '5', 状态: 1 },
+  { title: '投递简历10次', 奖励积分数: '10', 状态: 0 },
+  { title: '主动沟通10次', 奖励积分数: '10', 状态: 0 },
+  { title: '分享职位5次', 奖励积分数: '5', 状态: 2 },
+  { title: '推荐入职成功', 奖励积分数: '50', 状态: 0 },
+]
 </script>
 <style lang="scss" scoped>
 </style>

src/views/personal/taskCenter/components/signIn.vue

@@ -21,13 +21,13 @@
           </div>
         </div>
         <div class="mt-1 font-13" style="text-align: center;" :style="{'color': index < 连续签到天数 ? '#f98b1f' : '#333'}">
-          {{ `${index +1 === 连续签到天数 ? '今天' : index +1 + '天'}` }}
+          {{ `${index === 今天序号 ? '今天' : index +1 + '天'}` }}
         </div>
       </div>
     </div>
-    <div class="mt-8 mr-8" style="text-align: right;">
-      <span class="font-13 color-777 mr-3">您已经连续签到3天, 明天在领取2积分</span>
-      <v-btn class="half-button" color="warning" size="small">签到</v-btn>
+    <div class="mt-8" style="text-align: right;">
+      <span class="font-13 color-777 mr-3">您已经连续签到3天, 明天再领取2积分</span>
+      <v-btn class="half-button" color="warning" size="small" :disabled="今天有无签到" @click="handleSignIn">{{ 今天有无签到 ? '已签到' : '签到' }}</v-btn>
     </div>
   </div>
 </template>
@@ -36,7 +36,24 @@
 import integralShow from '@/views/personal/components/integralShow.vue'
 import { ref } from 'vue'
 defineOptions({name: 'personal-taskCenter-signIn'})
-const 连续签到天数 = ref(3)
+
+// 连续签到天数
+const 连续签到天数 = ref(0)
+const 连续签到天数Fun = () => {
+  连续签到天数.value = 3
+}
+连续签到天数Fun()
+
+// 今天有无签到
+const 今天有无签到 = ref(0)
+const 今天有无签到Fun = () => {
+  今天有无签到.value = false
+}
+今天有无签到Fun()
+
+const handleSignIn = () => {
+}
+const 今天序号 = ref(今天有无签到.value ? 连续签到天数.value -1 : 连续签到天数.value)
 const list = ref([
   { 增加积分数: 1 },
   { 增加积分数: 1 },
@@ -49,7 +66,6 @@ const list = ref([
 </script>
 <style lang="scss" scoped>
 .color-333 { color: #333; }
-.color-666 { color: #666; }
 .color-777 { color: #777; }
 .font-12 { font-size: 12px; }
 .font-13 { font-size: 13px; }

src/views/personal/taskCenter/components/suggest.vue

@@ -1,10 +1,36 @@
 <!-- 推荐任务 -->
 <template>
-  <div>推荐任务</div>
+  <div>
+    <div class="resume-title my-5">{{ $t('taskCenter.suggestTask') }}</div>
+    <div v-for="(item, index) in list" :key="'suggest' + index">
+      <div class="d-flex ml-2 my-5">
+        <div class="ellipsis" style="width: 50%;">{{ item.title }}</div>
+        <div class="ellipsis d-flex" style="width: calc(50% - 88px);">
+          <svg t="1719285689429" class="icon mx-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38595" width="24" height="24"><path d="M98.0992 511.7952c0 228.5568 185.1392 413.696 413.696 413.696s413.696-185.1392 413.696-413.696-185.1392-413.696-413.696-413.696c-109.7728 0-214.8352 43.6224-292.4544 121.2416-77.6192 77.4144-121.2416 182.6816-121.2416 292.4544z m0 0" fill="#FBE945" p-id="38596"></path><path d="M804.2496 219.3408L219.3408 804.4544c162.2016 158.1056 421.2736 156.4672 581.2224-3.6864 160.1536-160.1536 161.792-419.2256 3.6864-581.4272z m0 0" fill="#F2D636" p-id="38597"></path><path d="M210.944 511.7952c0 121.6512 73.3184 231.2192 185.5488 277.9136 112.4352 46.4896 241.664 20.8896 327.68-65.1264s111.8208-215.4496 65.1264-327.68c-46.4896-112.4352-156.2624-185.5488-277.9136-185.5488C345.7024 210.944 210.944 345.7024 210.944 511.7952z m0 0" fill="#FBB11B" p-id="38598"></path><path d="M717.824 293.2736c-118.1696-112.0256-303.9232-109.568-419.0208 5.5296-115.0976 115.0976-117.5552 301.056-5.5296 419.0208l424.5504-424.5504z m0 0" fill="#FDC72F" p-id="38599"></path><path d="M648.3968 566.4768c23.7568 125.1328-22.9376 157.696-138.4448 97.8944-118.1696 64.3072-163.0208 32.5632-136.6016-93.3888-96.0512-85.4016-77.6192-137.4208 54.6816-156.0576 58.1632-116.3264 114.688-117.1456 170.1888-2.6624 131.2768 14.1312 148.0704 65.3312 50.176 154.2144z m0 0" fill="#F4EA2A" p-id="38600"></path><path d="M598.2208 412.2624c131.2768 14.1312 148.0704 65.1264 50.176 154.2144 23.7568 125.1328-22.9376 157.696-138.4448 97.8944-90.112 49.152-137.6256 42.1888-143.36-19.8656l231.6288-232.2432z m50.176 154.2144" fill="#F2D636" p-id="38601"></path></svg>
+          <span class="" style="color: #f98b1f;">{{ item.奖励积分数 }}</span>
+        </div>
+        <v-btn
+          class="half-button"
+          :disabled="item.状态 !== 1"
+          :color="item.状态 === 0 ? '' : 'warning'" size="small"
+        >
+          {{ item.状态 === 0 ? '未完成' : item.状态 === 1 ? '立即领取' : '已领取' }}
+        </v-btn>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 defineOptions({name: 'personal-taskCenter-suggest'})
+const list = [
+  { title: '首次登录奖励', 奖励积分数: '5', 状态: 2 },
+  { title: '完善个人头像信息', 奖励积分数: '10', 状态: 0 },
+  { title: '完成工作经历', 奖励积分数: '5', 状态: 1 },
+  { title: '首次投递简历并主动沟通', 奖励积分数: '5', 状态: 1 },
+  { title: '个人简历被企业接收并回复', 奖励积分数: '20', 状态: 0 },
+  { title: '购买会员服务费', 奖励积分数: '20', 状态: 0 },
+]
 </script>
 <style lang="scss" scoped>
 </style>

src/views/personal/taskCenter/index.vue

@@ -2,14 +2,12 @@
 <template>
   <div class="default-width py-3">
     <!-- 签到 -->
-    <signIn class="white-bgc borderRadius5 pa-3"></signIn>
-    <!-- 任务 -->
-    <div class="white-bgc borderRadius5 mt-3 pa-3">
-      <!-- 推荐任务 -->
-      <suggest></suggest>
-      <!-- 每日任务 -->
-      <daily></daily>
-    </div>
+    <signIn class="white-bgc borderRadius5 mb-3 pa-3"></signIn>
+    <!-- 推荐任务 -->
+    <suggest class="white-bgc borderRadius5 mb-3 pa-3"></suggest>
+    <!-- 每日任务 -->
+    <daily class="white-bgc borderRadius5 mb-3 pa-3"></daily>
+    <!-- <div class="white-bgc borderRadius5 mt-3 pa-3"></div> -->
   </div>
 </template>