Merge branch 'master' of gitlab.corp.qinqinxiaobao.com:frontend_vue/qqxb-self-service

src/views/FlexEmployee.vue

@@ -9,71 +9,71 @@
             <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>
-          <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 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>
-      <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.length > 20
-                    ? item.title.substring(0, 19) + "..."
-                    : item.title
-                }}
-              </h3>
-              <p>{{ item.createTime | format }}</p>
+      <van-popup
+        v-model="showPopup"
+        :overlay="!showPopup"
+        :close-on-click-overlay="!showPopup"
+        round
+        position="bottom"
+        :style="popupStyle"
+      >
+        <div class="close-box">
+          <img src="../assets/images/ic_unfold@2x.png" />
+        </div>
+        <div class="green-bg">
+          <div class="fe-list-box" @click="expand_click">
+            <div class="fe-list-title">
+              <h3>任务记录</h3>
             </div>
-            <div class="fe-list-child-right">
-              <div class="fe-list-child-right-desc">
-                <h3>￥{{ Number(item.paidSalary / 100).toFixed(2) }}</h3>
-                <p :style="matchColor(item.billStatus)">
-                  {{ item.billStatus }}
-                </p>
+            <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 > 20
+                      ? item.title.substring(0, 19) + "..."
+                      : item.title
+                  }}
+                </h3>
+                <p>{{ item.createTime | format }}</p>
               </div>
-              <img src="../assets/images/agent/next_gray.png" alt />
-            </div>
-          </a>
+              <div class="fe-list-child-right">
+                <div class="fe-list-child-right-desc">
+                  <h3>￥{{ Number(item.paidSalary).toFixed(2) }}</h3>
+                  <p :style="matchColor(item.billStatus)">
+                    {{ item.billStatus }}
+                  </p>
+                </div>
+                <img src="../assets/images/agent/next_gray.png" alt />
+              </div>
+            </a>
+          </div>
         </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