对接部分成长接口

src/api/development.js

@@ -0,0 +1,70 @@
+import request from '@/config/request';
+
+async function http(config) {
+  return new Promise(resolve => {
+    request(config)
+      .then(res => {
+        resolve(res.data);
+      })
+      .catch(err => {
+        console.log(err);
+        resolve(false);
+      });
+  });
+}
+
+export const apiDevelopment = {
+  LevelList,
+  LevelDetail,
+  CurrentTask
+};
+
+export default apiDevelopment;
+
+// personId 这个用于临时测试用
+const personId = 15;
+
+/**
+ * 等级列表
+ * @returns
+ */
+function LevelList() {
+  return http({
+    url: '/api/Level/List',
+    method: 'get',
+    params: {
+      personId: personId
+    }
+  });
+}
+
+/**
+ * 等级详情
+ * @param
+ * \{ levelId ，personId  \}
+ *
+ * @returns
+ */
+function LevelDetail(params) {
+  return http({
+    url: '/api/Level/LevelDetail',
+    method: 'get',
+    params: {
+      personId: personId,
+      ...params
+    }
+  });
+}
+
+/**
+ * 任务列表
+ */
+function CurrentTask() {
+  return http({
+    url: '/api/Task/CurrentTask',
+    method: 'get',
+    params: {
+      personId: personId
+    }
+  });
+}

src/views/development/index.vue

@@ -9,35 +9,38 @@
         <div class="button min-text">了解详情</div>
       </div>
     </router-link>
-    <div class="gap">当前任务</div>
-    <div class="task">
-      <div class="image">
-        <img src="@/assets/development/images/task.png" alt="" />
-      </div>
-      <div class="task-detail">
-        <div class="task-title">
-          <div>
-            <span>幸运熊计划LV</span>
-            <span>{{ task.level < 10 ? `0${task.level}` : task.level }}</span>
-          </div>
-          <div class="mid-text bold">{{ task.detail }}</div>
+    <div v-if="task">
+      <div class="gap">当前任务</div>
+      <div class="task">
+        <div class="image">
+          <img src="@/assets/development/images/task.png" alt="" />
         </div>
-        <div class="task-times">
-          <div class="task-time" v-for="(item, index) in task.taskList" :key="index" @click="toTask(item)">
-            <div class="task-time-info">
-              <div class="task-time-text">{{ item.title }}</div>
-              <div class="task-time-button min-text" v-if="item.status === 0">查看进度</div>
-              <div class="task-time-button min-text" v-else>上传打卡</div>
+        <div class="task-detail">
+          <div class="task-title">
+            <div>
+              <span>{{ task.planName }}</span>
+              <span>{{ task.levelLv }}</span>
             </div>
-            <div class="task-time-icon">
-              <div class="task-time-icon-active" v-if="item.status === 0">
-                <div class="image">
-                  <img src="@/assets/development/images/active.png" alt="" />
+            <div class="mid-text bold">{{ task.serialNumber }}</div>
+          </div>
+          <div class="task-times">
+            <div class="task-time" v-for="(item, index) in task.taskDatas" :key="index" @click="toTask(item)">
+              <div class="task-time-info">
+                <div class="task-time-text">{{ item.name }}</div>
+                <div class="task-time-button min-text" v-if="item.status !== 3">
+                  {{ item.sourceType === 3 ? '完成问卷' : item.sourceType === 2 ? '查看进度' : '上传打卡' }}
                 </div>
               </div>
-              <div class="task-time-icon-unactive" v-else>
-                <div class="image">
-                  <img src="@/assets/development/images/unactive.png" alt="" />
+              <div class="task-time-icon">
+                <div class="task-time-icon-active" v-if="item.status === 2">
+                  <div class="image">
+                    <img src="@/assets/development/images/active.png" alt="" />
+                  </div>
+                </div>
+                <div class="task-time-icon-unactive" v-else>
+                  <div class="image">
+                    <img src="@/assets/development/images/unactive.png" alt="" />
+                  </div>
                 </div>
               </div>
             </div>
