chat-app/src/pages/index/index.vue

<template>
  <div class="outer-layer">
    <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>
    <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>
</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'

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) {
  return talkStore.talkItems
  // }

  // return talkStore.talkItems.filter((item) => {
  //   let keyword = item.remark || item.name

  //   return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
  // })
})

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()
})

onLoad((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: 100%;
}
.outer-layer {
  overflow-y: auto;
  flex: 1;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  padding: 0 32rpx 20rpx 32rpx;
  display: flex;
  flex-direction: column;
}

::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;
}

.root {
  flex: 1;
  padding: 20rpx 0;
}
.searchRoot {
  background-color: #fff;
  padding: 22rpx 18rpx;
  /* ::v-deep .input_search{

    background: #F9F9FD !important;
  } */
  ::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder{
    // border: 1px solid red !important;
    background: #F9F9FD !important;
  }
}
.contentRoot {
  margin-top: 20rpx;
  background-color: #fff;
}
.divider {
  height: 1rpx;
  background-color: #7c7c7c;
  opacity: 0.6;
}
.popoverBox {
  :deep(.popover-bcc) {
    transform: translateX(16rpx) translateY(48rpx);
  }
}
</style>