usky-web-mobile/src/pages/info.vue

<template>
  <u-navbar :autoBack="false" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <view class="u-navbar__content__left__item__title" style="color: #fff">消息({{ stystemStore.infoList.static.total || 0 }})</view>
      </view>
    </template>
    <template #right>
      <!-- <view class="u-navbar__content__right__item">
        <text class="iconfont oaIcon-qingchu" @click="handleIconClick('清除')"></text>
      </view>
      <view class="u-navbar__content__right__item">
        <text class="iconfont oaIcon-sousuo" @click="handleIconClick('搜索')"></text>
      </view> -->
      <view class="u-navbar__content__right__item">
        <text class="iconfont oaIcon-shezhi" @click="handleIconClick('设置')"></text>
      </view>
    </template>
  </u-navbar>

  <scroll-view class="info-container bg-white" scroll-y :style="`height: calc(100vh - (50px + ${proxy.$settingStore.barHightTop} + ${proxy.$settingStore.tabBarHeight}))`">
    <view class="content-area" v-for="item in stystemStore.infoList.static.infoTypeStatic" :key="item" @tap="goAppMessage(`/pages/common/appMessage/index?type=${item.type}`)">
      <view class="content-area-avatar">
        <image class="image-bg" :src="item.img" />
        <view class="uni_top_right font12" style="margin: auto 0">
            <u-badge numberType="overflow" max="99" :value="item.notReadCount"></u-badge>
          </view>
      </view>
      <view class="content-area-child">
        <view class="uni-item mb5 ml10">
          <view class="uni-item-text font14" style="color: #000000">{{ item.label }}</view>
        </view>
        <view class="uni-item">
          <view class="uni-item-text font12" style="color: #909399">{{ item.cont }}</view>
        </view>
      </view>
    </view>
  </scroll-view>

  <oa-tabbar :tabbarValue="1"></oa-tabbar>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { getMceReceiveStatic, getDictList } from "@/api/mine/info.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { stystemStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const stystemStore = stystemStores();
/*----------------------------------变量声明-----------------------------------*/

const data = reactive({
  infoList: [
    {
      id: 1,
      label: "应用消息",
      img: "/static/images/common/appMessage.png",
      time: "5月15日",
      cont: "您收到一条最新消息，请及时查看",
      badge: 1,
      path: "/pages/common/appMessage/index",
    },
    // {
    //   id: 2,
    //   label: "消防知识库",
    //   time: "5月15日",
    //   cont: "您收到一条最新消息，请及时查看",
    //   badge: 0,
    // },
    {
      id: 3,
      label: "告警通知",
      img: "/static/images/common/alarmMessage.png",
      time: "5月15日",
      cont: "您收到一条最新消息，请及时查看",
      badge: 0,
      path: "/pages/common/alarmMessage/index",
    },
  ],
});

const { infoList } = toRefs(data);

function init() {
  getMceReceiveStatic().then((res) => {
    getDictList({
      dictType: "sys_message_type",
    }).then((res1) => {
      let receiveStatic = { infoTypeStatic:res.data.infoTypeStatic ,total:res.data.notReadCount }
      let dictList = res1.data.rows
      if(receiveStatic.infoTypeStatic.length>0){
        for (let i = 0; i < receiveStatic.infoTypeStatic.length; i++) {
          for (let j = 0; j < dictList.length; j++) {
            if(receiveStatic.infoTypeStatic[i].infoType == dictList[j].dictValue){
              receiveStatic.infoTypeStatic[i].label = dictList[j].dictLabel
              receiveStatic.infoTypeStatic[i].type = dictList[j].dictValue
              if(receiveStatic.infoTypeStatic[i].infoType == 1){
                receiveStatic.infoTypeStatic[i].img = "/static/images/common/noticeMessage.png"
              }
              if(receiveStatic.infoTypeStatic[i].infoType == 2){
                receiveStatic.infoTypeStatic[i].img = "/static/images/common/inspectionMessage.png"
              }
              if(receiveStatic.infoTypeStatic[i].infoType == 3){
                receiveStatic.infoTypeStatic[i].img = "/static/images/common/meetingMessage.png"
              }
              if(receiveStatic.infoTypeStatic[i].infoType == 4){
                receiveStatic.infoTypeStatic[i].img = "/static/images/common/alarmMessage.png"
              }
            }
          }
        }
      }
      stystemStore.infoList.static = receiveStatic;
    });
  });
}

function goAppMessage(path) {
  proxy.$tab.navigateTo(path);
}

function handleIconClick(type) {
  if (type === "设置") {
    proxy.$tab.navigateTo("/pages/mine/msg/index")
  }
}

onShow(() => {
  init();
});

onLoad((options) => {
  uni.hideTabBar(); //隐藏自带tabbar
});
</script>

<style lang="scss" scoped>
.info-container {
  padding:0 12px;
  .content-area {
    display: flex;
    padding: 13px 13px 13px 0px;
    border-bottom:1px solid #EDEDED;
    &-avatar {
      display: flex;
      margin: auto 20upx auto 0;
      position: relative;
      .image-bg {
        width: 40px;
        height: 40px;
      }
      .uni_top_right{
        position: absolute;
        right:-10px;
        top:-4px;
      }
    }

    &-child {
      width: calc(100% - (32px + 0.625rem));
      justify-content: center;
      margin: auto;
      .uni-item {
        display: flex;
        white-space: nowrap;

        .uni-item-text {
          margin-right: auto;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .uni-item-right {
          width: auto;
          text-align: right;
        }
      }
    }
  }
}
</style>