From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/components/user/UserSearch.vue | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/src/components/user/UserSearch.vue b/src/components/user/UserSearch.vue
new file mode 100644
index 0000000..90a1d27
--- /dev/null
+++ b/src/components/user/UserSearch.vue
@@ -0,0 +1,119 @@
+<template>
+ <div>
+ <div class="lum-dialog-mask" v-show="isShow">
+ <el-container class="lum-dialog-box">
+ <el-header class="header" height="50px">
+ <p>添加好友</p>
+ <p class="tools">
+ <i class="el-icon-close" @click="close" />
+ </p>
+ </el-header>
+ <el-main class="main">
+ <el-input
+ v-model="mobile"
+ id="serach-mobile"
+ class="input"
+ prefix-icon="el-icon-search"
+ placeholder="请输入对方手机号(精确查找)"
+ clearable
+ @keyup.enter.native="onSubmit"
+ @input="error = false"
+ />
+ <p v-show="error" class="error">
+ 无法找到该用户，请检查搜索内容并重试
+ </p>
+ <el-button
+ type="primary"
+ size="small"
+ :loading="loading"
+ @click="onSubmit"
+ >立即查找
+ </el-button>
+ </el-main>
+ </el-container>
+ </div>
+ </div>
+</template>
+<script>
+import { ServeSearchContact } from '@/api/contacts'
+
+export default {
+ name: 'UserSearch',
+ data() {
+ return {
+ loading: false,
+ isShow: false,
+ mobile: '',
+ error: false,
+ }
+ },
+ methods: {
+ // 显示窗口
+ open() {
+ this.mobile = ''
+ this.isShow = true
+ this.$nextTick(() => {
+ document.getElementById('serach-mobile').focus()
+ })
+ },
+
+ // 关闭窗口
+ close() {
+ this.isShow = false
+ },
+
+ onSubmit() {
+ let { mobile } = this
+
+ if (mobile == '') return false
+
+ this.loading = true
+ ServeSearchContact({
+ mobile,
+ })
+ .then(res => {
+ if (res.code == 200) {
+ this.$user(res.data.id)
+ this.close()
+ } else {
+ this.error = true
+ }
+ })
+ .finally(() => {
+ this.loading = false
+ })
+ },
+ },
+}
+</script>
+<style lang="less" scoped>
+.lum-dialog-box {
+ width: 450px;
+ max-width: 450px;
+ height: 250px;
+
+ .main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ .input {
+ width: 85%;
+ }
+
+ .error {
+ width: 85%;
+ color: red;
+ font-size: 12px;
+ height: 50px;
+ line-height: 50px;
+ }
+
+ button {
+ margin-top: 20px;
+ width: 100px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3