对接任务进度任务接口

src/api/development.js

@@ -18,7 +18,8 @@ export const apiDevelopment = {
   LevelDetail,
   CurrentTask,
   UploadFile,
-  SubmitTask
+  SubmitTask,
+  TaskDetail
 };
 
 export default apiDevelopment;
@@ -71,6 +72,20 @@ function CurrentTask() {
   });
 }
 
+/**
+ * 任务详情
+ */
+function TaskDetail(params) {
+  return http({
+    url: '/api/Task/TaskDetail',
+    method: 'get',
+    params: {
+      personId: personId,
+     ...params
+    }
+  });
+}
+
 /**
  * 提交任务
  */

src/views/development/index.vue

@@ -21,7 +21,7 @@
               <span>{{ task.planName }}</span>
               <span>{{ task.levelLv }}</span>
             </div>
-            <div class="mid-text bold">{{ task.serialNumber }}</div>
+            <div class="mid-text bold">{{ task.target }}</div>
           </div>
           <div class="task-times">
             <div class="task-time" v-for="(item, index) in task.taskDatas" :key="index" @click="toTask(item)">

src/views/development/taskDetail.vue

@@ -8,9 +8,11 @@
     </div>
     <div class="content" v-if="detail">
       <div v-if="detail.status === 1 || detail.status === 2">
-        <div class="gap"></div>
-        <div class="max-title">离完成任务解锁奖励</div>
-        <div class="max-title">又近了一步！</div>
+        <div v-if="detail.status === 1">
+          <div class="gap"></div>
+          <div class="max-title">离完成任务解锁奖励</div>
+          <div class="max-title">又近了一步！</div>
+        </div>
         <div class="gap"></div>
         <div class="text center">
           你今天整体状态优秀，身体压力状态较小，能很好应对今 日工作生活中的挑战，请继续保持优秀状态。相信自己，
@@ -19,14 +21,16 @@
         <div class="gap"></div>
         <div class="progress">
           <div class="bg" width="100%"></div>
-          <div class="text" :style="`left:${detail.taskData.progress}%;`">{{ detail.taskData.finishCount }}</div>
+          <div class="text" :style="`left:${detail.taskData.progress * 100}%;`">{{ detail.taskData.finishCount }}</div>
         </div>
         <div class="gap"></div>
       </div>
       <div class="gap"></div>
-      <div class="mid-title center" v-if="detail.status === 3">未开始</div>
+      <div class="mid-title center" v-if="detail.status === 2">已完成</div>
+      <div class="mid-title center" v-else-if="detail.status === 1">任务即将达成</div>
+      <div class="mid-title center" v-else-if="detail.status === 3">未开始</div>
       <div class="mid-title center" v-else-if="detail.status === 0">未解锁</div>
-      <div class="mid-title center" v-else>{{detail.completionDesc}}</div>
+      <div class="mid-title center" v-else>未知</div>
       <div class="gap"></div>
       <div class="mid-title">目标</div>
       <div class="text">{{ detail.target }}</div>
@@ -68,7 +72,7 @@ export default {
       setTimeout(() => {
         this.$router.back();
       }, 2000);
-      return
+      return;
     }
     this.initData();
   },

src/views/development/taskWearing.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pageContent taskWearing">
-    <NavBar title="佩戴任务" @on-click-left="$router.back()"></NavBar>
+    <NavBar :title="title" @on-click-left="$router.back()"></NavBar>
     <div class="day">
       <span>第</span>
       <span class="number">{{ activeIndex + 1 }}</span>
@@ -11,16 +11,13 @@
         class="timeBarItem"
         v-for="(item, index) in days"
         :key="index"
-        :class="{ active: item.time >= standard, select: index === activeIndex }"
+        :class="{ active: item.progress >= 1, select: index === activeIndex }"
         @click="activeIndex = index"
       ></div>
     </div>
-    <div class="wearingTime">{{ days[activeIndex] ? formateSeconds(days[activeIndex].time) : formateSeconds(0) }}</div>
+    <div class="wearingTime">{{ days[activeIndex] ? days[activeIndex].value : '' }}</div>
     <div class="progress">
-      <div
-        class="progressPoint"
-        :style="`left: ${((days[activeIndex] ? days[activeIndex].time : 0) / standard) * 100}%`"
-      ></div>
+      <div class="progressPoint" :style="`left: ${(days[activeIndex] ? days[activeIndex].progress : 0) * 100}%`"></div>
       <div class="progressBar"></div>
     </div>
   </div>
@@ -28,57 +25,52 @@
 
 <script>
 import NavBar from '@/components/NavBar';
+import develeopMent from '@/api/development';
+
 export default {
   components: {
     NavBar
   },
   data() {
     return {
+      title: '任务',
+      id: 1,
+      rankId: 1,
       activeIndex: 0,
-      standard: 0,
       days: []
     };
   },
   mounted() {
+    let id = this.$route.params.id;
+    let rankId = this.$route.params.rankId;
+    if (id && rankId) {
+      this.id = id;
+      this.rankId = rankId;
+    } else {
+      this.$toast('参数错误');
+      setTimeout(() => {
+        this.$router.back();
+      }, 2000);
+      return;
+    }
     this.initData();
   },
   methods: {
-    initData() {
-      this.standard = 60 * 60 * 5;
-      this.days = [
-        {
-          time: 60 * 60 * 5
-        },
-        {
-          time: 60 * 60 * 5
-        },
-        {
-          time: 60 * 60 * 5
-        },
-        {
-          time: 60 * 60 * 2
-        },
-        {
-          time: 60 * 60 * 5
-        },
-        {
-          time: 60 * 60 * 4
+    async initData() {
+      let re = await develeopMent.TaskDetail({
+        id: this.id,
+        rankId: this.rankId
+      });
+      if (re) {
+        if (re.succeed) {
+          console.log(re.data);
+          this.title = re.data.title;
+          this.days = re.data.processDatas;
+          this.activeIndex = this.days.length - 1;
+        } else {
+          this.$message.error(re.message);
         }
-      ];
-
-      this.activeIndex = this.days.length - 1;
-    },
-    onSelect(type) {
-      console.log(type);
-      this.$refs[type + 'file'].click();
-    },
-    onChange(type) {
-      const file = this.$refs[type + 'file'].files[0];
-      console.log(file);
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('type', type);
-      console.log(formData);
+      }
     },
     // 秒转时分秒
     formateSeconds(time) {
@@ -158,7 +150,7 @@ export default {
 
   .wearingTime {
     color: #000;
-    font-size: 90px;
+    font-size: 65px;
   }
 
   .progress {