处理聊天页面中出现的问题;优化页面中部门明细的样式问题

This commit is contained in:
wangyifeng 2025-03-06 18:50:11 +08:00
parent c9eb55ed5f
commit ea73fa8b9b
13 changed files with 676 additions and 488 deletions

4
components.d.ts vendored
View File

@ -25,11 +25,13 @@ declare module 'vue' {
GroupNoticeMessage: typeof import('./src/components/talk/message/GroupNoticeMessage.vue')['default'] GroupNoticeMessage: typeof import('./src/components/talk/message/GroupNoticeMessage.vue')['default']
HistoryRecord: typeof import('./src/components/talk/HistoryRecord.vue')['default'] HistoryRecord: typeof import('./src/components/talk/HistoryRecord.vue')['default']
ImageMessage: typeof import('./src/components/talk/message/ImageMessage.vue')['default'] ImageMessage: typeof import('./src/components/talk/message/ImageMessage.vue')['default']
LinkMessage: typeof import('./src/components/talk/message/LinkMessage.vue')['default']
Loading: typeof import('./src/components/base/Loading.vue')['default'] Loading: typeof import('./src/components/base/Loading.vue')['default']
LoginMessage: typeof import('./src/components/talk/message/LoginMessage.vue')['default'] LoginMessage: typeof import('./src/components/talk/message/LoginMessage.vue')['default']
Message: typeof import('./src/components/x-message/message/index.vue')['default'] Message: typeof import('./src/components/x-message/message/index.vue')['default']
MixedMessage: typeof import('./src/components/talk/message/MixedMessage.vue')['default'] MixedMessage: typeof import('./src/components/talk/message/MixedMessage.vue')['default']
NTag: typeof import('naive-ui')['NTag'] NButton: typeof import('naive-ui')['NButton']
NIcon: typeof import('naive-ui')['NIcon']
PageAnimation: typeof import('./src/components/page-animation/index.vue')['default'] PageAnimation: typeof import('./src/components/page-animation/index.vue')['default']
RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default'] RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']

View File

@ -1,43 +1,55 @@
<script setup> <script setup>
import {useStatus} from "@/store/status"; import { useStatus } from '@/store/status'
import { useUserStore } from '@/store' import { useUserStore } from '@/store'
import { import { useProvideUserModal } from '@/hooks'
useProvideUserModal,
} from '@/hooks'
import ws from '@/connect' import ws from '@/connect'
const {statusBarHeight}= useStatus() const { statusBarHeight } = useStatus()
const { uid, isShow } = useProvideUserModal() const { uid, isShow } = useProvideUserModal()
const userStore = useUserStore() const userStore = useUserStore()
const root = document.documentElement const root = document.documentElement
root.style.setProperty('--statusBarHeight',`${statusBarHeight.value}px`) root.style.setProperty('--statusBarHeight', `${statusBarHeight.value}px`)
const handleWebview = () => {
let statusBarHeight = window?.plus?.navigator?.getStatusbarHeight()
plus.webview.currentWebview().setStyle({
top: statusBarHeight,
bottom: 0,
})
}
const init = () => { const init = () => {
userStore.loadSetting() userStore.loadSetting()
ws.connect() ws.connect()
if (typeof plus !== 'undefined') {
handleWebview()
} else {
document.addEventListener('plusready', () => {
handleWebview()
})
}
} }
init() init()
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/static/css/color.scss"; @import '@/static/css/color.scss';
@import "@/static/css/font.scss"; @import '@/static/css/font.scss';
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
@import '@/uni_modules/tmui/scss/nvue.css'; @import '@/uni_modules/tmui/scss/nvue.css';
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@import '@/uni_modules/tmui/scss/noNvue.css'; @import '@/uni_modules/tmui/scss/noNvue.css';
/* #endif */ /* #endif */
*{ * {
box-sizing: border-box; box-sizing: border-box;
} }
/*解决阅览图片关闭按钮会显示在状态栏区域的问题*/ /*解决阅览图片关闭按钮会显示在状态栏区域的问题*/
#u-a-p>div>div{ #u-a-p > div > div {
margin-top:var(--statusBarHeight) margin-top: var(--statusBarHeight);
} }
/*不显示滚动条的类*/ /*不显示滚动条的类*/
.no-scroll { .no-scroll {
-ms-overflow-style: none; /* IE 和 Edge */ -ms-overflow-style: none; /* IE 和 Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.no-scroll::-webkit-scrollbar { .no-scroll::-webkit-scrollbar {
display: none; /* Webkit 浏览器 */ display: none; /* Webkit 浏览器 */
} }
</style> </style>

View File

@ -5,6 +5,7 @@
:title="props.title" :title="props.title"
:shadow="props.shadowNum" :shadow="props.shadowNum"
:fontSize="34" :fontSize="34"
:showStatusBar="false"
> >
<template #left> <template #left>
<slot name="left"></slot> <slot name="left"></slot>

View File

@ -20,7 +20,8 @@ let show = ref(false)
}" }"
> >
<div class="title"> <div class="title">
<n-tag :bordered="false" size="small" type="primary">群公告</n-tag> <!-- <n-tag :bordered="false" size="small" type="primary">群公告</n-tag> -->
<text>群公告</text>
<!-- {{ extra.title }} --> <!-- {{ extra.title }} -->
</div> </div>
<div class="title" :class="{ ellipsis: !show }"> <div class="title" :class="{ ellipsis: !show }">

