@uxda/appkit 4.2.82 → 4.2.84

package/src/notice/components/NoticeList2.vue

@@ -0,0 +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 {
+    .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>

package/src/notice/components/NoticePopup.vue

@@ -1,163 +1,163 @@
-<template>
-  <nut-popup pop-class="notice-popup" :close-on-click-overlay="false" v-model:visible="showPopup" round>
-    <div class="notice-popup-hd">
-      <img class="notice-popup-hd-icon" src="https://cdn.ddjf.com/static/images/customer-center/system-notice-1.png"
-        alt="" />系统公告
-    </div>
-    <div class="notice-popup-bd">
-      <div style="white-space: pre-wrap">{{ message.context.replace('【系统公告】 ', '') }}</div>
-      <div v-if="message.jumpUrl || message.link" class="notice-popup-bd-link" @click="toViewAttachment">
-        点击查看附件
-      </div>
-    </div>
-    <div class="notice-popup-ft">
-      <div class="notice-popup-ft-btn" @click="onClose">我知道了</div>
-    </div>
-  </nut-popup>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import { useHttp } from '../api'
-
-const props = withDefaults(
-  defineProps<{
-    message: any
-    device?: string
-  }>(),
-  {
-    message: {},
-    device: 'MINI',
-  }
-)
-
-const showPopup = ref(true)
-
-onMounted(() => { })
-
-// 关闭
-function onCancel() {
-  showPopup.value = false
-
-  emits('close')
-}
-
-// 查看附件
-function toViewAttachment() {
-  onClose()
-
-  emits('view', props.message.jumpUrl || props.message.link)
-}
-
-// 关闭弹框
-async function onClose() {
-  const $http = useHttp()
-
-  $http
-    .post('/cas/msg/setMsgStatus', {
-      device: props.device || 'MINI',
-      noticeStatus: 0,
-      receiveId: props.message.id,
-    })
-    .then(() => {
-      // if (props.message.isRead === 0) {
-      //   toReadFun([props.message.id])
-      // }
-      onCancel()
-    })
-}
-
-const emits = defineEmits(['close', 'view'])
-</script>
-
-<style lang="scss">
-.notice-popup {
-  width: 280px;
-  padding: 20px 15px;
-  border-radius: 10px !important;
-  background: linear-gradient(136.72deg, #d0fdfe 6.02%, #a2b9ff 59.97%, #6593ff 108.78%);
-
-  &::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    background: linear-gradient(360deg, #ffffff 4.73%, rgba(255, 255, 255, 0) 85.82%);
-    z-index: 1;
-    border-radius: 10px;
-  }
-
-  &::before {
-    content: '';
-    width: 236px;
-    height: 241px;
-    position: absolute;
-    top: 0;
-    right: 40px;
-    background: url('https://cdn.ddjf.com/static/images/customer-center/notice-modal-bg.png');
-  }
-
-  .nutui-popup__content-wrapper {
-    position: relative;
-    z-index: 2;
-  }
-
-  &-hd {
-    color: #0a2668;
-    font-size: 17px;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    font-weight: 600;
-
-    &-icon {
-      width: 20px;
-      height: 20px;
-      margin-right: 4px;
-    }
-  }
-
-  &-bd {
-    position: relative;
-    z-index: 10;
-    color: #353535;
-    box-shadow: 0px 2px 8px 0px #ffffff33 inset, 0px 1px 1px 0px #ffffff80 inset,
-      0px 0px 1px 0px #ffffffb2;
-    border-radius: 3px;
-    background: rgba(255, 255, 255, 0.6);
-    min-height: 160px;
-    margin-bottom: 20px;
-    padding: 15px 10px;
-    box-sizing: border-box;
-    font-size: 10px;
-
-    &-link {
-      color: #007fff;
-      margin-top: 2px;
-      font-weight: 600;
-    }
-  }
-
-  &-ft {
-    position: relative;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &-btn {
-      background: #007fff;
-      color: #fff;
-      width: 128px;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 15px;
-      z-index: 10;
-    }
-  }
-}
-</style>
+<template>
+  <nut-popup pop-class="notice-popup" :close-on-click-overlay="false" v-model:visible="showPopup" round>
+    <div class="notice-popup-hd">
+      <img class="notice-popup-hd-icon" src="https://cdn.ddjf.com/static/images/customer-center/system-notice-1.png"
+        alt="" />系统公告
+    </div>
+    <div class="notice-popup-bd">
+      <div style="white-space: pre-wrap">{{ message.context.replace('【系统公告】 ', '') }}</div>
+      <div v-if="message.jumpUrl || message.link" class="notice-popup-bd-link" @click="toViewAttachment">
+        点击查看附件
+      </div>
+    </div>
+    <div class="notice-popup-ft">
+      <div class="notice-popup-ft-btn" @click="onClose">我知道了</div>
+    </div>
+  </nut-popup>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useHttp } from '../api'
+
+const props = withDefaults(
+  defineProps<{
+    message: any
+    device?: string
+  }>(),
+  {
+    message: {},
+    device: 'MINI',
+  }
+)
+
+const showPopup = ref(true)
+
+onMounted(() => { })
+
+// 关闭
+function onCancel() {
+  showPopup.value = false
+
+  emits('close')
+}
+
+// 查看附件
+function toViewAttachment() {
+  onClose()
+
+  emits('view', props.message.jumpUrl || props.message.link)
+}
+
+// 关闭弹框
+async function onClose() {
+  const $http = useHttp()
+
+  $http
+    .post('/cas/msg/setMsgStatus', {
+      device: props.device || 'MINI',
+      noticeStatus: 0,
+      receiveId: props.message.id,
+    })
+    .then(() => {
+      // if (props.message.isRead === 0) {
+      //   toReadFun([props.message.id])
+      // }
+      onCancel()
+    })
+}
+
+const emits = defineEmits(['close', 'view'])
+</script>
+
+<style lang="scss">
+.notice-popup {
+  width: 280px;
+  padding: 20px 15px;
+  border-radius: 10px !important;
+  background: linear-gradient(136.72deg, #d0fdfe 6.02%, #a2b9ff 59.97%, #6593ff 108.78%);
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: linear-gradient(360deg, #ffffff 4.73%, rgba(255, 255, 255, 0) 85.82%);
+    z-index: 1;
+    border-radius: 10px;
+  }
+
+  &::before {
+    content: '';
+    width: 236px;
+    height: 241px;
+    position: absolute;
+    top: 0;
+    right: 40px;
+    background: url('https://cdn.ddjf.com/static/images/customer-center/notice-modal-bg.png');
+  }
+
+  .nutui-popup__content-wrapper {
+    position: relative;
+    z-index: 2;
+  }
+
+  &-hd {
+    color: #0a2668;
+    font-size: 17px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    font-weight: 600;
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+    }
+  }
+
+  &-bd {
+    position: relative;
+    z-index: 10;
+    color: #353535;
+    box-shadow: 0px 2px 8px 0px #ffffff33 inset, 0px 1px 1px 0px #ffffff80 inset,
+      0px 0px 1px 0px #ffffffb2;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.6);
+    min-height: 160px;
+    margin-bottom: 20px;
+    padding: 15px 10px;
+    box-sizing: border-box;
+    font-size: 10px;
+
+    &-link {
+      color: #007fff;
+      margin-top: 2px;
+      font-weight: 600;
+    }
+  }
+
+  &-ft {
+    position: relative;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-btn {
+      background: #007fff;
+      color: #fff;
+      width: 128px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 15px;
+      z-index: 10;
+    }
+  }
+}
+</style>

package/src/notice/components/index.ts

@@ -1,5 +1,6 @@
-import NoticeBanner from './NoticeBanner.vue'
-import NoticeEntry from './NoticeEntry.vue'
-import NoticeList from './NoticeList.vue'
-
-export { NoticeBanner, NoticeEntry, NoticeList }
+import NoticeBanner from './NoticeBanner.vue'
+import NoticeEntry from './NoticeEntry.vue'
+import NoticeList from './NoticeList.vue'
+import NoticeList2 from './NoticeList2.vue'
+
+export { NoticeBanner, NoticeEntry, NoticeList, NoticeList2 }