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 topImage" @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 font20" @click="handleIconClick('设置')"></text>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="info-container scroll-height bg-white"
    :customStyle="{ height: `calc(100vh - (50px + ${proxy.$settingStore.barHightTop} + ${proxy.$settingStore.tabBarHeight}))`, position: 'relative' }"
    :refresherLoad="false"
    :refresherEnabled="true"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @refresh="init()"
  >
    <template #default>
      <view class="content-area list-cell list-cell-arrow" v-for="item in infoList.infoTypeStatic" :key="item" @tap="goAppMessage(item)">
        <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>
    </template>
  </oa-scroll>

  <oa-tabbar :tabbarValue="1" :tabbarList="proxy.$constData.homeTabbar"></oa-tabbar>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { getMceReceiveStatic, updateMceReceiveStatus } from "@/api/mine/info.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
import { storageSystem } from "@/utils/storage";
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const { message_type } = proxy.useDict("message_type");
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  infoList: {
    infoTypeStatic: [],
    total: 0,
  },
});
const { infoList } = toRefs(state);

function init() {
  getMceReceiveStatic().then((res) => {
    let receiveStatic = { infoTypeStatic: res.data.infoTypeStatic, total: res.data.notReadCount };
    let dictList = message_type.value;
    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].value) {
            receiveStatic.infoTypeStatic[i].label = dictList[j].label;
            receiveStatic.infoTypeStatic[i].type = dictList[j].value;
            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";
            }
            if (receiveStatic.infoTypeStatic[i].infoType == 5) {
              receiveStatic.infoTypeStatic[i].img = "/static/images/common/reportMessage.png";
            }
          }
        }
      }
    }

    proxy.$setting.setBadge(res.data.notReadCount); // 设置角标值
    state.infoList = receiveStatic;
    storageSystem.set("infoList", receiveStatic);
  });
}

/**
 * 清除消息
 */
function clearMsg() {
  updateMceReceiveStatus({ id: 0 }).then(() => {
    proxy.$setting.setBadge(0); // 设置角标值
    init();
  });
}

function goAppMessage(item) {
  proxy.$tab.navigateTo(`/pages/common/appMessage/index?type=${item.type}&typeName=${item.label}`);
}

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

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

onLoad(() => {});
</script>

<style lang="scss" scoped>
.topImage {
  display: flex;
  margin: 0 auto;
}
.topBadge {
  margin-top: -14px;
  margin-left: 0px;
}
.image-bg-top {
  width: 15px;
  height: 19px;
}
.info-container {
  .content-area {
    display: flex;
    padding: 13px 13px 13px 13px;
    &-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>