我是灵活用工

src/utils/public.ts

@@ -510,6 +510,16 @@ export function CheckPlatform() {
 }
 
 /**
+ * 
+ * 判断是否为空，为空默认为0
+ * @param info 数据
+ * 
+ */
+export function isNull(info:any){  
+   return info == null ? (info = "0") : (info = info); 
+}
+
+/**
  * 金钱转换
  * @param num 要转换的金钱
  * @param isSymbol 是否显示金钱符号 默认：true

src/views/FlexEmployee.vue

@@ -14,19 +14,19 @@
         </div>
         <div class="person-information-bottom">
           <div class="person-information-bottom-child" id="person-information-yjrw">
-            <h3>{{accept_work}}</h3>
+            <h3>{{accept_work | isEmpty}}</h3>
             <p>已接任务</p>
           </div>
           <div class="person-information-bottom-child" id="person-information-wcrw">
-            <h3>{{perform_work}}</h3>
+            <h3>{{perform_work | isEmpty}}</h3>
             <p>完成任务</p>
           </div>
           <div class="person-information-bottom-child" id="person-information-ysbc">
-            <h3>{{Payment_receivable | money(true,false)}}</h3>
+            <h3>{{Payment_receivable | money(true,false) | isEmpty}}</h3>
             <p>应收报酬</p>
           </div>
           <div class="person-information-bottom-child" id="person-information-yysbc">
-            <h3>{{receive_receivable}}</h3>
+            <h3>{{receive_receivable | isEmpty}}</h3>
             <p>已收报酬</p>
           </div>
         </div>
@@ -50,7 +50,7 @@
             <div class="fe-list-child-right">
               <div class="fe-list-child-right-desc">
                 <h3>{{item.paidSalary | money(true,true)}}</h3>
-                <p>{{item.billStatus}}</p>
+                <p :style="matchColor(item.billStatus)">{{item.billStatus}}</p>
               </div>
               <img src="../assets/images/agent/next_gray.png" alt />
             </div>
@@ -58,7 +58,7 @@
         </div>
       </div>
     </div>
-    <div class="empty_data" v-else> 
+    <div class="empty_data" v-else>
       <p>
         您在亲亲小保未从事灵活用工的相关任务
         <br />暂无相关记录
@@ -68,9 +68,8 @@
 </template>
 
 <script lang='ts'>
-// let moment = require("moment");
 import { Component, Vue } from "vue-property-decorator";
-import { toMoney, formatDate } from "../utils/public";
+import { toMoney, formatDate, isNull } from "../utils/public";
 
 @Component({
   filters: {
@@ -78,12 +77,14 @@ import { toMoney, formatDate } from "../utils/public";
       toMoney(value, isSymbol, isConvertPoint),
     format: (value: String, pattern: String) => {
       return value.replace(/\d{2}:\d{2}:\d{2}/i, "");
-    }
+    },
+    isEmpty: (value: string) => isNull(value)
   }
 })
 export default class FlexEmployee extends Vue {
   private name: string = "迪丽热巴";
   private birthday: string = "1987-10-16";
+
   private accept_work: string = "";
   private perform_work: string = "";
   private Payment_receivable: string = "";
@@ -94,22 +95,31 @@ export default class FlexEmployee extends Vue {
   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() {
     let params = {
       idNo: this.$route.query.id_no
     };
     this.$server.EmployeeService.getAgileWorker(params).then((res: any) => {
-      console.log("res=" + JSON.stringify(res));
-      res.alCount == null
-        ? (this.accept_work = "0")
-        : (this.accept_work = res.alCount); // 已结任务
-      res.comCount == null
-        ? (this.perform_work = "0")
-        : (this.perform_work = res.comCount); // 完成任务
+      console.log(res);
+      this.accept_work = res.alCount; // 已接任务
+      this.perform_work = res.comCount; // 完成任务
       this.Payment_receivable = res.receivableSalary; // 应收报酬
-      res.receivedSalary == null
-        ? (this.receive_receivable = "0")
-        : (this.receive_receivable = res.receivedSalary); // 已收报酬
+      this.receive_receivable = res.receivedSalary; // 已收报酬
       this.taskRecordList = res.taskList; // 任务记录
       localStorage.setItem("taskList", JSON.stringify(res.taskList));
     });
@@ -261,5 +271,6 @@ export default class FlexEmployee extends Vue {
   font-weight: 400;
   margin-top: 6px;
   text-align: right;
+  // color: #077aec;
 }
 </style>
\ No newline at end of file

src/views/FlexEmployeeDetial.vue

@@ -3,7 +3,7 @@
     <div class="fe-detial-top">
       <h4>任务报酬</h4>
       <h3>+{{item.paidSalary | money}}</h3>
-      <p>{{item.status}}</p>
+      <p :style="matchColor(item.status)">{{item.status}}</p>
     </div>
     <div class="fe-detial-bottom">
       <div class="fe-detial-bottom-title">
@@ -32,8 +32,25 @@ import { toMoney } from "@/utils/public";
   }
 })
 export default class FlexEmployee extends Vue {
+  
   private item: any;
 
+  get matchColor() {
+    return (ibillStatus: string) => {
+      if (ibillStatus === "进行中") {
+        return { color: "#077aec" };
+      } else if (ibillStatus === "已拒回") {
+        return { color: "#FF9100" };
+      } else if (ibillStatus === "已完成") {
+        return { color: "#077aec" };
+      } else if (ibillStatus === "已接单") {
+        return { color: "#077aec" };
+      } else if (ibillStatus === "待发放") {
+        return { color: "#077aec" };
+      }
+    };
+  }
+
   created() {
     let id = this.$route.query.id;
     let task_info = localStorage.getItem("taskList");