办事

src/apps/AppWalkask/AppWalkask.vue

@@ -2,23 +2,19 @@
   <div class="AppWalkask">
     <template v-if="isList">
       <div class="header-top">
-        <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6"
-                inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+        <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
       </div>
 
       <div class="header-middle">
         <div class="currentLeft" v-if="currentTabs == 0">
           <div class="currentLeft-top">
             <div class="left">
-              <img src="./components/images/icon2.png" alt=""/>
+              <img src="./components/images/icon2.png" alt="" />
 
-              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect"
-                            style="color: #fff"></AiAreaPicker>
+              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"></AiAreaPicker>
             </div>
 
-            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF"
-                      search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch"
-                      @clear="handerClear"></u-search>
+            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
           </div>
 
           <template v-if="data.length > 0">
@@ -33,8 +29,7 @@
                 <div class="cards-hint">{{ item.description }}</div>
 
                 <div class="imgs">
-                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i"
-                       @click.stop="previewImage(item.images, items.url)"/>
+                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" @click.stop="previewImage(item.images, items.url)" />
                 </div>
 
                 <div class="cards-bottom">
@@ -60,15 +55,12 @@
         <div class="currentRight" v-if="currentTabs == 1">
           <div class="currentLeft-top">
             <div class="left">
-              <img src="./components/images/icon2.png" alt=""/>
+              <img src="./components/images/icon2.png" alt="" />
 
-              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect"
-                            style="color: #fff"></AiAreaPicker>
+              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"></AiAreaPicker>
             </div>
 
-            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF"
-                      search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch"
-                      @clear="handerClear"></u-search>
+            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
           </div>
 
           <template v-if="data.length > 0">
@@ -83,8 +75,7 @@
                 <div class="cards-hint">{{ item.description }}</div>
 
                 <div class="imgs">
-                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i"
-                       @click.stop="previewImage(item.images, items.url)"/>
+                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" @click.stop="previewImage(item.images, items.url)" />
                 </div>
 
                 <div class="cards-bottom">
@@ -108,11 +99,10 @@
         </div>
       </div>
 
-      <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true"
-               :show-title="false" @confirm="delet"></u-modal>
+      <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
 
       <AiFixedBtn>
-        <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="goDetail()"/>
+        <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="goDetail()" />
       </AiFixedBtn>
     </template>
 
@@ -121,7 +111,7 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import add from './add.vue'
 import detail from './detail.vue'
 
@@ -157,38 +147,38 @@ export default {
       deletId: '',
     }
   },
-  computed: {...mapState(['user'])},
+  computed: { ...mapState(['user']) },
   created() {
     this.areaId = this.user.areaId
     this.getList()
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     getList() {
       this.$http
-      .post('/app/appvisitvondolence/list', null, {
-        params: {
-          size: 6,
-          current: this.current,
-          areaId: this.areaId,
-          createUserId: this.currentTabs == 1 ? this.user.id : '',
-          title: this.keyword,
-        },
-      })
-      .then((res) => {
-        if (res.code == 0) {
-          this.data = res.data.records
-          if (this.data) {
-            this.data.map((item) => {
-              if (item.images) {
-                item.images = JSON.parse(item.images || '[]')
-              }
-              return item
-            })
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+            areaId: this.areaId,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+            title: this.keyword,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+
+            if (this.data) {
+              this.data.map((item) => {
+                if (item.images) {
+                  item.images = JSON.parse(item.images || '[]')
+                }
+                return item
+              })
+            }
           }
-        }
-      })
+        })
     },
 
     areaSelect(e) {

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>