328 lines
9.0 KiB
Vue
328 lines
9.0 KiB
Vue
<template>
|
||
<div class="outer-layer">
|
||
<ZPaging
|
||
class="paging_container"
|
||
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"
|
||
:loading-more-enabled="false"
|
||
:refresher-end-bounce-enabled="false"
|
||
:auto="true"
|
||
:empty-view-show="isEmptyViewShow"
|
||
@refresherRefresh="onRefresh"
|
||
: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">
|
||
<customInput :disabled="true"></customInput>
|
||
</div>
|
||
<div class="contentRoot">
|
||
<chatItem
|
||
v-for="(item, index) in items"
|
||
:key="item.index_name"
|
||
:index="index"
|
||
:data="item"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ZPaging>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
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 { ServeClearTalkUnreadNum } from '@/api/chat'
|
||
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'
|
||
import { handleSetWebviewStyle } from '@/utils/common'
|
||
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 items = computed(() => {
|
||
// if (searchKeyword.value.length === 0) {
|
||
console.log(talkStore.talkItems)
|
||
|
||
return talkStore.talkItems
|
||
// }
|
||
|
||
// return talkStore.talkItems.filter((item) => {
|
||
// let keyword = item.remark || item.name
|
||
|
||
// 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)
|
||
})
|
||
}
|
||
|
||
// 添加下拉刷新处理函数
|
||
const onRefresh = () => {
|
||
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',
|
||
})
|
||
}
|
||
|
||
const toSearchPage = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/search/index',
|
||
})
|
||
}
|
||
|
||
//点击跳转到通讯录页面
|
||
const toAddressBookPage = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/chooseByDeps/index?chooseMode=3',
|
||
})
|
||
}
|
||
|
||
/* watch(
|
||
() => talkStore,
|
||
(newValue, oldValue) => {
|
||
// console.log(talkStore)
|
||
},
|
||
{ deep: true, immediate: true }
|
||
); */
|
||
|
||
onShow(() => {
|
||
handleSetWebviewStyle(true)
|
||
// 页面显示时重新加载数据
|
||
talkStore
|
||
.loadTalkList()
|
||
.then(() => {
|
||
// 如果paging已经初始化，则刷新列表
|
||
if (paging.value) {
|
||
paging.value.reload()
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.error('页面显示时数据加载失败', error)
|
||
})
|
||
})
|
||
|
||
onLoad((options) => {
|
||
console.log(options)
|
||
|
||
if (options?.openSessionIndexName) {
|
||
if (items?.value?.length > 0) {
|
||
items.value.forEach((openSession) => {
|
||
if (openSession.index_name === options?.openSessionIndexName) {
|
||
setTimeout(() => {
|
||
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}`,
|
||
})
|
||
}, 500)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<style scoped lang="scss">
|
||
uni-page-body,
|
||
page {
|
||
height: 100vh;
|
||
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
||
background-size: cover;
|
||
flex-direction: column;
|
||
}
|
||
.outer-layer {
|
||
height: 100%;
|
||
}
|
||
.paging_container {
|
||
// border: 1px solid red;
|
||
background: #fff;
|
||
margin: 0 32rpx 20rpx 32rpx;
|
||
}
|
||
|
||
::v-deep .index_top_navbar > .statusHeight:first-child {
|
||
height: 70px !important;
|
||
}
|
||
|
||
::v-deep .index_top_navbar .statusHeightTop {
|
||
height: 70px !important;
|
||
}
|
||
|
||
::v-deep .index_top_navbar .statusHeightTop > .noNvueBorder:first-child {
|
||
height: 70px !important;
|
||
}
|
||
|
||
.content {
|
||
// overflow: auto;
|
||
}
|
||
.root {
|
||
flex: 1;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.searchRoot {
|
||
background-color: #fff;
|
||
padding: 22rpx 18rpx;
|
||
border-bottom: 16rpx rgba(249, 249, 253, 1) solid;
|
||
::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder {
|
||
background: #f9f9fd !important;
|
||
}
|
||
}
|
||
|
||
.contentRoot {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
// min-height: calc(100vh - 180px);
|
||
}
|
||
|
||
.divider {
|
||
height: 1rpx;
|
||
background-color: #7c7c7c;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.popoverBox {
|
||
:deep(.popover-bcc) {
|
||
transform: translateX(16rpx) translateY(48rpx);
|
||
}
|
||
}
|
||
</style>
|