settle_down_wx/pages/subPackages/propertyNotice/index.vue

<template>
    <div class="propertyNotice">
      <ul class="noticeUl">
        <li class="noticeLi" v-for="item in noticeList" @tap="toDetail(item)">
          <img :src="item.readStatus=='1'?unReadImg:readImg" class="leftImg"/>
          <div class="rightBox">
            <span class="noticeTitle">{{item.title}}</span>
            <span class="noticeTimeBox">
              <span class="noticeTime">{{item.releaseTime}}</span>
              <van-icon name="like" :class="item.collectorsStatus=='2'?'likeIcon':'unLikeIcon'" @tap.stop="clickLike(item)"/>
            </span>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
import { noticeParkList,getUserLocalStorageInfo,noticeParkClickCollect,propertyNoticeList,propertyNoticeClickCollect } from "@/js_sdk/http";
import dayjs from "dayjs";
export default {
  name: "index",
  data(){
    return {
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      unReadImg:'https://www.idea-co-sf.com/gardenProduct/image/xiaoxi02.png',
      readImg:'https://www.idea-co-sf.com/gardenProduct/image/xiaoxi01.png',
      noticeList:[
        // { title:'XXXXX南门出口道闸维修的通知', isRead:false, isLike:true },
        // { title:'XXXXXXXX停电的紧急通知', isRead:true, isLike:false },
        // { title:'XXXXX南门出口道闸维修的通知', isRead:false, isLike:true },
        // { title:'关于强降雨天气防范措的通知', isRead:true, isLike:true },
        // { title:'关于无端午节禁止施工的温馨提示', isRead:false, isLike:false },
        // { title:'关于园区枇杷消杀禁止采摘的通知', isRead:false, isLike:true },
        // { title:'关于开展爱邻活动的通知', isRead:true, isLike:false },
      ],
      type:''
    }
  },
  onPullDownRefresh() {
    this.getList(this.type)
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad(type){
    // console.log('type',type)
    this.type = type.type
    this.getList(type.type)
  },
  methods:{
    getList(type){
      const data = {
        userId:this.getUserLocalStorageInfo.userId,
        type:type,
        status:'published'
      }
      if (type=='1'){
        uni.setNavigationBarTitle({
          title: '园区通知',
        });
        const dayjs = require('dayjs')
        noticeParkList(data).then(res=>{
          res.forEach(e=>{
            e.releaseTime = dayjs(e.releaseTime).format('YYYY-MM-DD HH:mm:ss')
            e.type = type
          })
          this.noticeList = res
        })
      }else{
        uni.setNavigationBarTitle({
          title: '物业通知',
        });
        const dayjs = require('dayjs')
        propertyNoticeList(data).then(res=>{
          res.forEach(e=>{
            e.releaseTime = dayjs(e.releaseTime).format('YYYY-MM-DD HH:mm:ss')
            e.type = type
          })
          this.noticeList = res
        })
      }
    },
    toDetail(item){
      uni.navigateTo({
        url: "/pages/subPackages/propertyNotice/detail?type=" + JSON.stringify(item),
      });
    },
    clickLike(item){
      if (item.collectorsStatus == '1'){
        item.collectorsStatus = '2'
      }else{
        item.collectorsStatus = '1'
      }
      const data = {
        id:item.id,
        userId:this.getUserLocalStorageInfo.userId,
        collectorsStatus:item.collectorsStatus
      }
      if (this.type === '1'){
        noticeParkClickCollect(data).then(res=>{
        })
      }else{
        propertyNoticeClickCollect(data).then(res=>{
        })
      }
    }
  }
}
</script>

<style lang="scss">
    .propertyNotice{
      .noticeUl{
        display: flex;
        flex-direction: column;
        align-items: center;
        .noticeLi{
          margin-top: 24rpx;
          width: 686rpx;
          height: 162rpx;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 1);
          padding: 0 32rpx;
          box-sizing: border-box;
          .leftImg{
            width: 80rpx;
            height: 80rpx;
          }
          .rightBox{
            display: flex;
            flex-direction: column;
            margin-left: 16rpx;
            .noticeTitle{
              color: rgba(34, 34, 34, 1);
              font-size: 32rpx;
            }
            .noticeTimeBox{
              font-size: 32rpx;
              margin-top: 12rpx;
              display: flex;
              justify-content: space-between;
              width: 526rpx;
              .noticeTime{
                color: rgba(136, 136, 136, 1);
                font-size: 28rpx;
              }
              .likeIcon{
                color: red;
              }
              .unLikeIcon{
                color: rgba(230, 235, 241, 1);
              }
            }
          }
        }
      }
    }
</style>