by vue

src/views/FlexEmployee.vue

@@ -4,7 +4,7 @@
     <div class="person-information">
       <div class="person-information-top">
         <div class="person-information-left">
-          <h3>小凶许</h3>
+          <h3>{{name}}</h3>
           <p>1996.01.01</p>
         </div>
         <div class="person-information-right">
@@ -35,64 +35,58 @@
         <h3>任务记录</h3>
       </div>
 
-      <a class="fe-list-child" href>
+      <a class="fe-list-child" href='javascript:void(0)' v-for="item in taskRecordList" :key="item.id" @click="toDetail(item.id)">
         <div class="fe-list-child-left">
-          <h3>市场推广-地推</h3>
-          <p>2020-04-01</p>
+          <h3>{{item.title}}</h3>
+          <p>{{item.date}}</p>
         </div>
         <div class="fe-list-child-right">
           <div class="fe-list-child-right-desc">
-            <h3>¥2000.00</h3>
-            <p>已接单</p>
-          </div>
-          <img src="../assets/images/agent/next_gray.png" alt />
-        </div>
-      </a>
-      <a class="fe-list-child" href>
-        <div class="fe-list-child-left">
-          <h3>市场推广-地推</h3>
-          <p>2020-04-01</p>
-        </div>
-        <div class="fe-list-child-right">
-          <div class="fe-list-child-right-desc">
-            <h3>¥2000.00</h3>
-            <p>进行中</p>
-          </div>
-          <img src="../assets/images/agent/next_gray.png" alt />
-        </div>
-      </a>
-      <a class="fe-list-child" href>
-        <div class="fe-list-child-left">
-          <h3>市场推广-地推</h3>
-          <p>2020-04-01</p>
-        </div>
-        <div class="fe-list-child-right">
-          <div class="fe-list-child-right-desc">
-            <h3>¥2000.00</h3>
-            <p>已拒回</p>
-          </div>
-          <img src="../assets/images/agent/next_gray.png" alt />
-        </div>
-      </a>
-      <a class="fe-list-child" href>
-        <div class="fe-list-child-left">
-          <h3>市场推广-地推</h3>
-          <p>2020-04-01</p>
-        </div>
-        <div class="fe-list-child-right">
-          <div class="fe-list-child-right-desc">
-            <h3>¥2000.00</h3>
-            <p>已完成</p>
+            <h3>¥{{item.price}}</h3>
+            <p>{{item.state}}</p>
           </div>
           <img src="../assets/images/agent/next_gray.png" alt />
         </div>
       </a>
+      
     </div>
   </div>
 </template>
 
-<script>
-export default {};
+<script lang='ts'>
+import {Component,Vue} from 'vue-property-decorator'
+
+@Component
+export default class FlexEmployee extends Vue  {
+  private name:string='小小JJ帅';
+
+  private taskRecordList:any=[
+    {id:1,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:2,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已完成'},
+    {id:3,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已拒回'},
+    {id:4,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'进行中'},
+    {id:5,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:6,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:7,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:8,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:9,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:10,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:11,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:12,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:13,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:14,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:15,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:16,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:17,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:18,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    {id:19,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'},
+    ]
+
+  private toDetail(id:any):void{
+    this.$router.push({name:'',query:{id:id}})
+  }
+
+};
 </script>
 
 <style lang="less">