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

<template>
  <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="消息列表" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="appMessage-container scroll-height"
    :customStyle="{ height: `calc(100vh - (44px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))` }"
    :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)"
        >
            
        <uni-swipe-action style="width: 100%;" ref="swipeAction">
          <uni-swipe-action-item :right-options="notice"  @click="noticeDelete(el)">
            <view style="display: flex; align-items: center;">
              <view style="width: 82% !important;float:left;">
                <view class="content-area-center-title font16">{{ el.infoTitle }}</view>
                <rich-text :nodes="el.infoContent" class="content-area-center-cont font14"></rich-text>
              </view>
              <view class="sign">
                <view class="badge"><u-badge :isDot="el.readFlag == 0 ? true : false" type="error"></u-badge></view>
                <view class="time font14">{{ proxy.$time.jktTimes(el.createTime.replace("T", " ")) }}</view>
              </view>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
        </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, mceDelete } from "@/api/mine/info.js";
import { projectApi } from "@/api/business/project.js";

/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  scrollIntoView: "",
  loading: false,
  noticeList: [],
  size: 10,
  current: 1,
  total: 0,
  options: {
    typeName: "",
  },
});
const notice = ref([
  {
    text: '删除',
    style: {
      backgroundColor: '#FF0000',
    },
    icon: 'trash', // 如果库支持图标，可以这样设置
  },
])
const swipeAction = ref(null);
const { scrollIntoView, noticeList } = toRefs(state);


/**
 * @跳转相应类型系统
 */
function goContentDetails(e) {
  //是否已读
  if (!e.readFlag) {
    updateMceReceiveStatus({ id: e.id });
  }
  if (e.infoType == 4) {
    proxy.$tab.navigateTo(`/pages/business/fireIot/alarmManage/alarmDetails/index?contentId=${e.contentId}`).then(() => {});
  } else if (e.infoType == 5) {
    if (e.readFlag != 1) {
      projectApi()
        .ReportRecordReadFlag({ reportId: e.id })
        .then((res) => {
          if (res.status == "SUCCESS") {
            proxy.$tab.navigateTo(`/pages/business/common/projectMange/record/details?reportId=${e.moduleId}`);
          } else {
            proxy.$modal.msgError("读取异常");
          }
        });
    } else {
      proxy.$tab.navigateTo(`/pages/business/common/projectMange/record/details?reportId=${e.moduleId}`);
    }
    //通知公告
  }else if(e.infoType == 1){
    proxy.$tab.navigateTo(`/pages/common/appMessage/nociteDetails?moduleId=${e.moduleId}`).then(() => {});
  }else if(e.infoType == 3){//OA消息
    if(e.infoContent){
      if(e.infoContent){
        if(e.infoContent.includes("新的审批任务")){
          proxy.$common.toPage(2,"todo")
        }else{
          proxy.$common.toPage(2,"me")
        }
      }else{
        proxy.$common.toPage(2,"todo")
      }
      
      
    }
  }else{
    proxy.$tab.navigateTo(`/pages/common/appMessage/details?contentId=${e.contentId}`).then(() => {});
  }
}

function noticeDelete(e) {
  mceDelete(e.contentId).then(() => {
    for(let i=0;i<noticeList.value.length;i++){
      if(noticeList.value[i].id == e.id){
        swipeAction.value[i].closeAll()       
        noticeList.value.splice(i,1);
      }
    }
    proxy.$modal.msg("删除成功");
  })
}

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

  state.loading = true;
  if(obj.id){
    if(obj.type == 3){
      if(obj?.oaType){
        proxy.$common.toPage(2,obj.oaType)
      }
    }else{
      getMceList({
        size: 1,
        current: 1,
        infoId: obj.id,
        infoType: obj?.type,
      })
        .then((requset) => {
          goContentDetails(requset.data.records[0]);
        })
        .catch((err) => {
          state.loading = false;
        });
      }
  }else{
    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);
      })
      .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;
  }

  .content-area-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;
    }
    .sign{
      width:18%;
      margin-right:4%;
      text-align: right;
      .badge {
        margin-right:6px;
        display: inline-block;
      }
      .time {
        display: inline-block;
      }
    }
    
  }
}
</style>
<style>
.uni-swipe_button-text,.uni-swipe_button .button-hock{
  font-size: 12px !important;
}
</style>