@uxda/appkit 4.0.0 → 4.0.2

package/src/notice/components/NoticeBanner.vue

@@ -1,243 +1,243 @@
-<template>
-  <div
-    class="notice-banner"
-    :class="{ fixed: fixed }"
-    :style="topStype"
-    v-if="bannerMessages.length"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
-  >
-    <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(item)">详情</div>
-    </DdNoticeBar>
-  </div>
-
-  <!-- 系统公告强制弹框 -->
-  <template v-for="(item, key) in popMessages" :key="key">
-    <NoticePopup :message="item" @close="popMessages.splice(key, 1)" @view="onView(item)" />
-  </template>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref, watch } 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'
-import debounce from 'lodash/debounce'
-import { useSafeArea } from '../../shared/composables'
-
-const props = withDefaults(
-  defineProps<{
-    app: string
-    bannerStyle?: any
-    fixed?: boolean
-  }>(),
-  {
-    app: '',
-    bannerStyle: '',
-    fixed: false,
-  }
-)
-
-const { toReadFun, noticeClick } = useNotice()
-const bannerMessages = ref<any[]>([]) // 横幅消息
-const popMessages = ref<any[]>([]) // 弹窗消息
-const activeKey = ref(0)
-const safeArea = useSafeArea()
-
-const topStype = computed(() => {
-  if (!props.fixed) {
-    return props.bannerStyle
-  } else {
-    return `top: ${safeArea.nav + safeArea.status}px; ${props.bannerStyle}}`
-  }
-})
-
-onMounted(() => {
-  queryNoticeMsg()
-})
-
-watch(
-  () => popMessages.value,
-  () => {
-    emits('popup', !!popMessages.value.length)
-  }
-)
-
-// 查询当前用户当前应用系统消息
-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) => {
-      if (!Array.isArray(result)) return
-
-      bannerMessages.value = result.filter((item: any) => item.noticeType !== undefined)
-      popMessages.value = result.filter((item: any) => item.isPop)
-
-      startMessageCarousel()
-    })
-}
-
-let interval: any = null
-// 启动消息轮播
-function startMessageCarousel() {
-  stopMessageCarousel()
-  if (bannerMessages.value.length > 1) {
-    interval = setInterval(() => {
-      startMessageCalc()
-      if (bannerMessages.value.length <= 1) {
-        stopMessageCarousel()
-      }
-    }, 3000)
-  } else {
-    activeKey.value = 0
-  }
-}
-function startMessageCalc() {
-  if (activeKey.value < bannerMessages.value.length - 1) {
-    activeKey.value++
-  } else {
-    activeKey.value = 0
-  }
-}
-// 停止消息轮播
-function stopMessageCarousel() {
-  clearInterval(interval)
-}
-
-// 关闭横幅
-const onClose = debounce((item: any, index: number) => {
-  stopMessageCarousel()
-
-  const $http = useHttp()
-  $http
-    .post('/cas/msg/setMsgStatus', {
-      device: 'MINI',
-      deviceType: 0,
-      noticeStatus: 1,
-      receiveId: item.id,
-    })
-    .then(() => {
-      Taro.showToast({
-        title: '消息已关闭',
-        icon: 'none',
-      })
-      bannerMessages.value.splice(index, 1)
-
-      startMessageCarousel()
-
-      // if (item.isRead === 0) {
-      //   toReadFun([item.id])
-      // }
-    })
-    .catch(() => {
-      startMessageCarousel()
-    })
-}, 350)
-
-// 跳转详情
-async function onDetail(item) {
-  await noticeClick(item)
-
-  emits('detail', item)
-}
-
-// 查看附件(webview跳转)
-function onView(item) {
-  emits('view', item.link)
-}
-
-// 处理手势移入/移出
-function onTouchStart() {
-  stopMessageCarousel()
-}
-const onTouchEnd = debounce(() => {
-  startMessageCarousel()
-}, 100)
-
-// 父组件事件
-const emits = defineEmits(['detail', 'close', 'view', 'popup'])
-</script>
-
-<style lang="scss">
-.notice-banner {
-  background: #e6f2ff;
-  height: 30px;
-  margin-bottom: 8px;
-  &.fixed {
-    position: fixed;
-    z-index: 10;
-    width: 100%;
-  }
-
-  .dd-notice-bar {
-    position: relative;
-    background: #e6f2ff;
-    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;
-    text-align: left;
-  }
-  &-btn {
-    color: #017fff;
-    padding-left: 6px;
-  }
-}
-</style>
+<template>
+  <div
+    class="notice-banner"
+    :class="{ fixed: fixed }"
+    :style="topStype"
+    v-if="bannerMessages.length"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+  >
+    <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(item)">详情</div>
+    </DdNoticeBar>
+  </div>
+
+  <!-- 系统公告强制弹框 -->
+  <template v-for="(item, key) in popMessages" :key="key">
+    <NoticePopup :message="item" @close="popMessages.splice(key, 1)" @view="onView(item)" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } 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'
+import debounce from 'lodash/debounce'
+import { useSafeArea } from '../../shared/composables'
+
+const props = withDefaults(
+  defineProps<{
+    app: string
+    bannerStyle?: any
+    fixed?: boolean
+  }>(),
+  {
+    app: '',
+    bannerStyle: '',
+    fixed: false,
+  }
+)
+
+const { toReadFun, noticeClick } = useNotice()
+const bannerMessages = ref<any[]>([]) // 横幅消息
+const popMessages = ref<any[]>([]) // 弹窗消息
+const activeKey = ref(0)
+const safeArea = useSafeArea()
+
+const topStype = computed(() => {
+  if (!props.fixed) {
+    return props.bannerStyle
+  } else {
+    return `top: ${safeArea.nav + safeArea.status}px; ${props.bannerStyle}}`
+  }
+})
+
+onMounted(() => {
+  queryNoticeMsg()
+})
+
+watch(
+  () => popMessages.value,
+  () => {
+    emits('popup', !!popMessages.value.length)
+  }
+)
+
+// 查询当前用户当前应用系统消息
+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) => {
+      if (!Array.isArray(result)) return
+
+      bannerMessages.value = result.filter((item: any) => item.noticeType !== undefined)
+      popMessages.value = result.filter((item: any) => item.isPop)
+
+      startMessageCarousel()
+    })
+}
+
+let interval: any = null
+// 启动消息轮播
+function startMessageCarousel() {
+  stopMessageCarousel()
+  if (bannerMessages.value.length > 1) {
+    interval = setInterval(() => {
+      startMessageCalc()
+      if (bannerMessages.value.length <= 1) {
+        stopMessageCarousel()
+      }
+    }, 3000)
+  } else {
+    activeKey.value = 0
+  }
+}
+function startMessageCalc() {
+  if (activeKey.value < bannerMessages.value.length - 1) {
+    activeKey.value++
+  } else {
+    activeKey.value = 0
+  }
+}
+// 停止消息轮播
+function stopMessageCarousel() {
+  clearInterval(interval)
+}
+
+// 关闭横幅
+const onClose = debounce((item: any, index: number) => {
+  stopMessageCarousel()
+
+  const $http = useHttp()
+  $http
+    .post('/cas/msg/setMsgStatus', {
+      device: 'MINI',
+      deviceType: 0,
+      noticeStatus: 1,
+      receiveId: item.id,
+    })
+    .then(() => {
+      Taro.showToast({
+        title: '消息已关闭',
+        icon: 'none',
+      })
+      bannerMessages.value.splice(index, 1)
+
+      startMessageCarousel()
+
+      // if (item.isRead === 0) {
+      //   toReadFun([item.id])
+      // }
+    })
+    .catch(() => {
+      startMessageCarousel()
+    })
+}, 350)
+
+// 跳转详情
+async function onDetail(item) {
+  await noticeClick(item)
+
+  emits('detail', item)
+}
+
+// 查看附件(webview跳转)
+function onView(item) {
+  emits('view', item.link)
+}
+
+// 处理手势移入/移出
+function onTouchStart() {
+  stopMessageCarousel()
+}
+const onTouchEnd = debounce(() => {
+  startMessageCarousel()
+}, 100)
+
+// 父组件事件
+const emits = defineEmits(['detail', 'close', 'view', 'popup'])
+</script>
+
+<style lang="scss">
+.notice-banner {
+  background: #e6f2ff;
+  height: 30px;
+  margin-bottom: 8px;
+  &.fixed {
+    position: fixed;
+    z-index: 10;
+    width: 100%;
+  }
+
+  .dd-notice-bar {
+    position: relative;
+    background: #e6f2ff;
+    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;
+    text-align: left;
+  }
+  &-btn {
+    color: var(--app-primary-color, #017fff);
+    padding-left: 6px;
+  }
+}
+</style>

package/src/notice/components/NoticeEntry.vue

@@ -1,99 +1,99 @@
-<template>
-  <div class="notice-entry">
-    <img
-      class="notice-entry-img"
-      src="https://cdn.ddjf.com/static/images/loan-manage/notice-icon.png"
-      alt=""
-    />
-    <span>通知</span>
-    <div v-if="noticeShow" class="notice-entry-icon"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { useHttp } from '../api'
-import { useAppKitOptions } from '../../Appkit'
-import Taro, { useDidShow } from '@tarojs/taro'
-import debounce from 'lodash/debounce'
-
-const props = withDefaults(
-  defineProps<{
-    app: string
-    userId: string
-  }>(),
-  {
-    app: '',
-    userId: '',
-  }
-)
-
-const init = debounce(() => {
-  if (!props.app) {
-    return Taro.showToast({
-      title: 'NoticeEntry组件缺少appcode',
-      icon: 'none',
-    })
-  }
-  getNotice()
-}, 300)
-
-init()
-useDidShow(() => {
-  init()
-})
-
-// 通知红点
-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 (result.status === 200) {
-        noticeShow.value = result.data > 0
-      }
-    })
-}
-</script>
-
-<style lang="scss">
-.notice-entry {
-  position: fixed;
-  right: 43px;
-  top: 21px;
-  min-width: 66px;
-  padding: 0 12px 0 15px;
-  text-align: center;
-  box-sizing: border-box;
-  height: 25px;
-  line-height: 11px;
-  color: #855f0b;
-  font-size: 13px;
-  background: #ffdf68;
-  border-radius: 50px 0 0 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &-img {
-    width: 20px;
-    height: 20px;
-  }
-  &-icon {
-    position: absolute;
-    background-color: red;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    top: 1px;
-    left: 27px;
-  }
-}
-</style>
+<template>
+  <div class="notice-entry">
+    <img
+      class="notice-entry-img"
+      src="https://cdn.ddjf.com/static/images/loan-manage/notice-icon.png"
+      alt=""
+    />
+    <span>通知</span>
+    <div v-if="noticeShow" class="notice-entry-icon"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useHttp } from '../api'
+import { useAppKitOptions } from '../../Appkit'
+import Taro, { useDidShow } from '@tarojs/taro'
+import debounce from 'lodash/debounce'
+
+const props = withDefaults(
+  defineProps<{
+    app: string
+    userId: string
+  }>(),
+  {
+    app: '',
+    userId: '',
+  }
+)
+
+const init = debounce(() => {
+  if (!props.app) {
+    return Taro.showToast({
+      title: 'NoticeEntry组件缺少appcode',
+      icon: 'none',
+    })
+  }
+  getNotice()
+}, 300)
+
+init()
+useDidShow(() => {
+  init()
+})
+
+// 通知红点
+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
+    })
+}
+</script>
+
+<style lang="scss">
+.notice-entry {
+  position: fixed;
+  right: 0;
+  top: 120px;
+  min-width: 66px;
+  padding: 0 12px 0 15px;
+  text-align: center;
+  box-sizing: border-box;
+  height: 25px;
+  line-height: 11px;
+  color: #855f0b;
+  font-size: 13px;
+  background: #ffdf68;
+  border-radius: 50px 0 0 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-img {
+    width: 20px;
+    height: 20px;
+  }
+  &-icon {
+    position: absolute;
+    background-color: red;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    top: 1px;
+    left: 27px;
+  }
+}
+</style>