myCrowdTestDTO增加数据接收(Mine.vue)

src/components/Mine.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="mine-container">
     <div class="mine-top-wrapper">
@@ -23,12 +22,12 @@
               <span class="username">{{user.name}}</span>
             </div>
             <!--<p class="name">-->
-              <!--<a href="javascript:;" class="login-btn btn btn-medium btn-info">登录</a>-->
-              <!--<a-->
-                <!--href="https://login.sina.com.cn/signup/signup?entry=tech"-->
-                <!--class="register-btn btn btn-medium btn-info"-->
-                <!--target="_blank"-->
-              <!--&gt;注册</a>-->
+            <!--<a href="javascript:;" class="login-btn btn btn-medium btn-info">登录</a>-->
+            <!--<a-->
+            <!--href="https://login.sina.com.cn/signup/signup?entry=tech"-->
+            <!--class="register-btn btn btn-medium btn-info"-->
+            <!--target="_blank"-->
+            <!--&gt;注册</a>-->
             <!--</p>-->
             <p class="scores">
               <a href="/rule/merit" target="_blank">
@@ -67,58 +66,61 @@
 </template>
 
 <script>
-import TaskItem from "@/components/commons/TaskItem";
-import ProjectItem from "@/components/commons/ProjectItem";
+import TaskItem from '@/components/commons/TaskItem'
+import ProjectItem from '@/components/commons/ProjectItem'
+import Http from '@/js/http.js'
+import Apis from '@/js/api.js'
+
 export default {
-  name: "Mine",
-  components: { TaskItem, ProjectItem },
-  data() {
+  name: 'Mine',
+  components: {TaskItem, ProjectItem},
+  data () {
     return {
       unFinishedTaskList: [
         {
           id: 0,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "发送群文件测试",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '发送群文件测试',
           platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "30",
+          description: '任务描述文字xxxx',
+          price: '30',
           serviceType: 1,
           participantNum: 30,
           status: 0
         },
         {
           id: 1,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "多人聊天发送文件测试",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '多人聊天发送文件测试',
           platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10",
+          description: '任务描述文字xxxx',
+          price: '10',
           serviceType: 0,
           participantNum: 0,
           status: 1
         },
         {
           id: 2,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "浏览器波洞星球",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '浏览器波洞星球',
           platform: [1],
-          description: "任务描述文字xxxx",
-          price: "10",
+          description: '任务描述文字xxxx',
+          price: '10',
           serviceType: 2,
           participantNum: 21,
           status: 0
         },
         {
           id: 3,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "举报支持选择聊天记录（安全）",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '举报支持选择聊天记录（安全）',
           platform: [0, 1, 2],
-          description: "任务描述文字xxxx",
-          price: "0",
+          description: '任务描述文字xxxx',
+          price: '0',
           serviceType: 1,
           participantNum: 1,
           status: 1
@@ -127,48 +129,48 @@ export default {
       finishedTaskList: [
         {
           id: 0,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "发送群文件测试",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '发送群文件测试',
           platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "30",
+          description: '任务描述文字xxxx',
+          price: '30',
           serviceType: 1,
           participantNum: 30,
           status: 0
         },
         {
           id: 1,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "多人聊天发送文件测试",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '多人聊天发送文件测试',
           platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10",
+          description: '任务描述文字xxxx',
+          price: '10',
           serviceType: 0,
           participantNum: 0,
           status: 1
         },
         {
           id: 2,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "浏览器波洞星球",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '浏览器波洞星球',
           platform: [1],
-          description: "任务描述文字xxxx",
-          price: "10",
+          description: '任务描述文字xxxx',
+          price: '10',
           serviceType: 2,
           participantNum: 21,
           status: 0
         },
         {
           id: 3,
-          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
-          projectId:1123,
-          title: "举报支持选择聊天记录（安全）",
+          coverImgUrl: 'http://www.mooctest.net/assets/img/mooctest.png',
+          projectId: 1123,
+          title: '举报支持选择聊天记录（安全）',
           platform: [0, 1, 2],
-          description: "任务描述文字xxxx",
-          price: "0",
+          description: '任务描述文字xxxx',
+          price: '0',
           serviceType: 1,
           participantNum: 1,
           status: 1
@@ -177,69 +179,83 @@ export default {
       appliedProjectList: [
         {
           id: 1,
-          code: "27382hdsjkfdskfK",
-          name: "多人聊天发送文件测试",
+          code: '27382hdsjkfdskfK',
+          name: '多人聊天发送文件测试',
           platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10"
+          description: '任务描述文字xxxx',
+          price: '10'
         },
         {
           id: 2,
-          code: "jzlk9dfsndfsmd ",
-          name: "多人聊天发送文件测试",
+          code: 'jzlk9dfsndfsmd ',
+          name: '多人聊天发送文件测试',
           platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "90"
+          description: '任务描述文字xxxx',
+          price: '90'
         },
         {
           id: 3,
-          code: "437849sdbsjbsf",
-          name: "多人聊天发送文件测试",
+          code: '437849sdbsjbsf',
+          name: '多人聊天发送文件测试',
           platform: [1, 2],
-          description: "任务描述文字xxxx",
-          price: "50"
+          description: '任务描述文字xxxx',
+          price: '50'
         }
       ],
       user: {
-        id:123,
-        name:"李三",
-        score:100,
-        prestige:100,
+        id: 123,
+        name: '李三',
+        score: 100,
+        prestige: 100,
       }
-    };
+    }
+  },
+  methods: {
+    loadData () {
+      Http.get(Apis.PAGE.MY_CROWD_TEST_PAGE).then((res)=>{
+        this.finishedTaskList = res.finishedTaskList
+        this.unFinishedTaskList = res.unFinishedTaskList
+        this.appliedProjectList = res.appliedProjectList
+        this.user = res.userInfo
+      })
+    }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
-.mine-container {
-  padding: 0 80px 40px 80px;
-}
-.mine-top-wrapper {
-  height: 350px;
-  background-color: #fff;
-}
-[class*="el-col-"] {
-  height: 100%;
-}
+  .mine-container {
+    padding: 0 80px 40px 80px;
+  }
 
-.advertise-imgs {
-  height: 100%;
-}
+  .mine-top-wrapper {
+    height: 350px;
+    background-color: #fff;
+  }
 
-.advertise-imgs img {
-  width: 100%;
-  height: 100%;
-}
-.user-banner {
-  text-align: center;
-  display: inline-table;
-  height: 100%;
-  width: 100%;
-  margin-top: 40px;
-}
-.mine-body {
-  margin-top: 30px;
-}
+  [class*="el-col-"] {
+    height: 100%;
+  }
+
+  .advertise-imgs {
+    height: 100%;
+  }
+
+  .advertise-imgs img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .user-banner {
+    text-align: center;
+    display: inline-table;
+    height: 100%;
+    width: 100%;
+    margin-top: 40px;
+  }
+
+  .mine-body {
+    margin-top: 30px;
+  }
 </style>