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"
      :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 { 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>