147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<template>
|
|
<view class="conversation_container">
|
|
<chat-header ref="chatHeaderRef" />
|
|
<scroll-view
|
|
class="scroll-view"
|
|
scroll-y="true"
|
|
refresher-enabled="true"
|
|
:refresher-triggered="triggered"
|
|
:scroll-top="scrollTop"
|
|
:scroll-with-animation="true"
|
|
@scroll="scroll"
|
|
@refresherrefresh="onRefresh"
|
|
@refresherrestore="onRestore"
|
|
@scrolltolower="scrolltolower"
|
|
>
|
|
<conversation-item
|
|
v-for="item in conversationListWithDeptName"
|
|
:key="item.conversationID"
|
|
:source="item"
|
|
ref="conversationItem"
|
|
/>
|
|
</scroll-view>
|
|
<view class="loading_wrap" v-if="storeProgress > 0 && storeProgress < 100">
|
|
<u-loading-icon
|
|
:vertical="true"
|
|
:text="storeProgress + '%'"
|
|
></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import ChatHeader from "./components/ChatHeader.vue";
|
|
import ConversationItem from "./components/ConversationItem.vue";
|
|
import { getDeptNameByNickName } from "@/api/oa/binding";
|
|
import { withDeptName } from '@/util/withDeptName';
|
|
|
|
export default {
|
|
components: {
|
|
ChatHeader,
|
|
ConversationItem,
|
|
},
|
|
data() {
|
|
return {
|
|
scrollTop: 0,
|
|
old: {
|
|
scrollTop: 0,
|
|
},
|
|
doubleClick: 0,
|
|
triggered: false,
|
|
refreshing: false,
|
|
conversationListWithDeptName: [], // 新增
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["storeConversationList", "storeIsSyncing", "storeProgress"]),
|
|
},
|
|
watch: {
|
|
storeConversationList: {
|
|
handler: 'updateConversationListWithDeptName',
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$nextTick(() => plus.navigator.closeSplashscreen());
|
|
},
|
|
onLoad() {
|
|
this._freshing = false;
|
|
this.triggered = true;
|
|
},
|
|
methods: {
|
|
scroll(e) {
|
|
this.old.scrollTop = e.detail.scrollTop;
|
|
},
|
|
onRefresh() {
|
|
if (this._freshing) return;
|
|
this._freshing = true;
|
|
this.queryList(true);
|
|
},
|
|
onRestore() {
|
|
this.triggered = "restore";
|
|
console.log("onRestore");
|
|
},
|
|
scrolltolower() {
|
|
this.queryList();
|
|
},
|
|
async queryList(isFirstPage = false) {
|
|
await this.$store.dispatch(
|
|
"conversation/getConversationList",
|
|
isFirstPage
|
|
);
|
|
this.triggered = false;
|
|
this._freshing = false;
|
|
},
|
|
closeAllSwipe() {
|
|
this.$refs.swipeWrapperRef.closeAll();
|
|
},
|
|
// 新增：异步获取部门名和颜色
|
|
async updateConversationListWithDeptName() {
|
|
this.conversationListWithDeptName = await withDeptName(this.storeConversationList);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.conversation_container {
|
|
@include colBox(false);
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.conversation_search {
|
|
padding: 0 44rpx 24rpx;
|
|
}
|
|
|
|
.z-paging-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.swipe_wrapper {
|
|
@include colBox(false);
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.scroll-view {
|
|
height: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.loading_wrap {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/deep/.u-swipe-action-item__right__button__wrapper__text {
|
|
-webkit-line-clamp: 2 !important;
|
|
max-width: 32px;
|
|
}
|
|
</style>
|