dvcp_v2_wxcp_app/src/apps/AppNotification/components/read.vue

<template>
  <div class="read">
    <AiTopFixed>
      <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" :current="current" @change="change"></u-tabs>
    </AiTopFixed>
    <div class="body">
      <div class="item" v-for="(item,index) in (current==0 ? list.read : list.unRead)" :key="index">
        <u-avatar :src="item.avatar" mode="square" size="76" style="margin-right: 8px;"></u-avatar>
        <AiOpenData type="userName" :openid="item.id"></AiOpenData>
      </div>
    </div>
    <AiBack/>
  </div>
</template>

<script>
  import AiBack from "../../../components/AiBack";
  import AiTopFixed from "../../../components/AiTopFixed";
  import AiOpenData from "../../../components/AiOpenData";
  import {mapActions} from "vuex";
  export default {
    name: "read",
    components: {AiBack, AiTopFixed, AiOpenData},
    props:{
      params:[String,Number]
    },
    data() {
      return {
        current: 0,
        list: [],
      }
    },
    created() {
      document.title = "接收对象";
      this.$loading()
      this.injectJWeixin().then(() => {
        this.getList();
      })
    },
    methods: {
      ...mapActions(['previewFile', 'injectJWeixin']),
      getList() {
        this.$http.post("/app/appannouncementreader/list-unread",null,{
          params:{
            id:this.params
          }
        }).then(res => {
          if (res && res.data) {
            this.list = res.data;
            this.$hideLoading()
          }
        })
      },
      change(val) {
        this.current = val;
        this.list = [];
        this.getList();
      }
    },
    computed: {
      tabs() {
        return [
          {name: (this.list?.read?.length || 0) + "人已读"},
          {name: (this.list?.unRead?.length || 0) + "人未读"},
        ];
      }
    },
  }
</script>

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

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

    .body {
      padding: 16px 0;

     .item {
        height: 120px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 50px;
        background-color: #ffffff;
        border-bottom: 1px solid #eeeeee;

        & > .name{
          font-size: 36px;
          font-weight: 600;
          color: #333333;
          line-height: 50px;
          margin-left: 32px;
        }
      }
    }
  }
</style>