@uxda/appkit 4.3.8 → 4.3.11

package/src/notice/components/NoticeList2.vue

@@ -1,400 +1,240 @@
-<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 {
-    setTimeout(() => {
-      getNotice();
-    }, 300);
-    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>
+<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>