update MyContact.vue

src/api/user.js

@@ -10,6 +10,7 @@ const userApi = {
   userFollowerApi: '/api/user/relation/follower',
   userFollowingApi: '/api/user/relation/following',
   userContactApi: '/api/user/contact/list',
+  searchUserApi: '/api/user/search',
   unreadMessageApi: '/api/user/message/unread',
   unreadMessagesApi: '/api/user/message/unread/list',
   setReadMessageApi: '/api/user/message/detail'
@@ -53,6 +54,10 @@ export function getUserContact(pn) {
   return get(userApi.userContactApi + '?pn=' + pn)
 }
 
+export function searchUser(queryForm) {
+  return get(userApi.searchUserApi, queryForm)
+}
+
 export function getUnreadCount() {
   return get(userApi.unreadMessageApi)
 }

src/views/my/MyContact.vue

@@ -2,6 +2,10 @@
   <div>
     <el-row class="movie-list">
       <h2>联系人</h2>
+      <el-button
+        size="mini"
+        @click="onSearchUser"
+      >查找用户</el-button>
     </el-row>
     <el-row class="movie-list">
       <el-col :md="12">
@@ -44,22 +48,77 @@
       </el-col>
     </el-row>
 
-    <el-dialog title="消息内容" :visible.sync="messageDialog" @close="onCloseDialog">
-      <span>{{ this.messageContent }}</span>
+    <el-dialog
+      title="查找用户"
+      :visible.sync="searchUserDialog"
+      @close="onCloseDialog">
+      <div>
+        <el-row style="padding: 5px">
+          <el-select v-model="queryForm.searchType" placeholder="选择查找类型">
+            <el-option label="手机号" value="1" />
+            <el-option label="用户名" value="2" />
+          </el-select>
+          <el-input
+            v-model="queryForm.searchValue"
+            placeholder="查找用户"
+            style="width: 30%; padding-left: 5px"
+            clearable
+            @keyup.enter.native="searchUser"
+          >
+            <el-button slot="append" icon="el-icon-search" @click="searchUser" />
+          </el-input>
+        </el-row>
+        <el-row style="padding: 5px">
+          <el-table
+            :data="searchUserList"
+            :show-header="true"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="avatarUrl"
+              label="头像"
+              width="90"
+            >
+              <template slot-scope="scope">
+                <el-image :src="scope.row.avatarUrl" min-width="30" height="20" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="username"
+              label="名字"
+            />
+            <el-table-column
+              label="操作"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  @click="addUser(scope.row)"
+                >添加</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-row>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getUserContact } from '@/api/user'
+import {getUserContact, searchUser} from '@/api/user'
 
 export default {
   name: 'MyContact',
   data() {
     return {
       dataList: [],
-      messageDialog: false,
-      messageContent: ''
+      searchUserDialog: false,
+      searchUserList: [],
+      queryForm: {
+        searchType: '1',
+        searchValue: null
+      }
     }
   },
   created() {
@@ -82,8 +141,25 @@ export default {
     deleteContact(row) {
       this.$message.info('delete contact ' + row.username)
     },
+    onSearchUser() {
+      this.searchUserDialog = true
+    },
+    searchUser() {
+      searchUser(this.queryForm).then(resp => {
+        if (resp.code === 0) {
+          this.searchUserList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    addUser(row) {
+      this.$message.info('add user')
+    },
     onCloseDialog() {
-      this.messageContent = ''
+      this.searchUserDialog = false
     }
   }
 }