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

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs :list="tabsList" :current="tabsCurrent" @click="tabsClick" lineColor="#333" :activeStyle="{ color: '#333' }" :inactiveStyle="{ color: '#909399' }" :scrollable="true"></u-tabs>
  </u-sticky>

  <scroll-view class="scroll-height" :scroll-y="true" :scroll-into-view="scrollIntoView" :data-theme="'theme-' + proxy.$settingStore.themeColor.name" style="padding-bottom: 44px">
    <view class="applicationInfo-container">
      <view class="content-area" v-show="tabsCurrent == 0">
        <u-empty v-show="allInfoList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
        <view :id="index == allInfoList.length - 1 ? 'bottomInfo' : ''" v-for="(all, index) in allInfoList" :key="index" v-show="allInfoList.length > 0" @click="goContentDetails(all)">
          <view class="content-area-time text-sm">{{ all.listTime }}</view>
          <view class="content-area-center radius bg-white">
            <view class="content-area-center-title">{{ all.typeTitle }}</view>
            <view class="content-area-center-cont">{{ all.listTitle }}</view>
          </view>
        </view>
      </view>
      <view class="content-area" v-show="tabsCurrent == 1">
        <u-empty v-show="noticeList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
        <view :id="index == noticeList.length - 1 ? 'bottomInfo' : ''" v-for="(all, index) in noticeList" :key="index" v-show="noticeList.length > 0" @click="goContentDetails(all)">
          <view class="content-area-time text-sm">{{ all.listTime }}</view>
          <view class="content-area-center radius bg-white">
            <view class="content-area-center-title">{{ all.typeTitle }}</view>
            <view class="content-area-center-cont">{{ all.listTitle }}</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { publicStores, useStores } from "@/store/modules/index";

import { infoList } from "@/api/common/applicationInfo.js";

const useStore = useStores();

const { proxy } = getCurrentInstance();

const data = reactive({
  scrollIntoView: "",

  tabsList: [
    {
      name: "全部",
    },
    {
      name: "通知公告",
    },
  ],
  tabsCurrent: 0,

  allInfoList: [],
  noticeList: [],
});

const { scrollIntoView, scrollIntoViewBool, tabsList, tabsCurrent, allInfoList, noticeList } = toRefs(data);

/**
 * @初始化
 */
function init() {
  infoListApi();
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  tabsCurrent.value = e.index;
}

/**
 * @跳转
 */
function goContentDetails(e) {
  if (e.type == "通知公告") {
    proxy.$tab.navigateTo(`/pages/common/textview/index1?title=${e.typeTitle}&content=${e.listContent}&contentTitle=${e.listTitle}`);
  }
}

/**
 * @通知公告列表
 * @api接口调用
 */
function infoListApi() {
  proxy.$modal.loading("加载中");
  infoList({
    pageNum: 1,
    pageSize: 20000,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      requset.data.rows.forEach((el) => {
        allInfoList.value.push({
          type: "通知公告",
          typeTitle: el.noticeType === "1" ? "系统通知" : el.noticeType === "2" ? "系统公告" : "系统消息",
          listTime: proxy.$common.jktTimes(el.createTime),
          listCreateTime: el.createTime,
          listTitle: el.noticeTitle,
          listContent: el.noticeContent,
        });

        noticeList.value.push({
          type: "通知公告",
          typeTitle: el.noticeType === "1" ? "系统通知" : el.noticeType === "2" ? "系统公告" : "系统消息",
          listTime: proxy.$common.jktTimes(el.createTime),
          listCreateTime: proxy.$common.jktTimes(el.createTime),
          listTitle: el.noticeTitle,
          listContent: el.noticeContent,
        });
      });

      setTimeout(() => {
        scrollIntoView.value = "bottomInfo";
      }, 0);

      setTimeout(() => {
        proxy.$modal.closeLoading();
      }, 100);
    }
  });
}

onLoad((options) => {
  init();
});

onReady(() => {});

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

// 自定义导航事件
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;
}

.applicationInfo-container {
  padding-bottom: 1px;

  .content-area {
    &-time {
      padding: 10px 0;
      text-align: center;
      color: #909399;
    }

    &-center {
      margin: 0 10px 20px 10px;
      padding: 15px;

      &-title {
        margin: 0 0 15px 0;
        color: #909399;
      }

      &-cont {
        font-weight: 600;
      }
    }
  }
}
</style>