View File

@ -0,0 +1,95 @@
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<!-- 完全复制的textMessage组件没有用处仅兜底真有14类型时的场景后续会单独做制作分享卡片功能到时再根据分享卡片样式重做本页面 -->
<script lang="ts" setup>
import { textReplaceEmoji } from '@/utils/emojis'
import { textReplaceLink, textReplaceMention } from '@/utils/strings'
import { ITalkRecordExtraText, ITalkRecord } from '@/types/chat'
const props = defineProps<{
extra: ITalkRecordExtraText
data: ITalkRecord
maxWidth?: boolean
source?: 'panel' | 'forward' | 'history'
}>()
const float = props.data.float
let textContent = props.extra?.content || ''
textContent = textReplaceLink(textContent)
if (props.data.talk_type == 2) {
textContent = textReplaceMention(textContent, '#1890ff')
}
textContent = textReplaceEmoji(textContent)
</script>
<template>
<div
class="im-message-text"
:class="{
left: float == 'left',
right: float == 'right',
maxwidth: maxWidth,
'radius-reset': source != 'panel',
}"
>
<pre v-html="textContent" />
</div>
</template>
<style lang="less" scoped>
.im-message-text {
min-width: 40rpx;
min-height: 40rpx;
padding: 22rpx 30rpx;
color: #1a1a1a;
background: #ffffff;
border-radius: 0 16rpx 16rpx 16rpx;
&.right {
background-color: #46299d;
color: #ffffff;
border-radius: 16rpx 0 16rpx 16rpx;
}
&.maxwidth {
max-width: 486rpx;
}
&.radius-reset {
border-radius: 0;
}
pre {
white-space: pre-wrap;
overflow: hidden;
word-break: break-word;
word-wrap: break-word;
font-size: 32rpx;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
line-height: 44rpx;
:deep(.emoji) {
vertical-align: text-bottom;
margin: 0 10rpx;
width: 44rpx;
height: 44rpx;
}
:deep(a) {
color: #2196f3;
text-decoration: revert;
}
}
}
</style>

View File

