@uxda/appkit 4.3.1 → 4.3.3

package/src/notice/components/NoticeBanner.vue

@@ -1,247 +1,247 @@
-<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" v-track-click="'通知栏-关闭'" @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" v-track-click="'通知栏-详情'" @click="onDetail(item)">详情</div>
-    </DdNoticeBar>
-  </div>
-
-  <!-- 系统公告强制弹框 -->
-  <NoticePopup v-if="popMessages.length" :device="device" :message="popMessages[0]" @close="onPopupClose"
-    @view="onView(popMessages[0])" />
-</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, { showToast } from '@tarojs/taro'
-import { useNotice } from './useNotice'
-import debounce from 'lodash-es/debounce'
-import { useSafeArea } from '../../shared/composables'
-
-const props = withDefaults(
-  defineProps<{
-    app: string
-    bannerStyle?: any
-    fixed?: boolean
-    device?: string
-  }>(),
-  {
-    app: '',
-    bannerStyle: '',
-    fixed: false,
-    device: 'MINI',
-  }
-)
-
-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)
-  }
-)
-watch(
-  () => bannerMessages.value,
-  () => {
-    emits('hasBanner', !!bannerMessages.value.length)
-  }
-)
-
-// 查询当前用户当前应用系统消息
-async function queryNoticeMsg() {
-  const appkitOptions = useAppKitOptions()
-
-  const $http = useHttp()
-  $http
-    .post('/cas/msg/queryNoticeMsg', {
-      device: props.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: props.device || 'MINI',
-      noticeStatus: 1,
-      receiveId: item.id,
-    })
-    .then(() => {
-      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', 'hasBanner'])
-
-function onPopupClose() {
-  setTimeout(() => {
-    popMessages.value.splice(0, 1)
-  }, 100);
-}
-</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>
+<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" v-track-click="'通知栏-关闭'" @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" v-track-click="'通知栏-详情'" @click="onDetail(item)">详情</div>
+    </DdNoticeBar>
+  </div>
+
+  <!-- 系统公告强制弹框 -->
+  <NoticePopup v-if="popMessages.length" :device="device" :message="popMessages[0]" @close="onPopupClose"
+    @view="onView(popMessages[0])" />
+</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, { showToast } from '@tarojs/taro'
+import { useNotice } from './useNotice'
+import debounce from 'lodash-es/debounce'
+import { useSafeArea } from '../../shared/composables'
+
+const props = withDefaults(
+  defineProps<{
+    app: string
+    bannerStyle?: any
+    fixed?: boolean
+    device?: string
+  }>(),
+  {
+    app: '',
+    bannerStyle: '',
+    fixed: false,
+    device: 'MINI',
+  }
+)
+
+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)
+  }
+)
+watch(
+  () => bannerMessages.value,
+  () => {
+    emits('hasBanner', !!bannerMessages.value.length)
+  }
+)
+
+// 查询当前用户当前应用系统消息
+async function queryNoticeMsg() {
+  const appkitOptions = useAppKitOptions()
+
+  const $http = useHttp()
+  $http
+    .post('/cas/msg/queryNoticeMsg', {
+      device: props.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: props.device || 'MINI',
+      noticeStatus: 1,
+      receiveId: item.id,
+    })
+    .then(() => {
+      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', 'hasBanner'])
+
+function onPopupClose() {
+  setTimeout(() => {
+    popMessages.value.splice(0, 1)
+  }, 100);
+}
+</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>