找到网上办事啦

src/mods/AppServiceOnline/serviceList.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="service">
+    <div class="header-tab">
+      <span :class="[currIndex === 1 ? 'active' : '']" @click="changeTab(1)">办事指南</span>
+      <span :class="[currIndex === 0 ? 'active' : '']" @click="changeTab(0)">网上办事</span>
+    </div>
+    <div class="service-list">
+      <div class="service-item" hover-class="bg-hover" @click="toDetail('./serviceNotice?id=' + item.id)" v-for="(item, index) in list" :key="index">
+        <div class="service-item__wrapper">
+          <h2>{{ item.processName }}</h2>
+          <i class="iconfont">&#xe6ae;</i>
+        </div>
+      </div>
+    </div>
+    <u-loadmore :status="loadingStatus" :margin-top="30" :margin-bottom="30" color="#999" font-size="26"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        id: '',
+        currIndex: 1,
+        title: '',
+        subTitle: '',
+        current: 0,
+        list: [],
+        loadingStatus: 'loadmore'
+      }
+    },
+
+    onLoad (query) {
+      this.id = query.id
+      this.getList()
+      uni.setNavigationBarTitle({
+        title: query.title
+      })
+    },
+
+    methods: {
+      changeTab (index) {
+        this.currIndex = index
+        this.list = []
+
+        this.getList()
+      },
+
+      getList() {
+        this.loadingStatus = 'loading'
+        this.$instance.post(`/app/approval-process-def/list-xcx?processType=${this.currIndex === 0 ? 0 : 2}`, null, {
+          params: {
+            size: 10000,
+            classificationId: this.id
+          },
+          withoutToken: true
+        }).then(res => {
+          if (res.code === 0) {
+            if (!res.data.records.length) {
+              this.loadingStatus = 'nomore'
+              return false
+            }
+
+            const data = res.data.records.map(item => {
+              return item
+            })
+            if (this.current === 0) this.list = []
+
+            this.list.push(...data)
+            this.current = this.current + 1
+            this.loadingStatus = 'loadmore'
+
+            if (this.list.length < 10) {
+              this.loadingStatus = 'nomore'
+            }
+          }
+        })
+      },
+
+      toDetail (url) {
+        // if (!this.info.phone) {
+        //   this.$dialog.confirm({
+        //     confirmText: '去绑定',
+        //     content: '您还未绑定手机号'
+        //   }).then(() => {
+        //     console.log(456)
+        //     this.$linkTo('/pages/phone/bingPhoneNumber?from=auth')
+        //   })
+
+        //   return false
+        // }
+
+        // if (this.info.status !== '2') {
+        //   this.$dialog.confirm({
+        //     confirmText: '去认证',
+        //     content: '您还未进行实名认证'
+        //   }).then(() => {
+        //     this.$linkTo('/pages/auth/authenticationInfo')
+        //   })
+
+        //   return false
+        // }
+
+        this.$linkTo(url)
+      },
+
+      getCheckInfo() {
+        this.$instance.post(`/app/appwechatuser/check`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+          }
+        })
+      }
+    },
+
+    onReachBottom() {
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .service {
+    padding-bottom: 40px;
+  }
+
+  .header-tab {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 11;
+    width: 100%;
+    align-items: center;
+    height: 106px;
+    line-height: 106px;
+    background: #4181FF;
+
+    span {
+      position: relative;
+      flex: 1;
+      text-align: center;
+      font-size: 28px;
+      color: rgba(#ffffff, 0.75);
+
+      &.active {
+        color: #fff;
+
+        &:after {
+          position: absolute;
+          bottom: 14px;
+          left: 50%;
+          width: 48px;
+          height: 4px;
+          background: #FFFFFF;
+          transform: translateX(-50%);
+          content: ' ';
+        }
+      }
+    }
+  }
+
+  .service-list {
+    padding-top: 106px;
+    background-color: #fff;
+
+    .service-item {
+      height: 116px;
+      padding: 0 32px;
+
+      &:last-child {
+        .service-item__wrapper {
+          border-bottom: none;
+        }
+      }
+
+      .service-item__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 116px;
+        border-bottom: 1px solid #D8DDE6;
+
+
+        h2 {
+          color: #333333;
+          font-size: 32px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        i {
+          position: relative;
+          right: -4px;
+          font-size: 36px;
+          color: #C9C9CD;
+        }
+      }
+    }
+  }
+</style>