@uxda/appkit 4.2.83 → 4.2.85

package/src/notice/components/NoticeList2.vue

@@ -1,249 +1,243 @@
-<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="'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="{
-            event: 'click',
-            elementText: '消息详情',
-          }" :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 Taro 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 {
-    Taro.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 {
-    Taro.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 {
-    &.inH5 {
-      width: 100%;
-      position: fixed;
-      z-index: 100;
-    }
-
-    .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-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="'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="{
+            event: 'click',
+            elementText: '消息详情',
+          }" :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 Taro 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 {
+    Taro.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 {
+    Taro.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>