dvcp_v2_wxcp_app/src/project/shandong10086/AppDocumentFlow/AppDocumentFlow.vue

<template>
  <div class="document-flow">
    <AiTopFixed>
      <header class="pad">
        <u-search placeholder="请输入公文名称" v-model="documentName" @clear="documentName='',getList()" @search="getList"
                  clearabled :show-action="false" height="64"></u-search>
      </header>
    </AiTopFixed>
    <div class="list pad" v-if="list.length">
      <div class="card" v-for="(item,index) in list" :key="index" @click="handleClick(item)">
        <u-row>
          <em v-if="item.redStatus==0"></em>
          <span>{{ item.documentName }}</span>
        </u-row>
        <u-gap height="16"></u-gap>
        <u-row>
          <label>公文类型：</label>
          <text style="color: #1365DD;">{{ $dict.getLabel("officialDocumentName", item.documentType) }}</text>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <label>登记人：</label>
          <text>{{ item.createUserName }}</text>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <label>登记日期：</label>
          <text>{{ item.createTime }}</text>
        </u-row>
        <img :src=" $cdn + tag(item.readType)" alt="">
      </div>
    </div>
    <AiEmpty v-else></AiEmpty>
    <u-loadmore :status="status" v-if="list.length"/>
  </div>
</template>

<script>

export default {
  name: "AppDocumentFlow",
  appName: "公文流转",
  data() {
    return {
      documentName: "",
      current: 1,
      list: [],
      status: "加载更多"
    }
  },
  onLoad() {
    this.$dict.load("officialDocumentName")
  },
  methods: {
    tag(status) {
      return {
        "0": 'common/1ps.png',
        "1": 'common/2cy.png'
      }[status]
    },
    getList() {
      this.$http.post("/app/appofficialdocumentinfo/appList", null, {
        params: {
          documentName: this.documentName,
          size: 10,
          current: this.current
        }
      }).then(res => {
        if (res && res.data) {
          if (this.current > 1 && this.current > res.data.pages) {
            this.status = "已经到底啦"
          }
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
        }
      })
    },
    handleClick({id}) {
      uni.navigateTo({
        url: "./detail?id=" + id
      })
    }
  },
  onShow() {
    this.getList()
  },
  onReachBottom() {
    this.current = this.current + 1;
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.document-flow {
  min-height: 100%;
  background: #F5F5F5;

  ::v-deep .content {
    padding: 0;
  }

  header {
    height: 112px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
  }

  .list {
    margin: 32px 0;

    .card {
      background: #FFFFFF;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 32px;
      position: relative;
      margin-bottom: 32px;

      .u-row {
        flex-wrap: nowrap !important;
      }

      em {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #FF4466;
        font-style: normal;
        margin-right: 8px;
        flex-shrink: 0;
      }

      span {
        font-size: 32px;
        font-weight: 600;
        color: #333333;
      }

      label {
        font-size: 30px;
        color: #999999;
      }

      text {
        font-size: 30px;
        color: #343D65;
      }

      img {
        width: 160px;
        height: 160px;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }

  .pad {
    box-sizing: border-box;
    padding: 32px 32px 0 32px;
  }
}
</style>