menduner/src/views/recruit/components/message/index.vue

<template>
  <div class="default-width message pa-3" :style="`height: calc(100vh - ${isEnterprise ? '130px' : '50px'});`">
    <div class="message-left">
      <div class="message-left-search d-flex align-center justify-center">
        <!-- {{ connected ? '连接成功': '连接失败' }} -->
        <TextInput v-model="searchInputVal" :item="textItem" @appendInnerClick="handleSearch" @enter="handleSearch"></TextInput>
      </div>
      <div class="message-chat-box mt-5">
        <v-overlay
          :model-value="!connected"
          contained
          class="align-center justify-center"
        >
          <v-progress-circular
            color="primary"
            size="64"
            indeterminate
          ></v-progress-circular>
        </v-overlay>
        <div v-if="conversationList.length">
          <v-list density="compact">
            <v-list-item
              v-for="(val, i) in conversationList"
              :key="i"
              :value="val"
              color="primary"
              :title="val.channel_id"
              :subtitle="val.timestamp"
            >
              <template v-slot:prepend>
                <v-avatar :image="val.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
              </template>
              <template v-slot:append>
                <v-badge
                  v-if="val.unread > 0"
                  color="error"
                  :content="val.unread"
                  inline
                ></v-badge>
              </template>
            </v-list-item>
          </v-list>
          <div class="message-no-more-text mt-3">没有更多了</div>
        </div>
        <div v-else class="left-noData">
          <Empty :elevation="false" message="暂无30天内联系人" width="300" height="150"></Empty>
        </div>
      </div>
    </div>

    <div class="message-right">
      <div v-if="showRightNoData" class="right-noData">
        <Empty :elevation="false" message="与您进行过沟通的 Boss 都会在左侧列表中显示"></Empty>
      </div>
      <Chatting :items="messageItems" :info="info" :uid="uid" @handleSend="handleUpdate"></Chatting>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'personal-message-index'})
import { ref, inject } from 'vue'
import Chatting from './components/chatting.vue'
import { initConnect, send, initKey } from '@/hooks/web/useIM'
import { useRoute } from 'vue-router'
import { getPositionDetails } from '@/api/position'
// import { useUserStore } from '@/store/user'

// const userStore = useUserStore()
const isEnterprise = inject('isEnterprise')
// 实例
const route = useRoute()

// const channel = ref(null)

// const enterpriseId = isEnterprise ? userStore.baseInfo.enterpriseId : route.query.enterprise

const { uid } = await initKey()
const {
  connected,
  conversationList,
  messageItems,
  channel
} = initConnect(route.query.id, route.query.enterprise)




const showRightNoData = ref(false)
const searchInputVal = ref()
const textItem = ref({
  type: 'text',
  value: null,
  width: 336,
  clearable: true,
  hideDetails: true,
  appendInnerIcon: 'mdi-magnify',
  label: '搜索30天内的联系人'
})

const info = ref({})

if (route.query.job) {
  const res = await getPositionDetails({ id: route.query.job })
  info.value = res
}

// 左侧聊天列表
// const chatList = ref([
//   {
//     id: 1,
//     name: '钟女士',
//     avatar: 'https://minio.citupro.com/dev/menduner/tx1.jpg',
//     enterpriseName: '泰康泰康泰康泰康泰康泰康',
//     postName: '人事HR',
//     updateTime: 1715337950000,
//     tip: '你好'
//   },
//   {
//     id: 2,
//     name: '林先生',
//     avatar: 'https://minio.citupro.com/dev/menduner/tx1.jpg',
//     enterpriseName: '众宝联合',
//     postName: '人力资源主管',
//     updateTime: 1715337950000,
//     tip: '你好'
//   }
// ])

const handleUpdate = (val) => {
  send(val.value, channel.value)
}

const handleSearch = () => {
  console.log(searchInputVal.value, 'search')
}
</script>

<style scoped lang="scss">
.message {
  display: flex;
  &-left {
    position: relative;
    height: 100%;;
    width: 360px;
    background-color: #fff;
    border-radius: 8px;
    margin-right: 12px;
    .message-left-search {
      width: 100%;
      height: 60px;
      background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
      border-radius: 8px 8px 0 0;
    }
    .message-chat-box {
      .chat-item {
        position: relative;
        width: 100%;
        height: 78px;
        padding: 14px 12px;
        cursor: pointer;
        &:hover {
          background-color: #f8f8f8;
        }
        .chat-item-time {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
        }
        .title-box {
          max-width: 114px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
        }
      }
    }
    .message-no-more-text {
      color: var(--color-999);
      font-size: 14px;
      text-align: center
    }
    .left-noData {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &-right {
    height: 100%;
    flex: 1;
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    .right-noData {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>