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

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="false" hideHome title="" :leftWidth="320" >
        <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]">
            <tm-image :width="41" :height="41" :round="12" :src="addCircle"></tm-image>
          </div>
			</template>
      </tm-navbar>
    </div>
    <div class="root">
      <div class="searchRoot">
        <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 { 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";

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


watch(() => talkStore, (newValue, oldValue) => {
  console.log(talkStore);

},{deep:true,immediate:true})

</script>
<style scoped lang="scss">
.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;
}

</style>