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 250 additions and 82 deletions
src/views/FlexEmployee.vue
<template>
<!-- 1、已接单 进行中 #077AEC 2、已拒回 #FF9100 3、已完成 #95989E-->
<div class="fe-bigbox">
<div class="person-information">
<div class="person-information-top">
<div class="person-information-left">
<h3>{{name}}</h3>
<p>1996.01.01</p>
<div v-if="taskRecordList.length>0">
<div class="person-information">
<div class="person-information-top">
<div class="person-information-left">
<h3>{{name}}</h3>
<p>{{birthday}}</p>
</div>
<div class="person-information-right">
<img src="../assets/images/agent/123.jpg" alt />
</div>
</div>
<div class="person-information-right">
<img src="../assets/images/agent/123.jpg" alt />
<div class="person-information-bottom">
<div class="person-information-bottom-child" id="person-information-yjrw">
<h3>{{accept_work}}</h3>
<p>已接任务</p>
</div>
<div class="person-information-bottom-child" id="person-information-wcrw">
<h3>{{perform_work}}</h3>
<p>完成任务</p>
</div>
<div class="person-information-bottom-child" id="person-information-ysbc">
<h3>{{Payment_receivable}}</h3>
<p>应收报酬</p>
</div>
<div class="person-information-bottom-child" id="person-information-yysbc">
<h3>{{receive_receivable}}</h3>
<p>已收报酬</p>
</div>
</div>
</div>
<div class="person-information-bottom">
<div class="person-information-bottom-child" id="person-information-yjrw">
<h3>10</h3>
<p>已接任务</p>
</div>
<div class="person-information-bottom-child" id="person-information-wcrw">
<h3>2</h3>
<p>完成任务</p>
</div>
<div class="person-information-bottom-child" id="person-information-ysbc">
<h3>12236.36</h3>
<p>应收报酬</p>
</div>
<div class="person-information-bottom-child" id="person-information-yysbc">
<h3>2236.36</h3>
<p>已收报酬</p>
<div class="green-bg">
<div class="fe-list-box">
<div class="fe-list-title">
<h3>任务记录</h3>
</div>
<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>{{item.title}}</h3>
<p>{{item.date}}</p>
</div>
<div class="fe-list-child-right">
<div class="fe-list-child-right-desc">
<h3>¥{{item.price}}</h3>
<p>{{item.state}}</p>
</div>
<img src="../assets/images/agent/next_gray.png" alt />
</div>
</a>
</div>
</div>
</div>
<div class="fe-list-box">
<div class="fe-list-title">
<h3>任务记录</h3>
</div>
<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>{{item.title}}</h3>
<p>{{item.date}}</p>
</div>
<div class="fe-list-child-right">
<div class="fe-list-child-right-desc">
<h3>¥{{item.price}}</h3>
<p>{{item.state}}</p>
</div>
<img src="../assets/images/agent/next_gray.png" alt />
</div>
</a>
<div class="empty_data" v-else>
<p>
您在亲亲小保未从事灵活用工的相关任务
<br />暂无相关记录
</p>
</div>
</div>
</template>
<script lang='ts'>
import {Component,Vue} from 'vue-property-decorator'
import { Component, Vue } from "vue-property-decorator";
@Component
export default class FlexEmployee extends Vue {
private name:string='小小JJ帅';
export default class FlexEmployee extends Vue {
private name: string = "迪丽热巴";
private birthday: string = "1987-10-16";
private accept_work: string = "999";
private perform_work: string = "999";
private Payment_receivable: string = "9999.99";
private receive_receivable: string = "9999.99";
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 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}})
private toDetail(id: any): void {
this.$router.push({ name: "FlexEmployeeDetial", query: { id: id } });
}
};
}
</script>
<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 {
background-color: #19b370;
width: 100%;
height: 256px;
height: 180px;
padding: 20px 16px 0 16px;
}
.person-information-top {
......@@ -148,8 +304,6 @@ export default class FlexEmployee extends Vue {
background-color: #ffffff;
border-radius: 12px 12px 0px 0px;
padding: 0 16px;
margin-top: -76px;
min-height: 76px;
}
.fe-list-title {
width: 100%;
......
src/views/FlexEmployeeDetial.vue
......@@ -2,8 +2,8 @@
<div class="fe-detial-box">
<div class="fe-detial-top">
<h4>任务报酬</h4>
<h3>+8,000.22</h3>
<p>待发放</p>
<h3>+{{money}}</h3>
<p>{{status}}</p>
</div>
<div class="fe-detial-bottom">
<div class="fe-detial-bottom-title">
......@@ -13,17 +13,31 @@
<p>收款账户</p>
</div>
<div class="fe-detial-bottom-detial">
<p>天津有米科技有限公司</p>
<p>市场推广-地推</p>
<p>2019-11-12</p>
<p>622254889999888900</p>
<p>{{company}}</p>
<p>{{task_count}}</p>
<p>{{date}}</p>
<p>{{account}}</p>
</div>
</div>
</div>
</template>
<script>
export default {};
<script lang="ts">
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>
<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