<template> <!-- 1、已接单 进行中 #077AEC 2、已拒回 #FF9100 3、已完成 #95989E--> <div class="fe-bigbox"> <div > <div class="person-information"> <div class="person-information-top"> <div class="person-information-left"> <h3>{{ name }}</h3> <p>{{ birthday }}</p> </div> </div> <div class="info-card-bottom"> <p> <label>已接任务</label> <span>{{ accept_work }}</span> </p> <p> <label>完成任务</label> <span>{{ perform_work }}</span> </p> <p> <label>应收报酬</label> <span >¥{{ Payment_receivable ? Number(Payment_receivable).toFixed(2) : 0.0 | get_thousand_num }}</span > </p> <p> <label>已收报酬</label> <span >¥{{ receive_receivable ? Number(receive_receivable).toFixed(2) : 0.0 | get_thousand_num }}</span > </p> </div> </div> <van-popup v-model="showPopup" :overlay="!showPopup" :close-on-click-overlay="!showPopup" round position="bottom" :style="popupStyle" get-container=".fe-bigbox" > <div class="close-box" @click="expand_click"> <img src="../assets/images/ic_unfold@2x.png" /> </div> <div class="green-bg" v-if="showList == 1"> <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.length > 16 ? item.title.substring(0, 15) + "..." : item.title }} </h3> <p>{{ item.createTime | format }}</p> </div> <div class="fe-list-child-right"> <div class="fe-list-child-right-desc"> <h3> ¥{{ Number(item.paidSalary) ? Number(item.paidSalary).toFixed(2) : 0.0 | get_thousand_num }} </h3> <p :style="matchColor(item.billStatus)"> {{ item.billStatus }} </p> </div> <img src="../assets/images/agent/next_gray.png" alt /> </div> </a> </div> </div> <div class="empty_data" v-if="showList == 0"> <p> 您在亲亲小保未从事灵活用工的相关任务 <br />暂无相关记录 </p> </div> </van-popup> </div> </div> </template> <script lang='ts'> import { Popup } from "vant"; import { Component, Vue } from "vue-property-decorator"; @Component({ components: { [Popup.name]: Popup } }) export default class FlexEmployee extends Vue { private name: string = ""; //入参 private birthday: string = ""; // private accept_work: string = "0"; private perform_work: string = "0"; private Payment_receivable: string = "0.00"; private receive_receivable: string = "0.00"; private fullName: string = ""; private taskRecordList: any = null; private showList: number = -1; private showPopup: boolean = true; private expand: boolean = true; get popupStyle() { if (this.expand) { return { height: "63%" }; } else { return { height: "86%" }; } } private expand_click() { this.expand = !this.expand; } private toDetail(id: any): void { this.$router.push({ name: "FlexEmployeeDetial", query: { id } }); } get matchColor() { return (ibillStatus: string) => { if (ibillStatus === "进行中") { return { color: "#077aec" }; } else if (ibillStatus === "已拒回") { return { color: "#FF9100" }; } else if (ibillStatus === "已完成") { return { color: "#95989E" }; } else if (ibillStatus === "已接单") { return { color: "#077aec" }; } }; } mounted() { this.name = localStorage.getItem("name") as string; this.birthday = localStorage.getItem("birthday") as string; const idNo = window.atob(decodeURI(String(this.$route.query.id_no))); let params = { idNo: idNo //371327198511175134 }; this.$server.EmployeeService.getAgileWorker(params).then((res: any) => { console.log("res=", res); this.accept_work = res.alCount; // 已接任务 this.perform_work = res.comCount; // 完成任务 this.Payment_receivable = res.receivableSalary ? res.receivableSalary.toFixed(2) : 0.0; // 应收报酬 this.receive_receivable = res.receivedSalary ? res.receivedSalary.toFixed(2) : 0.0; // 已收报酬 this.taskRecordList = res.taskList == null ? [] : res.taskList; // 任务记录 this.taskRecordList.length > 0 ? (this.showList = 1) : (this.showList = 0); this.taskRecordList.length >= 3?this.expand = false:this.expand = true; localStorage.setItem("taskList", JSON.stringify(this.taskRecordList)); }); } } </script> <style lang="less"> .fe-bigbox { min-height: 667px; background: #19b370; } .info-card-bottom { margin-top: 40px; } .info-card-bottom p { color: #d3f1e4; font-size: 13px; line-height: 18px; margin-bottom: 8px; display: flex; justify-content: space-between; } .empty_data { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .empty_data p { font-size: 14px; font-weight: 400; color: #999999; line-height: 24px; text-align: center; margin-top: 156px; } .person-information { background-color: #19b370; width: 100%; padding: 20px 16px 0 16px; } .person-information-top { height: 60px; } .person-information-left { float: left; } .person-information-left h3 { color: #ffffff; font-size: 24px; line-height: 33px; } .person-information-left p { color: #ffffff; font-size: 14px; line-height: 20px; margin-top: 7px; } .person-information-right { float: right; } .person-information-right img { width: 60px; height: 60px; border-radius: 90%; } .person-information-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; } .person-information-bottom-child { flex: 1; text-align: center; } .person-information-bottom-child h3 { color: #ffffff; font-size: 18px; line-height: 24px; font-weight: 500; } .person-information-bottom-child p { color: #bcead6; font-size: 13px; line-height: 18px; margin-top: 6px; } .fe-list-box { width: 100%; background-color: #ffffff; border-radius: 12px 12px 0px 0px; padding: 0 16px; height: 100%; } .fe-list-title { width: 100%; height: 52px; border-bottom: 1px solid #ebecf0; } .fe-list-title h3 { color: #3d4047; font-size: 14px; line-height: 52px; font-weight: 500; } .fe-list-child { display: block; height: 77px; border-bottom: 1px solid #ebecf0; display: flex; justify-content: space-between; } .fe-list-child-left h3 { color: #3d4047; font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 15px; height: 22px; } .fe-list-child-left p { color: #95989e; font-size: 13px; line-height: 18px; margin-top: 6px; } .fe-list-child-right { display: flex; justify-content: center; align-items: center; } .fe-list-child-right img { width: 9px; height: 14px; margin-left: 7px; } .fe-list-child-right-desc { height: 100%; } .fe-list-child-right h3 { color: #3d4047; font-size: 16px; line-height: 22px; font-weight: 500; text-align: right; margin-top: 15px; } .fe-list-child-right p { font-size: 13px; line-height: 18px; font-weight: 400; margin-top: 6px; text-align: right; // color: #077aec; } .close-box { width: 100%; height: 24px; padding-top: 10px; padding-bottom: 10px; cursor: pointer; } .close-box img { display: block; width: 32px; height: 4px; margin: 0 auto; } .van-popup--bottom.van-popup--round { border-radius: 0.53333rem 0.53333rem 0 0; } .van-popup--bottom { bottom: 0; left: 0; width: 100%; } .van-popup { position: fixed; max-height: 100%; overflow-y: auto; background-color: #fff; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-overflow-scrolling: touch; } </style>