@uxda/appkit 1.2.34 → 1.2.38

package/src/notice/components/NoticeBanner.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="notice-banner">
+    <DdNoticeBar
+      :class="{ show: key === activeKey }"
+      v-for="(item, key) in bannerMessages"
+      :key="key"
+      :showClose="item.noticeType === 0"
+      @close="onClose(item, key)"
+    >
+      <img
+        class="notice-banner-icon"
+        src="https://cdn.ddjf.com/static/images/customer-center/notice-icon.png"
+        alt=""
+      />
+      <div class="notice-banner-text">
+        {{ item.context }}
+      </div>
+      <div class="notice-banner-btn" @click="onDetail">详情</div>
+    </DdNoticeBar>
+  </div>
+
+  <!-- 系统公告强制弹框 -->
+  <template v-for="(item, key) in popMessages" :key="key">
+    <NoticePopup :message="item" @close="popMessages.splice(key, 1)" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useHttp } from '../api'
+import { useAppKitOptions } from '../../Appkit'
+import DdNoticeBar from '../../components/dd-notice-bar/index.vue'
+import NoticePopup from './NoticePopup.vue'
+import Taro from '@tarojs/taro'
+import { useNotice } from './useNotice'
+
+const props = withDefaults(
+  defineProps<{
+    app: string
+  }>(),
+  {
+    app: '',
+  }
+)
+
+const { toReadFun, noticeClick } = useNotice()
+const bannerMessages = ref<any[]>([]) // 横幅消息
+const popMessages = ref<any[]>([]) // 弹窗消息
+const activeKey = ref(0)
+
+onMounted(() => {
+  queryNoticeMsg()
+})
+
+// 查询当前用户当前应用系统消息
+async function queryNoticeMsg() {
+  const appkitOptions = useAppKitOptions()
+
+  const $http = useHttp()
+  $http
+    .post('/cas/msg/queryNoticeMsg', {
+      device: 'MINI',
+      deviceType: 2,
+      msgType: 3,
+      appCode: props.app || appkitOptions.app(),
+      tenantId: appkitOptions.tenant(),
+    })
+    .then((result) => {
+      // const result = [
+      //   {
+      //     id: 92989,
+      //     appCode: 'loankit',
+      //     sendType: 11,
+      //     isRead: 1,
+      //     receiveTime: 1718189848000,
+      //     textId: 173545,
+      //     title: '测试消息',
+      //     context:
+      //       '尊敬的客户，为给您提供更加丰富和优质的金融产品及服为给您提供更加丰富和优质的金融产品及服',
+      //     businessId: '123123',
+      //     link: 'www.baidu.com',
+      //     miniLink: 'www.baidu.com',
+      //     appLink: '',
+      //     source: '测试',
+      //     msgType: 3,
+      //     userName: 'gao',
+      //     deviceType: 0,
+      //     customerName: '',
+      //     userId: '1580078112058789890',
+      //     sendTenant: '',
+      //     receiveTenant: '',
+      //     popDevice: '',
+      //     isPop: 1,
+      //     expiryTime: '2025-06-09 14:35:28',
+      //     noticeType: 0,
+      //     noticeStatus: '0',
+      //   },
+      //   {
+      //     id: 92989,
+      //     appCode: 'loankit',
+      //     sendType: 11,
+      //     isRead: 1,
+      //     receiveTime: 1718189848000,
+      //     textId: 173545,
+      //     title: '测试消息',
+      //     context: '你好呀，我111',
+      //     businessId: '123123',
+      //     link: 'www.baidu.com',
+      //     miniLink: 'www.baidu.com',
+      //     appLink: '',
+      //     source: '测试',
+      //     msgType: 3,
+      //     userName: 'gao',
+      //     deviceType: 0,
+      //     customerName: '',
+      //     userId: '1580078112058789890',
+      //     sendTenant: '',
+      //     receiveTenant: '',
+      //     popDevice: '',
+      //     isPop: 1,
+      //     expiryTime: '2025-06-09 14:35:28',
+      //     noticeType: 0,
+      //     noticeStatus: '0',
+      //   },
+      //   {
+      //     id: 92989,
+      //     appCode: 'loankit',
+      //     sendType: 11,
+      //     isRead: 1,
+      //     receiveTime: 1718189848000,
+      //     textId: 173545,
+      //     title: '测试消息',
+      //     context: '你好呀，我222',
+      //     businessId: '123123',
+      //     link: 'www.baidu.com',
+      //     miniLink: 'www.baidu.com',
+      //     appLink: '',
+      //     source: '测试',
+      //     msgType: 3,
+      //     userName: 'gao',
+      //     deviceType: 0,
+      //     customerName: '',
+      //     userId: '1580078112058789890',
+      //     sendTenant: '',
+      //     receiveTenant: '',
+      //     popDevice: '',
+      //     isPop: 1,
+      //     expiryTime: '2025-06-09 14:35:28',
+      //     noticeType: 0,
+      //     noticeStatus: '0',
+      //   },
+      //   {
+      //     id: 92989,
+      //     appCode: 'loankit',
+      //     sendType: 11,
+      //     isRead: 1,
+      //     receiveTime: 1718189848000,
+      //     textId: 173545,
+      //     title: '测试消息',
+      //     context: '你好呀，我333',
+      //     businessId: '123123',
+      //     link: 'www.baidu.com',
+      //     miniLink: 'www.baidu.com',
+      //     appLink: '',
+      //     source: '测试',
+      //     msgType: 3,
+      //     userName: 'gao',
+      //     deviceType: 0,
+      //     customerName: '',
+      //     userId: '1580078112058789890',
+      //     sendTenant: '',
+      //     receiveTenant: '',
+      //     popDevice: '',
+      //     isPop: 1,
+      //     expiryTime: '2025-06-09 14:35:28',
+      //     noticeType: 0,
+      //     noticeStatus: '0',
+      //   },
+      // ]
+      bannerMessages.value = (result || []).filter((item: any) => item.noticeType !== undefined)
+      popMessages.value = (result || []).filter((item: any) => item.isPop)
+      startMessage()
+    })
+}
+
+let interval: any = null
+// 启动消息轮播
+function startMessage() {
+  clearInterval(interval)
+  if (bannerMessages.value.length > 1) {
+    interval = setInterval(() => {
+      startMessageCalc()
+      if (bannerMessages.value.length <= 1) {
+        clearInterval(interval)
+      }
+    }, 3000)
+  }
+}
+function startMessageCalc() {
+  if (activeKey.value < bannerMessages.value.length - 1) {
+    activeKey.value++
+  } else {
+    activeKey.value = 0
+  }
+}
+
+// 关闭横幅
+function onClose(item: any, index: number) {
+  const $http = useHttp()
+  $http
+    .post('/cas/msg/setMsgStatus', {
+      device: 'PC',
+      deviceType: 0,
+      noticeStatus: 1,
+      receiveId: item.id,
+    })
+    .then(() => {
+      Taro.showToast({
+        title: '消息已关闭',
+        icon: 'none',
+      })
+      bannerMessages.value.splice(index, 1)
+
+      startMessage()
+
+      if (item.isRead === 0) {
+        toReadFun([item.id])
+      }
+    })
+}
+
+// 跳转详情
+function onDetail(item) {
+  noticeClick(item, (url) => {
+    emits('detail', url)
+  })
+}
+
+// 父组件事件
+const emits = defineEmits(['detail', 'close'])
+</script>
+
+<style lang="scss">
+.notice-banner {
+  height: 30px;
+  margin-bottom: 8px;
+  .dd-notice-bar {
+    position: relative;
+    background: #f2f3ff;
+    font-size: 10px;
+    color: #000000e5;
+    padding: 0 8px;
+    height: 0;
+    min-height: auto;
+    transition: all 0.2s;
+    opacity: 0;
+    &.show {
+      height: 30px;
+      opacity: 1;
+    }
+  }
+  &-icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 8px;
+  }
+  .dd-notice-bar__close-img {
+    display: none;
+  }
+  .dd-notice-bar__close {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E  %3Cpath d='M3.3335 3.33331L16.6668 16.6666' stroke='%23353535' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E  %3Cpath d='M3.3335 16.6666L16.6668 3.33331' stroke='%23353535' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    opacity: 0.6;
+  }
+  &-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+  &-btn {
+    color: #017fff;
+    padding-left: 6px;
+  }
+}
+</style>

