处理聊天页面中出现的问题；优化页面中部门明细的样式问题
This commit is contained in:
parent
c9eb55ed5f
commit
ea73fa8b9b
4
components.d.ts
vendored
4
components.d.ts
vendored
@ -25,11 +25,13 @@ declare module 'vue' {
|
||||
GroupNoticeMessage: typeof import('./src/components/talk/message/GroupNoticeMessage.vue')['default']
|
||||
HistoryRecord: typeof import('./src/components/talk/HistoryRecord.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']
|
||||
LoginMessage: typeof import('./src/components/talk/message/LoginMessage.vue')['default']
|
||||
Message: typeof import('./src/components/x-message/message/index.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']
|
||||
RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
|
||||
42
src/App.vue
42
src/App.vue
@ -1,43 +1,55 @@
|
||||
<script setup>
|
||||
import {useStatus} from "@/store/status";
|
||||
import { useStatus } from '@/store/status'
|
||||
import { useUserStore } from '@/store'
|
||||
import {
|
||||
useProvideUserModal,
|
||||
} from '@/hooks'
|
||||
import { useProvideUserModal } from '@/hooks'
|
||||
import ws from '@/connect'
|
||||
const {statusBarHeight}= useStatus()
|
||||
const { statusBarHeight } = useStatus()
|
||||
const { uid, isShow } = useProvideUserModal()
|
||||
const userStore = useUserStore()
|
||||
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 = () => {
|
||||
userStore.loadSetting()
|
||||
ws.connect()
|
||||
if (typeof plus !== 'undefined') {
|
||||
handleWebview()
|
||||
} else {
|
||||
document.addEventListener('plusready', () => {
|
||||
handleWebview()
|
||||
})
|
||||
}
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "@/static/css/color.scss";
|
||||
@import "@/static/css/font.scss";
|
||||
<style lang="scss">
|
||||
@import '@/static/css/color.scss';
|
||||
@import '@/static/css/font.scss';
|
||||
/* #ifdef APP-NVUE */
|
||||
@import '@/uni_modules/tmui/scss/nvue.css';
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
@import '@/uni_modules/tmui/scss/noNvue.css';
|
||||
/* #endif */
|
||||
*{
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*解决阅览图片关闭按钮会显示在状态栏区域的问题*/
|
||||
#u-a-p>div>div{
|
||||
margin-top:var(--statusBarHeight)
|
||||
#u-a-p > div > div {
|
||||
margin-top: var(--statusBarHeight);
|
||||
}
|
||||
/*不显示滚动条的类*/
|
||||
.no-scroll {
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.no-scroll::-webkit-scrollbar {
|
||||
display: none; /* Webkit 浏览器 */
|
||||
display: none; /* Webkit 浏览器 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
:title="props.title"
|
||||
:shadow="props.shadowNum"
|
||||
:fontSize="34"
|
||||
:showStatusBar="false"
|
||||
>
|
||||
<template #left>
|
||||
<slot name="left"></slot>
|
||||
|
||||
@ -20,7 +20,8 @@ let show = ref(false)
|
||||
}"
|
||||
>
|
||||
<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 }}》 -->
|
||||
</div>
|
||||
<div class="title" :class="{ ellipsis: !show }">
|
||||
|
||||
95
src/components/talk/message/LinkMessage.vue
Normal file
95
src/components/talk/message/LinkMessage.vue
Normal 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>
|
||||
@ -11,6 +11,7 @@ export const ChatMsgTypeLogin = 10 // 登录消息
|
||||
export const ChatMsgTypeVote = 11 // 投票消息
|
||||
export const ChatMsgTypeMixed = 12 // 混合消息
|
||||
export const ChatMsgTypeGroupNotice = 13 // 群公告消息
|
||||
export const ChatMsgTypeLink = 14 // 链接消息
|
||||
|
||||
export const ChatMsgSysText = 1000 // 系统文本消息
|
||||
export const ChatMsgSysGroupCreate = 1101 // 创建群聊消息
|
||||
@ -40,6 +41,7 @@ export const ChatMsgTypeMapping = {
|
||||
[ChatMsgTypeCode]: '[代码消息]',
|
||||
[ChatMsgTypeMixed]: '[图文消息]',
|
||||
[ChatMsgTypeGroupNotice]: '[群公告]',
|
||||
[ChatMsgTypeLink]: '[链接]',
|
||||
[ChatMsgSysText]: '[系统消息]',
|
||||
[ChatMsgSysGroupCreate]: '[创建群消息]',
|
||||
[ChatMsgSysGroupMemberJoin]: '[加入群消息]',
|
||||
@ -69,6 +71,7 @@ export const MessageComponents = {
|
||||
[ChatMsgTypeCode]: 'code-message',
|
||||
[ChatMsgTypeMixed]: 'mixed-message',
|
||||
[ChatMsgTypeGroupNotice]: 'group-notice-message',
|
||||
[ChatMsgTypeLink]: 'link-message',
|
||||
[ChatMsgSysText]: 'sys-text-message',
|
||||
[ChatMsgSysGroupCreate]: 'sys-group-create-message',
|
||||
[ChatMsgSysGroupMemberJoin]: 'sys-group-join-message',
|
||||
@ -92,5 +95,6 @@ export const ForwardableMessageType = [
|
||||
ChatMsgTypeVideo,
|
||||
ChatMsgTypeFile,
|
||||
ChatMsgTypeLocation,
|
||||
ChatMsgTypeCard
|
||||
ChatMsgTypeCard,
|
||||
ChatMsgTypeLink
|
||||
]
|
||||
|
||||
@ -115,6 +115,7 @@ const changeSwitch = (e, item) => {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 0 0 20rpx;
|
||||
span {
|
||||
line-height: 44rpx;
|
||||
color: #747474;
|
||||
|
||||
@ -21,12 +21,15 @@
|
||||
<div class="base-info">
|
||||
<div class="base-info-name">
|
||||
<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 + '）' }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="groupParams?.groupInfo?.group_type !== 1"
|
||||
v-if="groupParams?.groupInfo?.group_type !== 1 && groupType"
|
||||
class="base-info-tag"
|
||||
:style="{
|
||||
borderColor:
|
||||
@ -292,10 +295,10 @@ onMounted(() => {
|
||||
value: t('record.searchType.files'),
|
||||
typeIcon: recordSearchTypeIcon_files,
|
||||
},
|
||||
{
|
||||
value: t('record.searchType.link'),
|
||||
typeIcon: recordSearchTypeIcon_link,
|
||||
},
|
||||
// {
|
||||
// value: t('record.searchType.link'),
|
||||
// typeIcon: recordSearchTypeIcon_link,
|
||||
// },
|
||||
]
|
||||
if (dialogueParams.type === 2) {
|
||||
state.recordSearchTypeList.unshift({
|
||||
|
||||
@ -27,7 +27,10 @@
|
||||
<span class="text-[40rpx] font-medium user-info-name">
|
||||
{{ state?.userInfo?.nickname }}
|
||||
</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 }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -8,12 +8,8 @@
|
||||
:hide-empty-view="true"
|
||||
height="100%"
|
||||
ref="zpagingRef"
|
||||
:use-virtual-list="true"
|
||||
:preload-page="1"
|
||||
cell-height-mode="dynamic"
|
||||
virtual-scroll-fps="80"
|
||||
v-model="virtualList"
|
||||
:loading-more-custom-style="{ display: 'none', height: '0' }"
|
||||
@virtualListChange="virtualListChange"
|
||||
@scrolltolower="onRefreshLoad"
|
||||
>
|
||||
<template #top>
|
||||
@ -45,7 +41,7 @@
|
||||
</template> -->
|
||||
|
||||
<!-- 数据加载状态栏 -->
|
||||
<div class="dialog-list">
|
||||
<div class="dialog-list" @touchstart="handleHidePanel">
|
||||
<div
|
||||
class="message-item"
|
||||
v-for="item in virtualList"
|
||||
@ -189,6 +185,7 @@
|
||||
:options="editorOption"
|
||||
@editorChange="onEditorChange"
|
||||
style="height: 100%; border: none;"
|
||||
@click="onEditorClick"
|
||||
/>
|
||||
<!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]"
|
||||
placeholder=""></tm-input> -->
|
||||
@ -409,7 +406,18 @@ const handleFilePanel = () => {
|
||||
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 = {
|
||||
...data,
|
||||
receiver: {
|
||||
@ -421,7 +429,9 @@ const onSendMessage = (data = {}) => {
|
||||
ServePublishMessage(message)
|
||||
.then(({ code, message }) => {
|
||||
if (code == 200) {
|
||||
// callBack(true)
|
||||
if (callBack) {
|
||||
callBack(true)
|
||||
}
|
||||
} else {
|
||||
message.warning(message)
|
||||
}
|
||||
@ -466,7 +476,7 @@ const onSendTextEvent = lodash.throttle((value) => {
|
||||
mentions: data.mentionUids,
|
||||
}
|
||||
|
||||
onSendMessage(message)
|
||||
onSendMessage(message, callBack)
|
||||
}, 1000)
|
||||
|
||||
// 编辑器输入事件
|
||||
@ -823,7 +833,7 @@ const initData = async () => {
|
||||
no_limit: dialogueList ? 1 : 0,
|
||||
}
|
||||
await onLoad({ ...objT })
|
||||
zpagingRef.value?.complete(records.value)
|
||||
zpagingRef.value?.setLocalPaging(records.value)
|
||||
}
|
||||
|
||||
//点击跳转到聊天设置页面
|
||||
|
||||
@ -31,8 +31,12 @@
|
||||
</div>
|
||||
<div class="chatInfo">
|
||||
<div class="chatInfo_1">
|
||||
<div >
|
||||
<span class="text-[#000000] text-[32rpx] font-bold opacity-90 mr-[20rpx]">{{ props.data.name }}</span>
|
||||
<div>
|
||||
<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>
|
||||
@ -43,7 +47,10 @@
|
||||
公司
|
||||
</span>
|
||||
</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) }}
|
||||
</div>
|
||||
</div>
|
||||
@ -57,7 +64,7 @@
|
||||
<template #right>
|
||||
<div class="flex flex-row flex-row-center-end">
|
||||
<!-- 样式占位 -->
|
||||
<div style="width:1px"></div>
|
||||
<div style="width: 1px;"></div>
|
||||
<div
|
||||
@click="handleTop"
|
||||
class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center"
|
||||
|
||||
@ -1,104 +1,106 @@
|
||||
<template>
|
||||
<div class="outer-layer">
|
||||
<ZPaging
|
||||
<div class="outer-layer">
|
||||
<ZPaging
|
||||
class="paging_container"
|
||||
ref="paging"
|
||||
refresher-enabled
|
||||
:refresher-threshold="80"
|
||||
ref="paging"
|
||||
refresher-enabled
|
||||
:refresher-threshold="80"
|
||||
:refresher-max-angle="0"
|
||||
:refresher-pull-rate="0.5"
|
||||
:refresher-fixed-bac-height="80"
|
||||
refresher-fixed-background="#F9F9FD"
|
||||
refresher-background="#F9F9FD"
|
||||
v-model="items"
|
||||
@query="queryList"
|
||||
v-model="items"
|
||||
@query="queryList"
|
||||
:loading-more-enabled="false"
|
||||
:refresher-end-bounce-enabled="false"
|
||||
:auto="true"
|
||||
:empty-view-show="isEmptyViewShow"
|
||||
@refresherRefresh="onRefresh"
|
||||
>
|
||||
<template #top>
|
||||
<div>
|
||||
<tm-navbar
|
||||
class="index_top_navbar"
|
||||
:hideBack="false"
|
||||
hideHome
|
||||
title=""
|
||||
:leftWidth="420"
|
||||
>
|
||||
<template v-slot:left>
|
||||
<div class="flex items-center ml-[48rpx]">
|
||||
<image
|
||||
class="w-[72rpx] h-[72rpx]"
|
||||
style="border-radius: 50%"
|
||||
:src="userStore.avatar"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<div class="ml-[24rpx] text-[36rpx] font-bold">
|
||||
{{ userStore.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<div class="mr-[48rpx] popoverBox">
|
||||
<tm-popover position="br" color="#333333" :width="260">
|
||||
<image
|
||||
class="w-[48rpx] h-[48rpx]"
|
||||
style="border-radius: 50%"
|
||||
:src="addCircle"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<template v-slot:label>
|
||||
<div
|
||||
class="w-full h-[208rpx] pt-[22rpx] pb-[32rpx] pl-[14rpx] pr-[12rpx]"
|
||||
>
|
||||
<div
|
||||
@click="creatGroupChat"
|
||||
class="flex items-center pl-[22rpx] mb-[32rpx]"
|
||||
>
|
||||
<div class="mr-[26rpx] flex items-center">
|
||||
<tm-image
|
||||
:width="40"
|
||||
:height="39"
|
||||
:src="cahtPopover"
|
||||
></tm-image>
|
||||
</div>
|
||||
<div
|
||||
class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold"
|
||||
>
|
||||
发起群聊
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div
|
||||
@click="toAddressBookPage"
|
||||
class="flex items-center pl-[22rpx] mt-[32rpx]"
|
||||
>
|
||||
<div class="mr-[26rpx] flex items-center">
|
||||
<tm-image
|
||||
:width="40"
|
||||
:height="43"
|
||||
:src="zu3289"
|
||||
></tm-image>
|
||||
</div>
|
||||
<div
|
||||
class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold"
|
||||
>
|
||||
通讯录
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tm-popover>
|
||||
</div>
|
||||
</template>
|
||||
</tm-navbar>
|
||||
</div>
|
||||
</template>
|
||||
<template #refresher="{ refresherStatus }">
|
||||
<custom-refresher :status="refresherStatus" />
|
||||
</template>
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<template #top>
|
||||
<div>
|
||||
<tm-navbar
|
||||
class="index_top_navbar"
|
||||
:hideBack="false"
|
||||
hideHome
|
||||
title=""
|
||||
:leftWidth="420"
|
||||
:showStatusBar="false"
|
||||
>
|
||||
<template v-slot:left>
|
||||
<div class="flex items-center ml-[48rpx]">
|
||||
<image
|
||||
class="w-[72rpx] h-[72rpx]"
|
||||
style="border-radius: 50%;"
|
||||
:src="userStore.avatar"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<div class="ml-[24rpx] text-[36rpx] font-bold">
|
||||
{{ userStore.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<div class="mr-[48rpx] popoverBox">
|
||||
<tm-popover position="br" color="#333333" :width="260">
|
||||
<image
|
||||
class="w-[48rpx] h-[48rpx]"
|
||||
style="border-radius: 50%;"
|
||||
:src="addCircle"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<template v-slot:label>
|
||||
<div
|
||||
class="w-full h-[208rpx] pt-[22rpx] pb-[32rpx] pl-[14rpx] pr-[12rpx]"
|
||||
>
|
||||
<div
|
||||
@click="creatGroupChat"
|
||||
class="flex items-center pl-[22rpx] mb-[32rpx]"
|
||||
>
|
||||
<div class="mr-[26rpx] flex items-center">
|
||||
<tm-image
|
||||
:width="40"
|
||||
:height="39"
|
||||
:src="cahtPopover"
|
||||
></tm-image>
|
||||
</div>
|
||||
<div
|
||||
class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold"
|
||||
>
|
||||
发起群聊
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div
|
||||
@click="toAddressBookPage"
|
||||
class="flex items-center pl-[22rpx] mt-[32rpx]"
|
||||
>
|
||||
<div class="mr-[26rpx] flex items-center">
|
||||
<tm-image
|
||||
:width="40"
|
||||
:height="43"
|
||||
:src="zu3289"
|
||||
></tm-image>
|
||||
</div>
|
||||
<div
|
||||
class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold"
|
||||
>
|
||||
通讯录
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tm-popover>
|
||||
</div>
|
||||
</template>
|
||||
</tm-navbar>
|
||||
</div>
|
||||
</template>
|
||||
<template #refresher="{ refresherStatus }">
|
||||
<custom-refresher :status="refresherStatus" />
|
||||
</template>
|
||||
<div class="content">
|
||||
<div class="root">
|
||||
<div class="searchRoot" @click="toSearchPage">
|
||||
@ -121,88 +123,94 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</div>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { useChatList } from "@/store/chatList/index.js";
|
||||
import { useAuth } from "@/store/auth";
|
||||
import { useTalkStore, useUserStore, useDialogueStore } from "@/store";
|
||||
import chatItem from "./components/chatItem.vue";
|
||||
import addCircle from "@/static/image/chatList/addCircle.png";
|
||||
import cahtPopover from "@/static/image/chatList/cahtPopover.png";
|
||||
import zu3289 from "@/static/image/chatList/zu3289@2x.png";
|
||||
import ZPaging from "@/uni_modules/z-paging/components/z-paging/z-paging.vue";
|
||||
const paging = ref();
|
||||
const isEmptyViewShow = ref(false);
|
||||
const talkStore = useTalkStore();
|
||||
const userStore = useUserStore();
|
||||
const dialogueStore = useDialogueStore();
|
||||
const { userInfo } = useAuth();
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { onShow, onLoad } from '@dcloudio/uni-app'
|
||||
import { useChatList } from '@/store/chatList/index.js'
|
||||
import { useAuth } from '@/store/auth'
|
||||
import { useTalkStore, useUserStore, useDialogueStore } from '@/store'
|
||||
import chatItem from './components/chatItem.vue'
|
||||
import addCircle from '@/static/image/chatList/addCircle.png'
|
||||
import cahtPopover from '@/static/image/chatList/cahtPopover.png'
|
||||
import zu3289 from '@/static/image/chatList/zu3289@2x.png'
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
const paging = ref()
|
||||
const isEmptyViewShow = ref(false)
|
||||
const talkStore = useTalkStore()
|
||||
const userStore = useUserStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
const { userInfo } = useAuth()
|
||||
|
||||
const topItems = computed(() => talkStore.topItems);
|
||||
const topItems = computed(() => talkStore.topItems)
|
||||
const items = computed(() => {
|
||||
// if (searchKeyword.value.length === 0) {
|
||||
console.log(talkStore.talkItems);
|
||||
// if (searchKeyword.value.length === 0) {
|
||||
console.log(talkStore.talkItems)
|
||||
|
||||
return talkStore.talkItems;
|
||||
// }
|
||||
return talkStore.talkItems
|
||||
// }
|
||||
|
||||
// return talkStore.talkItems.filter((item) => {
|
||||
// let keyword = item.remark || item.name
|
||||
// return talkStore.talkItems.filter((item) => {
|
||||
// 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) => {
|
||||
// paging.value.complete(res.data.list);
|
||||
console.log(talkStore);
|
||||
talkStore.loadTalkList().then(() => {
|
||||
isEmptyViewShow.value = talkStore.talkItems.length === 0;
|
||||
// 数据加载成功
|
||||
paging.value.complete(talkStore.talkItems);
|
||||
}).catch(error => {
|
||||
// 数据加载失败
|
||||
console.error('加载失败', error);
|
||||
paging.value.complete(false);
|
||||
});
|
||||
};
|
||||
// paging.value.complete(res.data.list);
|
||||
console.log(talkStore)
|
||||
talkStore
|
||||
.loadTalkList()
|
||||
.then(() => {
|
||||
isEmptyViewShow.value = talkStore.talkItems.length === 0
|
||||
// 数据加载成功
|
||||
paging.value.complete(talkStore.talkItems)
|
||||
})
|
||||
.catch((error) => {
|
||||
// 数据加载失败
|
||||
console.error('加载失败', error)
|
||||
paging.value.complete(false)
|
||||
})
|
||||
}
|
||||
|
||||
// 添加下拉刷新处理函数
|
||||
const onRefresh = () => {
|
||||
console.log('触发下拉刷新');
|
||||
talkStore.loadTalkList().then(() => {
|
||||
// 数据加载成功
|
||||
paging.value.complete(talkStore.talkItems);
|
||||
}).catch(error => {
|
||||
// 数据加载失败
|
||||
console.error('加载失败', error);
|
||||
paging.value.complete(false);
|
||||
});
|
||||
};
|
||||
console.log('触发下拉刷新')
|
||||
talkStore
|
||||
.loadTalkList()
|
||||
.then(() => {
|
||||
// 数据加载成功
|
||||
paging.value.complete(talkStore.talkItems)
|
||||
})
|
||||
.catch((error) => {
|
||||
// 数据加载失败
|
||||
console.error('加载失败', error)
|
||||
paging.value.complete(false)
|
||||
})
|
||||
}
|
||||
|
||||
const creatGroupChat = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/creatGroupChat/index",
|
||||
});
|
||||
};
|
||||
uni.navigateTo({
|
||||
url: '/pages/creatGroupChat/index',
|
||||
})
|
||||
}
|
||||
|
||||
const toSearchPage = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/search/index",
|
||||
});
|
||||
};
|
||||
uni.navigateTo({
|
||||
url: '/pages/search/index',
|
||||
})
|
||||
}
|
||||
|
||||
//点击跳转到通讯录页面
|
||||
const toAddressBookPage = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/chooseByDeps/index?chooseMode=3",
|
||||
});
|
||||
};
|
||||
uni.navigateTo({
|
||||
url: '/pages/chooseByDeps/index?chooseMode=3',
|
||||
})
|
||||
}
|
||||
|
||||
/* watch(
|
||||
() => talkStore,
|
||||
@ -214,106 +222,108 @@ const toAddressBookPage = () => {
|
||||
|
||||
onShow(() => {
|
||||
// 页面显示时重新加载数据
|
||||
talkStore.loadTalkList().then(() => {
|
||||
// 如果paging已经初始化，则刷新列表
|
||||
if (paging.value) {
|
||||
paging.value.reload();
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('页面显示时数据加载失败', error);
|
||||
});
|
||||
});
|
||||
talkStore
|
||||
.loadTalkList()
|
||||
.then(() => {
|
||||
// 如果paging已经初始化，则刷新列表
|
||||
if (paging.value) {
|
||||
paging.value.reload()
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('页面显示时数据加载失败', error)
|
||||
})
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options);
|
||||
console.log(options)
|
||||
|
||||
if (options?.openSessionIndexName) {
|
||||
if (items?.value?.length > 0) {
|
||||
items.value.forEach((openSession) => {
|
||||
if (openSession.index_name === options?.openSessionIndexName) {
|
||||
dialogueStore.setDialogue(openSession);
|
||||
if (openSession.unread_num > 0) {
|
||||
ServeClearTalkUnreadNum({
|
||||
talk_type: openSession.talk_type,
|
||||
receiver_id: openSession.receiver_id,
|
||||
}).then(() => {
|
||||
talkStore.updateItem({
|
||||
index_name: openSession.index_name,
|
||||
unread_num: 0,
|
||||
});
|
||||
});
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pages/dialog/index?sessionId=" + openSession.id,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
if (options?.openSessionIndexName) {
|
||||
if (items?.value?.length > 0) {
|
||||
items.value.forEach((openSession) => {
|
||||
if (openSession.index_name === options?.openSessionIndexName) {
|
||||
dialogueStore.setDialogue(openSession)
|
||||
if (openSession.unread_num > 0) {
|
||||
ServeClearTalkUnreadNum({
|
||||
talk_type: openSession.talk_type,
|
||||
receiver_id: openSession.receiver_id,
|
||||
}).then(() => {
|
||||
talkStore.updateItem({
|
||||
index_name: openSession.index_name,
|
||||
unread_num: 0,
|
||||
})
|
||||
})
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/dialog/index?sessionId=' + openSession.id,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
uni-page-body,
|
||||
page {
|
||||
height: 100vh;
|
||||
background-image: url("@/static/image/clockIn/z3280@3x.png");
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
||||
background-size: cover;
|
||||
flex-direction: column;
|
||||
}
|
||||
.outer-layer {
|
||||
height: 100%;
|
||||
}
|
||||
.paging_container{
|
||||
.paging_container {
|
||||
// border: 1px solid red;
|
||||
background: #fff;
|
||||
margin: 0 32rpx 20rpx 32rpx;
|
||||
}
|
||||
|
||||
::v-deep .index_top_navbar > .statusHeight:first-child {
|
||||
height: 70px !important;
|
||||
height: 70px !important;
|
||||
}
|
||||
|
||||
::v-deep .index_top_navbar .statusHeightTop {
|
||||
height: 70px !important;
|
||||
height: 70px !important;
|
||||
}
|
||||
|
||||
::v-deep .index_top_navbar .statusHeightTop > .noNvueBorder:first-child {
|
||||
height: 70px !important;
|
||||
height: 70px !important;
|
||||
}
|
||||
|
||||
.content{
|
||||
|
||||
// overflow: auto;
|
||||
.content {
|
||||
// overflow: auto;
|
||||
}
|
||||
.root {
|
||||
flex: 1;
|
||||
padding: 20rpx 0;
|
||||
flex: 1;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.searchRoot {
|
||||
background-color: #fff;
|
||||
padding: 22rpx 18rpx;
|
||||
background-color: #fff;
|
||||
padding: 22rpx 18rpx;
|
||||
border-bottom: 16rpx rgba(249, 249, 253, 1) solid;
|
||||
::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder {
|
||||
background: #f9f9fd !important;
|
||||
}
|
||||
::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder {
|
||||
background: #f9f9fd !important;
|
||||
}
|
||||
}
|
||||
|
||||
.contentRoot {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
// min-height: calc(100vh - 180px);
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
// min-height: calc(100vh - 180px);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: #7c7c7c;
|
||||
opacity: 0.6;
|
||||
height: 1rpx;
|
||||
background-color: #7c7c7c;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.popoverBox {
|
||||
:deep(.popover-bcc) {
|
||||
transform: translateX(16rpx) translateY(48rpx);
|
||||
}
|
||||
:deep(.popover-bcc) {
|
||||
transform: translateX(16rpx) translateY(48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,78 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="props.isPlace" class="statusHeight" :style="{ height: _barHeight + 'px' }"></view>
|
||||
<view class="fixed l-0 t-0 statusHeightTop flex" :style="{ width: _width + 'px', height: _barHeight + 'px' }">
|
||||
<tm-sheet
|
||||
@click="emits('click', $event)"
|
||||
:blur="_blur"
|
||||
:color="props.color"
|
||||
:_class="_class"
|
||||
:_style="_style"
|
||||
:followTheme="props.followTheme"
|
||||
:follow-dark="props.followDark"
|
||||
:dark="props.dark"
|
||||
:round="props.round"
|
||||
:shadow="props.shadow"
|
||||
:outlined="props.outlined"
|
||||
:border="props.border"
|
||||
:borderStyle="props.borderStyle"
|
||||
:borderDirection="props.borderDirection"
|
||||
:text="props.text"
|
||||
:transprent="props.transprent"
|
||||
:linear="props.linear"
|
||||
:linearDeep="props.linearDeep"
|
||||
:margin="props.margin"
|
||||
:padding="props.padding"
|
||||
:height="_barHeight"
|
||||
:width="_width"
|
||||
unit="px"
|
||||
:darkBgColor="props.darkBgColor"
|
||||
>
|
||||
<view class="statusHeight" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view>
|
||||
<view
|
||||
v-if="props.isPlace"
|
||||
class="statusHeight"
|
||||
:style="{ height: _barHeight + 'px' }"
|
||||
></view>
|
||||
<view
|
||||
class="fixed l-0 t-0 statusHeightTop flex"
|
||||
:style="{ width: _width + 'px', height: _barHeight + 'px' }"
|
||||
>
|
||||
<tm-sheet
|
||||
@click="emits('click', $event)"
|
||||
:blur="_blur"
|
||||
:color="props.color"
|
||||
:_class="_class"
|
||||
:_style="_style"
|
||||
:followTheme="props.followTheme"
|
||||
:follow-dark="props.followDark"
|
||||
:dark="props.dark"
|
||||
:round="props.round"
|
||||
:shadow="props.shadow"
|
||||
:outlined="props.outlined"
|
||||
:border="props.border"
|
||||
:borderStyle="props.borderStyle"
|
||||
:borderDirection="props.borderDirection"
|
||||
:text="props.text"
|
||||
:transprent="props.transprent"
|
||||
:linear="props.linear"
|
||||
:linearDeep="props.linearDeep"
|
||||
: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-row flex flex-row-center-start" :style="{ width: _leftWidth + 'rpx' }">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<tm-icon
|
||||
:unit="props.unit"
|
||||
:font-size="props.iconFontSize"
|
||||
_class="pointer pb-12 pt-12 px-24"
|
||||
:color="_homeColor"
|
||||
@click="goback"
|
||||
v-if="_pages > 1 && !props.hideBack"
|
||||
name="tmicon-angle-left"
|
||||
></tm-icon>
|
||||
<tm-icon
|
||||
:unit="props.unit"
|
||||
_class="pointer pb-12 pt-12 px-24"
|
||||
@click="backhome"
|
||||
v-if="_pages == 1 && !hideHome"
|
||||
:color="_homeColor"
|
||||
:font-size="props.iconFontSize"
|
||||
name="tmicon-md-home"
|
||||
></tm-icon>
|
||||
<!-- #endif -->
|
||||
<slot name="left"></slot>
|
||||
</view>
|
||||
<view class="flex flex-row-center-center flex-col" :style="{ width: contentwidth + 'px' }">
|
||||
<slot>
|
||||
<tm-text
|
||||
:unit="props.unit"
|
||||
_class="text-weight-b text-overflow-1"
|
||||
:color="_fontColor"
|
||||
:font-size="props.fontSize"
|
||||
:label="_title"
|
||||
></tm-text>
|
||||
<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' }"
|
||||
>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<tm-icon
|
||||
:unit="props.unit"
|
||||
:font-size="props.iconFontSize"
|
||||
_class="pointer pb-12 pt-12 px-24"
|
||||
:color="_homeColor"
|
||||
@click="goback"
|
||||
v-if="_pages > 1 && !props.hideBack"
|
||||
name="tmicon-angle-left"
|
||||
></tm-icon>
|
||||
<tm-icon
|
||||
:unit="props.unit"
|
||||
_class="pointer pb-12 pt-12 px-24"
|
||||
@click="backhome"
|
||||
v-if="_pages == 1 && !hideHome"
|
||||
:color="_homeColor"
|
||||
:font-size="props.iconFontSize"
|
||||
name="tmicon-md-home"
|
||||
></tm-icon>
|
||||
<!-- #endif -->
|
||||
<slot name="left"></slot>
|
||||
</view>
|
||||
<view
|
||||
class="flex flex-row-center-center flex-col"
|
||||
:style="{ width: contentwidth + 'px' }"
|
||||
>
|
||||
<slot>
|
||||
<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>
|
||||
</view>
|
||||
<view class="flex-row flex flex-row-center-end" :style="{ width: _rightWidth + 'rpx' }">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</tm-sheet>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view
|
||||
class="flex-row flex flex-row-center-end"
|
||||
:style="{ width: _rightWidth + 'rpx' }"
|
||||
>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</tm-sheet>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<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 tmIcon from '../tm-icon/tm-icon.vue'
|
||||
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'
|
||||
const store = useTmpiniaStore()
|
||||
const emits = defineEmits(['click', 'close'])
|
||||
const proxy = getCurrentInstance()?.proxy ?? null
|
||||
const props = defineProps({
|
||||
...custom_props,
|
||||
followTheme: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
transprent: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
color: {
|
||||
type: [String],
|
||||
default: 'white'
|
||||
},
|
||||
text: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: [Number],
|
||||
default: 0
|
||||
},
|
||||
shadow: {
|
||||
type: [Number],
|
||||
default: 1
|
||||
},
|
||||
borderDirection: {
|
||||
type: String as PropType<
|
||||
| 'all'
|
||||
| 'bottom'
|
||||
| 'bottomleft'
|
||||
| 'bottomright'
|
||||
| 'left'
|
||||
| 'leftright'
|
||||
| 'right'
|
||||
| 'top'
|
||||
| 'topbottom'
|
||||
| 'topleft'
|
||||
| 'topright'
|
||||
| 'x'
|
||||
| 'y'
|
||||
>,
|
||||
default: 'bottom'
|
||||
},
|
||||
round: {
|
||||
type: [Number],
|
||||
default: 0
|
||||
},
|
||||
margin: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => [0, 0]
|
||||
},
|
||||
padding: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => [0, 0]
|
||||
},
|
||||
height: {
|
||||
type: [Number],
|
||||
default: 44
|
||||
},
|
||||
//指两边，左宽度除了中间，中间标题宽度为自动
|
||||
leftWidth: {
|
||||
type: [Number],
|
||||
default: 220
|
||||
},
|
||||
//指两边，左宽度除了中间，中间标题宽度为自动
|
||||
rightWidth: {
|
||||
type: [Number],
|
||||
default: 220
|
||||
},
|
||||
fontSize: {
|
||||
type: [Number],
|
||||
default: 30
|
||||
},
|
||||
iconFontSize: {
|
||||
type: [Number],
|
||||
default: 37
|
||||
},
|
||||
title: {
|
||||
type: [String],
|
||||
default: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题'
|
||||
},
|
||||
//默认为自动，提供了，将强制使用本主题色。
|
||||
fontColor: {
|
||||
type: [String],
|
||||
default: ''
|
||||
},
|
||||
homeColor: {
|
||||
type: [String],
|
||||
default: ''
|
||||
},
|
||||
hideHome: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//返回首页的路径，默认/pages/index/index
|
||||
homePath: {
|
||||
type: [String],
|
||||
default: '/pages/index/index'
|
||||
},
|
||||
beforeBack: {
|
||||
type: [Boolean, Function],
|
||||
default: () => true
|
||||
},
|
||||
blur: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'rpx'
|
||||
},
|
||||
//暗下强制的背景色，
|
||||
//有时自动的背景，可能不是你想要暗黑背景，此时可以使用此参数，强制使用背景色，
|
||||
//只能是颜色值。
|
||||
darkBgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**是否占位,如果为false,底部内容会被导航遮盖,true则会店内内容位置. */
|
||||
isPlace: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
...custom_props,
|
||||
followTheme: {
|
||||
type: [Boolean, String],
|
||||
default: true,
|
||||
},
|
||||
transprent: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
type: [String],
|
||||
default: 'white',
|
||||
},
|
||||
text: {
|
||||
type: [Boolean],
|
||||
default: false,
|
||||
},
|
||||
border: {
|
||||
type: [Number],
|
||||
default: 0,
|
||||
},
|
||||
shadow: {
|
||||
type: [Number],
|
||||
default: 1,
|
||||
},
|
||||
borderDirection: {
|
||||
type: String as PropType<
|
||||
| 'all'
|
||||
| 'bottom'
|
||||
| 'bottomleft'
|
||||
| 'bottomright'
|
||||
| 'left'
|
||||
| 'leftright'
|
||||
| 'right'
|
||||
| 'top'
|
||||
| 'topbottom'
|
||||
| 'topleft'
|
||||
| 'topright'
|
||||
| 'x'
|
||||
| 'y'
|
||||
>,
|
||||
default: 'bottom',
|
||||
},
|
||||
round: {
|
||||
type: [Number],
|
||||
default: 0,
|
||||
},
|
||||
margin: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => [0, 0],
|
||||
},
|
||||
padding: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => [0, 0],
|
||||
},
|
||||
height: {
|
||||
type: [Number],
|
||||
default: 44,
|
||||
},
|
||||
//指两边，左宽度除了中间，中间标题宽度为自动
|
||||
leftWidth: {
|
||||
type: [Number],
|
||||
default: 220,
|
||||
},
|
||||
//指两边，左宽度除了中间，中间标题宽度为自动
|
||||
rightWidth: {
|
||||
type: [Number],
|
||||
default: 220,
|
||||
},
|
||||
fontSize: {
|
||||
type: [Number],
|
||||
default: 30,
|
||||
},
|
||||
iconFontSize: {
|
||||
type: [Number],
|
||||
default: 37,
|
||||
},
|
||||
title: {
|
||||
type: [String],
|
||||
default: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
|
||||
},
|
||||
//默认为自动，提供了，将强制使用本主题色。
|
||||
fontColor: {
|
||||
type: [String],
|
||||
default: '',
|
||||
},
|
||||
homeColor: {
|
||||
type: [String],
|
||||
default: '',
|
||||
},
|
||||
hideHome: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hideBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
//返回首页的路径，默认/pages/index/index
|
||||
homePath: {
|
||||
type: [String],
|
||||
default: '/pages/index/index',
|
||||
},
|
||||
beforeBack: {
|
||||
type: [Boolean, Function],
|
||||
default: () => true,
|
||||
},
|
||||
blur: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'rpx',
|
||||
},
|
||||
//暗下强制的背景色，
|
||||
//有时自动的背景，可能不是你想要暗黑背景，此时可以使用此参数，强制使用背景色，
|
||||
//只能是颜色值。
|
||||
darkBgColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**是否占位,如果为false,底部内容会被导航遮盖,true则会店内内容位置. */
|
||||
isPlace: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
//是否显示状态栏
|
||||
showStatusBar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
const _height = computed(() => props.height)
|
||||
const _width = uni.getSystemInfoSync().windowWidth
|
||||
const statusBarHeight=window?.plus?.navigator?.getStatusbarHeight() ?? 0
|
||||
const _barHeight = computed(() => statusBarHeight + _height.value)
|
||||
const statusBarHeight = window?.plus?.navigator?.getStatusbarHeight() ?? 0
|
||||
const _barHeight = computed(() =>
|
||||
props?.showStatusBar ? statusBarHeight + _height.value : _height.value,
|
||||
)
|
||||
const _leftWidth = computed(() => props.leftWidth)
|
||||
const _rightWidth = computed(() => props.rightWidth)
|
||||
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 _fontColor = computed(() => props.fontColor)
|
||||
@ -232,53 +271,53 @@ const _homeColor = computed(() => props.homeColor)
|
||||
const _blur = computed(() => props.blur)
|
||||
const _pages = ref(0)
|
||||
onMounted(() => {
|
||||
_pages.value = getCurrentPages().length
|
||||
_pages.value = getCurrentPages().length
|
||||
})
|
||||
|
||||
const backhome = () => {
|
||||
uni.reLaunch({
|
||||
url: props.homePath
|
||||
})
|
||||
uni.reLaunch({
|
||||
url: props.homePath,
|
||||
})
|
||||
}
|
||||
let timerId = NaN
|
||||
function debounce(func: Function, wait = 500, immediate = false) {
|
||||
// 清除定时器
|
||||
if (!isNaN(timerId)) clearTimeout(timerId)
|
||||
// 立即执行，此类情况一般用不到
|
||||
if (immediate) {
|
||||
var callNow = !timerId
|
||||
timerId = setTimeout(() => {
|
||||
timerId = NaN
|
||||
}, wait)
|
||||
if (callNow) typeof func === 'function' && func()
|
||||
} else {
|
||||
// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
|
||||
timerId = setTimeout(() => {
|
||||
typeof func === 'function' && func()
|
||||
}, wait)
|
||||
}
|
||||
// 清除定时器
|
||||
if (!isNaN(timerId)) clearTimeout(timerId)
|
||||
// 立即执行，此类情况一般用不到
|
||||
if (immediate) {
|
||||
var callNow = !timerId
|
||||
timerId = setTimeout(() => {
|
||||
timerId = NaN
|
||||
}, wait)
|
||||
if (callNow) typeof func === 'function' && func()
|
||||
} else {
|
||||
// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
|
||||
timerId = setTimeout(() => {
|
||||
typeof func === 'function' && func()
|
||||
}, wait)
|
||||
}
|
||||
}
|
||||
|
||||
const goback = () => {
|
||||
debounce(
|
||||
async () => {
|
||||
if (typeof props.beforeBack === 'function') {
|
||||
let p = await props.beforeBack()
|
||||
if (typeof p === 'function') {
|
||||
p = await p()
|
||||
}
|
||||
if (!p) return
|
||||
}
|
||||
uni.navigateBack({})
|
||||
},
|
||||
250,
|
||||
true
|
||||
)
|
||||
debounce(
|
||||
async () => {
|
||||
if (typeof props.beforeBack === 'function') {
|
||||
let p = await props.beforeBack()
|
||||
if (typeof p === 'function') {
|
||||
p = await p()
|
||||
}
|
||||
if (!p) return
|
||||
}
|
||||
uni.navigateBack({})
|
||||
},
|
||||
250,
|
||||
true,
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.statusHeightTop {
|
||||
z-index: 400;
|
||||
z-index: 400;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user