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

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="false" hideHome title="" :leftWidth="420">
        <template v-slot:left>
          <div class="flex items-center ml-[48rpx]">
            <tm-image
              :width="72"
              :height="72"
              :round="12"
              :src="userStore.avatar"
            ></tm-image>
            <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">
              <tm-image
                :width="41"
                :height="41"
                :round="12"
                :src="addCircle"
              ></tm-image>
              <template v-slot:label>
                <div class="w-full h-[208rpx] pt-[22rpx] pb-[22rpx] pl-[34rpx] pr-[32rpx]" >
                  <div @click="creatGroupChat" class="flex items-center mb-[30rpx]" >
                    <div class="mr-[26rpx] flex items-center">
                      <tm-image
                        :width="40"
                        :height="40"
                        :src="cahtPopover"
                      ></tm-image>
                    </div>
                    <div class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold" >发起群聊</div>
                  </div>
                  <div class="divider" ></div>
                  <div class="flex items-center mt-[28rpx]" >
                    <div class="mr-[26rpx] flex items-center">
                      <tm-image
                        :width="40"
                        :height="40"
                        :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"
        ></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 } 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 { 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",
  });
};

watch(
  () => talkStore,
  (newValue, oldValue) => {
    console.log(talkStore);
  },
  { deep: true, immediate: true }
);

onShow(() => {
  talkStore.loadTalkList();
});
</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;
}
.root {
  flex: 1;
  padding: 20rpx 0;
}
.searchRoot {
  background-color: #fff;
  padding: 22rpx 18rpx;
}
.contentRoot {
  margin-top: 20rpx;
  background-color: #fff;
}
.divider{
  height: 1rpx;
  background-color: #7C7C7C;
  opacity: 0.6;
}
.popoverBox {
  :deep(.popover-bcc){
    transform:translateX(20rpx) translateY(40rpx);
  }
}
</style>