sfms3.0-uniapp/src/pages/message/index.vue

<template>
  <view class="">
    <!-- 头部 -->
    <scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
      <block v-for="(menuTab, index) in menuTabs" :key="index">
        <view class="menu-topic-view" v-bind:id="'tabNum' + index" @click="swichMenu(index)" clickable>
          <view :class="[currentTab == index ? 'menu-topic-act' : 'menu-topic']">
            <view class="menu-topic-txt"
              >{{ menuTab.name }}
              <text v-if="menuTab.name == '全部'" :class="[unreadCount > 0 ? 'tipred' : '']">{{ Math.abs(unreadCount) > 99 ? '99+' : unreadCount == 0 ? '' : unreadCount }}</text>
            </view>
            <view class="menu-topic-bottom">
              <view class="menu-topic-bottom-color"></view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
    <view class="flex flex-column" style="display: flex; flex-direction: column; width: 100%; margin-bottom: 120rpx">
      <view class="msg_list">
        <!-- :badge-text="item.readStatus == false?'dot':''" -->
        <!-- <uni-list class="list msg_list">
          <uni-list :border="true" v-for="(item, index) in allMessageList" :key="item.id">
            <uni-list-chat :title="item.templateNickname" avatar="/static/images/message.svg" clickable :note="item.templateContent" :time="formatDate(item.createTime)" badge-positon="left" @click="jumpdetails(item)" :class="item.readStatus == false ? '' : 'hasread'" is=""> </uni-list-chat>
            <view class="split_line"></view>
          </uni-list>
        </uni-list> -->
        <u-card :title="item.templateNickname" :sub-title="formatDate(item.createTime)" thumb="/static/images/message.svg" thumb-width="36" v-for="(item, index) in allMessageList" :key="item.id" :class="item.readStatus == false ? '' : 'hasread'" margin="20rpx" :head-style="{ padding: '20rpx' }" @click="jumpdetails($event, item)">
          <template v-slot:body>
            {{ item.templateContent }}
          </template></u-card>
      </view>
      <u-loadmore :status="loadingType" v-if="allMessageList.length > 0" />
    </view>
    <com-message ref="comMessageRef" />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, nextTick } from 'vue'
import { onLoad, onShow, onNavigationBarButtonTap, onReady, onBackPress, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { getMessageList, getMessageUnreadCount, setMessageUpdateRead } from '@/api/request2.js'
import { dateFormat } from '@/common/basic.js'

const { proxy } = getCurrentInstance()
const messageList = ref([])
const pageNo = ref(1)
const pageSize = ref(10)
const allMessageList = ref([])
const loadingType = ref('nomore')
const unreadCount = ref(0)
const indicatorDots = ref(true)
const autoplay = ref(true)
const interval = ref(2000)
const duration = ref(500)
const scrollLeft = ref(0)
const isClickChange = ref(false)
const currentTab = ref(0)
const menuTabs = ref([
  {
    name: '全部'
  }
])
onShow(() => {
  nextTick(() => {
    getList('refresh')
    handleGetMessageUnreadCount()
  })
})
onPullDownRefresh(() => {
  getList('refresh')
  handleGetMessageUnreadCount()
})
onReachBottom(() => {
  // 避免多次触发
  if (loadingType.value == 'loading' || loadingType.value == 'nomore') {
    return
  }
  getList('more')
})
const getList = (type) => {
  proxy.$modal.loading('加载中­....')
  if (type === 'refresh') {
    pageNo.value = 1
    pageSize.value = 10
    allMessageList.value = []
  }
  getMessageList(pageNo.value, pageSize.value)
    .then((res) => {
      uni.hideLoading()
      if (type === 'refresh') {
        uni.stopPullDownRefresh()
      }
      const { list } = res.data
      loadingType.value = 'loadmore'
      if (list == null || list.length == 0) {
        loadingType.value = 'nomore'
        return
      }
      allMessageList.value = type === 'refresh' ? list : allMessageList.value.concat(list)
      pageNo.value++
    })
    .catch((error) => {
      uni.hideLoading()
      showMessage(error)
    })
}
const showMessage = (message) => {
  comMessageRef.value.showErrorMessage(message, (res) => {
    if (res) {
    }
  })
}
const formatDate = (date) => {
  return dateFormat(date)
}
const handleGetMessageUnreadCount = () => {
  getMessageUnreadCount().then((res) => {
    unreadCount.value = res.data
  })
}
const jumpdetails = (e, detail) => {
  if (!detail.readStatus) {
    setMessageUpdateRead(detail.id).then((res) => {
      detail.readStatus = true
      uni.navigateTo({
        url: `./details?detail=${encodeURIComponent(JSON.stringify(detail))}`
      })
    })
  } else {
    uni.navigateTo({
      url: `./details?detail=${encodeURIComponent(JSON.stringify(detail))}`
    })
  }
}
</script>

<style>
.body-view {
  height: 100%;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
}

.body-view .right-arrow {
  position: absolute;
  top: 22upx;
  right: 0upx;
  padding-left: 60upx;
  padding-right: 20upx;
  line-height: 42upx;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
}

.body-view .right-arrow .iconfont {
  font-size: 24upx;
  font-family: iconfont;
  color: #909399;
}

.top-menu-view {
  display: flex;
  white-space: nowrap;
  width: 100%;
  background-color: #ffffff;
  height: 86upx;
  /* border-top: 1px solid #d8dbe6;
		border-bottom: 1px solid #d8dbe6; */
}

.top-menu-view .menu-topic-view {
  display: inline-block;
  white-space: nowrap;
  height: 86upx;
  position: relative;
}

.top-menu-view .menu-topic-view .menu-topic {
  margin-left: 30upx;
  margin-right: 10upx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uni-list--border:after {
  height: 0;
}

.top-menu-view .menu-topic-view .menu-topic:first-child {
  margin-left: 30upx;
}

.top-menu-view .menu-topic-view:last-child .menu-topic {
  margin-right: 80upx;
}

.top-menu-view .menu-topic-view .menu-topic .menu-topic-txt {
  font-size: 30upx;
  color: #303133;
}

.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom .menu-topic-bottom-color {
  width: 40upx;
  height: 4upx;
}

.top-menu-view .menu-topic-view .menu-topic-act {
  margin-left: 30upx;
  margin-right: 10upx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-menu-view .menu-topic-view:last-child .menu-topic-act {
  margin-right: 80upx;
}

.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-txt {
  font-size: 1rem;
  color: #3d7eff;
  font-weight: 600;
}

.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom .menu-topic-bottom-color {
  width: 40upx;
  height: 6upx;
  background: #3d7eff;
}

.swiper-box-list {
  flex: 1;
  width: 100%;
  height: auto;
  height: 900upx;
  background-color: #ffffff;
}

.swiper-topic-list {
  height: 100%;
  width: 100%;
}

.list {
  width: 100%;
}

.tipred {
  position: absolute;
  top: 0;
  right: -40rpx;
  background-color: red;
  color: #ffffff;
  /* font-size: .7rem; */
  display: inline-block;
  width: 36rpx;
  height: 36rpx;
  margin-bottom: 10upx;
  text-align: center;
  line-height: 36rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 10upx;
  font-size: 20upx;
}
</style>