package/src/notice/components/NoticePopup.vue

@@ -0,0 +1,156 @@
+<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">
+      {{ message.context }}
+      <div class="notice-popup-bd-link" @click="toAllSystemNotice">点击查看附件</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'
+import { useNotice } from './useNotice'
+
+const props = withDefaults(
+  defineProps<{
+    message: any
+  }>(),
+  {
+    message: {},
+  }
+)
+
+const { toReadFun, noticeClick } = useNotice()
+const showPopup = ref(true)
+
+onMounted(() => {})
+
+// 关闭
+function onCancel() {
+  showPopup.value = false
+
+  emits('close')
+}
+
+// 查看全部系统公告
+function toAllSystemNotice() {
+  noticeClick(props.message, () => {
+    onClose()
+
+    emits('view', props.message.id)
+  })
+}
+
+// 关闭弹框
+async function onClose() {
+  const $http = useHttp()
+
+  $http
+    .post('/cas/msg/setMsgStatus', {
+      device: 'MINI',
+      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;
+    &-icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+    }
+  }
+  &-bd {
+    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;
+    }
+  }
+  &-ft {
+    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;
+    }
+  }
+}
+</style>

package/src/notice/components/NoticeView.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="notice-view">
+    <dd-search
+      :bordered="false"
+      :focus="false"
+      :value="query.title"
+      placeholder="请输入客户姓名搜索"
+      @search="onSearch"
+    />
+
+    <div class="h-full box-border">
+      <div class="wrapper box-border" v-if="list.length">
+        <scroll-view
+          class="content box-border"
+          :scroll-y="true"
+          :refresher-enabled="true"
+          :refresherTriggered="isRefresh"
+          @refresherrefresh="onRefresh"
+          :lower-threshold="100"
+          @scrolltolower="runNext"
+          bindscroll=""
+        >
+          <div
+            class="card box-border"
+            :class="{ active: item.isRead != '1' }"
+            v-for="(item, index) in list"
+            :key="index"
+            @click="notifyRead(item, index)"
+          >
+            <div class="point"></div>
+            <template v-if="appCode === 'loankit'">
+              <div class="time">
+                {{ formatMinutes(item.receiveTime) }}
+              </div>
+              <div class="text" :class="{ gray: item.isRead == '1' }">
+                {{ item.context }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="time">
+                {{ formatMinutes(item.receiveTime) }}
+              </div>
+              <div class="text tit" :class="{ gray: item.isRead == '1' }">
+                {{ item.title }}
+              </div>
+              <div class="text" :class="{ gray: item.isRead == '1' }">
+                <rich-text style="white-space: pre-wrap" :nodes="item.context"></rich-text>
+              </div>
+            </template>
+          </div>
+          <div v-if="isLast" class="cue-text" style="padding-bottom: 40px">没有更多了</div>
+        </scroll-view>
+      </div>
+      <div v-else class="no-data h-full">
+        <div class="w-238px h-157px mt-105px mb-19px">
+          <img
+            class="w-full h-full"
+            src="https://cdn.ddjf.com/static/images/loan-manage/no-data.png"
+            alt=""
+          />
+        </div>
+        <div class="text">暂无记录</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useHttp } from '../api'
+import { useAppKitOptions } from '../../Appkit'
+import DdSearch from '../../components/dd-search/index.vue'
+
+const props = withDefaults(
+  defineProps<{
+    app: string
+  }>(),
+  {
+    app: '',
+  }
+)
+
+// 父组件事件
+const emits = defineEmits(['detail', 'close'])
+</script>
+
+<style lang="scss">
+.notice-banner {
+  height: 30px;
+  margin-bottom: 8px;
+  .dd-notice-bar {
+    position: relative;
+    background: #f2f3ff;
+    font-size: 10px;
+    color: #000000e5;
+    padding: 0 8px;
+    height: 0;
+    min-height: auto;
+    transition: all 0.2s;
+    opacity: 0;
+    &.show {
+      height: 30px;
+      opacity: 1;
+    }
+  }
+  &-icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 8px;
+  }
+  .dd-notice-bar__close-img {
+    display: none;
+  }
+  .dd-notice-bar__close {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E  %3Cpath d='M3.3335 3.33331L16.6668 16.6666' stroke='%23353535' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E  %3Cpath d='M3.3335 16.6666L16.6668 3.33331' stroke='%23353535' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    opacity: 0.6;
+  }
+  &-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+  &-btn {
+    color: #017fff;
+    padding-left: 6px;
+  }
+}
+</style>

package/src/notice/components/index.ts

@@ -0,0 +1,4 @@
+import NoticeBanner from './NoticeBanner.vue'
+import LoginSetting from './LoginSetting.vue'
+
+export { NoticeBanner, LoginSetting }

package/src/notice/components/useNotice.ts

@@ -0,0 +1,35 @@
+import { useHttp } from '../api'
+
+export function useNotice() {
+  // 点击消息时
+  async function noticeClick(item: any, cb: Function) {
+    if (item.isRead === 0) {
+      await toReadFun([item.id ?? item.msgId])
+    }
+    if (item.link) {
+      cb && cb(item.link)
+    }
+    return true
+  }
+
+  // 请求-标记消息已读
+  async function toReadFun(msgIds: number[]) {
+    const $http = useHttp()
+
+    return new Promise<boolean>((resolve) => {
+      $http
+        .post('/cas/msg/read', msgIds)
+        .then(() => {
+          resolve(true)
+        })
+        .catch(() => {
+          resolve(false)
+        })
+    })
+  }
+
+  return {
+    noticeClick,
+    toReadFun,
+  }
+}

package/src/notice/index.ts

@@ -0,0 +1 @@
+export * from './components'