办事

src/apps/AppWorkonline/AppWorkonline.vue

@@ -4,42 +4,61 @@
       <u-search class="serach_content" placeholder="请输入标题" :show-action="false" v-model="keyword" @clear="clearSearch" @search="search"></u-search>
     </div>
 
-    <template v-if="datas.length == 0">
-      <u-card v-for="(item, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
+    <u-tabs :list="list" :is-scroll="false" :current="currentType" @change="change"></u-tabs>
+
+    <template v-if="datas.length > 0">
+      <u-card v-for="(item, index) in datas" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
         <view class="body" slot="body">
+          <!-- 审批名称 -->
           <view class="u-body-item">
-            <div class="title">基本养老保险灵活就业人员新参保业务</div>
+            <div class="title">{{ item.processName }}</div>
           </view>
 
           <view class="u-body-item">
             <div class="plan">
               <span>审批进度：</span>
-              <span>审批中</span>
+
+              <span class="business_status" v-if="item.approvalStatus == 0"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
+
+              <!-- end -->
+              <span class="business_status_blue" v-if="item.approvalStatus == 1"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
+
+              <!-- false -->
+              <span class="business_status_gray" v-if="item.approvalStatus == 2">
+                {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}
+              </span>
             </div>
           </view>
 
           <view class="u-body-item">
             <div class="modetpye">
               <span>申请类型：</span>
-              <span>社会保障</span>
+              <span>{{ item.classificationName }}</span>
             </div>
           </view>
 
           <view class="u-body-item">
             <div class="applytime">
               <span>申请日期：</span>
-              <span class="timeContent">2021-01-21 14:30</span>
+              <span class="timeContent">{{ item.createTime }}</span>
             </div>
           </view>
 
           <view class="u-body-item">
             <div class="overtime">
               <span>完成日期：</span>
-              <span class="timeContent">2021-01-21 14:30</span>
+              <span class="timeContent">{{ item.overTime }}</span>
             </div>
           </view>
 
-          <img src="../AppWorkonline/components/end.png" alt="" />
+          <span class="icon">
+            <!-- ing -->
+            <img src="./components/ing.png" alt="" v-if="item.approvalStatus == 0" />
+            <!-- end -->
+            <img src="./components/end.png" alt="" v-if="item.approvalStatus == 1" />
+            <!-- false -->
+            <img src="./components/reject.png" alt="" v-if="item.approvalStatus == 2" />
+          </span>
         </view>
       </u-card>
 
@@ -52,43 +71,75 @@
 
 <script>
 export default {
-  name: 'workonline',
+  name: 'WorkOnline',
   appName: '网上办事',
+  // 组件
   components: {},
   props: {},
   data() {
     return {
-      datas: [],
+      list: [
+        { name: '待我审批', type: 0 },
+        { name: '我已审批', type: 1 },
+        { name: '抄送我的', type: 3 },
+        { name: '超时督办', type: 4 },
+      ],
+      currentType: 0, // 0待我审批 1已审批 2抄送我的 3超时
       keyword: '',
+      datas: {},
+      listType: 0,
+      current: 1,
     }
   },
+  // 计算
   computed: {},
+  // 监听
   watch: {},
+  // 实例创建后
   created() {
-    this.$dict.load('').then(() => {
+    // 字典
+    this.$dict.load('listApprovalStatusHb').then(() => {
+      this.dictList = this.$dict.getDict('listApprovalStatusHb')
       this.getList()
     })
   },
+  // 实例渲染后
   mounted() {},
+  // 方法
   methods: {
-    getList() {},
+    getList() {
+      this.$http.post(`/app/approv-alapply-info/list?listType=${this.listType}&current=${this.current}&param=${this.keyword}`).then((res) => {
+        if (res?.code == 0) {
+          this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+        }
+      })
+    },
 
-    goDetail(item, indexs) {
-      console.log(item, indexs)
-      var id = '11'
-      uni.navigateTo({ url: `./detail?id=${id}` })
+    // 跳转页面的id
+    goDetail(item) {
+      console.log(1)
+      uni.navigateTo({ url: `./detail?id=${item.id}&listType=${this.listType}` })
+    },
+
+    change(index) {
+      this.currentType = index
+      this.listType = this.list[index].type
+      this.getListInit()
+    },
+
+    getListInit() {
+      this.current = 1
+      this.getList()
     },
 
     search(e) {
       this.keyword = e
-      this.current = 1
-      this.getList()
+      this.getListInit()
     },
 
     clearSearch() {
       this.keyword = ''
-      this.current = 1
-      this.getList()
+      this.getListInit()
     },
   },
 }
@@ -96,10 +147,9 @@ export default {
 
 <style scoped lang="scss">
 .workonline {
-  height: 100%;
   .search {
-    background-color: #fff;
     .serach_content {
+      background-color: #fff;
       height: 104px;
       line-height: 104px;
       box-sizing: border-box;
@@ -139,27 +189,5 @@ export default {
       }
     }
   }
-
-  .card {
-    margin: 32px 32px 0 32px;
-    padding: 30px 0 40px 30px;
-    background: #fff;
-    .title {
-      font-size: 32px;
-      font-weight: 500;
-      margin-bottom: 16px;
-    }
-    .plan,
-    .modetpye,
-    .applytime,
-    .overtime {
-      margin-top: 16px;
-      font-size: 30px;
-      color: #999999;
-      .timeContent {
-        color: #343d65;
-      }
-    }
-  }
 }
 </style>