usky-web-mobile/src/pages/common/appMessage/index.vue

<template>
  <oa-scroll
    customClass="appMessage-container scroll-height"
    :pageSize="state.size"
    :total="state.total"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <u-loading-page :loading="state.loading" fontSize="16" style="z-index: 99"></u-loading-page>

      <view class="content-area" v-for="(group, date) in proxy.$common.groupedItems(state.noticeList, 'createTime')" :key="date">
        <view class="content-area-time font14">{{ proxy.$time.jktTimes(date, "否") }}</view>
        <view
          class="content-area-center flex bg-white list-cell list-cell-arrow"
          :id="ind == noticeList.length - 1 ? 'bottomInfo' : ''"
          v-for="(el, ind) in group"
          :key="ind"
          v-show="noticeList.length > 0"
          @click="goContentDetails(el)"
        >
          <view style="width: 100%; max-width: 100%">
            <view class="content-area-center-title font16">{{ el.infoTitle }}</view>
            <view class="content-area-center-cont font14">{{ el.infoContent }}</view>
          </view>
          <view class="content-area-center-badge"><u-badge :isDot="el.readFlag == 0 ? true : false" type="error"></u-badge></view>
          <view class="content-area-center-time font14">{{ proxy.$time.jktTimes(el.createTime.replace("T", " ")) }}</view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { getMceList, updateMceReceiveStatus } from "@/api/mine/info.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  scrollIntoView: "",
  loading: false,
  noticeList: [],
  size: 10,
  current: 1,
  total: 0,
  options: {
    typeName: "",
  },
});

const { scrollIntoView, noticeList } = toRefs(state);

/**
 * @跳转相应类型系统
 */
function goContentDetails(e) {
  if (e.infoType == 4) {
    proxy.$tab.navigateTo(`/pages/business/fireIot/alarmManage/alarmDetails/index?contentId=${e.contentId}`).then(() => {});
  } else if (e.infoType == 5) {
    proxy.$tab.navigateTo(`/pages/business/common/projectMange/record/details?reportId=${e.moduleId}`).then(() => {});
  } else {
    proxy.$tab.navigateTo(`/pages/common/appMessage/details?contentId=${e.contentId}`).then(() => {});
  }

  //是否已读
  if (!e.readFlag) {
    updateMceReceiveStatus({ id: e.id });
  }
}

/**
 * @通知公告列表
 * @api接口调用
 */
function init(obj) {
  uni.setNavigationBarTitle({
    title: obj.typeName ? obj.typeName : "消息列表",
  });

  state.loading = true;
  getMceList({
    size: state.size,
    current: state.current,
    infoType: obj?.type,
  })
    .then((requset) => {
      if (requset.status === "SUCCESS") {
        state.noticeList = requset.data.records;
        state.total = requset.data.total;
        state.loading = false;
      }
      setTimeout(() => {
        scrollIntoView.value = "bottomInfo";
      }, 0);

      if ("id" in obj) {
        state.noticeList.forEach((e) => {
          if (e.id == obj.id) {
            goContentDetails(e);
          }
        });
      }
    })
    .catch((err) => {
      state.loading = false;
    });
}

/**
 * @scrollView加载数据
 */
function load() {
  state.size += 10;
  init(state.options);
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  state.size = 10;
  init(state.options);
}

onLoad((options) => {
  state.options = options;
  init(state.options);
  uni.$on("projectMange_record", function (value) {
    delete state.options.id;
    init(state.options);
  });
});

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onUnload(() => {
  uni.$off("projectMange_record"); //将值删除监听器
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    proxy.$tab.navigateTo("/pages/mine/setting/index");
  }
});
</script>

<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}

.content-area {
  padding: 0 10px;

  &-time {
    padding: 10px;
    text-align: left;
    color: #000000;
    font-weight: 600;
  }

  &-center {
    margin: 0;
    padding: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eaeef1;

    &:nth-child(2) {
      border-radius: 10px 10px 0 0;
    }

    &:last-child {
      border-radius: 0 0 10px 10px;
      border-bottom: 0px solid #eaeef1;
    }

    &-avatar {
      margin: auto 0;
    }

    &-title {
      margin: 0 0 10px 0;
      font-weight: 600;
      color: #000000;
    }

    &-cont {
      color: #666666;
    }

    &-badge {
      margin: auto 10px auto 0;
    }

    &-time {
      margin: auto 0.9375rem auto 0;
    }
  }
}
</style>