LocalLivingServicesUniapp/pages/message/message.vue

<template>
  <view class="msg-container">
    <u-navbar title="消息" :autoBack="true" :placeholder="true"></u-navbar>
    <view class="msg-list">
      <view class="msg-item" v-for="(item, idx) in msgList" :key="idx" @click="toNotification(item)">
        <view class="msg-header-row">
          <view class="msg-icon-container">
            <image :src="`/static/message/${categoryIcons[item.category] || 'system'}.png`" class="icon-img"></image>
          </view>
          <view class="title-with-dot">
            <text class="msg-title">{{ item.categoryName }}</text>
            <view v-if="item.status === '0'" class="msg-dot"></view>
          </view>
          <text class="msg-time">{{ item.createTimeDisplay }}</text>
        </view>
        <view class="msg-divider"></view>
        <text class="msg-desc">{{ item.content }}</text>
      </view>
    </view>
    <u-empty text="暂无消息" mode="list" v-if="!msgList.length"></u-empty>
  </view>
</template>

<script>


export default {
  data() {
    return {
      msgList: [],
      categoryIcons: {
        '1': 'market',
        '2': 'order',
        '3': 'system'
      }
    }
  },
  async onShow() {
    this.getMsgList();
  },
  methods: {
    // 获取消息
    async getMsgList() {
      this.$http.get("/localUserNotice/localUserNotice/getListNew", {
        params: {
          userType: 1
        }
      }).then(res => {
        this.msgList = res.data.result || [];
      })
    },
    // 跳转到通知二级页
    toNotification(item) {
      let str = this.$u.queryParams(item);
      uni.navigateTo({
        url: `/pages/message/details?${str}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.msg-list {
  padding: 25rpx;
  .msg-item {
    background: #fff;
    border-radius: 17rpx;
    padding: 20rpx 20rpx 16rpx 20rpx;
    margin-bottom: 25rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    .msg-header-row {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      .msg-icon-container {
        margin-right: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-img {
          width: 36rpx;
          height: 42rpx;
        }
      }
      .title-with-dot {
        flex: 1;
        display: flex;
        align-items: center;
        .msg-title {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
        .msg-dot {
          width: 13rpx;
          height: 13rpx;
          background: #ff004e;
          border-radius: 50%;
          margin-left: 10rpx;
        }
      }
      .msg-time {
        font-size: 25rpx;
        color: #666666;
        margin-left: 16rpx;
      }
    }
    .msg-divider {
      width: 100%;
      height: 1rpx;
      background: #eeeeee;
      margin-bottom: 16rpx;
    }
    .msg-desc {
      font-size: 24rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}
</style>