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">
          消息
        </view>
      </view>
      <view class="u-navbar__content__left__item topBadge">
        <u-badge numberType="overflow" max="99" :value="infoList.total || 0"></u-badge>
      </view>
      <view class="u-navbar__content__left__item" @click="clearMsg" v-if="infoList.total >0">
        <image class="image-bg-top" src="/static/images/common/clear.png" />
      </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}));position: relative;`">
    <view class="content-area list-cell list-cell-arrow" v-for="item in infoList.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 } from "@dcloudio/uni-app";
import {  reactive, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { getMceReceiveStatic, getDictList, updateMceReceiveStatus } from "@/api/mine/info.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
import { storage_msgType } from "@/utils/storage"; 
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/

const data = reactive({
  infoList: {
    infoTypeStatic:[],
    total:0
  }
});

const { infoList } = toRefs(data);

function init() {
  getMceReceiveStatic().then((res) => {
    getDictList({
      dictType: "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"
              }
            }
          }
        }
      }
      infoList.value = receiveStatic
      storage_msgType.set("msgType",receiveStatic)
    });
  });
}
/**
 * 清除消息
 */
function clearMsg(){
  if(infoList.value.total >0){
    updateMceReceiveStatus({id:0}).then(() => {
      init()
    })
  }
}
function goAppMessage(path) {
  proxy.$tab.navigateTo(path);
}

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

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

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

<style lang="scss" scoped>
.topBadge{
  margin-top:-14px;
  margin-left:0px;
}
.image-bg-top{
  width:15px;
  height:19px;
}
.info-container {
  padding:0 12px;
  .content-area {
    display: flex;
    padding: 13px 13px 13px 0px;
    &-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;
        }
      }
    }
  }
}
.list-cell-arrow::before{
  right:10rpx
}
</style>