dvcp_v2_wxcp_app/src/pages/snapshot/snapshot.vue

<template>
  <div class="snapshot">
    <div class="banner">
      <picker :range="dictList" @change="bindPickerChange" range-key="dictName">
        <div class="picker">
          {{ reportType }}
          <u-icon
              name="arrow-down"
              :custom-style="{ margin: '0 4px' }"
          ></u-icon>
        </div>
      </picker>
      <u-search
          placeholder="请输入标题"
          :show-action="false"
          v-model="keyword"
          @clear="search"
          @search="search"
      />
    </div>
    <u-tabs
        class="nav"
        :list="tabs"
        :is-scroll="false"
        :current="currentType"
        font-size="32"
        bar-width="192"
        height="96"
        @change="handleTabClick"
    />
    <div class="body" v-if="eventList.length > 0">
      <div
          class="item"
          v-for="(item, index) in eventList"
          :key="index"
          @click="detail(item)"
      >
        <u-row justify="between">
          <u-row>
            <img
                class="avatar"
                :src="item.portrait ? item.portrait : $cdn + 'other/tx.png'"
                alt=""/>
            <div class="wrap">
              <span class="name">{{ item.nickName }}</span>
              <span class="date">{{ item.createTime }}</span>
            </div>
          </u-row>
          <u-row>
            <u-icon :name="$cdn + 'Location2@2x.png'" :custom-style="{width:'20px',height:'20px'}"></u-icon>
            <span class="date">{{ item.areaName }}</span>
          </u-row>
        </u-row>
        <div class="content">
          <span class="text">
            <span class="targ" v-if="item.reportType">{{
                $dict.getLabel('atWillReportTypeForCp', item.reportType)
              }}</span>
            {{ item.explain }}</span>
        </div>
        <div class="photos">
          <img
              :src="photo.url"
              v-for="(photo, idx) in item.files.slice(0,3)"
              :key="idx"
              @click.stop="previewImage(index, idx)"
          />
        </div>
      </div>
    </div>
    <AiEmpty v-else/>
  </div>
</template>

<script>
import AiEmpty from '../../components/AiEmpty'
import {mapState} from "vuex"

export default {
  name: "snapshot",
  components: {AiEmpty},
  data() {
    return {
      dictList: [],
      index: 0,
      keyword: '',
      currentCategory: '',
      currentType: 0,
      reportType: '上报类型',
      reportIndex: '',
      pageNum: 1,
      pages: 2,
      eventList: [],
    }
  },

  onShow() {
    this.$dict.load('atWillReportTypeForCp').then(() => {
      this.dictList = this.$dict.getDict('atWillReportTypeForCp')
      this.getList()
    })
  },

  methods: {
    detail(item) {
      uni.navigateTo({
        url: "/pages/snapshot/snapshotDetail?id=" + item.id
      })
    },
    bindPickerChange(e) {
      this.pageNum = 1;
      this.pages = 2;
      let index = e.detail.value
      this.reportType = this.dictList[index].dictName
      this.reportIndex = index
      this.getList()
    },
    handleTabClick(i) {
      this.currentType = i
      this.pageNum = 1;
      this.pages = 2;
      this.getList()
    },
    search() {
      this.pageNum = 1;
      this.pages = 2;
      this.getList()
    },
    previewImage(index, idx) {
      uni.previewImage({
        urls: this.eventList[index]['files'].map(e => e.url),
        current: this.eventList[index]['files'][idx].url
      })
    },
    getList() {
      if (this.pageNum > this.pages) return
      this.$http.post(`/app/appreportatwillinfo/list`, null, {
        params: {
          current: this.pageNum,
          size: 10,
          status: this.currentType,
          reportType: this.reportIndex == 6 ? null : this.reportIndex,
          address: this.keyword,
          areaId: this.user?.areaId
        }
      }).then(res => {
        if (res?.code == 0) {
          const eventList = this.pageNum > 1 ? [...this.eventList, ...res.data.records] : res.data.records
          this.pages = Math.ceil(res.data.total / 10)
          this.eventList = eventList
        }
      })
    }
  },

  onReachBottom() {
    this.pageNum = this.pageNum + 1
    this.getList()
  },

  computed: {
    ...mapState(["user"]),
    tabs() {
      return [
        {name: "待处理", value: 0},
        {name: "处理完成", value: 1},
      ]
    },
  },
}
</script>

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

  .banner {
    background-color: #ffffff;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px;

    .picker {
      font-size: 30px;
      font-weight: 500;
      color: #333333;
      margin-right: 8px;
    }
  }

  .nav {
    background-color: #ffffff;
    height: 96px;
    padding-top: 8px;
  }

  .body {
    .item {
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 30px;
      margin-top: 16px;

      .avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-right: 8px;
      }

      .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .name {
          font-size: 26px;
          font-weight: 500;
          color: #333333;
          line-height: 24px;
        }
      }

      .date {
        font-size: 22px;
        color: #999999;
      }

      .content {
        padding: 18px 0;
        display: flex;
        flex-wrap: wrap;

        .text {
          font-size: 26px;
          font-weight: 400;
          color: #333333;
          line-height: 44px;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;

          .targ {
            padding: 6px;
            background: #E8EFFF;
            border-radius: 8px;
            font-size: 24px;
            font-weight: 400;
            color: #2266FF;
            margin-right: 8px;
            line-height: 34px;
          }
        }
      }

      .photos {
        display: flex;
        flex-wrap: wrap;

        & > img {
          width: 224px;
          height: 224px;
          margin: 0 8px 8px 0;

          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }

  }

}
</style>