增加任务广场

src/components/Home.vue

@@ -2,7 +2,7 @@
   <div class="home-container">
     <div class="home-banner-wrap">
       <el-carousel height="400px" :interval="10000" arrow="always">
-        <el-carousel-item  v-for="img in imgList">
+        <el-carousel-item  v-for="(img,index) in imgList" :key="index">
           <img class="banner_back banner_back_1" v-bind:src="img">
           <router-link :to="{ name: 'ProjectCreate'}">
             <div class="btn btn-medium btn-home-apply">申请项目</div>

src/components/Square.vue

@@ -3,7 +3,7 @@
     <div class="title">全部任务</div>
 
     <div class="square-list-container">
-      <task-item v-for="(item,index) in list" :key="index" :taskId="item.id" />
+      <task-item v-for="(item,index) in list" :key="index" :task="item" />
       <div v-if="loading" class="loading">
         <span></span>
         <span></span>
@@ -20,149 +20,33 @@
 
 <script>
 import TaskItem from "@/components/commons/TaskItem";
+import Http from '@/js/http.js';
+import Apis from '@/js/api.js';
 
 export default {
   name: "Square",
   components: { TaskItem },
   data() {
     return {
-      loading: false,
+      loading: true,
       nomore:false,
       list: [
         {
           id: 0,
+          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
+          projectId:1123,
           title: "发送群文件测试",
           platform: [0, 1],
           description: "任务描述文字xxxx",
           price: "30",
-          业务类型: 1,
-          participantNum: 30,
-          status: 0
-        },
-        {
-          id: 1,
-          title: "多人聊天发送文件测试",
-          platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10",
-          业务类型: 0,
-          participantNum: 0,
-          status: 1
-        },
-        {
-          id: 2,
-          title: "浏览器波洞星球",
-          platform: [1],
-          description: "任务描述文字xxxx",
-          price: "10",
-          业务类型: 2,
-          participantNum: 21,
-          status: 0
-        },
-        {
-          id: 3,
-          title: "举报支持选择聊天记录（安全）",
-          platform: [0, 1, 2],
-          description: "任务描述文字xxxx",
-          price: "0",
-          业务类型: 1,
-          participantNum: 1,
-          status: 1
-        },
-        {
-          id: 4,
-          title: "发送群文件测试",
-          platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "30",
-          业务类型: 1,
-          participantNum: 30,
-          status: 0
-        },
-        {
-          id: 5,
-          title: "多人聊天发送文件测试",
-          platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10",
-          业务类型: 0,
-          participantNum: 0,
-          status: 1
-        },
-        {
-          id: 6,
-          title: "浏览器波洞星球",
-          platform: [1],
-          description: "任务描述文字xxxx",
-          price: "10",
-          业务类型: 2,
-          participantNum: 21,
-          status: 0
-        },
-        {
-          id: 7,
-          title: "举报支持选择聊天记录（安全）",
-          platform: [0, 1, 2],
-          description: "任务描述文字xxxx",
-          price: "0",
-          业务类型: 1,
-          participantNum: 1,
-          status: 1
-        },
-        {
-          id: 8,
-          title: "发送群文件测试",
-          platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "30",
-          业务类型: 1,
-          participantNum: 30,
-          status: 0
-        },
-        {
-          id: 9,
-          title: "多人聊天发送文件测试",
-          platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10",
-          业务类型: 0,
-          participantNum: 0,
-          status: 1
-        },
-        {
-          id: 10,
-          title: "浏览器波洞星球",
-          platform: [1],
-          description: "任务描述文字xxxx",
-          price: "10",
-          业务类型: 2,
-          participantNum: 21,
-          status: 0
-        },
-        {
-          id: 11,
-          title: "举报支持选择聊天记录（安全）",
-          platform: [0, 1, 2],
-          description: "任务描述文字xxxx",
-          price: "0",
-          业务类型: 1,
-          participantNum: 1,
-          status: 1
-        }
-      ],
-      list1: [
-        {
-          id: 0,
-          title: "1发送群文件测试",
-          platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "30",
           serviceType: 1,
           participantNum: 30,
           status: 0
         },
         {
           id: 1,
+          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
+          projectId:1123,
           title: "多人聊天发送文件测试",
           platform: [0],
           description: "任务描述文字xxxx",
@@ -173,6 +57,8 @@ export default {
         },
         {
           id: 2,
+          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
+          projectId:1123,
           title: "浏览器波洞星球",
           platform: [1],
           description: "任务描述文字xxxx",
@@ -183,6 +69,8 @@ export default {
         },
         {
           id: 3,
+          coverImgUrl:"http://www.mooctest.net/assets/img/mooctest.png",
+          projectId:1123,
           title: "举报支持选择聊天记录（安全）",
           platform: [0, 1, 2],
           description: "任务描述文字xxxx",
@@ -191,87 +79,129 @@ export default {
           participantNum: 1,
           status: 1
         },
-        {
-          id: 4,
-          title: "发送群文件测试",
-          platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "30",
-          serviceType: 1,
-          participantNum: 30,
-          status: 0
-        },
-        {
-          id: 5,
-          title: "多人聊天发送文件测试",
-          platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10",
-          serviceType: 0,
-          participantNum: 0,
-          status: 1
-        },
-        {
-          id: 6,
-          title: "浏览器波洞星球",
-          platform: [1],
-          description: "任务描述文字xxxx",
-          price: "10",
-          serviceType: 2,
-          participantNum: 21,
-          status: 0
-        },
-        {
-          id: 7,
-          title: "举报支持选择聊天记录（安全）",
-          platform: [0, 1, 2],
-          description: "任务描述文字xxxx",
-          price: "0",
-          serviceType: 1,
-          participantNum: 1,
-          status: 1
-        },
-        {
-          id: 8,
-          title: "发送群文件测试",
-          platform: [0, 1],
-          description: "任务描述文字xxxx",
-          price: "30",
-          serviceType: 1,
-          participantNum: 30,
-          status: 0
-        },
-        {
-          id: 9,
-          title: "多人聊天发送文件测试",
-          platform: [0],
-          description: "任务描述文字xxxx",
-          price: "10",
-          serviceType: 0,
-          participantNum: 0,
-          status: 1
-        },
-        {
-          id: 10,
-          title: "浏览器波洞星球",
-          platform: [1],
-          description: "任务描述文字xxxx",
-          price: "10",
-          serviceType: 2,
-          participantNum: 21,
-          status: 0
-        },
-        {
-          id: 11,
-          title: "举报支持选择聊天记录（安全）",
-          platform: [0, 1, 2],
-          description: "任务描述文字xxxx",
-          price: "0",
-          serviceType: 1,
-          participantNum: 1,
-          status: 1
-        }
-      ]
+      ],
+      // list1: [
+      //   {
+      //     id: 0,
+      //     title: "1发送群文件测试",
+      //     platform: [0, 1],
+      //     description: "任务描述文字xxxx",
+      //     price: "30",
+      //     serviceType: 1,
+      //     participantNum: 30,
+      //     status: 0
+      //   },
+      //   {
+      //     id: 1,
+      //     title: "多人聊天发送文件测试",
+      //     platform: [0],
+      //     description: "任务描述文字xxxx",
+      //     price: "10",
+      //     serviceType: 0,
+      //     participantNum: 0,
+      //     status: 1
+      //   },
+      //   {
+      //     id: 2,
+      //     title: "浏览器波洞星球",
+      //     platform: [1],
+      //     description: "任务描述文字xxxx",
+      //     price: "10",
+      //     serviceType: 2,
+      //     participantNum: 21,
+      //     status: 0
+      //   },
+      //   {
+      //     id: 3,
+      //     title: "举报支持选择聊天记录（安全）",
+      //     platform: [0, 1, 2],
+      //     description: "任务描述文字xxxx",
+      //     price: "0",
+      //     serviceType: 1,
+      //     participantNum: 1,
+      //     status: 1
+      //   },
+      //   {
+      //     id: 4,
+      //     title: "发送群文件测试",
+      //     platform: [0, 1],
+      //     description: "任务描述文字xxxx",
+      //     price: "30",
+      //     serviceType: 1,
+      //     participantNum: 30,
+      //     status: 0
+      //   },
+      //   {
+      //     id: 5,
+      //     title: "多人聊天发送文件测试",
+      //     platform: [0],
+      //     description: "任务描述文字xxxx",
+      //     price: "10",
+      //     serviceType: 0,
+      //     participantNum: 0,
+      //     status: 1
+      //   },
+      //   {
+      //     id: 6,
+      //     title: "浏览器波洞星球",
+      //     platform: [1],
+      //     description: "任务描述文字xxxx",
+      //     price: "10",
+      //     serviceType: 2,
+      //     participantNum: 21,
+      //     status: 0
+      //   },
+      //   {
+      //     id: 7,
+      //     title: "举报支持选择聊天记录（安全）",
+      //     platform: [0, 1, 2],
+      //     description: "任务描述文字xxxx",
+      //     price: "0",
+      //     serviceType: 1,
+      //     participantNum: 1,
+      //     status: 1
+      //   },
+      //   {
+      //     id: 8,
+      //     title: "发送群文件测试",
+      //     platform: [0, 1],
+      //     description: "任务描述文字xxxx",
+      //     price: "30",
+      //     serviceType: 1,
+      //     participantNum: 30,
+      //     status: 0
+      //   },
+      //   {
+      //     id: 9,
+      //     title: "多人聊天发送文件测试",
+      //     platform: [0],
+      //     description: "任务描述文字xxxx",
+      //     price: "10",
+      //     serviceType: 0,
+      //     participantNum: 0,
+      //     status: 1
+      //   },
+      //   {
+      //     id: 10,
+      //     title: "浏览器波洞星球",
+      //     platform: [1],
+      //     description: "任务描述文字xxxx",
+      //     price: "10",
+      //     serviceType: 2,
+      //     participantNum: 21,
+      //     status: 0
+      //   },
+      //   {
+      //     id: 11,
+      //     title: "举报支持选择聊天记录（安全）",
+      //     platform: [0, 1, 2],
+      //     description: "任务描述文字xxxx",
+      //     price: "0",
+      //     serviceType: 1,
+      //     participantNum: 1,
+      //     status: 1
+      //   }
+      // ]
     };
   },
   mounted() {
@@ -322,15 +252,21 @@ export default {
       if (scrollTop + windowHeight + 5 >= scrollHeight) {
         console.log("加载更多数据");
         // this.loading=true;
-        //获取数据请求 请求结束后 
-        //成功设置 this.list =[...this.list,...this.list1];  this.loading=false; 
+        //获取数据请求 请求结束后
+        //成功设置 this.list =[...this.list,...this.list1];  this.loading=false;
         //失败设置 没有更多  this.nomore = true; this.loading = false;
         // window.setTimeout(()=>{this.loading=false;
         // console.log(this.list);},5000)
-        
+
       }
       else{this.loading=false;}
       window.clearTimeout();
+    },
+    loadData() {
+      console.log("loadData")
+      Http.get(Apis.PAGE.SQUARE_PAGE).then((res) => {
+
+      })
     }
   }
 };

src/components/commons/TaskItem.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="task-item-container" >
+  <div class="task-item-container">
        <span class="col-xl-2 col-lg-3 col-md-4 col-sm-1">
         <img class="task-cover" src="@/assets/img/home_ban1.jpg">
       </span>
-      <span class="task-title col-md-2 col-sm-10">{{task.title}}</span>
-      <span class="col-md-1 col-sm-5 ">{{serviceType}}</span>
-      <span class="col-md-1 col-sm-5 ">¥{{task.price}}</span>
-      <span class="col-md-1 col-sm-5 ">{{taskStatus}}</span>
-      <span class="task-td">
-       <span class="btn btn-medium btn-info" @click="goToTaskDetail(task.projectId,taskId)">查看详情</span>
+    <span class="task-title col-md-2 col-sm-10">{{taskTable.title}}</span>
+    <span class="col-md-1 col-sm-5 ">{{serviceType}}</span>
+    <span class="col-md-1 col-sm-5 ">¥{{taskTable.price}}</span>
+    <!--<span class="col-md-1 col-sm-5 ">{{platformType}}</span>-->
+    <span class="col-md-1 col-sm-5 ">{{taskStatus}}</span>
+    <span class="task-td">
+       <span class="btn btn-medium btn-info" @click="goToTaskDetail(taskTable.projectId,taskTable.id)">查看详情</span>
        </span>
 
   </div>
@@ -17,57 +18,64 @@
 <script>
 import ServiceType from '@/constants/enum/service-type'
 import TaskStatus from '@/constants/enum/task-status'
+import PlatformType from '@/constants/enum/platform-type'
+
 export default {
-  name: "Task-Item",
+  name: 'Task-Item',
   props: {
-    taskId: Number
+    task: {}
   },
-  data() {
+  data () {
     return {
-      task: {
-        id: 1,
-        cover: "@/assets/img/home_ban2.png",
-        title: "多人聊天发送文件测试",
-        description: "任务描述文字xxxx",
-        price: "10",
-        serviceType: 0,
-        status: 1,
-        projectId:1123 
-      },
-      taskStatus:"进行中",
-      serviceType:""
-    }
-  },
-  mounted(){
-    this.taskStatus = TaskStatus[this.task.status];
-    this.serviceType = ServiceType[this.task.serviceType]
-  },
-  methods:{
-     goToTaskDetail(projectId,id){
-      this.$router.push({name: "Task", params: {projectId:projectId,taskId: id}})
+      taskTable: this.task,
+      taskStatus: TaskStatus[this.task.status],
+      serviceType: ServiceType[this.task.serviceType],
+      platformType: []
     }
+},
+mounted()
+{
+  this.taskStatus = TaskStatus[this.taskTable.status]
+  this.serviceType = ServiceType[this.taskTable.serviceType]
+  let plats = []
+  for (let i in this.taskTable.platform) {
+    plats.push(PlatformType[i])
+  }
+  this.platformType = plats
+  console.log(this.platformType)
+}
+,
+methods:{
+  goToTaskDetail(projectId, id)
+  {
+    this.$router.push({name: 'Task', params: {projectId: projectId, taskId: id}})
   }
-};
+}
+}
+
 </script>
 
 <style lang="less" scoped>
-.task-item-container {
-  padding: 20px;
-  border: 1px solid #eee;
-  margin: 15px 5px;
-  span{
-    display: inline-block;
+  .task-item-container {
+    padding: 20px;
+    border: 1px solid #eee;
+    margin: 15px 5px;
+    span {
+      display: inline-block;
+    }
+  }
+
+  .task-cover {
+    width: 200px;
+    height: 130px;
+    vertical-align: middle;
+  }
+
+  .task-title {
+    font-weight: 700;
+  }
+
+  .task-td {
+    padding: 15px;
   }
-}
-.task-cover {
-  width: 200px;
-  height:130px;
-  vertical-align: middle;
-}
-.task-title{
-  font-weight: 700;
-}
-.task-td{
-    padding:15px;
-}
 </style>

src/js/api.js

@@ -12,6 +12,7 @@ export default {
 
   },
   PAGE: {
-    HOME_PAGE: ''
+    HOME_PAGE: '',
+    SQUARE_PAGE: '',
   }
 }