product_wx/pages/subPackages/minePages/mineMessage.vue

<template>
    <div class="mineMessage">
       <div class="msgItem" v-for="item in msgList" @click="toDetail(item)">
         <div class="msgItemLeft">
            <img src="./image/msgIcon.png" class="msgIcon">
           <div class="redDoll" v-show="item.isNew"></div>
         </div>
         <div class="msgItemRight">
           <div class="msgItemName">{{ item.content }}！</div>
           <div class="msgItemTime">{{ item.createdAt }}</div>
         </div>
       </div>
    </div>
</template>

<script>
import { getMyList,getUserLocalStorageInfo,updateInformation,parkSystemMsgReadAdd } from "@/js_sdk/http";
export default {
  name: "mineMessage",
  data(){
    return{
      msgList:[
        // {name:'您有一条最新政策待查看',isNew:false},
        // {name:'您有一条最新政策待查看',isNew:true},
        // {name:'您有一条最新政策待查看',isNew:false},
      ],
      requestParam: {
        userId: getUserLocalStorageInfo().userId,
        userType: getUserLocalStorageInfo().userType,
      },
      total:0
    }
  },
  // mounted(){
  //   this.getList()
  // },
  onShow(){
    this.getList()
  },
  methods:{
    getList(){
      this.msgList = []
      getMyList(this.requestParam).then(res=>{
        res.forEach(element => {
          const json = this.getItemJson(element)
          this.msgList.push(json)
        })
      })
    },
    getItemJson(item){
      item.isNew = item.readStatus == '0'
      return item
    },
    toDetail(item){
      // 1 反馈 2 资源预约 3 政策
      let url = ''
      if(item.type === '1'){
        this.readMsg(item)
        url = '/pages/subPackages/minePages/feedback_detail?id=' + item.businessId
      }
      if(item.type === '2'){
        this.readMsg(item)
        url = '/pages/subPackages/resourceReservation_manage/edit?id=' + item.businessId
      }
      if(item.type === '3'){
        this.readSysMsg(item)
        url = '/pages/subPackages/industrialPolicy/detail?id='+item.businessId
      }
      uni.navigateTo({
        url: url
      })

    },
    readMsg(item){
      const data = {
        id: item.id,
        status: '1'
      }
      updateInformation(data)
    },
    readSysMsg(item){
      const data = {
        msg_id: item.businessId,
        user_type: getUserLocalStorageInfo().userType,
        userId: getUserLocalStorageInfo().userId,
      }
      parkSystemMsgReadAdd(data)
    }
  }
}
</script>

<style lang="scss">
    .mineMessage{
      padding:32rpx;
      .msgItem{
        width: 686rpx;
        height: 162rpx;
        background: white;
        box-sizing: border-box;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        padding-left: 32rpx;
        margin-bottom: 24rpx;
        .msgItemLeft{
          position: relative;
          .msgIcon{
            width: 80rpx;
            height: 80rpx;
          }
          .redDoll {
            position: absolute;
            right: 0;
            top: 0;
            width: 16rpx;
            height: 16rpx;
            background: #f25551;
            border-radius: 50%;
          }
        }
       .msgItemRight{
         display: flex;
         flex-direction: column;
         justify-content: center;
         margin-left: 16rpx;
         .msgItemTime{
           color: #888888;
           font-size: 28rpx;
           margin-top: 8rpx;
         }
         .msgItemName{
           font-size: 32rpx;
           color: #222222;
         }
       }
      }
    }
</style>