scout666/chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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']

42
src/App.vue
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>

1
src/components/custom-navbar/index.vue
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>

3
src/components/talk/message/GroupNoticeMessage.vue
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 }">

95
src/components/talk/message/LinkMessage.vue Normal file
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>

6
src/constant/message.ts
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
] ]

1
src/pages/chatSettings/components/settingFormItem.vue
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;

15
src/pages/chatSettings/index.vue
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({

5
src/pages/dialog/dialogDetail/userDetail.vue
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>

30
src/pages/dialog/index.vue
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)
} }
//点击跳转到聊天设置页面 //点击跳转到聊天设置页面

15
src/pages/index/components/chatItem.vue
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"

434
src/pages/index/index.vue
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>

513
src/uni_modules/tmui/components/tm-navbar/tm-navbar.vue
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 {
// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法 // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
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>