@@ -51,11 +54,11 @@
         v-for="(item, index) in levels"
         :key="index"
         :class="{
-          unlock: item.level === task.level + 1,
-          now: item.level === task.level,
-          active: item.level < task.level
+          unlock: item.status === 3,
+          now: item.status === 1,
+          active: item.status === 2
         }"
-        @click="toDetail(item, task)"
+        @click="toDetail(item)"
       >
         <div class="bg">
           <div class="image">
@@ -64,16 +67,18 @@
         </div>
         <div class="level-info">
           <div class="level-info-level">
-            <div class="level-info-text">LV{{ item.level < 10 ? `0${item.level}` : item.level }}</div>
+            <div class="level-info-text">{{ item.levelName }}</div>
             <div class="level-info-status">
               {{
-                item.level > task.level + 1
+                item.status === 0
                   ? '未解锁'
-                  : item.level === task.level + 1
+                  : item.status === 3
                   ? '可查看'
-                  : item.level === task.level
+                  : item.status === 1
                   ? '进行中'
-                  : '已完成'
+                  : item.status === 2
+                  ? '已完成'
+                  : '未知'
               }}
             </div>
           </div>
@@ -84,7 +89,7 @@
         </div>
         <div class="tip">
           <div class="image">
-            <img :src="active" alt="" v-if="item.level <= task.level + 1" />
+            <img :src="active" alt="" v-if="item.status === 1 || item.status === 2 || item.status === 3" />
             <img :src="unactive" alt="" v-else />
           </div>
         </div>
@@ -94,6 +99,7 @@
 </template>
 
 <script>
+import development from '@/api/development';
 const active = require('@/assets/development/images/leveTip.png');
 const unactive = require('@/assets/development/images/leveTipGray.png');
 
@@ -102,54 +108,62 @@ export default {
     return {
       active,
       unactive,
-      task: {
-        level: 2,
-        detail: '学讲礼貌',
-        taskList: [
-          {
-            title: '格言朗读',
-            status: 1
-          },
-          {
-            title: '佩戴习惯',
-            status: 0
-          }
-        ]
-      },
-      levels: [
-        {
-          level: 1,
-          title: '美好开始',
-          desc: '赢取启蒙熊',
-          image: require('@/assets/development/images/leve_1.png')
-        },
-        {
-          level: 2,
-          title: '学讲礼貌',
-          desc: '赢取启蒙熊',
-          image: require('@/assets/development/images/leve_2.png')
-        },
-        {
-          level: 3,
-          title: '学讲礼貌',
-          desc: '赢取启蒙熊',
-          image: require('@/assets/development/images/leve_3.png')
-        },
-        {
-          level: 4,
-          title: '学讲礼貌',
-          desc: '赢取启蒙熊',
-          image: require('@/assets/development/images/leve_4.png')
-        }
-      ]
+      task: null,
+      levels: []
     };
   },
   created() {},
