feat: 主页样式制作

src/components/task-tab.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
+import {ref} from "vue";
 import type {PropType} from "vue";
-import type {reward_ladder, Task} from "@/types/task";
+import { Modal } from 'ant-design-vue';
+import type {reward_ladder, Task, TaskFinish} from "@/types/task";
+import {getTimestamp} from "@/tools/time";
 
+
+const selectModal = ref(false);
+const taskLadders = ref<reward_ladder[]>([]);
 const props = defineProps({
   tasks: {
     type: Array as PropType<Task[]>,
@@ -11,16 +17,17 @@ const props = defineProps({
 
 function showTaskReward(task:Task):string{
   let reStr: string = '';
-  let reward: reward_ladder;
+  let reward: reward_ladder | undefined = undefined;
   let ladderKey = task.finishLadderKey;
   if(task.rewardType === 0){
-    reStr = task.reward
+    reStr = task.reward + ''
   }else if(task.rewardType === 1) {
+    task.reward = task.reward as reward_ladder[];
     reward = task.reward.find((item) => {
       return item.key === ladderKey
     });
     if(reward){
-      reStr = reward.text
+      reStr = reward.text;
     }else{
       reStr = '未知奖励'
     }
@@ -30,13 +37,41 @@ function showTaskReward(task:Task):string{
 
 function taskFinish(task:Task):void{
   console.log(task)
+  let taskFinishData:TaskFinish = {
+    id: task.id,
+    finishTime: String(getTimestamp() ),
+  }
+  if (task.rewardType === 0){
+    console.log('直接奖励');
+    sendTaskFinish(taskFinishData);
+  }else if(task.rewardType === 1){
+    // 判断是否为 reward_ladder 类型
+    if( task.reward instanceof Array) {
+      console.log('选择奖励');
+      taskLadders.value = task.reward as reward_ladder[];
+      selectModal.value = true;
+      // 等待选择奖励
 
+    }else{
+      console.error('未知奖励类型');
+    }
+  }
 }
+function sendTaskFinish(taskFinishData:TaskFinish):void{
+  // todo 完成任务,调用api发送任务完成请求
 
+}
 </script>
 
 <template>
 <div class="task-tab">
+  <a-modal
+      v-model:open="selectModal"
+      title="任务完成情况"
+      ok-text="确认" cancel-text="取消"
+  >
+
+  </a-modal>
   <div class="task-item"
        v-for="item in props.tasks">
     <div class="task-info">

src/tools/time.ts

@@ -0,0 +1,4 @@
+// 获取时间戳
+export function getTimestamp(isMillisecond: boolean = false) {
+    return new Date().getTime() / (isMillisecond ? 1 : 1000);
+}

src/types/task.ts

@@ -36,3 +36,9 @@ export interface Task {
     status: number,
     icon?: string,
 }
+
+export interface TaskFinish {
+    id: number,
+    finishTime: string,
+    finishLadderKey?: string,
+}