@ -11,6 +11,7 @@ export const ChatMsgTypeLogin = 10 // 登录消息
export const ChatMsgTypeVote = 11 // 投票消息 export const ChatMsgTypeVote = 11 // 投票消息
export const ChatMsgTypeMixed = 12 // 混合消息 export const ChatMsgTypeMixed = 12 // 混合消息
export const ChatMsgTypeGroupNotice = 13 // 群公告消息 export const ChatMsgTypeGroupNotice = 13 // 群公告消息
export const ChatMsgTypeLink = 14 // 链接消息
export const ChatMsgSysText = 1000 // 系统文本消息 export const ChatMsgSysText = 1000 // 系统文本消息
export const ChatMsgSysGroupCreate = 1101 // 创建群聊消息 export const ChatMsgSysGroupCreate = 1101 // 创建群聊消息
@ -40,6 +41,7 @@ export const ChatMsgTypeMapping = {
[ChatMsgTypeCode]: '[代码消息]', [ChatMsgTypeCode]: '[代码消息]',
[ChatMsgTypeMixed]: '[图文消息]', [ChatMsgTypeMixed]: '[图文消息]',
[ChatMsgTypeGroupNotice]: '[群公告]', [ChatMsgTypeGroupNotice]: '[群公告]',
[ChatMsgTypeLink]: '[链接]',
[ChatMsgSysText]: '[系统消息]', [ChatMsgSysText]: '[系统消息]',
[ChatMsgSysGroupCreate]: '[创建群消息]', [ChatMsgSysGroupCreate]: '[创建群消息]',
[ChatMsgSysGroupMemberJoin]: '[加入群消息]', [ChatMsgSysGroupMemberJoin]: '[加入群消息]',
@ -69,6 +71,7 @@ export const MessageComponents = {
[ChatMsgTypeCode]: 'code-message', [ChatMsgTypeCode]: 'code-message',
[ChatMsgTypeMixed]: 'mixed-message', [ChatMsgTypeMixed]: 'mixed-message',
[ChatMsgTypeGroupNotice]: 'group-notice-message', [ChatMsgTypeGroupNotice]: 'group-notice-message',
[ChatMsgTypeLink]: 'link-message',
[ChatMsgSysText]: 'sys-text-message', [ChatMsgSysText]: 'sys-text-message',
[ChatMsgSysGroupCreate]: 'sys-group-create-message', [ChatMsgSysGroupCreate]: 'sys-group-create-message',
[ChatMsgSysGroupMemberJoin]: 'sys-group-join-message', [ChatMsgSysGroupMemberJoin]: 'sys-group-join-message',
@ -92,5 +95,6 @@ export const ForwardableMessageType = [
ChatMsgTypeVideo, ChatMsgTypeVideo,
ChatMsgTypeFile, ChatMsgTypeFile,
ChatMsgTypeLocation, ChatMsgTypeLocation,
ChatMsgTypeCard ChatMsgTypeCard,
ChatMsgTypeLink
] ]

View File

@ -115,6 +115,7 @@ const changeSwitch = (e, item) => {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 0 0 0 20rpx;
span { span {
line-height: 44rpx; line-height: 44rpx;
color: #747474; color: #747474;

View File

@ -21,12 +21,15 @@
<div class="base-info"> <div class="base-info">
<div class="base-info-name"> <div class="base-info-name">
<span class="text-[32rpx] font-medium">{{ groupName }}</span> <span class="text-[32rpx] font-medium">{{ groupName }}</span>
<span class="base-info_num text-[32rpx] font-medium"> <span
class="base-info_num text-[32rpx] font-medium"
v-if="groupNum"
>
{{ '' + groupNum + '' }} {{ '' + groupNum + '' }}
</span> </span>
</div> </div>
<div <div
v-if="groupParams?.groupInfo?.group_type !== 1" v-if="groupParams?.groupInfo?.group_type !== 1 && groupType"
class="base-info-tag" class="base-info-tag"
:style="{ :style="{
borderColor: borderColor:
@ -292,10 +295,10 @@ onMounted(() => {
value: t('record.searchType.files'), value: t('record.searchType.files'),
typeIcon: recordSearchTypeIcon_files, typeIcon: recordSearchTypeIcon_files,
}, },
{ // {
value: t('record.searchType.link'), // value: t('record.searchType.link'),
typeIcon: recordSearchTypeIcon_link, // typeIcon: recordSearchTypeIcon_link,
}, // },
] ]
if (dialogueParams.type === 2) { if (dialogueParams.type === 2) {
state.recordSearchTypeList.unshift({ state.recordSearchTypeList.unshift({

View File

@ -27,7 +27,10 @@
<span class="text-[40rpx] font-medium user-info-name"> <span class="text-[40rpx] font-medium user-info-name">
{{ state?.userInfo?.nickname }} {{ state?.userInfo?.nickname }}
</span> </span>
<span class="text-[28rpx] font-medium user-info-job-num"> <span
class="text-[28rpx] font-medium user-info-job-num"
v-if="state?.userInfo?.job_num"
>
{{ $t('user.info.jobNum') + '' + state?.userInfo?.job_num }} {{ $t('user.info.jobNum') + '' + state?.userInfo?.job_num }}
</span> </span>
</div> </div>

View File

@ -8,12 +8,8 @@
:hide-empty-view="true" :hide-empty-view="true"
height="100%" height="100%"
ref="zpagingRef" ref="zpagingRef"
:use-virtual-list="true" v-model="virtualList"
:preload-page="1"
cell-height-mode="dynamic"
virtual-scroll-fps="80"
:loading-more-custom-style="{ display: 'none', height: '0' }" :loading-more-custom-style="{ display: 'none', height: '0' }"
@virtualListChange="virtualListChange"
@scrolltolower="onRefreshLoad" @scrolltolower="onRefreshLoad"
> >
<template #top> <template #top>
@ -45,7 +41,7 @@
</template> --> </template> -->
<!-- 数据加载状态栏 --> <!-- 数据加载状态栏 -->
<div class="dialog-list"> <div class="dialog-list" @touchstart="handleHidePanel">
<div <div
class="message-item" class="message-item"
v-for="item in virtualList" v-for="item in virtualList"
@ -189,6 +185,7 @@
:options="editorOption" :options="editorOption"
@editorChange="onEditorChange" @editorChange="onEditorChange"
style="height: 100%; border: none;" style="height: 100%; border: none;"
@click="onEditorClick"
/> />
<!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]" <!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]"
placeholder=""></tm-input> --> placeholder=""></tm-input> -->
@ -409,7 +406,18 @@ const handleFilePanel = () => {
state.value.isOpenFilePanel = !state.value.isOpenFilePanel state.value.isOpenFilePanel = !state.value.isOpenFilePanel
} }
const onSendMessage = (data = {}) => { ///
const handleHidePanel = () => {
state.value.isOpenFilePanel = false
state.value.isOpenEmojiPanel = false
}
//
const onEditorClick = () => {
handleHidePanel()
}
const onSendMessage = (data = {}, callBack) => {
let message = { let message = {
...data, ...data,
receiver: { receiver: {
@ -421,7 +429,9 @@ const onSendMessage = (data = {}) => {
ServePublishMessage(message) ServePublishMessage(message)
.then(({ code, message }) => { .then(({ code, message }) => {
if (code == 200) { if (code == 200) {
// callBack(true) if (callBack) {
callBack(true)
}
} else { } else {
message.warning(message) message.warning(message)
} }
@ -466,7 +476,7 @@ const onSendTextEvent = lodash.throttle((value) => {
mentions: data.mentionUids, mentions: data.mentionUids,
} }
onSendMessage(message) onSendMessage(message, callBack)
}, 1000) }, 1000)
// //
@ -823,7 +833,7 @@ const initData = async () => {
no_limit: dialogueList ? 1 : 0, no_limit: dialogueList ? 1 : 0,
} }
await onLoad({ ...objT }) await onLoad({ ...objT })
zpagingRef.value?.complete(records.value) zpagingRef.value?.setLocalPaging(records.value)
} }
// //

View File

@ -31,8 +31,12 @@
</div> </div>
<div class="chatInfo"> <div class="chatInfo">
<div class="chatInfo_1"> <div class="chatInfo_1">
<div > <div>
<span class="text-[#000000] text-[32rpx] font-bold opacity-90 mr-[20rpx]">{{ props.data.name }}</span> <span
class="text-[#000000] text-[32rpx] font-bold opacity-90 mr-[20rpx]"
>
{{ props.data.name }}
</span>
<span v-if="props.data.group_type === 2" class="depTag"> <span v-if="props.data.group_type === 2" class="depTag">
部门 部门
</span> </span>
@ -43,7 +47,10 @@
公司 公司
</span> </span>
</div> </div>
<div class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx]"> <div
class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx]"
style="flex-shrink: 0;"
>
{{ beautifyTime(props.data.updated_at) }} {{ beautifyTime(props.data.updated_at) }}
</div> </div>
</div> </div>
@ -57,7 +64,7 @@
<template #right> <template #right>
<div class="flex flex-row flex-row-center-end"> <div class="flex flex-row flex-row-center-end">
<!-- 样式占位 --> <!-- 样式占位 -->
<div style="width:1px"></div> <div style="width: 1px;"></div>
<div <div
@click="handleTop" @click="handleTop"
class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center" class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center"

View File

@ -1,104 +1,106 @@
<template> <template>
<div class="outer-layer"> <div class="outer-layer">
<ZPaging <ZPaging
class="paging_container" class="paging_container"
ref="paging" ref="paging"
refresher-enabled refresher-enabled
:refresher-threshold="80" :refresher-threshold="80"
:refresher-max-angle="0" :refresher-max-angle="0"
:refresher-pull-rate="0.5" :refresher-pull-rate="0.5"
:refresher-fixed-bac-height="80" :refresher-fixed-bac-height="80"
refresher-fixed-background="#F9F9FD" refresher-fixed-background="#F9F9FD"
refresher-background="#F9F9FD" refresher-background="#F9F9FD"
v-model="items" v-model="items"
@query="queryList" @query="queryList"
:loading-more-enabled="false" :loading-more-enabled="false"
:refresher-end-bounce-enabled="false" :refresher-end-bounce-enabled="false"
:auto="true" :auto="true"
:empty-view-show="isEmptyViewShow" :empty-view-show="isEmptyViewShow"
@refresherRefresh="onRefresh" @refresherRefresh="onRefresh"
> :show-scrollbar="false"
<template #top> >
<div> <template #top>
<tm-navbar <div>
class="index_top_navbar" <tm-navbar
:hideBack="false" class="index_top_navbar"
hideHome :hideBack="false"
title="" hideHome
:leftWidth="420" title=""
> :leftWidth="420"
<template v-slot:left> :showStatusBar="false"
<div class="flex items-center ml-[48rpx]"> >
<image <template v-slot:left>
class="w-[72rpx] h-[72rpx]" <div class="flex items-center ml-[48rpx]">
style="border-radius: 50%" <image
:src="userStore.avatar" class="w-[72rpx] h-[72rpx]"
mode="scaleToFill" style="border-radius: 50%;"
/> :src="userStore.avatar"
<div class="ml-[24rpx] text-[36rpx] font-bold"> mode="scaleToFill"
{{ userStore.nickname }} />
</div> <div class="ml-[24rpx] text-[36rpx] font-bold">
</div> {{ userStore.nickname }}
</template> </div>
<template v-slot:right> </div>
<div class="mr-[48rpx] popoverBox"> </template>
<tm-popover position="br" color="#333333" :width="260"> <template v-slot:right>
<image <div class="mr-[48rpx] popoverBox">
class="w-[48rpx] h-[48rpx]" <tm-popover position="br" color="#333333" :width="260">
style="border-radius: 50%" <image
:src="addCircle" class="w-[48rpx] h-[48rpx]"
mode="scaleToFill" style="border-radius: 50%;"
/> :src="addCircle"
<template v-slot:label> mode="scaleToFill"
<div />
class="w-full h-[208rpx] pt-[22rpx] pb-[32rpx] pl-[14rpx] pr-[12rpx]" <template v-slot:label>
> <div
<div class="w-full h-[208rpx] pt-[22rpx] pb-[32rpx] pl-[14rpx] pr-[12rpx]"
@click="creatGroupChat" >
class="flex items-center pl-[22rpx] mb-[32rpx]" <div
> @click="creatGroupChat"
<div class="mr-[26rpx] flex items-center"> class="flex items-center pl-[22rpx] mb-[32rpx]"
<tm-image >
:width="40" <div class="mr-[26rpx] flex items-center">
:height="39" <tm-image
:src="cahtPopover" :width="40"
></tm-image> :height="39"
</div> :src="cahtPopover"
<div ></tm-image>
class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold" </div>
> <div
发起群聊 class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold"
</div> >
</div> 发起群聊
<div class="divider"></div> </div>
<div </div>
@click="toAddressBookPage" <div class="divider"></div>
class="flex items-center pl-[22rpx] mt-[32rpx]" <div
> @click="toAddressBookPage"
<div class="mr-[26rpx] flex items-center"> class="flex items-center pl-[22rpx] mt-[32rpx]"
<tm-image >
:width="40" <div class="mr-[26rpx] flex items-center">
:height="43" <tm-image
:src="zu3289" :width="40"
></tm-image> :height="43"
</div> :src="zu3289"
<div ></tm-image>
class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold" </div>
> <div
通讯录 class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold"
</div> >
</div> 通讯录
</div> </div>
</template> </div>
</tm-popover> </div>
</div> </template>
</template> </tm-popover>
</tm-navbar> </div>
</div> </template>
</template> </tm-navbar>
<template #refresher="{ refresherStatus }"> </div>
<custom-refresher :status="refresherStatus" /> </template>
</template> <template #refresher="{ refresherStatus }">
<custom-refresher :status="refresherStatus" />
</template>
<div class="content"> <div class="content">
<div class="root"> <div class="root">
<div class="searchRoot" @click="toSearchPage"> <div class="searchRoot" @click="toSearchPage">
@ -121,88 +123,94 @@
/> />
</div> </div>
</div> </div>
</div> </div>
</ZPaging> </ZPaging>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, watch, computed } from "vue"; import { ref, watch, computed } from 'vue'
import { onShow, onLoad } from "@dcloudio/uni-app"; import { onShow, onLoad } from '@dcloudio/uni-app'
import { useChatList } from "@/store/chatList/index.js"; import { useChatList } from '@/store/chatList/index.js'
import { useAuth } from "@/store/auth"; import { useAuth } from '@/store/auth'
import { useTalkStore, useUserStore, useDialogueStore } from "@/store"; import { useTalkStore, useUserStore, useDialogueStore } from '@/store'
import chatItem from "./components/chatItem.vue"; import chatItem from './components/chatItem.vue'
import addCircle from "@/static/image/chatList/addCircle.png"; import addCircle from '@/static/image/chatList/addCircle.png'
import cahtPopover from "@/static/image/chatList/cahtPopover.png"; import cahtPopover from '@/static/image/chatList/cahtPopover.png'
import zu3289 from "@/static/image/chatList/zu3289@2x.png"; import zu3289 from '@/static/image/chatList/zu3289@2x.png'
import ZPaging from "@/uni_modules/z-paging/components/z-paging/z-paging.vue"; import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
const paging = ref(); const paging = ref()
const isEmptyViewShow = ref(false); const isEmptyViewShow = ref(false)
const talkStore = useTalkStore(); const talkStore = useTalkStore()
const userStore = useUserStore(); const userStore = useUserStore()
const dialogueStore = useDialogueStore(); const dialogueStore = useDialogueStore()
const { userInfo } = useAuth(); const { userInfo } = useAuth()
const topItems = computed(() => talkStore.topItems); const topItems = computed(() => talkStore.topItems)
const items = computed(() => { const items = computed(() => {
// if (searchKeyword.value.length === 0) { // if (searchKeyword.value.length === 0) {
console.log(talkStore.talkItems); console.log(talkStore.talkItems)
return talkStore.talkItems; return talkStore.talkItems
// } // }
// return talkStore.talkItems.filter((item) => { // return talkStore.talkItems.filter((item) => {
// let keyword = item.remark || item.name // let keyword = item.remark || item.name
// return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1 // return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
// }) // })
}); })
const queryList = (pageNo, pageSize) => { const queryList = (pageNo, pageSize) => {
// paging.value.complete(res.data.list); // paging.value.complete(res.data.list);
console.log(talkStore); console.log(talkStore)
talkStore.loadTalkList().then(() => { talkStore
isEmptyViewShow.value = talkStore.talkItems.length === 0; .loadTalkList()
// .then(() => {
paging.value.complete(talkStore.talkItems); isEmptyViewShow.value = talkStore.talkItems.length === 0
}).catch(error => { //
// paging.value.complete(talkStore.talkItems)
console.error('加载失败', error); })
paging.value.complete(false); .catch((error) => {
}); //
}; console.error('加载失败', error)
paging.value.complete(false)
})
}
// //
const onRefresh = () => { const onRefresh = () => {
console.log('触发下拉刷新'); console.log('触发下拉刷新')
talkStore.loadTalkList().then(() => { talkStore
// .loadTalkList()
paging.value.complete(talkStore.talkItems); .then(() => {
}).catch(error => { //
// paging.value.complete(talkStore.talkItems)
console.error('加载失败', error); })
paging.value.complete(false); .catch((error) => {
}); //
}; console.error('加载失败', error)
paging.value.complete(false)
})
}
const creatGroupChat = () => { const creatGroupChat = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/creatGroupChat/index", url: '/pages/creatGroupChat/index',
}); })
}; }
const toSearchPage = () => { const toSearchPage = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/search/index", url: '/pages/search/index',
}); })
}; }
// //
const toAddressBookPage = () => { const toAddressBookPage = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/chooseByDeps/index?chooseMode=3", url: '/pages/chooseByDeps/index?chooseMode=3',
}); })
}; }
/* watch( /* watch(
() => talkStore, () => talkStore,
@ -214,106 +222,108 @@ const toAddressBookPage = () => {
onShow(() => { onShow(() => {
// //
talkStore.loadTalkList().then(() => { talkStore
// paging .loadTalkList()
if (paging.value) { .then(() => {
paging.value.reload(); // paging
} if (paging.value) {
}).catch(error => { paging.value.reload()
console.error('页面显示时数据加载失败', error); }
}); })
}); .catch((error) => {
console.error('页面显示时数据加载失败', error)
})
})
onLoad((options) => { onLoad((options) => {
console.log(options); console.log(options)
if (options?.openSessionIndexName) { if (options?.openSessionIndexName) {
if (items?.value?.length > 0) { if (items?.value?.length > 0) {
items.value.forEach((openSession) => { items.value.forEach((openSession) => {
if (openSession.index_name === options?.openSessionIndexName) { if (openSession.index_name === options?.openSessionIndexName) {
dialogueStore.setDialogue(openSession); dialogueStore.setDialogue(openSession)
if (openSession.unread_num > 0) { if (openSession.unread_num > 0) {
ServeClearTalkUnreadNum({ ServeClearTalkUnreadNum({
talk_type: openSession.talk_type, talk_type: openSession.talk_type,
receiver_id: openSession.receiver_id, receiver_id: openSession.receiver_id,
}).then(() => { }).then(() => {
talkStore.updateItem({ talkStore.updateItem({
index_name: openSession.index_name, index_name: openSession.index_name,
unread_num: 0, unread_num: 0,
}); })
}); })
} }
uni.navigateTo({ uni.navigateTo({
url: "/pages/dialog/index?sessionId=" + openSession.id, url: '/pages/dialog/index?sessionId=' + openSession.id,
}); })
} }
}); })
} }
} }
}); })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
uni-page-body, uni-page-body,
page { page {
height: 100vh; height: 100vh;
background-image: url("@/static/image/clockIn/z3280@3x.png"); background-image: url('@/static/image/clockIn/z3280@3x.png');
background-size: cover; background-size: cover;
flex-direction: column; flex-direction: column;
} }
.outer-layer { .outer-layer {
height: 100%; height: 100%;
} }
.paging_container{ .paging_container {
// border: 1px solid red; // border: 1px solid red;
background: #fff; background: #fff;
margin: 0 32rpx 20rpx 32rpx; margin: 0 32rpx 20rpx 32rpx;
} }
::v-deep .index_top_navbar > .statusHeight:first-child { ::v-deep .index_top_navbar > .statusHeight:first-child {
height: 70px !important; height: 70px !important;
} }
::v-deep .index_top_navbar .statusHeightTop { ::v-deep .index_top_navbar .statusHeightTop {
height: 70px !important; height: 70px !important;
} }
::v-deep .index_top_navbar .statusHeightTop > .noNvueBorder:first-child { ::v-deep .index_top_navbar .statusHeightTop > .noNvueBorder:first-child {
height: 70px !important; height: 70px !important;
} }
.content{ .content {
// overflow: auto;
// overflow: auto;
} }
.root { .root {
flex: 1; flex: 1;
padding: 20rpx 0; padding: 20rpx 0;
} }
.searchRoot { .searchRoot {
background-color: #fff; background-color: #fff;
padding: 22rpx 18rpx; padding: 22rpx 18rpx;
border-bottom: 16rpx rgba(249, 249, 253, 1) solid; border-bottom: 16rpx rgba(249, 249, 253, 1) solid;
::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder { ::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder {
background: #f9f9fd !important; background: #f9f9fd !important;
} }
} }
.contentRoot { .contentRoot {
margin-top: 20rpx; margin-top: 20rpx;
background-color: #fff; background-color: #fff;
// min-height: calc(100vh - 180px); // min-height: calc(100vh - 180px);
} }
.divider { .divider {
height: 1rpx; height: 1rpx;
background-color: #7c7c7c; background-color: #7c7c7c;
opacity: 0.6; opacity: 0.6;
} }
.popoverBox { .popoverBox {
:deep(.popover-bcc) { :deep(.popover-bcc) {
transform: translateX(16rpx) translateY(48rpx); transform: translateX(16rpx) translateY(48rpx);
} }
} }
</style> </style>

View File

@ -1,78 +1,98 @@
<template> <template>
<view> <view>
<view v-if="props.isPlace" class="statusHeight" :style="{ height: _barHeight + 'px' }"></view> <view
<view class="fixed l-0 t-0 statusHeightTop flex" :style="{ width: _width + 'px', height: _barHeight + 'px' }"> v-if="props.isPlace"
<tm-sheet class="statusHeight"
@click="emits('click', $event)" :style="{ height: _barHeight + 'px' }"
:blur="_blur" ></view>
:color="props.color" <view
:_class="_class" class="fixed l-0 t-0 statusHeightTop flex"
:_style="_style" :style="{ width: _width + 'px', height: _barHeight + 'px' }"
:followTheme="props.followTheme" >
:follow-dark="props.followDark" <tm-sheet
:dark="props.dark" @click="emits('click', $event)"
:round="props.round" :blur="_blur"
:shadow="props.shadow" :color="props.color"
:outlined="props.outlined" :_class="_class"
:border="props.border" :_style="_style"
:borderStyle="props.borderStyle" :followTheme="props.followTheme"
:borderDirection="props.borderDirection" :follow-dark="props.followDark"
:text="props.text" :dark="props.dark"
:transprent="props.transprent" :round="props.round"
:linear="props.linear" :shadow="props.shadow"
:linearDeep="props.linearDeep" :outlined="props.outlined"
:margin="props.margin" :border="props.border"
:padding="props.padding" :borderStyle="props.borderStyle"
:height="_barHeight" :borderDirection="props.borderDirection"
:width="_width" :text="props.text"
unit="px" :transprent="props.transprent"
:darkBgColor="props.darkBgColor" :linear="props.linear"
> :linearDeep="props.linearDeep"
<view class="statusHeight" :style="{ height: statusBarHeight + 'px' }"></view> :margin="props.margin"
:padding="props.padding"
:height="_barHeight"
:width="_width"
unit="px"
:darkBgColor="props.darkBgColor"
>
<view
class="statusHeight"
:style="{ height: statusBarHeight + 'px' }"
v-if="props?.showStatusBar"
></view>
<view class="flex flex-row flex-1 flex-row flex-row-center-between"> <view class="flex flex-row flex-1 flex-row flex-row-center-between">
<view class="flex-row flex flex-row-center-start" :style="{ width: _leftWidth + 'rpx' }"> <view
<!-- #ifndef MP-ALIPAY --> class="flex-row flex flex-row-center-start"
<tm-icon :style="{ width: _leftWidth + 'rpx' }"
:unit="props.unit" >
:font-size="props.iconFontSize" <!-- #ifndef MP-ALIPAY -->
_class="pointer pb-12 pt-12 px-24" <tm-icon
:color="_homeColor" :unit="props.unit"
@click="goback" :font-size="props.iconFontSize"
v-if="_pages > 1 && !props.hideBack" _class="pointer pb-12 pt-12 px-24"
name="tmicon-angle-left" :color="_homeColor"
></tm-icon> @click="goback"
<tm-icon v-if="_pages > 1 && !props.hideBack"
:unit="props.unit" name="tmicon-angle-left"
_class="pointer pb-12 pt-12 px-24" ></tm-icon>
@click="backhome" <tm-icon
v-if="_pages == 1 && !hideHome" :unit="props.unit"
:color="_homeColor" _class="pointer pb-12 pt-12 px-24"
:font-size="props.iconFontSize" @click="backhome"
name="tmicon-md-home" v-if="_pages == 1 && !hideHome"
></tm-icon> :color="_homeColor"
<!-- #endif --> :font-size="props.iconFontSize"
<slot name="left"></slot> name="tmicon-md-home"
</view> ></tm-icon>
<view class="flex flex-row-center-center flex-col" :style="{ width: contentwidth + 'px' }"> <!-- #endif -->
<slot> <slot name="left"></slot>
<tm-text </view>
:unit="props.unit" <view
_class="text-weight-b text-overflow-1" class="flex flex-row-center-center flex-col"
:color="_fontColor" :style="{ width: contentwidth + 'px' }"
:font-size="props.fontSize" >
:label="_title" <slot>
></tm-text> <tm-text
:unit="props.unit"
_class="text-weight-b text-overflow-1"
:color="_fontColor"
:font-size="props.fontSize"
:label="_title"
></tm-text>
<slot name="subTitle"></slot> <slot name="subTitle"></slot>
</slot> </slot>
</view> </view>
<view class="flex-row flex flex-row-center-end" :style="{ width: _rightWidth + 'rpx' }"> <view
<slot name="right"></slot> class="flex-row flex flex-row-center-end"
</view> :style="{ width: _rightWidth + 'rpx' }"
</view> >
</tm-sheet> <slot name="right"></slot>
</view> </view>
</view> </view>
</tm-sheet>
</view>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/** /**
@ -83,148 +103,167 @@ import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmText from '../tm-text/tm-text.vue' import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue' import tmIcon from '../tm-icon/tm-icon.vue'
import { custom_props } from '../../tool/lib/minxs' import { custom_props } from '../../tool/lib/minxs'
import { getCurrentInstance, computed, ref, provide, inject, onUpdated, onMounted, onUnmounted, nextTick, watch, PropType } from 'vue' import {
getCurrentInstance,
computed,
ref,
provide,
inject,
onUpdated,
onMounted,
onUnmounted,
nextTick,
watch,
PropType,
} from 'vue'
import { useTmpiniaStore } from '../../tool/lib/tmpinia' import { useTmpiniaStore } from '../../tool/lib/tmpinia'
const store = useTmpiniaStore() const store = useTmpiniaStore()
const emits = defineEmits(['click', 'close']) const emits = defineEmits(['click', 'close'])
const proxy = getCurrentInstance()?.proxy ?? null const proxy = getCurrentInstance()?.proxy ?? null
const props = defineProps({ const props = defineProps({
...custom_props, ...custom_props,
followTheme: { followTheme: {
type: [Boolean, String], type: [Boolean, String],
default: true default: true,
}, },
transprent: { transprent: {
type: [Boolean, String], type: [Boolean, String],
default: false default: false,
}, },
color: { color: {
type: [String], type: [String],
default: 'white' default: 'white',
}, },
text: { text: {
type: [Boolean], type: [Boolean],
default: false default: false,
}, },
border: { border: {
type: [Number], type: [Number],
default: 0 default: 0,
}, },
shadow: { shadow: {
type: [Number], type: [Number],
default: 1 default: 1,
}, },
borderDirection: { borderDirection: {
type: String as PropType< type: String as PropType<
| 'all' | 'all'
| 'bottom' | 'bottom'
| 'bottomleft' | 'bottomleft'
| 'bottomright' | 'bottomright'
| 'left' | 'left'
| 'leftright' | 'leftright'
| 'right' | 'right'
| 'top' | 'top'
| 'topbottom' | 'topbottom'
| 'topleft' | 'topleft'
| 'topright' | 'topright'
| 'x' | 'x'
| 'y' | 'y'
>, >,
default: 'bottom' default: 'bottom',
}, },
round: { round: {
type: [Number], type: [Number],
default: 0 default: 0,
}, },
margin: { margin: {
type: Array as PropType<Array<number>>, type: Array as PropType<Array<number>>,
default: () => [0, 0] default: () => [0, 0],
}, },
padding: { padding: {
type: Array as PropType<Array<number>>, type: Array as PropType<Array<number>>,
default: () => [0, 0] default: () => [0, 0],
}, },
height: { height: {
type: [Number], type: [Number],
default: 44 default: 44,
}, },
// //
leftWidth: { leftWidth: {
type: [Number], type: [Number],
default: 220 default: 220,
}, },
// //
rightWidth: { rightWidth: {
type: [Number], type: [Number],
default: 220 default: 220,
}, },
fontSize: { fontSize: {
type: [Number], type: [Number],
default: 30 default: 30,
}, },
iconFontSize: { iconFontSize: {
type: [Number], type: [Number],
default: 37 default: 37,
}, },
title: { title: {
type: [String], type: [String],
default: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题' default: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
}, },
//使 //使
fontColor: { fontColor: {
type: [String], type: [String],
default: '' default: '',
}, },
homeColor: { homeColor: {
type: [String], type: [String],
default: '' default: '',
}, },
hideHome: { hideHome: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
hideBack: { hideBack: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
///pages/index/index ///pages/index/index
homePath: { homePath: {
type: [String], type: [String],
default: '/pages/index/index' default: '/pages/index/index',
}, },
beforeBack: { beforeBack: {
type: [Boolean, Function], type: [Boolean, Function],
default: () => true default: () => true,
}, },
blur: { blur: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
unit: { unit: {
type: String, type: String,
default: 'rpx' default: 'rpx',
}, },
// //
//使使 //使使
// //
darkBgColor: { darkBgColor: {
type: String, type: String,
default: '' default: '',
}, },
/**是否占位,如果为false,底部内容会被导航遮盖,true则会店内内容位置. */ /**是否占位,如果为false,底部内容会被导航遮盖,true则会店内内容位置. */
isPlace: { isPlace: {
type: Boolean, type: Boolean,
default: true default: true,
} },
//
showStatusBar: {
type: Boolean,
default: true,
},
}) })
const _height = computed(() => props.height) const _height = computed(() => props.height)
const _width = uni.getSystemInfoSync().windowWidth const _width = uni.getSystemInfoSync().windowWidth
const statusBarHeight=window?.plus?.navigator?.getStatusbarHeight() ?? 0 const statusBarHeight = window?.plus?.navigator?.getStatusbarHeight() ?? 0
const _barHeight = computed(() => statusBarHeight + _height.value) const _barHeight = computed(() =>
props?.showStatusBar ? statusBarHeight + _height.value : _height.value,
)
const _leftWidth = computed(() => props.leftWidth) const _leftWidth = computed(() => props.leftWidth)
const _rightWidth = computed(() => props.rightWidth) const _rightWidth = computed(() => props.rightWidth)
const contentwidth = computed(() => { const contentwidth = computed(() => {
return _width - uni.upx2px(_leftWidth.value) - uni.upx2px(_rightWidth.value) return _width - uni.upx2px(_leftWidth.value) - uni.upx2px(_rightWidth.value)
}) })
const _title = computed(() => props.title) const _title = computed(() => props.title)
const _fontColor = computed(() => props.fontColor) const _fontColor = computed(() => props.fontColor)
@ -232,53 +271,53 @@ const _homeColor = computed(() => props.homeColor)
const _blur = computed(() => props.blur) const _blur = computed(() => props.blur)
const _pages = ref(0) const _pages = ref(0)
onMounted(() => { onMounted(() => {
_pages.value = getCurrentPages().length _pages.value = getCurrentPages().length
}) })
const backhome = () => { const backhome = () => {
uni.reLaunch({ uni.reLaunch({
url: props.homePath url: props.homePath,
}) })
} }
let timerId = NaN let timerId = NaN
function debounce(func: Function, wait = 500, immediate = false) { function debounce(func: Function, wait = 500, immediate = false) {
// //
if (!isNaN(timerId)) clearTimeout(timerId) if (!isNaN(timerId)) clearTimeout(timerId)
// //
if (immediate) { if (immediate) {
var callNow = !timerId var callNow = !timerId
timerId = setTimeout(() => { timerId = setTimeout(() => {
timerId = NaN timerId = NaN
}, wait) }, wait)
if (callNow) typeof func === 'function' && func() if (callNow) typeof func === 'function' && func()
} else { } else {
// timeoutwaitfunc // timeoutwaitfunc
timerId = setTimeout(() => { timerId = setTimeout(() => {
typeof func === 'function' && func() typeof func === 'function' && func()
}, wait) }, wait)
} }
} }
const goback = () => { const goback = () => {
debounce( debounce(
async () => { async () => {
if (typeof props.beforeBack === 'function') { if (typeof props.beforeBack === 'function') {
let p = await props.beforeBack() let p = await props.beforeBack()
if (typeof p === 'function') { if (typeof p === 'function') {
p = await p() p = await p()
} }
if (!p) return if (!p) return
} }
uni.navigateBack({}) uni.navigateBack({})
}, },
250, 250,
true true,
) )
} }
</script> </script>
<style scoped> <style scoped>
.statusHeightTop { .statusHeightTop {
z-index: 400; z-index: 400;
} }
</style> </style>