HSW_WX/pages/subPackages/announcement/index.vue

<template>
  <div class="announcement">
    <div class="tap-part">
      <div class="info-list">
        <div
          class="info-item"
          v-for="item in list1"
          @click="goDetailPage(item)"
        >
          <div class="left">
            <i class="iconfont icon-tongzhi"></i>
            <van-icon
              name="bell"
              style="font-size: 6.4vw; color: #60f"
              custom-class="iconfont"
            />
          </div>

          <div class="center">
            <div class="top" v-if="item.readStatus === '0'">
              {{ item.noticeTitle }} {{ item.id }}
            </div>
            <div style="color: #acaaaa" class="top" v-else>
              {{ item.noticeTitle }}
            </div>
            <div class="bottom">
              <span> {{ item.publishDate }}</span>
            </div>
          </div>

          <div
            class="icon-collect right"
            @click.stop="changeCollectorsNoticeParkStatus(item)"
          >
            <i
              class="iconfont icon-xinaixin blue"
              v-if="item.collectorsStatus === '2'"
            ></i>
            <i class="iconfont icon-xinaixin" v-else></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { noticeList, clickCollectParkNotice } from "@/js_sdk/api_park_notice";
export default {
  data() {
    return {
      active: 0,
      list1: [],
      list2: [
        //     {
        //         title:
        // '关于组织2020年无锡市服务业提质增效资金项目申报的通知关于组织2020年无锡市服务业提质增效资金项目申报的通知',
        //         date: '2020-09-18',
        //         time: '19:34:06',
        //         collect: false
        //     },
      ],
      params: {},
      totalPage: 1,
    };
  },
  //   created() {
  //       if ('SCNjNSP7LJ9aarv1cNw' == null || 'SCNjNSP7LJ9aarv1cNw' === '') {
  //           this.$showToast('请先登录后再试')
  //           return
  //       }
  //       this.initParkNotice()
  //       // this.initPropertyNotice()
  //   },
  onLoad() {
    this.initParkNotice();
  },
  methods: {
    goDetailPage(e) {
      console.log(e);
      uni.navigateTo({
        url:
          "/pages/subPackages/announcement/detail?id=" +
          e.id +
          "&readStatus=" +
          e.readStatus,
      });
    },
    initParkNotice() {
      const _this = this;
      // _this.params.parks = '' //绑定园区
      // _this.params.companyId = "SCNjNSP7LJ9aarv1cNw";
      noticeList(_this.params).then((res) => {
        console.log(res);
        if (res) {
          _this.list1 = [];
          res.forEach((e) => {
            console.log(e);
            _this.list1.push(e);
          });
        }
        if (!res || res.length < 1) {
          this.$showToast("暂无通知公告");
        }
      });
    },
    initPropertyNotice() {
      const _this = this;
      // _this.params.parks = '' //绑定园区
      _this.params.type = "2";
      propertyNoticeList(_this.params).then((res) => {
        console.log(res);
        if (res) {
          _this.list2 = [];
          res.forEach((item) => {
            const jsons = this.getItemJson(item);
            _this.list2.push(jsons);
          });
        }
      });
    },
    getItemJson: function (item) {
      item.releaseTime = this.$common.transServDate(item.releaseTime);
      return item;
    },
    changeCollectorsNoticeParkStatus(val) {
      if (val.collectorsStatus === "2") {
        const _this = this;
        clickCollectParkNotice({
          id: val.id,
          // userId: "SCNjNSP7LJ9aarv1cNw",
          collectorsStatus: "1",
        }).then((res) => {
          _this.initParkNotice();
        });
      } else {
        const _this = this;
        clickCollectParkNotice({
          id: val.id,
          // userId: "SCNjNSP7LJ9aarv1cNw",
          collectorsStatus: "2",
        }).then((res) => {
          _this.initParkNotice();
        });
      }
    },
    changeCollectorsPropertyNoticStatus(val) {
      if (val.collectorsStatus === "2") {
        const _this = this;
        clickCollectPropertyNotice({
          id: val.id,
          // userId: "SCNjNSP7LJ9aarv1cNw",
          collectorsStatus: "1",
        }).then((res) => {
          _this.initPropertyNotice();
        });
      } else {
        const _this = this;
        clickCollectPropertyNotice({
          id: val.id,
          // userId: "SCNjNSP7LJ9aarv1cNw",
          collectorsStatus: "2",
        }).then((res) => {
          _this.initPropertyNotice();
        });
      }
    },
  },
};
</script>
  
  <style lang="scss" type="text/scss" scoped>
.announcement {
  box-sizing: border-box;
  .tap-part {
    margin-top: 10rpx;
    height: calc(100vh - 10rpx);

    .van-tabs {
      height: 100%;
    }

    .info-list {
      height: calc(100vh - 9 2rpx);
      background-color: #fff;
      padding: 0 20rpx;
      overflow-y: auto;
      .info-item {
        display: flex;
        padding: 30rpx 0;
        border-bottom: 1px solid #dddddd;
        .left {
          text-align: center;
          width: 160rpx;
          i {
            font-size: 48rpx;
            color: rgba(102, 0, 255, 1);
          }
        }

        .center {
          width: 508rpx;
          height: 100rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .top {
            width: 508rpx;

            font-size: 26rpx;
            font-weight: 700;
            color: $text3;
            line-height: 1.3;
          }
          .bottom {
            span {
              font-size: 20rpx;
              color: #666666;
              &:first-child {
                margin-right: 40rpx;
              }
            }
          }
        }

        .right {
          width: 160rpx;
          height: 100rpx;
          text-align: center;
          line-height: 100rpx;
          i {
            font-size: 3 2rpx;
            color: #dddddd;
            &.blue {
              color: rgba(102, 0, 255, 1);
            }
          }
          .collect {
            color: #ffd111;
          }
        }
      }
    }
  }
}
</style>