update

src/views/FlexEmployee.vue

@@ -9,39 +9,38 @@
             <p>{{ birthday }}</p>
           </div>
         </div>
-        <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 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 }}</span>
+          </p>
+          <p>
+            <label>已收报酬</label>
+            <span>{{ receive_receivable }}</span>
+          </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"
+      <van-popup
+        v-model="showPopup"
+        :overlay="!showPopup"
+        :close-on-click-overlay="!showPopup"
+        round
+        position="bottom"
+        :style="popupStyle"
       >
-            <h3>{{ receive_receivable }}</h3>
-            <p>已收报酬</p>
-          </div>
-        </div>
+        <div class="close-box">
+          <img src="../assets/images/ic_unfold@2x.png" />
         </div>
         <div class="green-bg">
-        <div class="fe-list-box">
+          <div class="fe-list-box" @click="expand_click">
             <div class="fe-list-title">
               <h3>任务记录</h3>
             </div>
@@ -64,7 +63,7 @@
               </div>
               <div class="fe-list-child-right">
                 <div class="fe-list-child-right-desc">
-                <h3>￥{{ Number(item.paidSalary / 100).toFixed(2) }}</h3>
+                  <h3>￥{{ Number(item.paidSalary).toFixed(2) }}</h3>
                   <p :style="matchColor(item.billStatus)">
                     {{ item.billStatus }}
                   </p>
@@ -74,6 +73,7 @@
             </a>
           </div>
         </div>
+      </van-popup>
     </div>
     <div class="empty_data" v-if="showList == 0">
       <p>
@@ -81,22 +81,18 @@
         <br />暂无相关记录
       </p>
     </div>
+    <div class="white_slide"></div>
   </div>
 </template>
 
 <script lang='ts'>
+import { Popup } from "vant";
 import { Component, Vue } from "vue-property-decorator";
-// import { toMoney, formatDate, isNull } from "../utils/public";
 
 @Component({
-  // filters: {
-  //   money: (value: String, isSymbol: boolean, isConvertPoint: boolean) =>
-  //     toMoney(value, isSymbol, isConvertPoint),
-  //   format: (value: String, pattern: String) => {
-  //     return value.replace(/\d{2}:\d{2}:\d{2}/i, "");
-  //   },
-  //   isEmpty: (value: string) => isNull(value)
-  // }
+  components: {
+    [Popup.name]: Popup
+  }
 })
 export default class FlexEmployee extends Vue {
   private name: string = ""; //入参
@@ -109,7 +105,20 @@ export default class FlexEmployee extends Vue {
   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: "66%" };
+    } else {
+      return { height: "86%" };
+    }
+  }
+  private expand_click() {
+    this.expand = !this.expand;
+  }
   private toDetail(id: any): void {
     this.$router.push({ name: "FlexEmployeeDetial", query: { id } });
   }
@@ -155,6 +164,22 @@ export default class FlexEmployee extends Vue {
 </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;
@@ -170,19 +195,10 @@ export default class FlexEmployee extends Vue {
   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: 180px;
   padding: 20px 16px 0 16px;
 }
 .person-information-top {
@@ -300,4 +316,16 @@ export default class FlexEmployee extends Vue {
   text-align: right;
   // color: #077aec;
 }
+.close-box {
+  width: 100%;
+  height: 24px;
+  padding-top: 10px;
+  cursor: pointer;
+}
+.close-box img {
+  display: block;
+  width: 32px;
+  height: 4px;
+  margin: 0 auto;
+}
 </style>
\ No newline at end of file