dvcp_v2_wxcp_app/src/apps/AppWorkonline/AppWorkonline.vue

<template>
  <div class="workonline">
    <div class="search">
      <u-search class="serach_content" placeholder="请输入标题" :show-action="false" v-model="keyword" @clear="clearSearch" @search="search"></u-search>
    </div>

    <u-tabs :list="list" :is-scroll="false" :current="currentType" @change="change"></u-tabs>

    <template class="datass" 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">{{ item.processName }}</div>
          </view>

          <view class="u-body-item">
            <div class="plan">
              <span>审批进度：</span>

              <span class="business_status" :style="{ color: item.approvalStatus == 0 ? '#FF9B2B' : item.approvalStatus == 1 ? '#3078E1' : '#666666' }"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
            </div>
          </view>

          <view class="u-body-item">
            <div class="modetpye">
              <span>申请类型：</span>
              <span>{{ item.classificationName }}</span>
            </div>
          </view>

          <view class="u-body-item">
            <div class="applytime">
              <span>申请日期：</span>
              <span class="timeContent">{{ item.createTime }}</span>
            </div>
          </view>

          <view class="u-body-item">
            <div class="overtime">
              <span>完成日期：</span>
              <span class="timeContent">{{ item.overTime }}</span>
            </div>
          </view>

          <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>

      <u-loadmore :status="loadmore" color="#999" font-size="24" margin-top="32" margin-bottom="80" />
    </template>

    <AiEmpty description="没有数据" class="aiemptys" v-else> </AiEmpty>
  </div>
</template>

<script>
export default {
  name: 'AppWorkonline',
  appName: '网上办事',
  components: {},
  props: {},
  data() {
    return {
      list: [
        { name: '待我审批', type: 0 },
        { name: '我已审批', type: 1 },
        { name: '抄送我的', type: 3 },
        { name: '超时督办', type: 4 },
      ],
      currentType: 0,
      keyword: '',
      datas: {},
      listType: 0,
      current: 1,
      pages: 0,
    }
  },
  computed: {
    loadmore() {
      return this.pages <= this.current ? 'loading ' : 'nomore'
    },
  },
  watch: {},
  onLoad() {
    this.$dict.load('listApprovalStatusHb').then(() => {
      this.getList()
    })
  },
  onShow() {
    document.title = '网上办事'
  },
  mounted() {},
  methods: {
    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
          this.pages = res.data.pages
        }
      })
    },

    goDetail(item) {
      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.getListInit()
    },

    clearSearch() {
      this.keyword = ''
      this.getListInit()
    },
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style scoped lang="scss">
uni-page-body {
  background: #f5f5f5;
}
.workonline {
  background: #f5f5f5;
  .search {
    .serach_content {
      background-color: #fff;
      height: 104px;
      line-height: 104px;
      box-sizing: border-box;
      padding: 0 32px;
    }
  }

  .u-card {
    ::v-deep .u-card__head {
      padding: 0 !important;
    }
    ::v-deep .u-card__body {
      .body {
        position: relative;
        .u-body-item {
          .title {
            font-size: 32px;
            font-weight: 500;
            margin-bottom: 16px;
            width: 80%;
          }
          .plan,
          .modetpye,
          .applytime,
          .overtime {
            margin-top: 16px;
            font-size: 30px;
            color: #999999;
            .timeContent {
              color: #343d65;
            }
          }
        }
        img {
          position: absolute;
          right: 0;
          top: 0;
          width: 113px;
          height: 113px;
        }
      }
    }
  }

  .aiemptys {
    background: #f5f5f5;
  }
}
</style>