@uxda/appkit 4.0.0 → 4.0.3

package/src/notice/components/NoticeList.vue

@@ -1,278 +1,315 @@
-<template>
-  <div class="notice-list">
-    <DdSearch
-      :bordered="false"
-      :focus="false"
-      :value="query.title"
-      placeholder="请输入客户姓名搜索"
-      @search="onSearch"
-    />
-
-    <div style="flex: 1; overflow: hidden">
-      <div class="wrapper" v-if="list.length">
-        <scroll-view
-          class="content"
-          :scroll-y="true"
-          :refresher-enabled="true"
-          :refresherTriggered="isRefresh"
-          @refresherrefresh="onRefresh"
-          :lower-threshold="100"
-          @scrolltolower="runNext"
-          bindscroll=""
-        >
-          <div
-            class="card"
-            :class="{ active: item.isRead != '1' }"
-            v-for="(item, index) in list"
-            :key="index"
-            @click="notifyRead(item, index)"
-          >
-            <div class="point"></div>
-            <div>
-              <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>
-                <span
-                  v-if="item.link && item.msgType == 3"
-                  class="notice-list-file"
-                  @click="onNoticeView(item.link)"
-                >
-                  查看附件
-                </span>
-              </div>
-            </div>
-          </div>
-          <div v-if="isLast" class="cue-text" style="padding-bottom: 40px">没有更多了</div>
-        </scroll-view>
-      </div>
-      <div v-else class="no-data">
-        <div class="no-data-img">
-          <img
-            style="width: 100%; height: 100%"
-            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 Taro from '@tarojs/taro'
-import DdSearch from '../../components/dd-search/index.vue'
-import dayjs from 'dayjs'
-import { useNotice } from './useNotice'
-import { useCommonList } from './useCommonList'
-import { NoticeListQueryTypes, NoticeListTypes } from '../types'
-import { useAppKitOptions } from '../../Appkit'
-
-const props = withDefaults(
-  defineProps<{
-    app: string
-    userId: string
-  }>(),
-  {
-    app: '',
-    userId: '',
-  }
-)
-
-const query = ref<any>({
-  pageNum: 1,
-  pageSize: 15,
-  title: '',
-  deviceType: 2,
-})
-
-const { toReadFun } = useNotice()
-const { list, init, runNext, runRefresh, isLast } = useCommonList<
-  NoticeListTypes,
-  NoticeListQueryTypes
->('/cas/msg/queryUserMsg', query, true, 'POST')
-
-onMounted(async () => {
-  if (!props.app) {
-    return Taro.showToast({
-      title: 'NoticeList组件缺少appcode',
-      icon: 'none',
-    })
-  }
-
-  const appkitOptions = useAppKitOptions()
-  query.value.appCode = props.app
-  query.value.tenantId = appkitOptions.tenant()
-  query.value.userId = props.userId
-  await init()
-})
-
-// 格式化时间
-function formatMinutes(time: number) {
-  if (!time) return ''
-  const start = dayjs(time)
-  const end = dayjs()
-
-  // 使用diff方法计算差异，单位为分钟
-  const diffInMinutes = end.diff(start, 'minute')
-  if (diffInMinutes < 60 && 0 > diffInMinutes) {
-    return `${diffInMinutes}分钟前`
-  }
-
-  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
-}
-
-// 消息读取
-async function notifyRead(notice: any, index) {
-  if (notice.isRead == '0') {
-    const res = await toReadFun([notice.id])
-
-    if (res) {
-      list.value[index].isRead = '1'
-    }
-  }
-}
-
-// 点击搜索
-function onSearch(key: string) {
-  delete query.value.title
-  query.value.content = key || ''
-  init()
-}
-
-// 下拉刷新
-const isRefresh = ref(false)
-async function onRefresh() {
-  isRefresh.value = true
-  await runRefresh()
-  isRefresh.value = false
-}
-
-// 查看附件
-function onNoticeView(link) {
-  emits('view', link)
-}
-
-// 父组件事件
-const emits = defineEmits(['view'])
-</script>
-
-<style lang="scss">
-.notice-list {
-  height: 100vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  .wrapper {
-    height: 100%;
-    padding: 10px 12px;
-    box-sizing: border-box;
-    .content {
-      height: 100%;
-      background: #ffffff;
-      border-radius: 10px;
-      .card {
-        margin: 0 10px;
-        min-height: 64px;
-        background: #fff;
-        position: relative;
-        padding: 10px;
-        &::before {
-          content: '';
-          position: absolute;
-          left: 2px;
-          top: 0;
-          height: 18px;
-          width: 1px;
-          background: #d8d8d8;
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          left: 2px;
-          top: 18px;
-          bottom: 0;
-          width: 1px;
-          background: #d8d8d8;
-        }
-        &:first-child::before {
-          display: none;
-        }
-        &:last-child::after {
-          display: none;
-        }
-        .point {
-          width: 5px;
-          height: 5px;
-          background-color: #d8d8d8;
-          border-radius: 50%;
-          position: absolute;
-          left: 0;
-          top: 18px;
-          z-index: 9;
-        }
-        .time {
-          font-size: 13px;
-          color: #353535;
-          line-height: 19px;
-          opacity: 0.2;
-          margin-bottom: 5px;
-        }
-        .text {
-          font-size: 14px;
-          line-height: 20px;
-          color: #9fa0a1;
-        }
-        &.active {
-          .point {
-            background-color: #f43309;
-          }
-          .text {
-            color: #171a1d;
-            font-size: 13px;
-            &.tit {
-              font-size: 15px;
-              margin-bottom: 4px;
-            }
-          }
-        }
-      }
-    }
-  }
-  .no-data {
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    height: 100%;
-    .text {
-      height: 20px;
-      font-size: 14px;
-      color: #7e7e7e;
-      line-height: 20px;
-    }
-    &-img {
-      width: 238px;
-      height: 157px;
-      margin-top: 105px;
-      margin-bottom: 19px;
-    }
-  }
-  &-file {
-    font-size: 10px;
-    color: #017fff;
-  }
-  .cue-text {
-    font-size: 13px;
-    color: rgba(60, 60, 60, 0.5);
-    padding: 30px 0 calc(30px + env(safe-area-inset-bottom, 0px));
-    text-align: center;
-  }
-}
-</style>
+<template>
+  <div class="notice-list">
+    <DdSearch
+      :bordered="false"
+      :focus="false"
+      :value="query.title"
+      placeholder="请输入关键字搜索"
+      @search="onSearch"
+    />
+
+    <div style="flex: 1; overflow: hidden">
+      <div class="wrapper" v-if="list.length">
+        <scroll-view
+          class="content"
+          :scroll-y="true"
+          :refresher-enabled="true"
+          :refresherTriggered="isRefresh"
+          @refresherrefresh="onRefresh"
+          :lower-threshold="100"
+          @scrolltolower="runNext"
+          bindscroll=""
+        >
+          <div
+            class="card"
+            :class="{ active: item.isRead != '1' }"
+            v-for="(item, index) in list"
+            :key="index"
+            @click="notifyRead(item, index)"
+          >
+            <div class="point"></div>
+            <div>
+              <div class="time">{{ formatMinutes(item.receiveTime) }}</div>
+              <div
+                v-if="app !== 'loankit' || (app === 'loankit' && item.title !== item.context)"
+                class="text tit"
+                style="display: flex; align-items: center"
+                :class="{ gray: item.isRead == '1' }"
+              >
+                {{ item.title }}
+                <div class="notice-list-label" v-if="showApp && appMap[item.appCode]">
+                  {{ appMap[item.appCode] }}
+                </div>
+              </div>
+              <div class="text" :class="{ gray: item.isRead == '1' }">
+                <rich-text style="white-space: pre-wrap" :nodes="item.context"></rich-text>
+                <span
+                  v-if="item.link && item.msgType == 3"
+                  class="notice-list-file"
+                  @click="onNoticeView(item.link)"
+                >
+                  查看附件
+                </span>
+              </div>
+            </div>
+          </div>
+          <div v-if="isLast" class="cue-text" style="padding-bottom: 40px">没有更多了</div>
+        </scroll-view>
+      </div>
+      <div v-else class="no-data">
+        <div class="no-data-img">
+          <img
+            style="width: 100%; height: 100%"
+            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 Taro from '@tarojs/taro'
+import DdSearch from '../../components/dd-search/index.vue'
+import dayjs from 'dayjs'
+import { useNotice } from './useNotice'
+import { useCommonList } from './useCommonList'
+import { NoticeListQueryTypes, NoticeListTypes } from '../types'
+import { useAppKitOptions } from '../../Appkit'
+
+const props = withDefaults(
+  defineProps<{
+    app: string
+    userId: string
+    showApp?: boolean
+    checkBeforeRead?: Function
+  }>(),
+  {
+    app: '',
+    userId: '',
+    showApp: false,
+  }
+)
+
+const query = ref<any>({
+  pageNum: 1,
+  pageSize: 15,
+  title: '',
+  deviceType: 2,
+})
+
+const { toReadFun } = useNotice()
+const { list, init, runNext, runRefresh, isLast } = useCommonList<
+  NoticeListTypes,
+  NoticeListQueryTypes
+>('/cas/msg/queryUserMsg', query, true, 'POST')
+
+onMounted(async () => {
+  if (!props.app) {
+    return Taro.showToast({
+      title: 'NoticeList组件缺少appcode',
+      icon: 'none',
+    })
+  }
+
+  const appkitOptions = useAppKitOptions()
+  query.value.appCode = props.app
+  query.value.tenantId = appkitOptions.tenant()
+  query.value.userId = props.userId
+  await init()
+})
+
+// 格式化时间
+function formatMinutes(time: number) {
+  if (!time) return ''
+  const start = dayjs(time)
+  const end = dayjs()
+
+  // 使用diff方法计算差异，单位为分钟
+  const diffInMinutes = end.diff(start, 'minute')
+  if (diffInMinutes < 60 && diffInMinutes > 0) {
+    return `${diffInMinutes}分钟前`
+  } else if (diffInMinutes === 0) {
+    return `刚刚`
+  }
+
+  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+}
+
+// 消息读取
+async function notifyRead(notice: any, index) {
+  if (props.checkBeforeRead) {
+    if (!props.checkBeforeRead(notice, index)) return
+  }
+
+  if (notice.isRead == '0') {
+    const res = await toReadFun([notice.id])
+
+    if (res) {
+      list.value[index].isRead = '1'
+    }
+  }
+}
+
+// 点击搜索
+function onSearch(key: string) {
+  delete query.value.title
+  query.value.content = key || ''
+  init()
+}
+
+// 下拉刷新
+const isRefresh = ref(false)
+async function onRefresh() {
+  isRefresh.value = true
+  await runRefresh()
+  isRefresh.value = false
+}
+
+// 查看附件
+function onNoticeView(link) {
+  emits('view', link)
+}
+
+const appMap = { aiapprove: 'AI审批', corporateStar: '企明星' }
+
+// 父组件事件
+const emits = defineEmits(['view'])
+</script>
+
+<style lang="scss">
+.notice-list {
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .wrapper {
+    height: 100%;
+    padding: 10px 12px;
+    box-sizing: border-box;
+    .content {
+      height: 100%;
+      background: #ffffff;
+      border-radius: 10px;
+      .card {
+        margin: 0 10px;
+        min-height: 64px;
+        background: #fff;
+        position: relative;
+        padding: 10px;
+        &::before {
+          content: '';
+          position: absolute;
+          left: 2px;
+          top: 0;
+          height: 18px;
+          width: 1px;
+          background: #d8d8d8;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          left: 2px;
+          top: 18px;
+          bottom: 0;
+          width: 1px;
+          background: #d8d8d8;
+        }
+        &:first-child::before {
+          display: none;
+        }
+        &:last-child::after {
+          display: none;
+        }
+        .point {
+          width: 5px;
+          height: 5px;
+          background-color: #d8d8d8;
+          border-radius: 50%;
+          position: absolute;
+          left: 0;
+          top: 18px;
+          z-index: 9;
+        }
+        .time {
+          font-size: 13px;
+          color: #353535;
+          line-height: 19px;
+          opacity: 0.2;
+          margin-bottom: 5px;
+        }
+        .text {
+          font-size: 14px;
+          line-height: 20px;
+          color: #9fa0a1;
+        }
+        &.active {
+          .point {
+            background-color: #f43309;
+          }
+          .text {
+            color: #171a1d;
+            font-size: 13px;
+            &.tit {
+              font-size: 15px;
+              margin-bottom: 4px;
+            }
+          }
+          .notice-list-label {
+            opacity: 1;
+          }
+          .notice-list-file {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+  .no-data {
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    .text {
+      height: 20px;
+      font-size: 14px;
+      color: #7e7e7e;
+      line-height: 20px;
+    }
+    &-img {
+      width: 238px;
+      height: 157px;
+      margin-top: 105px;
+      margin-bottom: 19px;
+    }
+  }
+  &-file {
+    font-size: 10px;
+    color: var(--app-primary-color, #017fff);
+    opacity: 0.5;
+  }
+  .cue-text {
+    font-size: 13px;
+    color: rgba(60, 60, 60, 0.5);
+    padding: 30px 0 calc(30px + env(safe-area-inset-bottom, 0px));
+    text-align: center;
+  }
+  &-label {
+    border: 1px solid #caa264;
+    color: #caa264;
+    border-radius: 1px;
+    font-size: 8px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 14px;
+    padding: 0 5px;
+    margin-left: 4px;
+    opacity: 0.5;
+  }
+}
+</style>