tmerclub-uniapp/src/pages/message-platform/message-platform.vue

<template>
  <view class="Mall4j page-message-platform ">
    <!-- tab -->
    <view
      v-if="showTab"
      class="tab"
    >
      <view
        class="tab-item"
        :class="{active: currentTabType===0}"
        @tap="onSwitchTab(0)"
      >
        系统通知
      </view>
      <view
        class="tab-item"
        :class="{active: currentTabType===1}"
        @tap="onSwitchTab(1)"
      >
        平台公告
      </view>
      <view
        class="tab-item"
        :class="{active: currentTabType===2}"
        @tap="onSwitchTab(2)"
      >
        客服消息
      </view>
    </view>

    <!-- 系统通知 -->
    <view
      v-if="currentTabType===0"
      class="notices-box"
    >
      <!-- status 是否阅读 1已读 0未读 -->
      <view
        v-for="(item, index) in msgList"
        :key="index"
        :class="['item', item.status === 0 ? 'unread' : '']"
      >
        <view class="time">
          {{ item.updateTime }}
        </view>
        <view class="item-box">
          <view class="tit">
            系统通知
          </view>
          <view class="text-box">
            {{ item.message }}
          </view>
        </view>
      </view>
    </view>

    <!-- 平台公告 -->
    <view
      v-if="currentTabType===1"
      class="platform notices-box"
    >
      <!-- isLearning 0未读 1已读 -->
      <view
        v-for="item in msgList"
        :key="item.id"
        :class="['item', item.isLearning === 0 ? 'unread' : '']"
        @tap="onToMessageDetail(item.id)"
      >
        <view class="tit-box">
          <!-- type 1平台公告 2店铺公告 -->
          <view class="tit">
            {{ item.title }}
          </view>
          <view class="time">
            {{ item.publishTime }}
          </view>
        </view>
        <view class="text-box">
          <rich-text :nodes="item.content" />
        </view>
        <view class="text-arrow">
          查看详情
        </view>
      </view>
    </view>

    <!-- 客服消息 -->
    <view
      v-if="currentTabType===2"
      class="service-message"
    >
      <view
        v-for="(item, index) in msgList"
        :key="index"
        class="item unread"
        @tap="onToChat(item.shopId,item.chatType)"
      >
        <view class="logo">
          <image
            :src="item.pic?util.addDomain(item.pic):'../../static/images/chat/customer-service.png'"
            @error="msgList[index].pic=''"
          />
        </view>
        <view class="text-box">
          <view class="name">
            {{ item.friendName }}
          </view>
          <view class="des">
            {{ item.latestMsg }}
          </view>
        </view>
        <view class="time-box">
          <view class="time">
            {{ item.timeStr }}
          </view>
          <view
            v-if="item.unread"
            class="unread-box"
          >
            <view class="number">
              {{ item.unread }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空列表或加载全部提示 -->
    <empty-all-tips
      v-if="isLoaded"
      :is-empty="!msgList.length"
      :empty-tips="`暂无${ currentTabType===0? '通知':currentTabType===1? '公告': '消息' }记录`"
    />
  </view>
</template>

<script setup>
import util from '@/utils/util'

/**
 * 生命周期函数--监听页面加载
 */
const showTab = ref(true)
const currentTabType = ref(0)
onLoad((options) => {
  // options = { ...$Route.query }
  currentTabType.value = Number(options.tabType) || 0
  showTab.value = !options.ishiddenTab
  onSwitchTab(currentTabType.value)
})

onLoad(() => {
  onLoadMsgList()
})
let pages = 0
let pageNum = 1
onReachBottom(() => {
  if (pageNum < pages) {
    pageNum = pageNum + 1
    onLoadMsgList()
  }
})

// 判断是否为JSON格式
const isJSON = (str) => {
  if (typeof str === 'string') {
    try {
      JSON.parse(str)
      return true
    } catch (e) {
      return false
    }
  }
}

/**
 * 根据tabType类型 获取消息数据
 */
const isLoaded = ref(false) // 列表是否加载完毕
const pageSize = 10
let list = []
const shopId = 0 // 0平台公告
const msgList = ref([])
const onLoadMsgList = () => {
  let reqData = {}
  let url = ''
  if (currentTabType.value === 0) {
    url = '/tmerclub_biz/notify_log/unread_count_list'
    reqData = {
      pageNum,
      pageSize
    }
  } else if (currentTabType.value === 1) {
    url = '/tmerclub_admin/ma/notice'
    reqData = {
      shopId,
      pageNum,
      pageSize
    }
  } else if (currentTabType.value === 2) {
    url = '/tmerclub_im/im/conversations?pageNum=' + pageNum + '&pageSize=' + pageSize
  }
  isLoaded.value = false
  http.request({
    url,
    method: currentTabType.value === 2 ? 'POST' : 'GET',
    data: reqData
  }).then(res => {
    isLoaded.value = true
    if (currentTabType.value === 1) {
      res.list.forEach(element => {
        element.content = util.formatHtml(element.content)
      })
    }
    if (pageNum === 1) {
      list = res.list
    } else {
      list = msgList.value.concat(res.list)
    }

    msgList.value = list
    pages = res.pages
    if (currentTabType.value === 2) {
      msgList.value = list.filter(item => {
        const a = isJSON(item.latestMsg)
        // 店铺状态 下线由0改为2  1营业
        if (item.chatType === 1) {
          item.friendName = $t('chat.PCS')
        }
        if (item.shopStatus === 2) {
          return false
        } else if (item.type === 1) {
          item.latestMsg = '[' + $t('chat.imgs') + ']'
          return true
        } else if (a && JSON.parse(item.latestMsg) instanceof Object) {
          item.latestMsg = '[' + $t('chat.productLinks') + ']' // 商品链接
          return true
        } else {
          return true
        }
      })
    }
  })
}

// 去详情
const onToMessageDetail = (id) => {
  uni.navigateTo({
    url: '/package-activities/pages/message-detail/message-detail?id=' + id
  })
}

// 去客服聊天
const onToChat = (shopId, chatType) => {
  if (chatType === 1) {
    shopId = 0
  }
  uni.navigateTo({
    url: '/package-user/pages/my-chat/my-chat?shopid=' + shopId
  })
}

/**
 * 切换消息Tab
 * @param {Number} tabType 当前展示的消息类型
 */
const onSwitchTab = (tabType) => {
  currentTabType.value = tabType
  msgList.value = []
  uni.setNavigationBarTitle({
    title: tabType === 1 ? '平台公告' : tabType === 2 ? '客服消息' : '系统通知'
  })
  pageNum = 1
  pages = 0
  onLoadMsgList()
}

</script>

<style lang="scss" scoped>
 @use "./message-platform.scss";

</style>