myplayer-vue/src/views/home/search.vue

<template>
  <div class="box">
    <el-row style="height: 50%;">
      <el-col :span="24">
        <h1>搜索好友</h1>
      </el-col>
      <el-col :span="24">
        <el-input v-model="inputValue" style="width: 80%" size="large" placeholder="Please Input" clearable
          :prefix-icon="Search" @keyup.enter="searchFriend" />
        <el-button class="search" size="large" @click="searchFriend">搜索</el-button>
      </el-col>
      <el-col :span="24">
        <el-table :data="friendSearchResult" style="width: 100%;height: 200px;">
          <el-table-column prop="u_avatar" label="" width="100">
            <template #default="scope">
              <!-- 使用 el-avatar 组件显示头像 -->
              <el-avatar :src="friendSearchResult[scope.$index].u_avatar" size="large" />
            </template>
          </el-table-column>
          <el-table-column prop="u_name" label="姓名" width="125"></el-table-column>
          <el-table-column prop="u_id" label="id" width="125"></el-table-column>
          <el-table-column prop="u_introduction" label="个性签名" width="200"></el-table-column>
          <el-table-column>
            <template #default="scope">
              <el-button @click="addFriend(scope.row.u_id)">添加好友</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="height: 50%;">
      <el-col :span="24">
        <h1>搜索playRoom</h1>
      </el-col>
      <el-col :span="24">
        <el-input v-model="inputValue1" style="width: 80%" size="large" placeholder="Please Input" clearable
          :prefix-icon="Search" @keyup.enter="searchPlayRoom" />
        <el-button class="search" size="large" @click="searchPlayRoom">搜索</el-button>
      </el-col>
      <el-col :span="24">
        <el-table :data="roomSearchResult" style="width: 100%;height: 200px;">
          <el-table-column prop="r_avatar" label="" width="100">
            <template #default="scope">
              <!-- 使用 el-avatar 组件显示头像 -->
              <el-avatar :src="roomSearchResult[scope.$index].r_avatar" size="large" />
            </template>
          </el-table-column>
          <el-table-column prop="r_name" label="姓名" width="125"></el-table-column>
          <el-table-column prop="r_id" label="id" width="125"></el-table-column>
          <el-table-column prop="r_introduction" label="个性签名" width="200"></el-table-column>
          <el-table-column>
            <template #default="scope">
              <el-button @click="joinRoom(scope.row.r_id)">加入房间</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>


</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { userInfoStore } from '@/store/store'
import { onlineSocketStore } from '@/store/Online'
import { ElMessage } from 'element-plus'

const socket = onlineSocketStore()
const inputValue = ref('')
const inputValue1 = ref('')
const userinfo = userInfoStore()


const friendSearchResult = ref([])
const roomSearchResult = ref([])

// 定义回车键的处理函数
const searchFriend = () => {
  console.log(inputValue.value);
  axios({
    headers: {
      'Authorization': userinfo.token
    },
    method: 'GET',
    url: '/api/friend/searchuser',
    params: {
      u_name: inputValue.value
    }
  }).then((response) => {
    if (response.data.code === 200) {
      friendSearchResult.value = response.data.data
      console.log(friendSearchResult.value)
    }
  })

};

//搜索playRoom
const searchPlayRoom = () => {
  axios({
    headers: {
      'Content-Type': 'application/json',
      'Authorization': userinfo.token
    },
    method: 'GET',
    url: '/api/room/search',
    params: {
      r_name: inputValue1.value
    }
  }).then((response) => {
    if (response.data.code === 200) {
      roomSearchResult.value = response.data.data
      console.log(roomSearchResult.value)
    }
  })
  inputValue1.value = ''
}


//添加好友逻辑
const addFriend = (u_id) => {
  axios({
    headers: {
      'Authorization': userinfo.token
    },
    method: 'POST',
    url: '/api/inviting/sendinviting',
    data: {
      inviter: userinfo.user.u_id,
      target: u_id
    }
  }).then((response) => {
    if (response.data.code === 200) {
      ElMessage.success('已发送申请，等待对方处理')
      const message = {
        message: false,
        system: false,
        target: u_id,
        sender_name: userinfo.user.u_name
      }
      socket.send(JSON.stringify(message))
    }
    else {
      ElMessage.error('发送失败,请稍后再试 msg:' + response.data.msg)
    }
  })
}

//加入房间申请逻辑
const joinRoom = (r_id) => {
  axios({
    headers: {
      'Authorization': userinfo.token,
    },
    url: '/api/inviting/sendinviting',
    method: 'POST',
    data: {
      inviter: userinfo.user.u_id,
      target: userinfo.user.u_id,
      room: r_id
    }
  }).then((response) => {
    if (response.data.code === 200) {
      ElMessage.success("请求发送成功，请耐心等待审核")
    }
    else if (response.data.code === 500) {
      ElMessage.error("请勿重复发送！")
    }
  })
}

</script>

<style>
.box {
  width: 100%;
}

.search {
  margin-left: 15px;
}
</style>