usky-web-mobile/src/pages/info copy.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>
    </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-jiahao" @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}))` }"
    :refresherLoad="false"
    :refresherEnabled="true"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @refresh="init()"
  >
    <template #default>
      <view class="content-area" v-for="item in infoList" :key="item" @tap="goAppMessage(item.path)">
        <view class="content-area-avatar">
          <image class="image-bg" :src="item.img" />
        </view>
        <view class="content-area-child">
          <view class="uni-item mb5">
            <view class="uni-item-text font14" style="color: #000000">{{ item.label }}</view>
            <view class="uni-item-right font12" style="color: #909399">{{ item.time }}</view>
          </view>
          <view class="uni-item">
            <view class="uni-item-text font12" style="color: #909399">{{ item.cont }}</view>
            <view class="uni-item-right font12" style="margin: auto 0">
              <u-badge numberType="overflow" max="99" :value="item.badge"></u-badge>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>

  <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 } from "@/api/mine/info.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { systemStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const systemStore = systemStores();
const { message_type } = proxy.useDict("message_type");
/*----------------------------------变量声明-----------------------------------*/

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) => {
    systemStore.infoList.messageCountData = res.data;
    systemStore.infoList.messageTypeData = message_type.value;
    res.data.infoTypeStatic.forEach((e) => {});
  });
}

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

function handleIconClick(type) {
  if (type === "清除") {
  } else if (type === "搜索") {
    proxy.$tab.navigateTo("/pages/common/searchSelect/index");
  } else if (type === "加号") {
  }
}

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

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

<style lang="scss" scoped>
.info-container {
  .content-area {
    display: flex;
    padding: 13px 13px 0 13px;

    &-avatar {
      display: flex;
      margin: auto 20upx auto 0;
      .image-bg {
        width: 40px;
        height: 40px;
      }
    }

    &-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>