Skip to content

frontend / qqxb-self-service

Go to a project
Commit ab53d563 by e
Options

updata

parent bccec4a2
Inline Side-by-side
Showing with 214 additions and 46 deletions
src/views/FlexEmployee.vue
<template> <template>
<!-- 1、已接单 进行中 #077AEC 2、已拒回 #FF9100 3、已完成 #95989E--> <!-- 1、已接单 进行中 #077AEC 2、已拒回 #FF9100 3、已完成 #95989E-->
<div class="fe-bigbox"> <div class="fe-bigbox">
<div v-if="taskRecordList.length>0">
<div class="person-information"> <div class="person-information">
<div class="person-information-top"> <div class="person-information-top">
<div class="person-information-left"> <div class="person-information-left">
<h3>{{name}}</h3> <h3>{{name}}</h3>
<p>1996.01.01</p> <p>{{birthday}}</p>
</div> </div>
<div class="person-information-right"> <div class="person-information-right">
<img src="../assets/images/agent/123.jpg" alt /> <img src="../assets/images/agent/123.jpg" alt />
...@@ -13,29 +14,36 @@ ...@@ -13,29 +14,36 @@
</div> </div>
<div class="person-information-bottom"> <div class="person-information-bottom">
<div class="person-information-bottom-child" id="person-information-yjrw"> <div class="person-information-bottom-child" id="person-information-yjrw">
<h3>10</h3> <h3>{{accept_work}}</h3>
<p>已接任务</p> <p>已接任务</p>
</div> </div>
<div class="person-information-bottom-child" id="person-information-wcrw"> <div class="person-information-bottom-child" id="person-information-wcrw">
<h3>2</h3> <h3>{{perform_work}}</h3>
<p>完成任务</p> <p>完成任务</p>
</div> </div>
<div class="person-information-bottom-child" id="person-information-ysbc"> <div class="person-information-bottom-child" id="person-information-ysbc">
<h3>12236.36</h3> <h3>{{Payment_receivable}}</h3>
<p>应收报酬</p> <p>应收报酬</p>
</div> </div>
<div class="person-information-bottom-child" id="person-information-yysbc"> <div class="person-information-bottom-child" id="person-information-yysbc">
<h3>2236.36</h3> <h3>{{receive_receivable}}</h3>
<p>已收报酬</p> <p>已收报酬</p>
</div> </div>
</div> </div>
</div> </div>
<div class="green-bg">
<div class="fe-list-box"> <div class="fe-list-box">
<div class="fe-list-title"> <div class="fe-list-title">
<h3>任务记录</h3> <h3>任务记录</h3>
</div> </div>
<a class="fe-list-child" href='javascript:void(0)' v-for="item in taskRecordList" :key="item.id" @click="toDetail(item.id)"> <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"> <div class="fe-list-child-left">
<h3>{{item.title}}</h3> <h3>{{item.title}}</h3>
<p>{{item.date}}</p> <p>{{item.date}}</p>
...@@ -48,52 +56,200 @@ ...@@ -48,52 +56,200 @@
<img src="../assets/images/agent/next_gray.png" alt /> <img src="../assets/images/agent/next_gray.png" alt />
</div> </div>
</a> </a>
</div>
</div>
</div>
<div class="empty_data" v-else>
<p>
您在亲亲小保未从事灵活用工的相关任务
<br />暂无相关记录
</p>
</div> </div>
</div> </div>
</template> </template>
<script lang='ts'> <script lang='ts'>
import {Component,Vue} from 'vue-property-decorator' import { Component, Vue } from "vue-property-decorator";
@Component @Component
export default class FlexEmployee extends Vue { export default class FlexEmployee extends Vue {
private name:string='小小JJ帅'; private name: string = "迪丽热巴";
private birthday: string = "1987-10-16";
private taskRecordList:any=[ private accept_work: string = "999";
{id:1,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, private perform_work: string = "999";
{id:2,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已完成'}, private Payment_receivable: string = "9999.99";
{id:3,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已拒回'}, private receive_receivable: string = "9999.99";
{id:4,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'进行中'}, private taskRecordList: any = [
{id:5,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, {
{id:6,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, id: 1,
{id:7,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, title: "市场推广-地推",
{id:8,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, date: "2020-02-02",
{id:9,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, price: "9999.99",
{id:10,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, 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: 2,
{id:14,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, title: "市场推广-地推",
{id:15,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, date: "2020-02-02",
{id:16,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, price: "9999.99",
{id:17,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, state: "已完成"
{id:18,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, },
{id:19,title:'市场推广-地推',date:'2020-02-02',price:'9999.99',state:'已接单'}, {
] id: 3,
title: "市场推广-地推",
private toDetail(id:any):void{ date: "2020-02-02",
this.$router.push({name:'',query:{id:id}}) 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: "FlexEmployeeDetial", query: { id: id } });
}
}
</script> </script>
<style lang="less"> <style lang="less">
.empty_data {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.empty_data p {
font-size: 14px;
font-weight: 400;
color: rgba(149, 152, 158, 1);
line-height: 24px;
text-align: center;
margin-top: 256px;
}
.green-bg {
background-color: #19b370;
position: absolute;
top: 180px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: auto;
}
.person-information { .person-information {
background-color: #19b370; background-color: #19b370;
width: 100%; width: 100%;
height: 256px; height: 180px;
padding: 20px 16px 0 16px; padding: 20px 16px 0 16px;
} }
.person-information-top { .person-information-top {
...@@ -148,8 +304,6 @@ export default class FlexEmployee extends Vue { ...@@ -148,8 +304,6 @@ export default class FlexEmployee extends Vue {
background-color: #ffffff; background-color: #ffffff;
border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px;
padding: 0 16px; padding: 0 16px;
margin-top: -76px;
min-height: 76px;
} }
.fe-list-title { .fe-list-title {
width: 100%; width: 100%;
......
src/views/FlexEmployeeDetial.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="fe-detial-box"> <div class="fe-detial-box">
<div class="fe-detial-top"> <div class="fe-detial-top">
<h4>任务报酬</h4> <h4>任务报酬</h4>
<h3>+8,000.22</h3> <h3>+{{money}}</h3>
<p>待发放</p> <p>{{status}}</p>
</div> </div>
<div class="fe-detial-bottom"> <div class="fe-detial-bottom">
<div class="fe-detial-bottom-title"> <div class="fe-detial-bottom-title">
...@@ -13,17 +13,31 @@ ...@@ -13,17 +13,31 @@
<p>收款账户</p> <p>收款账户</p>
</div> </div>
<div class="fe-detial-bottom-detial"> <div class="fe-detial-bottom-detial">
<p>天津有米科技有限公司</p> <p>{{company}}</p>
<p>市场推广-地推</p> <p>{{task_count}}</p>
<p>2019-11-12</p> <p>{{date}}</p>
<p>622254889999888900</p> <p>{{account}}</p>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script lang="ts">
export default {}; import {Component,Vue} from 'vue-property-decorator'
@Component
export default class FlexEmployee extends Vue {
private money:number=9999.99;
private status:string='待发放';
private company:string='天津有米科技有限公司';
private task_count:string='市场推广-地推';
private date:string='2020-5-29';
private account:string='622254889999888900'
private toDetail(id:any):void{
this.$router.push({name:'FlexEmployeeDetial',query:{id:id}})
}
};
</script> </script>
<style lang="less"> <style lang="less">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment