申购单空UI

src/views/applyfor/approval-form.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="approval-container">
+  <div class="approval-container flex flex-col flex-col-jcsp">
+    <div class="approval__header">
+      <van-icon name="circle" :size="18">
+        <span>全选</span>
+      </van-icon>
+    </div>
     <div class="approval__content">
       <van-list v-model="listLoading" :finished="finished" :finished-text="finishedText" @load="onLoadData"
         :immediate-check="false">
@@ -7,6 +12,9 @@
       </van-list>
       <my-empty v-show="showEmpty" tip="暂无数据" />
     </div>
+    <div class="btn-container">
+      <div class="btn-span">确定</div>
+    </div>
   </div>
 </template>
 
@@ -31,19 +39,38 @@ export default {
     this.__list__()
   },
   methods: {
+    onLoadData() {
+      this.__list__()
+    },
     async __list__() {
       try {
+        const THAT = this
+
         const params = {
+          ...THAT.pagination,
           group: 'form'
         }
         const result = await getRecordList(params)
         if (result.code === 1) {
-          console.log('%c record form list >>>', 'background: blue; color: #fff', result.data);
+          let list = result.data || []
+          this.listLoading = false
 
+          list = list.map(item => ({
+            ...item,
+          }))
+
+          if (list.length < THAT.pagination.page_num) THAT.finished = true
+          else {
+            THAT.pagination.page++
+          }
+          THAT.list = THAT.list.concat(list)
+          if (THAT.finished && !THAT.list.length) {
+            THAT.finishedText = ''
+            THAT.showEmpty = true
+          }
         }
       } catch (error) {
         console.log('%c __list__ >>>', 'background: blue; color: #fff', error);
-
       }
     }
   }
@@ -52,7 +79,20 @@ export default {
 
 <style lang="less" scoped>
 .approval {
-  &-container {}
+  &-container {
+    padding-top: 10px;
+    height: 100vh;
+  }
+
+  &__header {
+    background-color: #fff;
+    font-size: 16px;
+    padding: 14px 12px;
+
+    span {
+      margin-left: 10px;
+    }
+  }
 
   &__content {}
 }

src/views/approve/search.vue

@@ -29,8 +29,6 @@ import { getRecordList } from '@/api/approveinfo'
 import { getApproveList } from '@/api/approve'
 import { formatApproveItemRow } from '@/utils/approve-item'
 
-
-
 export default {
     name: 'search',
     components: {