chat-app/src/pages/index/index.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"
		>
			<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>
      <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>
          </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 { 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 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(() => {
  // 页面显示时重新加载数据
	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) {
					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;
  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>