eta_mini_crm_front/src/layout/components/NoticeWrap.vue

<script setup>
import { apiSystemMessage } from '@/api/system'
import { useRouter } from 'vue-router'

const router=useRouter()

const emits=defineEmits(['change'])
const tableQuery = reactive({
    currentPage:1,
    pageSize:10,
    totals:0,
})
const list = ref([])
function getMsgList() {
  apiSystemMessage.list({
    CurrentIndex:tableQuery.currentPage,
    PageSize:tableQuery.pageSize,
  }).then(res => {
    if (res.Ret === 200) {
      list.value = res.Data.List || []
      list.value.map(item=>{
        // item.isTrue = item.Message.substr(item.Message.length - 5) === '退款成功!' ? true : false
        item.isTrue = item.Message.search("退款成功") != -1
      })
      tableQuery.totals = res.Data.Paging.Totals||0
      const hasUnRead=list.value.some(item=>item.Status === 'UNREAD')
      emits('change',hasUnRead)
    }
  })
}
getMsgList()

function handlePageChange(page){
    tableQuery.currentPage = page
    getMsgList()
}

function handleGoCustomerDetail(e){
  handleReadNotice(e.Id)
  // router.push('/order/orderList')
}
// 阅读消息
function handleReadNotice(id){
  apiSystemMessage.msgRead({
    messageId: id
  }).then(res=>{
    if(res.Ret===200){
      router.push('/order/orderList')
    }
  })
}

</script>

<template>
  <div class="notice-wrap">
    <div class="title">消息提醒</div>
    <div class="list-wrap">
      <div
        :class="['item', item.Status !=='UNREAD' ? 'item-read' : '']"
        v-for="item in list"
        :key="item.SysMessageReportId"
        @click="handleGoCustomerDetail(item)"
      >
        <svg-icon name="success" size="16px" v-if="item.isTrue"></svg-icon>
        <svg-icon name="failure" size="16px" v-if="!item.isTrue"></svg-icon>
        <span style="margin-left: 10px">{{ item.Message }}</span>
        <span style="margin-left: 20px">{{ item.CreatedTime }}</span>
        <!-- <div v-html="item.Message"></div> -->
      </div>
      <el-pagination
        background
        layout="total,prev,pager,next,jumper"
        :current-page="tableQuery.currentPage"
        :page-size="tableQuery.pageSize"
        :total="tableQuery.totals"
        @current-change="handlePageChange"
        style=" justify-content: flex-end;"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.notice-wrap {
  .title {
    padding: 15px 0;
    border-bottom: 1px solid #e7e7e7;
  }
  .list-wrap {
    max-height: 500px;
    overflow-y: auto;
    .item {
      padding: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
      }
    }
    .item-read {
      color: #999;
    }
  }
}
</style>