feat: init commit
This commit is contained in:
merlin
186
src/views/home/search.vue
Normal file
186
src/views/home/search.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user