LocalLivingServicesUniapp/pages/message/details.vue

<template>
  <view class="page-container">
    <!-- 自定义导航栏 -->
    <u-navbar :title="initParams.categoryName || '消息通知'" bgColor="#fff" :autoBack="true" :placeholder="true">
    </u-navbar>

    <view class="main-box">
      <!-- 列表 -->
      <view class="msg-list-card">
        <ListScrollView ref="listScroll" :api="api" :init="initParams" :pageSize="20">
          <template v-slot:list="{ data }">
            <view class="msg-item" v-for="(item, i) in data" :key="i" @click="onDetail(item)">
              <view class="msg-header-row">
                <view class="title-with-dot">
                  <text class="msg-title">{{ item.titleName }}</text>
                  <view v-if="item.status === '0'" class="msg-dot"></view>
                </view>
              </view>
              <view class="msg-divider"></view>
              <view class="msg-desc">{{ item.content }}</view>
              <view class="msg-time">{{ item.createTimeDisplay }}</view>
            </view>
          </template>
        </ListScrollView>
      </view>
    </view>
  </view>
</template>

<script>
import ListScrollView from '@/components/list-scroll-view/index.vue';
import throttleUtil from '@/utils/public.js';
import { USER_INFO } from "@/common/util/constants"
import { updateMsgTabBadge } from '@/common/util/msgBadge.js';
export default {
  components: {
    ListScrollView
  },
  data() {
    return {
      api: {
        url: '/localUserNotice/localUserNotice/getPageListNew',
        method: 'POST',
      },
      initParams: {
        userType: 1,
        category: null
      },
      indexOption: null,
      merchantId: null
    };
  },
  onLoad(options) {
    // 接收参数
    if (options) {
      this.initParams.category = options.category

    }
    this.initData()
  },
  methods: {
    async initData() {
      this.merchantId = uni.getStorageSync(USER_INFO).merchantId;
      let res = await this.$http.get("/merchant/localMerchantInfo/queryAppInfoById?id=" + this.merchantId)
      if (res.data.success) {
        this.indexOption = res.data.result
      }
    },
    // 点击消息详情
    onDetail: throttleUtil.throttles(async function (item) {
      if (item.status === '0') {
        this.$http.post("/localUserNotice/localUserNotice/edit", {
          id: item.id,
          status: '1'
        }).then(res => {
          item.status = '1';
          updateMsgTabBadge();
        })
      }
      this.navigateToDetail(item);
    }, 500), 
    // 跳转详情页面
    navigateToDetail(item) {
      const queryString = encodeURIComponent(JSON.stringify(this.indexOption))
      let routeMap = {
        // 消息类
        'S1': `/pages/login/settled?params=${queryString}`, //店铺信息审核结果
        'S2': `/pages/store/brandMessage?params=${queryString}`, //品牌信息审核结果
        'S3': `/pages/store/advertising?params=${queryString}`, //广告素材审核结果
        'S4': `/pages/store/headPhoto?params=${queryString}`, //商户照片审核结果
        'S5': '/pages/store/businessQua?params=${queryString}', //经营资质审核结果
        'S6': '/pages/product/index?type=0', // 商品审核结果通过
        'S7': '/pages/product/index?type=3', // 商品审核结果不通过
        'S8': '/pages/store/settings', //店铺设置页面 
        'O1': ``, //核销成功 不跳转
        'O4': `/pages/groupMeal/goods/list`, //拼团成功
      };

      if (item.type === 'O2' || item.type === 'O3') {
        const isService = item.isService == 1;
        const url = isService
          ? `/pages/order/serviceOrder/orderDetail?taskId=${item.businessId}&checkType=${item.checkType}&rightsId=''`
          : `/pages/order/record?orderId=${item.businessId}`;
        uni.navigateTo({ url });
        return;
      }
      if (item.type === 'O5') {
        const app = getApp();
        app.globalData.currentIndex = 1
        app.globalData.tabIndex = 1
        uni.switchTab({
          url: `/pages/order/index`//待接单提醒
        })
      }
      if (routeMap[item.type]) {
        uni.navigateTo({
          url: routeMap[item.type]
        });
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8f8fa;

  .main-box {
    flex: 1;
    margin: 30rpx;
    border-radius: 16rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

.msg-list-card {
  flex: 1;
  overflow: hidden;
  background-color: #f8f8fa;

  .msg-item {
    background: #ffffff;
    border-radius: 17rpx;
    padding: 20rpx;
    margin-bottom: 25rpx;
    .msg-header-row {
      margin-bottom: 16rpx;
      .title-with-dot {
        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-divider {
      width: 100%;
      height: 1rpx;
      background: #eeeeee;
      margin-bottom: 16rpx;
    }
    .msg-desc {
      font-size: 24rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 12rpx;
    }
    .msg-time {
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style>