VAVABUY/pages/user/message/list.vue

<template>
  <Theme>
    <view class="message-list-page">
      <!-- 导航栏 -->
      <Navbar title="系统消息" fixed border> </Navbar>

      <!-- Tab切换 -->
      <view class="tab-container" id="tabs">
        <view class="tab">
          <Tab
            :active="currentTab"
            keyName="text"
            :tabList="tabList"
            @confirm="tabClick"
          />
        </view>
      </view>

      <!-- 消息列表 -->
      <view class="message-list">
        <List
          url="/users/message"
          :topHeight="tabHeight"
          :defaultParams="defaultParams"
          ref="listRef"
          @datas="getList"
        >
          <template #item="{ item, index }">
            <view class="message-item" @click="goToDetail(item)">
              <!-- 消息内容 -->
              <view class="msg-content">
                <view class="msg-header">
                  <text class="msg-title">{{ item.title }}</text>
                  <text class="msg-time">{{
                    useGlobal().$format(item.indate)
                  }}</text>
                </view>
                <text class="msg-desc">{{ item.content }}</text>
              </view>

              <!-- 未读标识 -->
              <view class="reader-dot" v-if="item.reader"></view>
              <view class="unread-dot" v-if="!item.reader"></view>
            </view>
          </template>
        </List>
      </view>
    </view>
  </Theme>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import Navbar from "@/components/navbar";
import Tab from "@/components/tabs";
import List from "@/components/list";
import { USERS_MESSAGE_READER, USERS_MESSAGE_UNREAD } from "@/api";
import { t } from "@/locale";
import { query, Toast, useGlobal } from "@/utils";
import { onShow } from "@dcloudio/uni-app";

const tabHeight = ref(0);
const listRef = ref(null);

const dataList = ref([]);

const currentTab = ref(0);
const tabList = ref([
  {
    text: "全部",
    channel: 0,
    key: "all",
  },
  {
    text: "未读",
    channel: 1,
    badge: 12,
    key: "unread",
  },
]);
const defaultParams = reactive({
  status: tabList.value[currentTab.value].key,
});

// 消息列表数据
const messages = ref([]);

const getList = (list) => {
  dataList.value = list;
};

const tabClick = (item, index) => {
  defaultParams.status = item.key;
  if (currentTab.value == index) return;
  currentTab.value = index;
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

// 前往详情页
const goToDetail = (item) => {
  // 标记为已读
  if (!item.reader) {
    USERS_MESSAGE_READER(item.id);
  }
  uni.navigateTo({
    url: `/pages/user/message/detail?id=${item.id}`,
  });
};

const getUnread = async () => {
  try {
    const res = await USERS_MESSAGE_UNREAD();
    tabList.value[1].badge = res.data.unread;
  } catch (error) {
    Toast(error.msg);
  }
};

onShow(() => {
  nextTick(() => {
    getUnread();
    listRef.value && listRef.value.getData();
  });
});
// 初始化
onMounted(() => {
  nextTick(async () => {
    const res = await query("#tabs", this);
    tabHeight.value = res.height;
  });
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.message-list-page {
  min-height: 100vh;
}

// Tab容器样式
.tab-container {
  background-color: var(--light);
  padding: 0 48rpx;
}

// 消息列表样式
.message-list {
  padding: 24rpx;
  width: 100%;
  .message-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    box-shadow: 0px 8rpx 20rpx 0px var(--bor-color1);
    margin-top: 16rpx;
    border-radius: 20rpx;
    transition: background-color 0.2s;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f5f5f5;
    }

    &.unread {
      background-color: #f0f7ff;
    }

    .msg-content {
      flex: 1;
      overflow: hidden;

      .msg-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8rpx;

        .msg-title {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
          max-width: 70%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .msg-time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .msg-desc {
        font-size: 28rpx;
        color: #666;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .unread-dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background-color: #f53f3f;
      margin-left: 16rpx;
    }
    .reader-dot {
      width: 16rpx;
      height: 16rpx;
      margin-left: 16rpx;
    }
  }
}
</style>