-  mounted() {},
+  mounted() {
+    this.initData();
+  },
   methods: {
+    async initData() {
+      this.getTasks();
+      this.getLevels();
+    },
+    async getLevels() {
+      let re = await development.LevelList();
+
+      if (re) {
+        if (re.succeed) {
+          if (re.data && Array.isArray(re.data) && re.data.length > 0) {
+            let list = re.data.map(item => {
+              return {
+                id: item.id,
+                level: item.level,
+                levelName: item.levelLv,
+                title: item.target,
+                desc: `赢取${item.reward}`,
+                status: item.status,
+                image: require(`@/assets/development/images/leve_${item.level}.png`)
+              };
+            });
+            this.levels = list;
+          }
+        } else {
+          this.$message.error(re.message);
+        }
+      }
+    },
+    async getTasks() {
+      let re = await development.CurrentTask();
+      if (re) {
+        if (re.succeed) {
+          if (re.data && Array.isArray(re.data) && re.data.length > 0) {
+            this.task = re.data[0];
+          }
+        } else {
+          this.$message.error(re.message);
+        }
+      }
+    },
     toTask(item) {
-      console.log(item);
-      if (item.status === 0) {
+      if(item.status === 3){
+        return
+      }
+      if (item.sourceType === 3) {
+        this.$toast('问卷调查');
+      } else if (item.sourceType === 2) {
         this.$router.push({
           name: 'taskWearing',
           params: {}
@@ -161,12 +175,12 @@ export default {
         });
       }
     },
-    toDetail(item, task) {
-      console.log(item);
-      console.log(task);
+    toDetail(item) {
       this.$router.push({
         name: 'taskDetail',
-        params: {}
+        params: {
+          id: item.id
+        }
       });
     }
   }
@@ -263,6 +277,7 @@ export default {
               letter-spacing: 5px;
             }
             .task-time-button {
+              align-self: flex-end;
               padding: 0px 30px;
               color: white;
               background-color: #000;

src/views/development/taskDetail.vue

@@ -6,53 +6,87 @@
         <img src="@/assets/development/images/banner2.png" alt="" />
       </div>
     </div>
-    <div class="content">
-      <div class="gap"></div>
-      <div class="max-title">离完成任务解锁奖励</div>
-      <div class="max-title">又近了一步！</div>
-      <div class="gap"></div>
-      <div class="text center">
-        你今天整体状态优秀，身体压力状态较小，能很好应对今 日工作生活中的挑战，请继续保持优秀状态。相信自己，
-        你一定可以实现你的目标！
-      </div>
-      <div class="gap"></div>
-      <div class="progress">
-        <div class="bg" width="100%"></div>
-        <div class="text" :style="`left:${progress}%;`">3</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 class="gap"></div>
+        <div class="text center">
+          你今天整体状态优秀，身体压力状态较小，能很好应对今 日工作生活中的挑战，请继续保持优秀状态。相信自己，
+          你一定可以实现你的目标！
+        </div>
+        <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>
+        <div class="gap"></div>
       </div>
       <div class="gap"></div>
-      <div class="gap"></div>
-      <div class="mid-title center">任务即将达成</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>未知</div>
       <div class="gap"></div>
       <div class="mid-title">目标</div>
-      <div class="text">美好开始</div>
+      <div class="text">{{ detail.target }}</div>
       <div class="gap"></div>
       <div class="mid-title">目标解释</div>
-      <div class="text">
-        帮助孩子了解自己；认识什么叫“德智体美劳全面发展”； 和孩子一起找到通往幸福的魔法钥匙 ⸺ 情绪共生力。
-      </div>
+      <div class="text">{{ detail.targetDesc }}</div>
       <div class="gap"></div>
       <div class="mid-title">任务</div>
-      <div class="text">1:帮助孩子阅读一封信和计划玩法拆解</div>
-      <div class="text">2:一起安装手办柜，放上熊，并合影</div>
+      <div class="text" v-for="(item, index) in tasks" :key="index">{{ item }}</div>
     </div>
   </div>
 </template>
 
 <script>
 import NavBar from '@/components/NavBar';
+import develeopMent from '@/api/development';
 export default {
   components: {
     NavBar
   },
   data() {
     return {
+      id: 1,
+      detail: null,
       progress: 50
     };
   },
-  computed: {},
-  mounted() {},
-  methods: {}
+  computed: {
+    tasks() {
+      return this.detail ? this.detail.taskDesc.split('\r\n') : [];
+    }
+  },
+  mounted() {
+    let id = this.$route.params.id;
+    if (id) {
+      this.id = id;
+    } else {
+      this.$toast('参数错误');
+      setTimeout(() => {
+        this.$router.back();
+      }, 3000);
+    }
+    this.initData();
+  },
+  methods: {
+    async initData() {
+      let re = await develeopMent.LevelDetail({
+        levelId: this.id
+      });
+      if (re) {
+        if (re.succeed) {
+          this.detail = re.data;
+        } else {
+          this.$toast(re.message);
+        }
+      }
+    }
+  }
 };
 </script>