处理冲突
Some checks are pending
Check / lint (push) Waiting to run
Check / typecheck (push) Waiting to run
Check / build (build, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build, 18.x, windows-latest) (push) Waiting to run
Check / build (build:app, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:app, 18.x, windows-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Waiting to run
Some checks are pending
Check / lint (push) Waiting to run
Check / typecheck (push) Waiting to run
Check / build (build, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build, 18.x, windows-latest) (push) Waiting to run
Check / build (build:app, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:app, 18.x, windows-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Waiting to run
This commit is contained in:
commit
4be1c7c9a4
75
auto-imports.d.ts
vendored
Normal file
75
auto-imports.d.ts
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useDialog: typeof import('naive-ui')['useDialog']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
|
||||
const useMessage: typeof import('naive-ui')['useMessage']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useNotification: typeof import('naive-ui')['useNotification']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
66
components.d.ts
vendored
Normal file
66
components.d.ts
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AudioMessage: typeof import('./src/components/talk/message/AudioMessage.vue')['default']
|
||||
Avatar: typeof import('./src/components/base/Avatar.vue')['default']
|
||||
AvatarCropper: typeof import('./src/components/base/AvatarCropper.vue')['default']
|
||||
AvatarModule: typeof import('./src/components/avatar-module/index.vue')['default']
|
||||
CheckBox: typeof import('./src/components/checkBox/index.vue')['default']
|
||||
CodeMessage: typeof import('./src/components/talk/message/CodeMessage.vue')['default']
|
||||
CustomBtn: typeof import('./src/components/custom-btn/custom-btn.vue')['default']
|
||||
CustomInput: typeof import('./src/components/custom-input/custom-input.vue')['default']
|
||||
CustomNavbar: typeof import('./src/components/custom-navbar/index.vue')['default']
|
||||
CustomRefresher: typeof import('./src/components/custom-refresher/custom-refresher.vue')['default']
|
||||
DeepBubble: typeof import('./src/components/deep-bubble/deep-bubble.vue')['default']
|
||||
FileMessage: typeof import('./src/components/talk/message/FileMessage.vue')['default']
|
||||
ForwardMessage: typeof import('./src/components/talk/message/ForwardMessage.vue')['default']
|
||||
ForwardRecord: typeof import('./src/components/talk/ForwardRecord.vue')['default']
|
||||
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']
|
||||
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']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SysGroupCancelMutedMessage: typeof import('./src/components/talk/message/system/SysGroupCancelMutedMessage.vue')['default']
|
||||
SysGroupCreateMessage: typeof import('./src/components/talk/message/system/SysGroupCreateMessage.vue')['default']
|
||||
SysGroupJoinMessage: typeof import('./src/components/talk/message/system/SysGroupJoinMessage.vue')['default']
|
||||
SysGroupMemberCancelMutedMessage: typeof import('./src/components/talk/message/system/SysGroupMemberCancelMutedMessage.vue')['default']
|
||||
SysGroupMemberKickedMessage: typeof import('./src/components/talk/message/system/SysGroupMemberKickedMessage.vue')['default']
|
||||
SysGroupMemberMutedMessage: typeof import('./src/components/talk/message/system/SysGroupMemberMutedMessage.vue')['default']
|
||||
SysGroupMemberQuitMessage: typeof import('./src/components/talk/message/system/SysGroupMemberQuitMessage.vue')['default']
|
||||
SysGroupMutedMessage: typeof import('./src/components/talk/message/system/SysGroupMutedMessage.vue')['default']
|
||||
SysGroupTransferMessage: typeof import('./src/components/talk/message/system/SysGroupTransferMessage.vue')['default']
|
||||
SysTextMessage: typeof import('./src/components/talk/message/system/SysTextMessage.vue')['default']
|
||||
TabbarItem: typeof import('./src/components/x-tabbar/components/tabbar-item/index.vue')['default']
|
||||
TextMessage: typeof import('./src/components/talk/message/TextMessage.vue')['default']
|
||||
UnknownMessage: typeof import('./src/components/talk/message/UnknownMessage.vue')['default']
|
||||
UploadsModal: typeof import('./src/components/base/UploadsModal.vue')['default']
|
||||
VideoMessage: typeof import('./src/components/talk/message/VideoMessage.vue')['default']
|
||||
VoteMessage: typeof import('./src/components/talk/message/VoteMessage.vue')['default']
|
||||
XCalendar: typeof import('./src/components/x-calendar/index.vue')['default']
|
||||
XCaptcha: typeof import('./src/components/x-captcha/index.vue')['default']
|
||||
XConfirm: typeof import('./src/components/x-confirm/index.vue')['default']
|
||||
XDateSelect: typeof import('./src/components/x-date-select/index.vue')['default']
|
||||
XLoaderror: typeof import('./src/components/x-loaderror/index.vue')['default']
|
||||
XLoading: typeof import('./src/components/x-loading/index.vue')['default']
|
||||
XMessage: typeof import('./src/components/x-message/index.vue')['default']
|
||||
XPaging: typeof import('./src/components/x-paging/index.vue')['default']
|
||||
XTabbar: typeof import('./src/components/x-tabbar/index.vue')['default']
|
||||
Xtime: typeof import('./src/components/base/Xtime.vue')['default']
|
||||
}
|
||||
}
|
6
env/.env.dev
vendored
6
env/.env.dev
vendored
@ -5,4 +5,8 @@ VITE_SHOW_CONSOLE = true
|
||||
# 是否开启sourcemap
|
||||
VITE_SHOW_SOURCEMAP = true
|
||||
# baseUrl
|
||||
VITE_BASEURL = 'http://warehouse.szjixun.cn/oa_backend'
|
||||
VITE_BASEURL = 'http://172.16.100.93:8503'
|
||||
#VITE_SOCKET_API
|
||||
VITE_SOCKET_API = 'ws://172.16.100.93:8504'
|
||||
# EPRAPI baseUrl
|
||||
VITE_EPR_BASEURL = 'http://114.218.158.24:9020'
|
||||
|
4
env/.env.prod
vendored
4
env/.env.prod
vendored
@ -1,8 +1,8 @@
|
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
|
||||
NODE_ENV = 'prod'
|
||||
# 是否显示console
|
||||
VITE_SHOW_CONSOLE = true
|
||||
VITE_SHOW_CONSOLE = false
|
||||
# 是否开启sourcemap
|
||||
VITE_SHOW_SOURCEMAP = true
|
||||
VITE_SHOW_SOURCEMAP = false
|
||||
# baseUrl
|
||||
VITE_BASEURL = 'https://oa-a.szjixun.cn/api'
|
||||
|
1
env/.env.test
vendored
1
env/.env.test
vendored
@ -5,7 +5,6 @@ VITE_SHOW_CONSOLE = true
|
||||
# 是否开启sourcemap
|
||||
VITE_SHOW_SOURCEMAP = true
|
||||
# baseUrl
|
||||
# VITE_BASEURL = 'https://warehouse.szjixun.cn/oa_backend'
|
||||
VITE_BASEURL = 'http://172.16.100.93:8503'
|
||||
#VITE_SOCKET_API
|
||||
VITE_SOCKET_API = 'ws://172.16.100.93:8504'
|
||||
|
10
package.json
10
package.json
@ -8,7 +8,9 @@
|
||||
"test:h5": "uni --mode test --port 2468",
|
||||
"prod:h5": "uni --mode prod",
|
||||
"build:h5:test": "uni build --mode test",
|
||||
"build:h5:prod": "uni build --mode prod"
|
||||
"build:h5:prod": "uni build --mode prod",
|
||||
"preview:h5": "uni preview --mode test",
|
||||
"preview:h5:prod": "uni preview --mode prod"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "3.0.0-alpha-4000020240111001",
|
||||
@ -25,6 +27,7 @@
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-4000020240111001",
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-alpha-4000020240111001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4000020240111001",
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"@uni-helper/axios-adapter": "^1.5.2",
|
||||
"@uni-helper/localforage-adapter": "^1.0.2",
|
||||
"@uni-helper/uni-use": "^0.19.12",
|
||||
@ -58,13 +61,16 @@
|
||||
"@vue/runtime-core": "^3.3.8",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"lint-staged": "^15.2.0",
|
||||
"naive-ui": "^2.41.0",
|
||||
"pinia": "2.0.36",
|
||||
"sass": "^1.77.8",
|
||||
"simple-git-hooks": "^2.9.0",
|
||||
"typescript": "^5.3.3",
|
||||
"unocss": "^0.58.9",
|
||||
"unocss-applet": "^0.8.2",
|
||||
"vite": "^5.0.11",
|
||||
"unplugin-auto-import": "^19.1.1",
|
||||
"unplugin-vue-components": "^28.4.1",
|
||||
"vite": "4.5.1",
|
||||
"vue-tsc": "^1.8.27"
|
||||
}
|
||||
}
|
||||
|
767
pnpm-lock.yaml
767
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
47
src/App.vue
47
src/App.vue
@ -1,43 +1,60 @@
|
||||
<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 {useAuth} from "@/store/auth";
|
||||
const {token} = useAuth()
|
||||
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()
|
||||
const webview = plus.webview.currentWebview()
|
||||
webview.setStyle({
|
||||
top: statusBarHeight,
|
||||
bottom: 0,
|
||||
})
|
||||
// console.log(webview)
|
||||
token.value = webview.token
|
||||
}
|
||||
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>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="custom-search-input">
|
||||
<div class="custom-input">
|
||||
<tm-input
|
||||
class="search-input"
|
||||
placeholder="请输入…"
|
||||
@ -13,7 +13,9 @@
|
||||
:showClear="true"
|
||||
@clear="clearInput"
|
||||
placeholderStyle="color:#BABABA"
|
||||
:disabled="props?.disabled"
|
||||
></tm-input>
|
||||
<div v-if="props?.disabled" class="custom-input-disabled"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -21,6 +23,7 @@ import { defineProps, defineEmits, reactive, watch } from 'vue'
|
||||
const props = defineProps({
|
||||
searchText: String,
|
||||
first_talk_record_infos: Object,
|
||||
disabled: Boolean,
|
||||
})
|
||||
const state = reactive({
|
||||
searchText: '', //搜索内容
|
||||
@ -45,18 +48,27 @@ const inputSearchText = (e) => {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.custom-search-input {
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder {
|
||||
background: #f9f9fd !important;
|
||||
background: #f9f9fd !important;
|
||||
border-radius: 8rpx !important;
|
||||
}
|
||||
}
|
||||
.search-input::v-deep .tmicon-times-circle-fill::before {
|
||||
content: '\e82a';
|
||||
color: #d2d2d5;
|
||||
}
|
||||
|
||||
.custom-input-disabled {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -5,6 +5,7 @@
|
||||
:title="props.title"
|
||||
:shadow="props.shadowNum"
|
||||
:fontSize="34"
|
||||
:showStatusBar="false"
|
||||
>
|
||||
<template #left>
|
||||
<slot name="left"></slot>
|
||||
|
@ -1,91 +1,95 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { PlayOne, PauseOne } from '@icon-park/vue-next'
|
||||
import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { PlayOne, PauseOne } from "@icon-park/vue-next";
|
||||
import { ITalkRecordExtraAudio, ITalkRecord } from "@/types/chat";
|
||||
|
||||
defineProps<{
|
||||
extra: ITalkRecordExtraAudio
|
||||
data: ITalkRecord
|
||||
maxWidth?: Boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
extra: ITalkRecordExtraAudio;
|
||||
data: ITalkRecord;
|
||||
maxWidth?: Boolean;
|
||||
}>();
|
||||
|
||||
const audioRef = ref()
|
||||
const audioRef = ref();
|
||||
const audioContext = ref<any>(null);
|
||||
|
||||
const durationDesc = ref('-')
|
||||
const durationDesc = ref("-");
|
||||
|
||||
const state = reactive({
|
||||
isAudioPlay: false,
|
||||
progress: 0,
|
||||
duration: 0,
|
||||
currentTime: 0,
|
||||
loading: true
|
||||
})
|
||||
loading: true,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 使用uni-app的方式创建内部音频上下文
|
||||
audioContext.value = uni.createInnerAudioContext();
|
||||
audioContext.value.src = props.extra.url;
|
||||
|
||||
audioContext.value.onCanplay(() => {
|
||||
state.duration = audioContext.value.duration;
|
||||
durationDesc.value = formatTime(parseInt(audioContext.value.duration));
|
||||
state.loading = false;
|
||||
});
|
||||
|
||||
audioContext.value.onTimeUpdate(() => {
|
||||
if (audioContext.value.duration == 0) {
|
||||
state.progress = 0;
|
||||
} else {
|
||||
state.currentTime = audioContext.value.currentTime;
|
||||
state.progress =
|
||||
(audioContext.value.currentTime / audioContext.value.duration) * 100;
|
||||
}
|
||||
});
|
||||
|
||||
audioContext.value.onEnded(() => {
|
||||
state.isAudioPlay = false;
|
||||
state.progress = 0;
|
||||
});
|
||||
|
||||
audioContext.value.onError((e) => {
|
||||
console.log("音频播放异常===>", e);
|
||||
});
|
||||
});
|
||||
|
||||
const onPlay = () => {
|
||||
if (state.isAudioPlay) {
|
||||
audioRef.value.pause()
|
||||
audioContext.value.pause();
|
||||
} else {
|
||||
audioRef.value.play()
|
||||
audioContext.value.play();
|
||||
}
|
||||
|
||||
state.isAudioPlay = !state.isAudioPlay
|
||||
}
|
||||
state.isAudioPlay = !state.isAudioPlay;
|
||||
};
|
||||
|
||||
const onPlayEnd = () => {
|
||||
state.isAudioPlay = false
|
||||
state.progress = 0
|
||||
}
|
||||
|
||||
const onCanplay = () => {
|
||||
state.duration = audioRef.value.duration
|
||||
durationDesc.value = formatTime(parseInt(audioRef.value.duration))
|
||||
state.loading = false
|
||||
}
|
||||
|
||||
const onError = (e: any) => {
|
||||
console.log('音频播放异常===>', e)
|
||||
}
|
||||
|
||||
const onTimeUpdate = () => {
|
||||
let audio = audioRef.value
|
||||
if (audio.duration == 0) {
|
||||
state.progress = 0
|
||||
} else {
|
||||
state.currentTime = audio.currentTime
|
||||
state.progress = (audio.currentTime / audio.duration) * 100
|
||||
}
|
||||
}
|
||||
state.isAudioPlay = false;
|
||||
state.progress = 0;
|
||||
};
|
||||
|
||||
const formatTime = (value: number = 0) => {
|
||||
if (value == 0) {
|
||||
return '-'
|
||||
return "-";
|
||||
}
|
||||
|
||||
const minutes = Math.floor(value / 60)
|
||||
let seconds = value
|
||||
const minutes = Math.floor(value / 60);
|
||||
let seconds = value;
|
||||
if (minutes > 0) {
|
||||
seconds = Math.floor(value - minutes * 60)
|
||||
seconds = Math.floor(value - minutes * 60);
|
||||
}
|
||||
|
||||
return `${minutes}'${seconds}"`
|
||||
}
|
||||
return `${minutes}'${seconds}"`;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="im-message-audio">
|
||||
<audio
|
||||
ref="audioRef"
|
||||
preload="auto"
|
||||
type="audio/mp3,audio/wav"
|
||||
:src="extra.url"
|
||||
@timeupdate="onTimeUpdate"
|
||||
@ended="onPlayEnd"
|
||||
@canplay="onCanplay"
|
||||
@error="onError"
|
||||
/>
|
||||
|
||||
<div class="play">
|
||||
<div class="btn pointer" @click.stop="onPlay">
|
||||
<n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" />
|
||||
<n-icon
|
||||
:size="18"
|
||||
:component="state.isAudioPlay ? PauseOne : PlayOne"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc">
|
||||
@ -241,7 +245,7 @@ const formatTime = (value: number = 0) => {
|
||||
}
|
||||
}
|
||||
|
||||
html[theme-mode='dark'] {
|
||||
html[theme-mode="dark"] {
|
||||
.im-message-audio {
|
||||
--audio-bg-color: #2c2c32;
|
||||
--audio-btn-bg-color: rgb(78, 75, 75);
|
||||
|
@ -1,33 +1,32 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { NCode } from 'naive-ui'
|
||||
import { Copy, Stretching } from '@icon-park/vue-next'
|
||||
import { clipboard } from '@/utils/common'
|
||||
import { useUtil } from '@/hooks'
|
||||
import { ITalkRecordExtraCode, ITalkRecord } from '@/types/chat'
|
||||
import { ref } from "vue";
|
||||
import { NCode, useMessage } from "naive-ui";
|
||||
import { Copy, Stretching } from "@icon-park/vue-next";
|
||||
import { clipboard } from "@/utils/common";
|
||||
import { ITalkRecordExtraCode, ITalkRecord } from "@/types/chat";
|
||||
|
||||
const props = defineProps<{
|
||||
extra: ITalkRecordExtraCode
|
||||
data: ITalkRecord
|
||||
maxWidth?: Boolean
|
||||
}>()
|
||||
extra: ITalkRecordExtraCode;
|
||||
data: ITalkRecord;
|
||||
maxWidth?: Boolean;
|
||||
}>();
|
||||
|
||||
const { useMessage } = useUtil()
|
||||
const lineMumber = props.extra.code.trim().split('\n').length
|
||||
const full = ref(false)
|
||||
const message = useMessage();
|
||||
const lineMumber = props.extra.code.trim().split("\n").length;
|
||||
const full = ref(false);
|
||||
|
||||
const onClipboard = () => {
|
||||
clipboard(props.extra.code, () => {
|
||||
useMessage.success('复制成功')
|
||||
})
|
||||
}
|
||||
message.success("复制成功");
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section
|
||||
class="im-message-code el-container is-vertical"
|
||||
:class="{
|
||||
maxwidth: maxWidth,
|
||||
full: full
|
||||
full: full,
|
||||
}"
|
||||
>
|
||||
<header class="el-header tools">
|
||||
@ -37,9 +36,16 @@ const onClipboard = () => {
|
||||
<n-icon class="icon" :component="Copy" @click="onClipboard" />
|
||||
</p>
|
||||
</header>
|
||||
<main class="el-main me-scrollbar me-scrollbar-thumb" :lineMumber="lineMumber">
|
||||
<main
|
||||
class="el-main me-scrollbar me-scrollbar-thumb"
|
||||
:lineMumber="lineMumber"
|
||||
>
|
||||
<n-code :language="extra.lang" :code="extra.code" show-line-numbers />
|
||||
<div class="el-footer mask pointer" v-show="lineMumber > 20" @click="full = !full">
|
||||
<div
|
||||
class="el-footer mask pointer"
|
||||
v-show="lineMumber > 20"
|
||||
@click="full = !full"
|
||||
>
|
||||
查看更多
|
||||
</div>
|
||||
</main>
|
||||
@ -110,17 +116,25 @@ const onClipboard = () => {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
color: var(--im-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
html[theme-mode='dark'] {
|
||||
html[theme-mode="dark"] {
|
||||
.im-message-code {
|
||||
background: var(--im-message-bg-color);
|
||||
|
||||
.mask {
|
||||
background: linear-gradient(to bottom, transparent 0%, var(--im-bg-color) 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
var(--im-bg-color) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
@ -33,6 +33,10 @@ defineProps({
|
||||
"{{ nickname }}" 撤回了一条消息 |
|
||||
{{ formatTime(datetime) }}
|
||||
</span>
|
||||
|
||||
<!-- <span v-if="login_uid == user_idA"> 你撤回B了一条消息 | {{ formatTime(datetime) }} </span>
|
||||
<span v-else-if="login_uid == user_idB"> A撤回你了一条消息 | {{ formatTime(datetime) }} </span>
|
||||
<span v-else> A撤回B了一条消息 | {{ formatTime(datetime) }} </span> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -30,6 +30,7 @@ class Connect {
|
||||
},
|
||||
// Websocket 连接成功回调方法
|
||||
onOpen: () => {
|
||||
console.log("socket已连接")
|
||||
// 更新 WebSocket 连接状态
|
||||
useUserStore().updateSocketStatus(true)
|
||||
// online.value = true;
|
||||
@ -37,6 +38,7 @@ class Connect {
|
||||
},
|
||||
// Websocket 断开连接回调方法
|
||||
onClose: () => {
|
||||
console.log("socket已断开")
|
||||
// 更新 WebSocket 连接状态
|
||||
useUserStore().updateSocketStatus(false)
|
||||
// online.value = false
|
||||
|
@ -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
|
||||
]
|
||||
|
@ -7,25 +7,29 @@ import lodash from 'lodash'
|
||||
|
||||
export const useTalkRecord = (uid) => {
|
||||
const dialogueStore = useDialogueStore()
|
||||
const { getDialogueList,addDialogueRecord,zpagingComplete } = useDialogueListStore()
|
||||
const {
|
||||
getDialogueList,
|
||||
addDialogueRecord,
|
||||
zpagingComplete,
|
||||
} = useDialogueListStore()
|
||||
const records = computed(() => {
|
||||
const dialogueList = getDialogueList(dialogueStore.index_name)
|
||||
if(dialogueList){
|
||||
if (dialogueList) {
|
||||
return lodash.cloneDeep(dialogueList.records).reverse()
|
||||
}
|
||||
return lodash.cloneDeep(dialogueStore.records)?.reverse()
|
||||
} )
|
||||
})
|
||||
|
||||
const location = reactive({
|
||||
msgid: '',
|
||||
num: 0
|
||||
num: 0,
|
||||
})
|
||||
|
||||
const loadConfig = reactive({
|
||||
receiver_id: 0,
|
||||
talk_type: 0,
|
||||
status: 0,
|
||||
cursor: 0
|
||||
cursor: 0,
|
||||
})
|
||||
|
||||
const onJumpMessage = (msgid) => {
|
||||
@ -49,7 +53,7 @@ export const useTalkRecord = (uid) => {
|
||||
|
||||
return el?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
|
||||
@ -57,7 +61,7 @@ export const useTalkRecord = (uid) => {
|
||||
location.num = 0
|
||||
|
||||
element?.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
behavior: 'smooth',
|
||||
})
|
||||
|
||||
addClass(element, 'border')
|
||||
@ -70,7 +74,7 @@ export const useTalkRecord = (uid) => {
|
||||
// 加载数据列表
|
||||
const load = async (params) => {
|
||||
const request = {
|
||||
limit:30,
|
||||
limit: 30,
|
||||
...params,
|
||||
talk_type: params.talk_type,
|
||||
receiver_id: params.receiver_id,
|
||||
@ -81,9 +85,9 @@ export const useTalkRecord = (uid) => {
|
||||
|
||||
let scrollHeight = 0
|
||||
const el = document.getElementById('imChatPanel')
|
||||
// if (el) {
|
||||
// scrollHeight = el.scrollHeight
|
||||
// }
|
||||
if (el) {
|
||||
scrollHeight = el.scrollHeight
|
||||
}
|
||||
const { data, code } = await ServeTalkRecords(request)
|
||||
if (code != 200) {
|
||||
return (loadConfig.status = 1)
|
||||
@ -104,10 +108,14 @@ export const useTalkRecord = (uid) => {
|
||||
|
||||
const reverseItems = lodash.cloneDeep(items).reverse()
|
||||
dialogueStore.unshiftDialogueRecord(reverseItems)
|
||||
addDialogueRecord(params.direction=='down'?reverseItems:items,params.direction=='down'?'add':'unshift')
|
||||
zpagingComplete(dialogueStore.index_name)
|
||||
addDialogueRecord(
|
||||
params.direction == 'down' ? reverseItems : items,
|
||||
params.direction == 'down' ? 'add' : 'unshift',
|
||||
)
|
||||
zpagingComplete(dialogueStore.index_name, reverseItems)
|
||||
const dialogueList = getDialogueList(dialogueStore.index_name)
|
||||
loadConfig.status = dialogueList.records?.[0]?.sequence > 1 ? 1 : 2
|
||||
loadConfig.status =
|
||||
dialogueList.records?.[0]?.sequence > 1 && data?.items?.length > 0 ? 1 : 2
|
||||
// loadConfig.cursor = data.cursor
|
||||
|
||||
nextTick(() => {
|
||||
@ -133,17 +141,19 @@ export const useTalkRecord = (uid) => {
|
||||
|
||||
const onRefreshLoad = () => {
|
||||
let dialogueList = getDialogueList(dialogueStore.index_name)
|
||||
if (dialogueList.records[0].sequence === 1 ) {
|
||||
if (dialogueList.records[0].sequence === 1) {
|
||||
return false
|
||||
}
|
||||
if (loadConfig.status == 1) {
|
||||
let filterList = dialogueList.records.filter(item=>item.sequence !== -1)
|
||||
let filterList = dialogueList.records.filter(
|
||||
(item) => item.sequence !== -1,
|
||||
)
|
||||
loadConfig.cursor = filterList[0].sequence
|
||||
load({
|
||||
receiver_id: loadConfig.receiver_id,
|
||||
talk_type: loadConfig.talk_type,
|
||||
direction:'up',
|
||||
no_limit:0,
|
||||
direction: 'up',
|
||||
no_limit: 0,
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -152,12 +162,14 @@ export const useTalkRecord = (uid) => {
|
||||
let dialogueList = getDialogueList(params.index_name)
|
||||
if (!dialogueList) {
|
||||
loadConfig.cursor = 0
|
||||
}else{
|
||||
let filterList = dialogueList.records.filter(item=>item.sequence !== -1)
|
||||
if(params.direction=='up'){
|
||||
} else {
|
||||
let filterList = dialogueList.records.filter(
|
||||
(item) => item.sequence !== -1,
|
||||
)
|
||||
if (params.direction == 'up') {
|
||||
loadConfig.cursor = filterList?.[0]?.sequence
|
||||
}else{
|
||||
loadConfig.cursor = filterList?.[filterList.length-1]?.sequence
|
||||
} else {
|
||||
loadConfig.cursor = filterList?.[filterList.length - 1]?.sequence
|
||||
}
|
||||
}
|
||||
loadConfig.receiver_id = params.receiver_id
|
||||
|
@ -16,7 +16,7 @@ import pageAnimation from '@/components/page-animation/index.vue'
|
||||
import * as plugins from './plugins'
|
||||
const { showMessage } = messagePopup()
|
||||
dayjs.locale('zh-cn')
|
||||
if (import.meta.env.VITE_SHOW_CONSOLE) {
|
||||
if (import.meta.env.VITE_SHOW_CONSOLE === 'true') {
|
||||
new VConsole()
|
||||
}
|
||||
export function createApp() {
|
||||
|
@ -4,12 +4,14 @@
|
||||
<div class="item-main-label">
|
||||
<span class="text-[32rpx] font-regular">{{ props?.item?.label }}</span>
|
||||
</div>
|
||||
<div class="item-main-value" >
|
||||
<span class="text-[32rpx] font-regular" v-if="props?.item?.value && props?.item?.value.length < 29">
|
||||
<div class="item-main-value" @click="toManagePage(props?.item)">
|
||||
<span
|
||||
class="text-[32rpx] font-regular"
|
||||
v-if="props?.item?.value && props?.item?.value.length < 29"
|
||||
>
|
||||
{{ props?.item?.value }}
|
||||
</span>
|
||||
<img
|
||||
@click="toManagePage(props?.item)"
|
||||
v-if="
|
||||
props?.item?.hasPointer &&
|
||||
(props?.isManager ||
|
||||
@ -31,7 +33,10 @@
|
||||
></tm-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-sub" v-if="props?.item?.value && props?.item?.value.length > 28">
|
||||
<div
|
||||
class="item-sub"
|
||||
v-if="props?.item?.value && props?.item?.value.length > 28"
|
||||
>
|
||||
<span class="text-[32rpx] font-regular">{{ props?.item?.value }}</span>
|
||||
</div>
|
||||
<div class="item-sub cab1" v-if="props?.item?.subValue">
|
||||
@ -65,7 +70,14 @@ const props = defineProps({
|
||||
})
|
||||
const emits = defineEmits(['toManagePage', 'changeSwitch'])
|
||||
const toManagePage = (item) => {
|
||||
emits('toManagePage', item.label)
|
||||
if (
|
||||
props?.item?.hasPointer &&
|
||||
(props?.isManager ||
|
||||
(!props?.isManager &&
|
||||
props?.item?.label !== t('chat.settings.groupName')))
|
||||
) {
|
||||
emits('toManagePage', item.label)
|
||||
}
|
||||
}
|
||||
const modelValue = computed(() => {
|
||||
let switchStatus = false
|
||||
@ -115,6 +127,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;
|
||||
@ -135,7 +148,7 @@ const changeSwitch = (e, item) => {
|
||||
color: #747474;
|
||||
}
|
||||
}
|
||||
.cab1{
|
||||
.cab1 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
|
@ -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:
|
||||
@ -93,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-records-search chat-settings-card">
|
||||
<customInput></customInput>
|
||||
<customInput :disabled="true"></customInput>
|
||||
<div class="record-search-types">
|
||||
<div
|
||||
class="record-search-types-each"
|
||||
@ -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>
|
||||
|
@ -2,19 +2,17 @@
|
||||
<div class="dialog-page">
|
||||
<ZPaging
|
||||
use-chat-record-mode
|
||||
:refresher-enabled="false"
|
||||
use-virtual-list
|
||||
cell-height-mode="dynamic"
|
||||
:refresher-enabled="true"
|
||||
:show-scrollbar="false"
|
||||
:loading-more-enabled="false"
|
||||
:loading-more-enabled="true"
|
||||
: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"
|
||||
@scrolltolower="onScrollToLower"
|
||||
>
|
||||
<template #top>
|
||||
<customNavbar :title="talkParams.username">
|
||||
@ -39,13 +37,13 @@
|
||||
<!-- <template #top>
|
||||
<div class="load-toolbar pointer">
|
||||
<span v-if="loadConfig.status == 0"> 正在加载数据中 ... </span>
|
||||
<span v-else-if="loadConfig.status == 1" @click="onRefreshLoad"> 查看更多消息 ... </span>
|
||||
<span v-else-if="loadConfig.status == 1" @click="onScrollToLower"> 查看更多消息 ... </span>
|
||||
<span v-else class="no-more"> 没有更多消息了 </span>
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<!-- 数据加载状态栏 -->
|
||||
<div class="dialog-list">
|
||||
<div class="dialog-list" @touchstart="handleHidePanel">
|
||||
<div
|
||||
class="message-item"
|
||||
v-for="item in virtualList"
|
||||
@ -170,17 +168,26 @@
|
||||
</div>
|
||||
<div class="load-toolbar pointer" style="transform: scaleY(-1);">
|
||||
<span v-if="loadConfig.status == 0">正在加载数据中 ...</span>
|
||||
<span v-else-if="loadConfig.status == 1" @click="onRefreshLoad">
|
||||
<span v-else-if="loadConfig.status == 1" @click="onScrollToLower">
|
||||
查看更多消息 ...
|
||||
</span>
|
||||
<span v-else class="no-more">没有更多消息了</span>
|
||||
<span
|
||||
v-else-if="
|
||||
loadConfig.status != 0 &&
|
||||
loadConfig.status != 1 &&
|
||||
state.localPageLoadDone
|
||||
"
|
||||
class="no-more"
|
||||
>
|
||||
没有更多消息了
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #bottom>
|
||||
<div class="footBox">
|
||||
<div v-if="!dialogueStore.isOpenMultiSelect">
|
||||
<div
|
||||
class="pt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-center justify-between"
|
||||
class="pt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-start justify-between"
|
||||
>
|
||||
<div class="flex-1 quillBox">
|
||||
<QuillEditor
|
||||
@ -188,37 +195,69 @@
|
||||
id="editor"
|
||||
:options="editorOption"
|
||||
@editorChange="onEditorChange"
|
||||
style="height: 100%; border: none;"
|
||||
style="width: 100%; flex: 1; height: 100%; border: none;"
|
||||
@click="onEditorClick"
|
||||
/>
|
||||
<!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]"
|
||||
placeholder=""></tm-input> -->
|
||||
<div class="quote-area" v-if="state?.quoteInfo">
|
||||
<span
|
||||
v-if="state?.quoteInfo?.msg_type === 1"
|
||||
class="text-[28rpx] text-[#999]"
|
||||
>
|
||||
{{
|
||||
state?.quoteInfo?.nickname +
|
||||
':' +
|
||||
state?.quoteInfo?.extra?.content
|
||||
}}
|
||||
</span>
|
||||
<span
|
||||
v-if="state?.quoteInfo?.msg_type === 3"
|
||||
class="text-[28rpx] text-[#999]"
|
||||
>
|
||||
{{
|
||||
state?.quoteInfo?.nickname +
|
||||
':' +
|
||||
'[' +
|
||||
$t('msg.type') +
|
||||
']'
|
||||
}}
|
||||
</span>
|
||||
<img
|
||||
@click="clearQuoteInfo"
|
||||
style="width: 30rpx; height: 30rpx;"
|
||||
src="/src/static/image/login/check-circle-filled@3x.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end h-[72rpx]">
|
||||
<tm-image
|
||||
:margin="[10, 0]"
|
||||
@click="handleEmojiPanel"
|
||||
:width="52"
|
||||
:height="52"
|
||||
:round="12"
|
||||
:src="state.isOpenEmojiPanel ? keyboard : smile"
|
||||
></tm-image>
|
||||
<tm-image
|
||||
@click="handleFilePanel"
|
||||
:margin="[10, 0]"
|
||||
:width="52"
|
||||
:height="52"
|
||||
:round="12"
|
||||
:src="addCircleGray"
|
||||
></tm-image>
|
||||
<tm-button
|
||||
@click="onSendMessageClick"
|
||||
:margin="[0, 0]"
|
||||
:padding="[0, 30]"
|
||||
color="#46299D"
|
||||
:fontSize="28"
|
||||
size="mini"
|
||||
:shadow="0"
|
||||
label="发送"
|
||||
></tm-button>
|
||||
</div>
|
||||
<tm-image
|
||||
:margin="[10, 0]"
|
||||
@click="handleEmojiPanel"
|
||||
:width="52"
|
||||
:height="52"
|
||||
:round="12"
|
||||
:src="state.isOpenEmojiPanel ? keyboard : smile"
|
||||
></tm-image>
|
||||
<tm-image
|
||||
@click="handleFilePanel"
|
||||
:margin="[10, 0]"
|
||||
:width="52"
|
||||
:height="52"
|
||||
:round="12"
|
||||
:src="addCircleGray"
|
||||
></tm-image>
|
||||
<tm-button
|
||||
@click="onSendMessageClick"
|
||||
:margin="[0, 0]"
|
||||
:padding="[0, 30]"
|
||||
color="#46299D"
|
||||
:fontSize="28"
|
||||
size="mini"
|
||||
:shadow="0"
|
||||
label="发送"
|
||||
></tm-button>
|
||||
</div>
|
||||
<div v-if="state.isOpenEmojiPanel" class="mt-[50rpx]">
|
||||
<emojiPanel @on-select="onEmoticonEvent" />
|
||||
@ -392,11 +431,13 @@ const state = ref({
|
||||
showWin: false,
|
||||
onfocusItem: null,
|
||||
sessionId: '',
|
||||
localPageLoadDone: true, //分页加载缓存中的聊天记录是否完毕
|
||||
quoteInfo: null, //引用信息
|
||||
})
|
||||
|
||||
uniOnload((options) => {
|
||||
if (options.sessionId) {
|
||||
state.sessionId = options.sessionId
|
||||
state.value.sessionId = options.sessionId
|
||||
}
|
||||
})
|
||||
|
||||
@ -409,7 +450,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 +473,9 @@ const onSendMessage = (data = {}) => {
|
||||
ServePublishMessage(message)
|
||||
.then(({ code, message }) => {
|
||||
if (code == 200) {
|
||||
// callBack(true)
|
||||
if (callBack) {
|
||||
callBack(true)
|
||||
}
|
||||
} else {
|
||||
message.warning(message)
|
||||
}
|
||||
@ -466,7 +520,7 @@ const onSendTextEvent = lodash.throttle((value) => {
|
||||
mentions: data.mentionUids,
|
||||
}
|
||||
|
||||
onSendMessage(message)
|
||||
onSendMessage(message, callBack)
|
||||
}, 1000)
|
||||
|
||||
// 编辑器输入事件
|
||||
@ -717,6 +771,12 @@ const multipleChoose = (item) => {
|
||||
|
||||
const actionCite = (item) => {
|
||||
console.log('引用')
|
||||
state.value.quoteInfo = item
|
||||
}
|
||||
|
||||
//清除引用信息
|
||||
const clearQuoteInfo = () => {
|
||||
state.value.quoteInfo = null
|
||||
}
|
||||
|
||||
const actionWithdraw = (item) => {
|
||||
@ -804,6 +864,35 @@ watch(
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => virtualList.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue) {
|
||||
const dialogueList = getDialogueList(talkParams.index_name)
|
||||
// console.log(newValue[newValue.length - 1]?.sequence, dialogueList?.records?.[0]?.sequence)
|
||||
if (
|
||||
newValue[newValue.length - 1]?.sequence ===
|
||||
dialogueList.records?.[0]?.sequence
|
||||
) {
|
||||
//相同意味着分页加载缓存中的聊天记录完毕
|
||||
state.value.localPageLoadDone = true
|
||||
} else {
|
||||
state.value.localPageLoadDone = false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
)
|
||||
|
||||
const onScrollToLower = () => {
|
||||
if (state.value.localPageLoadDone) {
|
||||
//本地缓存的聊天记录分页加载完之后,才可以请求接口
|
||||
onRefreshLoad()
|
||||
}
|
||||
}
|
||||
|
||||
const clearMultiSelect = () => {
|
||||
dialogueStore.setMultiSelect(false)
|
||||
virtualList.value.forEach((item) => {
|
||||
@ -823,7 +912,7 @@ const initData = async () => {
|
||||
no_limit: dialogueList ? 1 : 0,
|
||||
}
|
||||
await onLoad({ ...objT })
|
||||
zpagingRef.value?.complete(records.value)
|
||||
zpagingRef.value?.setLocalPaging(records.value)
|
||||
}
|
||||
|
||||
//点击跳转到聊天设置页面
|
||||
@ -833,7 +922,7 @@ const toChatSettingsPage = () => {
|
||||
'/pages/chatSettings/index?groupId=' +
|
||||
talkParams?.receiver_id +
|
||||
'&sessionId=' +
|
||||
state.sessionId,
|
||||
state.value.sessionId,
|
||||
})
|
||||
}
|
||||
|
||||
@ -887,6 +976,27 @@ onUnmounted(() => {
|
||||
.footBox {
|
||||
min-height: 162rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.quote-area {
|
||||
margin: 4rpx 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
span {
|
||||
display: -webkit-inline-box;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
margin: 0 0 0 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-toolbar {
|
||||
@ -1033,6 +1143,7 @@ onUnmounted(() => {
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1089,6 +1200,10 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.quillBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
:deep(.ql-clipboard) {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
|
@ -47,7 +47,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
<div style="flex-shrink: 0;"
|
||||
class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx] time_right"
|
||||
>
|
||||
{{ beautifyTime(props.data.updated_at) }}
|
||||
|
@ -1,116 +1,110 @@
|
||||
<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">
|
||||
<tm-input
|
||||
placeholder="请输入…"
|
||||
color="#F9F9FD"
|
||||
:round="1"
|
||||
prefix="tmicon-search"
|
||||
prefixColor="#46299D"
|
||||
placeholderStyle="color:#BABABA"
|
||||
class="input_search"
|
||||
></tm-input>
|
||||
<customInput :disabled="true"></customInput>
|
||||
</div>
|
||||
<div class="contentRoot">
|
||||
<chatItem
|
||||
@ -121,88 +115,95 @@
|
||||
/>
|
||||
</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 customInput from '@/components/custom-input/custom-input.vue'
|
||||
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 +215,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>
|
||||
|
@ -446,7 +446,11 @@ const inputSearchText = (e) => {
|
||||
}
|
||||
|
||||
//点击取消搜索
|
||||
const cancelSearch = () => {}
|
||||
const cancelSearch = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
|
||||
//查询数据
|
||||
const queryAllSearch = () => {
|
||||
|
@ -99,9 +99,8 @@ export const useDialogueListStore = createGlobalState(() => {
|
||||
zpagingRef.value = params
|
||||
}
|
||||
|
||||
const zpagingComplete = (index_name) => {
|
||||
const item = getDialogueList(index_name)
|
||||
zpagingRef.value?.complete(lodash.cloneDeep(item.records).reverse())
|
||||
const zpagingComplete = (index_name, newRecords) => {
|
||||
zpagingRef.value?.complete(lodash.cloneDeep(newRecords).reverse())
|
||||
}
|
||||
|
||||
const addChatRecord = (indexName, item) => {
|
||||
|
@ -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>
|
||||
|
@ -149,5 +149,6 @@
|
||||
"button.multiple.choice": "多选",
|
||||
"button.text.close": "关闭",
|
||||
"choose.deps.all": "全部",
|
||||
"choose.deps.current": "当前"
|
||||
"choose.deps.current": "当前",
|
||||
"msg.type": "图片"
|
||||
}
|
||||
|
@ -1,43 +1,60 @@
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { defineConfig } from 'vite'
|
||||
import Uni from '@dcloudio/vite-plugin-uni'
|
||||
import UniKuRoot from '@uni-ku/root'
|
||||
import { resolve } from "path"
|
||||
export default async () => {
|
||||
const UnoCSS = (await import('unocss/vite')).default
|
||||
import { resolve } from 'node:path'
|
||||
import UnoCSS from 'unocss/vite'
|
||||
|
||||
return defineConfig({
|
||||
envDir: './env', // 自定义env目录
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: "@",
|
||||
replacement: resolve(__dirname, 'src')
|
||||
}
|
||||
]
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0', // 监听所有网络接口
|
||||
port: 2367,
|
||||
// 选项写法
|
||||
proxy: {
|
||||
'/pag': {
|
||||
target: 'https://cdn.tmui.design',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '/api')
|
||||
},
|
||||
export default defineConfig({
|
||||
envDir: './env', // 自定义env目录
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: "@",
|
||||
replacement: resolve(process.cwd(), 'src')
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Uni(),
|
||||
UniKuRoot(),
|
||||
UnoCSS()
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/static/css/color.scss";`,
|
||||
},
|
||||
]
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0', // 监听所有网络接口
|
||||
port: 2367,
|
||||
// 选项写法
|
||||
proxy: {
|
||||
'/pag': {
|
||||
target: 'https://cdn.tmui.design',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '/api')
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Uni(),
|
||||
UniKuRoot(),
|
||||
UnoCSS(),
|
||||
AutoImport({
|
||||
imports: [
|
||||
'vue',
|
||||
{
|
||||
'naive-ui': [
|
||||
'useDialog',
|
||||
'useMessage',
|
||||
'useNotification',
|
||||
'useLoadingBar'
|
||||
]
|
||||
}
|
||||
]
|
||||
}),
|
||||
Components({
|
||||
resolvers: [NaiveUiResolver()]
|
||||
})
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/static/css/color.scss";`,
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user