@uxda/appkit 4.3.2 → 4.3.3

package/src/notice/components/NoticeList2.vue

@@ -1,240 +1,398 @@
-<template>
-  <ns-page class="news-list">
-    <div class="tabContainer" :class="{ inH5: isWeb() }">
-      <!-- <ns-search
-       v-track-search="{
-          trackInput: false,
-          trackSubmit: true,
-          minLength: 2,
-        }"
-        style="margin: 0 12px"
-        placeholder="请输入关键字搜索"
-        v-model="state.search"
-      ></ns-search> -->
-      <ns-tabs v-model="state.tab" fill="#fff" square size="xl" style="height: 46px" @change="onTabChange">
-        <ns-tabs-item key="全部" tab="全部"></ns-tabs-item>
-        <ns-tabs-item key="业务消息" tab="业务消息"></ns-tabs-item>
-        <ns-tabs-item key="系统公告" tab="系统公告"></ns-tabs-item>
-        <ns-tabs-item key="未读" tab="未读"></ns-tabs-item>
-      </ns-tabs>
-      <div v-if="state.list.length > 0" class="read-all">
-        <div v-track-click class="btn"  @click="readAll">全部已读</div>
-      </div>
-    </div>
-    <ns-page-content class="mt-68px" scrollable refreshable :refresh-triggered="isRefresh"
-      @pull-down-refresh="onRefresh" @bottom-reached="nextPage">
-      <ns-skeleton :row="8" v-if="显示骨架屏" />
-
-      <template v-else>
-        <ns-repeator v-slot="item" align="stretch" direction="column" :gap="10" :data="state.list"
-          :show-no-more="paging.isLastPage">
-          <ns-card v-track-click="'消息详情'" :r="5" fill="#fff" class="news-item w-full" @click="itemClick(item)">
-            <div v-if="item.标题" :style="{ color: item.已读 ? '#35353599' : '#353535' }" class="news-item-title">
-              <img v-if="item.是公告" class="news-item-title-icon"
-                src="https://cdn.ddjf.com/static/images/loan-manage-app/ic_msg_system_notice.webp" />
-              {{ item.标题 }}
-            </div>
-            <nut-ellipsis :style="{ color: item.已读 ? '#35353566' : '#353535CC' }" class="news-item-content"
-              direction="end" rows="3" expand-text="展开" collapse-text="收起" :content="item.内容"></nut-ellipsis>
-            <div class="news-item-time">{{ item.时间 }}</div>
-          </ns-card>
-        </ns-repeator>
-        <ns-empty v-if="state.list.length == 0" />
-        <div class="safe-area-space"></div>
-      </template>
-    </ns-page-content>
-  </ns-page>
-</template>
-
-<script setup lang="ts">
-import { useDidShow } from '@tarojs/taro'
-import { showLoading, hideLoading } from '@tarojs/taro'
-import { type WithPaging, usePaging } from '@uxda/nutshell/taro'
-import { useHttp, endpoints } from '../api'
-import { reactive, ref } from 'vue'
-import { useAppKitOptions } from '../../Appkit'
-import {
-  NsTabs,
-  NsTabsItem,
-  NsRepeator,
-  NsCard,
-  NsPage,
-  NsPageContent,
-  NsSkeleton,
-  NsEmpty,
-} from "@uxda/nutshell/taro";
-import { isWeb } from '../../utils/utils';
-
-const props = withDefaults(
-  defineProps<{
-    deviceType?: string;
-    userId: string;
-    app: string;
-  }>(),
-  {
-    deviceType: "2",
-    userId: "",
-    app: "",
-  }
-);
-
-const $http = useHttp(),
-  显示骨架屏 = ref(true)
-
-useDidShow(() => {
-  nextPage(1)
-})
-const state = reactive({
-  search: '',
-  tab: '全部',
-  list: [] as any[],
-})
-
-async function load(page: number) {
-  if (!props.app?.replace(',cloudkitPro', '')) {
-    state.list = []
-    return { paging: { page: 1, pageSize: 10, total: 0 }, data: [] }
-  }
-
-  const appkitOptions = useAppKitOptions()
-  const data = {
-    page,
-    pageSize: 10,
-    appCode: props.app,
-    tenantId: appkitOptions.tenant(),
-    userId: props.userId,
-    deviceType: props.deviceType,
-    readOrderStatus: '1',
-  }
-
-  if (state.tab == '业务消息') {
-    data['msgType'] = '1'
-  } else if (state.tab == '系统公告') {
-    data['msgType'] = '3'
-  }
-
-  if (state.tab == '未读') {
-    data['isRead'] = '0'
-  }
-
-  const ep = endpoints['消息列表']
-  return $http.post<WithPaging<any[]>>(ep, data).then((res) => {
-    显示骨架屏.value = false
-    if (page === 1) {
-      state.list = []
-    }
-    state.list = [...state.list, ...res.data]
-    return { paging: res.paging, data: res.data }
-  })
-}
-
-const { paging, nextPage } = usePaging(load)
-
-function onTabChange() {
-  显示骨架屏.value = true
-  nextPage(1)
-}
-
-const isRefresh = ref(false)
-async function onRefresh() {
-  isRefresh.value = true
-  await nextPage(1)
-  isRefresh.value = false
-}
-
-function itemClick(item: any) {
-  read(item)
-
-  emits('itemClick', item)
-}
-
-function read(item: any) {
-  if (item.isRead == '1') return
-  const ep = endpoints['已读']
-  $http.post(ep, [item.id]).then(() => {
-    item['已读'] = true
-  })
-}
-
-async function readAll() {
-  try {
-    showLoading({
-      title: '请稍后...',
-    })
-
-    const appkitOptions = useAppKitOptions()
-    const ep = endpoints['全部已读']
-    const data = {
-      tenantId: appkitOptions.tenant(),
-      userId: props.userId,
-      deviceType: props.deviceType,
-    }
-    $http.post(ep, data).then(() => {
-      state.list.forEach((item) => {
-        item['已读'] = true
-      })
-    })
-  } finally {
-    hideLoading()
-  }
-}
-
-const emits = defineEmits(['itemClick'])
-
-defineExpose({
-  readAll,
-})
-</script>
-
-<style lang="scss">
-.news-list {
-  .safe-area-space {
-    padding-bottom: calc(var(--bottom) + 60px);
-    padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
-  }
-
-  .tabContainer {
-    .read-all {
-      width: 100%;
-      text-align: end;
-      height: 22px;
-      line-height: 22px;
-      padding: 5px 0;
-      background-color: var(--fill, var(--ns-background));
-
-      .btn {
-        color: #017fff;
-        font-size: 14px;
-        font-weight: 500;
-        margin-right: 16px;
-      }
-    }
-  }
-
-  .news-item {
-    &-title {
-      font-size: 16px;
-      font-weight: 500;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      &-icon {
-        width: 20px;
-        height: 20px;
-        margin-right: 4px;
-      }
-    }
-
-    &-content {
-      font-size: 14px;
-    }
-
-    &-time {
-      font-size: 13px;
-      color: #35353566;
-      text-align: end;
-    }
-  }
-}
-</style>
+<template>
+  <ns-page class="news-list">
+    <div class="tabContainer" :class="{ inH5: isWeb() }">
+      <!-- <ns-tabs
+        v-model="state.tab"
+        fill="#fff"
+        square
+        size="xl"
+        style="height: 46px"
+        @change="onTabChange"
+      >
+        <ns-tabs-item key="全部" tab="全部"></ns-tabs-item>
+        <ns-tabs-item key="业务消息" tab="业务消息"></ns-tabs-item>
+        <ns-tabs-item key="系统公告" tab="系统公告"></ns-tabs-item>
+        <ns-tabs-item key="未读" tab="未读"></ns-tabs-item>
+      </ns-tabs> -->
+      <ns-tabs
+        v-model="state.tab"
+        fill="#fff"
+        square
+        size="xl"
+        style="height: 46px"
+        class="news-tab"
+        :items="tabList"
+      >
+        <template #titles>
+          <div
+            v-for="item in tabList"
+            :class="{ customLine: state.tab === item.value }"
+            :key="item.value"
+            class="nut-tabs__titles-item custom-tab-item"
+            @click="
+              state.tab = item.value;
+              onTabChange();
+            "
+          >
+            <div
+              class="custom-title"
+              :class="{ active: state.tab === item.value }"
+            >
+              <div>{{ item.label }}</div>
+              <div
+                class="custom-title-dot"
+                v-if="item.value === '未读' && noticeShow"
+              >
+                •••
+              </div>
+            </div>
+          </div>
+        </template>
+      </ns-tabs>
+
+      <div v-if="state.list.length > 0" class="read-all">
+        <div v-track-click class="btn" @click="readAll">全部已读</div>
+      </div>
+    </div>
+    <ns-page-content
+      class="mt-68px"
+      scrollable
+      refreshable
+      :refresh-triggered="isRefresh"
+      @pull-down-refresh="onRefresh"
+      @bottom-reached="nextPage"
+    >
+      <ns-skeleton :row="8" v-if="显示骨架屏" />
+
+      <template v-else>
+        <ns-repeator
+          v-slot="item"
+          align="stretch"
+          direction="column"
+          :gap="10"
+          :data="state.list"
+          :show-no-more="paging.isLastPage"
+        >
+          <ns-card
+            v-track-click="'消息详情'"
+            :r="5"
+            fill="#fff"
+            class="news-item w-full"
+            @click="itemClick(item)"
+          >
+            <div
+              v-if="item.标题"
+              :style="{ color: item.已读 ? '#35353599' : '#353535' }"
+              class="news-item-title"
+            >
+              <img
+                v-if="item.是公告"
+                class="news-item-title-icon"
+                src="https://cdn.ddjf.com/static/images/fnfundkit/ic_msg_system_notice.png"
+              />
+              {{ item.标题 }}
+            </div>
+            <nut-ellipsis
+              :style="{ color: item.已读 ? '#35353566' : '#353535CC' }"
+              class="news-item-content"
+              direction="end"
+              rows="3"
+              expand-text="展开"
+              collapse-text="收起"
+              :content="item.内容"
+            ></nut-ellipsis>
+            <div class="news-item-time">{{ item.时间 }}</div>
+          </ns-card>
+        </ns-repeator>
+        <ns-empty v-if="state.list.length == 0" />
+        <div class="safe-area-space"></div>
+      </template>
+    </ns-page-content>
+  </ns-page>
+</template>
+
+<script setup lang="ts">
+import { useDidShow } from '@tarojs/taro';
+import { showLoading, hideLoading } from '@tarojs/taro';
+import { type WithPaging, usePaging } from '@uxda/nutshell/taro';
+import { useHttp, endpoints } from '../api';
+import { reactive, ref } from 'vue';
+import { useAppKitOptions } from '../../Appkit';
+import {
+  NsTabs,
+  NsTabsItem,
+  NsRepeator,
+  NsCard,
+  NsPage,
+  NsPageContent,
+  NsSkeleton,
+  NsEmpty,
+} from '@uxda/nutshell/taro';
+import { isWeb } from '../../utils/utils';
+
+const props = withDefaults(
+  defineProps<{
+    deviceType?: string;
+    userId: string;
+    app: string;
+  }>(),
+  {
+    deviceType: '2',
+    userId: '',
+    app: '',
+  }
+);
+
+interface tabListType {
+  label: string;
+  value: string;
+  hasRead?: boolean;
+}
+const tabList = ref<tabListType[]>([
+  {
+    label: '全部',
+    value: '全部',
+  },
+  {
+    label: '业务消息',
+    value: '业务消息',
+  },
+  {
+    label: '系统公告',
+    value: '系统公告',
+  },
+  {
+    label: '未读',
+    value: '未读',
+  },
+]);
+
+const $http = useHttp(),
+  显示骨架屏 = ref(true);
+
+useDidShow(() => {
+  nextPage(1);
+  getNotice();
+});
+const state = reactive({
+  search: '',
+  tab: '全部',
+  list: [] as any[],
+});
+
+async function load(page: number) {
+  if (!props.app?.replace(',cloudkitPro', '')) {
+    state.list = [];
+    return { paging: { page: 1, pageSize: 10, total: 0 }, data: [] };
+  }
+
+  const appkitOptions = useAppKitOptions();
+  const data = {
+    page,
+    pageSize: 10,
+    appCode: props.app,
+    tenantId: appkitOptions.tenant(),
+    userId: props.userId,
+    deviceType: props.deviceType,
+    readOrderStatus: '1',
+  };
+
+  if (state.tab == '业务消息') {
+    data['msgType'] = '1';
+  } else if (state.tab == '系统公告') {
+    data['msgType'] = '3';
+  }
+
+  if (state.tab == '未读') {
+    data['isRead'] = '0';
+  }
+
+  const ep = endpoints['消息列表'];
+  return $http.post<WithPaging<any[]>>(ep, data).then((res) => {
+    显示骨架屏.value = false;
+    if (page === 1) {
+      state.list = [];
+    }
+    state.list = [...state.list, ...res.data];
+    return { paging: res.paging, data: res.data };
+  });
+}
+
+const { paging, nextPage } = usePaging(load);
+
+function onTabChange() {
+  显示骨架屏.value = true;
+  nextPage(1);
+}
+
+const isRefresh = ref(false);
+async function onRefresh() {
+  isRefresh.value = true;
+  await nextPage(1);
+  isRefresh.value = false;
+}
+
+function itemClick(item: any) {
+  read(item);
+  getNotice();
+  emits('itemClick', item);
+}
+
+function read(item: any) {
+  if (item.isRead == '1') return;
+  const ep = endpoints['已读'];
+  $http.post(ep, [item.id]).then(() => {
+    item['已读'] = true;
+  });
+}
+
+async function readAll() {
+  try {
+    showLoading({
+      title: '请稍后...',
+    });
+
+    const appkitOptions = useAppKitOptions();
+    const ep = endpoints['全部已读'];
+    const data = {
+      tenantId: appkitOptions.tenant(),
+      userId: props.userId,
+      deviceType: props.deviceType,
+    };
+    $http.post(ep, data).then(() => {
+      state.list.forEach((item) => {
+        item['已读'] = true;
+      });
+    });
+  } finally {
+    getNotice();
+    hideLoading();
+  }
+}
+
+// 通知红点
+const noticeShow = ref(false);
+async function getNotice() {
+  const appkitOptions = useAppKitOptions();
+  const $http = useHttp();
+
+  $http
+    .get('/cas/msg/count-unread', {
+      deviceType: 2,
+      appCode: props.app,
+      tenantId: appkitOptions.tenant(),
+      userId: props.userId,
+    })
+    .then((result: any) => {
+      if (typeof result === 'object') return;
+
+      noticeShow.value = result > 0;
+    });
+}
+
+const emits = defineEmits(['itemClick']);
+
+defineExpose({
+  readAll,
+});
+</script>
+
+<style lang="scss">
+.news-list {
+  .safe-area-space {
+    padding-bottom: calc(var(--bottom) + 60px);
+    padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
+  }
+
+  .tabContainer {
+    .read-all {
+      width: 100%;
+      text-align: end;
+      height: 22px;
+      line-height: 22px;
+      padding: 5px 0;
+      background-color: var(--fill, var(--ns-background));
+
+      .btn {
+        color: #017fff;
+        font-size: 14px;
+        font-weight: 500;
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .news-item {
+    &-title {
+      font-size: 16px;
+      font-weight: 500;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      &-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+      }
+    }
+
+    &-content {
+      font-size: 14px;
+    }
+
+    &-time {
+      font-size: 13px;
+      color: #35353566;
+      text-align: end;
+    }
+  }
+}
+.news-tab {
+  .nut-tabs__list {
+    display: flex;
+  }
+  .custom-tab-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+  }
+  .customLine {
+    position: relative;
+  }
+  .customLine::after {
+    content: '';
+    position: absolute;
+    width: 50px;
+    height: 2px;
+    background: #017fff;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .custom-title {
+    color: #8a8a8a;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    &-dot {
+      height: 12px;
+      line-height: 12px;
+      padding: 0 6px;
+      color: #fff;
+      border-radius: 8px;
+      background: #e04747;
+      margin-left: 2px;
+      font-size: 9px;
+    }
+  }
+  .custom-title.active {
+    color: #017fff;
+    font-weight: 600;
+    font-size: 17px;
+  }
+}
+</style>