添加联系人页面和接口

src/api/user.js

@@ -7,7 +7,16 @@ const userApi = {
   unfollowUserApi: '/api/user/relation/unfollow',
   checkRelationApi: '/api/user/relation/check',
   userFollowerApi: '/api/user/relation/follower',
-  userFollowingApi: '/api/user/relation/following'
+  userFollowingApi: '/api/user/relation/following',
+  applyContactApi: '/api/user/contact/apply/records',
+  applyContactCountApi: '/api/user/contact/apply/unread-num',
+  acceptApplyContactApi: '/api/user/contact/apply/accept',
+  declineApplyContactApi: '/api/user/contact/apply/decline',
+  getContactApi: '/api/user/contact/list',
+  addContactApi: '/api/user/contact/apply/create',
+  searchContactApi: '/api/user/contact/search',
+  getContactDetailApi: '/api/user/contact/detail',
+  contactReplyApi: '/api/user/contact/reply'
 }
 
 export function getUserInfo(userId) {
@@ -39,3 +48,39 @@ export function getUserFollower(userId) {
 export function getUserFollowing(userId) {
   return get(userApi.userFollowingApi + '/' + userId)
 }
+
+export function getApplyRecords(pageNumber) {
+  return get(userApi.applyContactApi + '?pageNumber=' + pageNumber)
+}
+
+export function getUserContact(userId) {
+  return get(userApi.getContactApi, userId)
+}
+
+export function getApplyContactCount() {
+  return get(userApi.applyContactCountApi)
+}
+
+export function searchUserContact(userId) {
+  return get(userApi.searchContactApi, userId)
+}
+
+export function addUserContact(addForm) {
+  return post(userApi.addContactApi, addForm)
+}
+
+export function approveUserContact(payload) {
+  return post(userApi.acceptApplyContactApi, payload)
+}
+
+export function declineUserContact(payload) {
+  return post(userApi.declineApplyContactApi, payload)
+}
+
+export function getContactDetail(userId) {
+  return get(userApi.getContactDetailApi + '/' + userId)
+}
+
+export function contactReply(payload) {
+  return post(userApi.contactReplyApi, payload)
+}

src/router/index.js

@@ -41,6 +41,7 @@ const UserRelation = () => import('views/user/UserRelation')
 // 用户后台主页
 const My = () => import('views/my/My')
 const MyProfile = () => import('views/my/MyProfile')
+const MyContact = () => import('views/my/MyContact')
 const MyRealname = () => import('views/my/MyRealname')
 // 消息
 const MessageIndex = () => import('views/my/Message')
@@ -112,6 +113,12 @@ const routes = [
         component: MyProfile,
         meta: { needAuth: true }
       },
+      {
+        path: '/my/account/contact',
+        name: '联系人',
+        component: MyContact,
+        meta: { needAuth: true }
+      },
       {
         path: '/my/account/realname',
         name: '实名认证',

src/views/my/My.vue

@@ -50,6 +50,10 @@
                 <i class="el-icon-film" />
                 <span slot="title">个人资料</span>
               </el-menu-item>
+              <el-menu-item index="/my/account/contact">
+                <i class="el-icon-film" />
+                <span slot="title">联系人</span>
+              </el-menu-item>
               <el-menu-item index="/my/account/realname">
                 <i class="el-icon-film" />
                 <span slot="title">实名认证</span>

src/views/my/MyContact.vue

@@ -0,0 +1,603 @@
+<template>
+  <el-row class="movie-list">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-row>
+        <el-col :md="12">
+          <el-form :inline="true" :model="searchForm">
+            <el-form-item>
+              <el-badge class="item">
+                <el-button size="mini" type="danger" @click="showAddContactDialog">添加联系人</el-button>
+              </el-badge>
+              <el-badge class="item" :value="msgCount" :max="99">
+                <el-button size="mini" type="info" @click="showNewContactDialog">新联系人</el-button>
+              </el-badge>
+            </el-form-item>
+            <el-form-item>
+              <el-badge class="item">
+                <el-input v-model="searchForm.title" placeholder="用户名" />
+              </el-badge>
+            </el-form-item>
+            <el-form-item>
+              <el-badge class="item">
+                <el-button size="mini" type="warning" @click="search">查询</el-button>
+              </el-badge>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>我的联系人</span>
+        </div>
+        <div class="text item">
+          <el-table
+            :data="dataList"
+            border
+            style="width: 100%"
+            height="500px"
+          >
+            <el-table-column
+              fixed="left"
+              label="No"
+              type="index"
+            />
+            <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="userId"
+              label="用户 ID"
+            />
+            <el-table-column
+              prop="screenName"
+              label="显示名"
+            />
+            <el-table-column
+              prop="gender"
+              label="性别"
+            />
+            <el-table-column
+              prop="signature"
+              label="签名"
+              :show-overflow-tooltip="true"
+            >
+              <template slot-scope="scope">
+                <el-tooltip
+                  v-if="scope.row.signature"
+                  :content="scope.row.signature"
+                  raw-content
+                  placement="top-start"
+                >
+                    <span v-if="scope.row.signature && scope.row.signature.length <= 15">
+                      {{ scope.row.signature }}
+                    </span>
+                  <span v-if="scope.row.signature && scope.row.signature.length > 15">
+                      {{ scope.row.signature.substr(0, 15) + "..." }}
+                    </span>
+                </el-tooltip>
+                <span v-else-if="scope.row.signature === null">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed="right"
+              label="操作"
+              width="240px"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="warning"
+                  @click="updateRemark(scope.row)"
+                >详情</el-button>
+                <el-button
+                  size="mini"
+                  type="warning"
+                  @click="blockContact(scope.row)"
+                >拉黑</el-button>
+                <el-button
+                  size="mini"
+                  type="danger"
+                  @click="deleteContact(scope.row)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            background
+            :small="screenWidth <= 768"
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
+            @current-change="handleCurrentChange"
+            @prev-click="handleCurrentChange"
+            @next-click="handleCurrentChange"
+          />
+        </div>
+      </el-card>
+    </el-row>
+
+    <!-- 添加联系人弹窗 -->
+    <el-dialog
+      title="添加联系人"
+      append-to-body
+      :visible.sync="addContactDialog"
+      :before-close="handleDialogClose"
+      width="30%"
+      center
+    >
+      <el-form ref="form" :model="searchUserForm">
+        <el-row>
+          <el-col :md="12">
+            <el-form-item>
+              <el-input
+                v-model="searchUserForm.keyword"
+                placeholder="手机号"
+                style="width: 90%; padding-right: 2px"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :md="12">
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="onSearchUser"
+              >查询</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-row v-if="userContact !== null">
+        <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <el-row>
+                <el-avatar>
+                  <el-image :src="userContact.avatarUrl" />
+                </el-avatar>
+                <span v-html="userContact.screenName" />
+              </el-row>
+            </div>
+            <div class="text item">
+              <el-row v-if="userContact.signature !== null">
+                <span>{{ userContact.signature }}</span>
+              </el-row>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-row>
+            <el-form :inline="true" :model="addContactForm">
+              <el-form-item>
+                <el-input
+                  v-model="addContactForm.remark"
+                  type="textarea"
+                  :rows="3"
+                  placeholder="添加留言..."
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button size="mini" type="warning" @click="addContact(userContact.userId)">添加</el-button>
+              </el-form-item>
+            </el-form>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-dialog>
+    <!-- 新联系人弹窗 -->
+    <el-dialog
+      title="新联系人"
+      append-to-body
+      :visible.sync="newContactDialog"
+      :before-close="handleDialogClose"
+      width="50%"
+      center
+    >
+      <el-row>
+        <el-table
+          :data="userList"
+          style="width: 100%"
+          height="400px"
+        >
+          <el-table-column
+            prop="applyId"
+            v-if="false"
+          />
+          <el-table-column
+            prop="userId"
+            v-if="false"
+          />
+          <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="screenName"
+            label="显示名"
+          />
+          <el-table-column
+            prop="applyStatus"
+            label="状态"
+          />
+          <el-table-column
+            prop="remark"
+            label="申请消息"
+          />
+          <el-table-column
+            label="操作"
+            width="210"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="warning"
+                @click="reply(scope.row)"
+              >回复</el-button>
+              <el-button
+                size="mini"
+                type="warning"
+                @click="approve(scope.row)"
+              >同意</el-button>
+              <el-button
+                size="mini"
+                type="danger"
+                @click="decline(scope.row)"
+              >拒绝</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+    </el-dialog>
+    <!-- 回复弹窗 -->
+    <el-dialog
+      title="回复弹窗"
+      append-to-body
+      :visible.sync="replyDialog"
+      :before-close="handleDialogClose1"
+      width="50%"
+      center
+    >
+      <el-form ref="form" :model="replyForm">
+        <el-row>
+          <el-col :md="12">
+            <el-form-item label="用户名">
+              <el-input
+                v-model="replyForm.content"
+                placeholder="..."
+                style="width: 70%; padding-right: 2px"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :md="12">
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="onReply"
+              >回复</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
+    <!-- 联系人详情弹窗 -->
+    <el-dialog
+      title="联系人详情"
+      append-to-body
+      :visible.sync="contactDetailDialog"
+      :before-close="handleDialogClose"
+      width="50%"
+      center
+    >
+      <el-row v-if="contactDetail !== null">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <el-row>
+              <el-col :md="4">
+                <el-avatar>
+                  <el-image :src="contactDetail.avatarUrl" />
+                </el-avatar>
+              </el-col>
+              <el-col :md="16">
+                <el-row>
+                  <span v-html="contactDetail.screenName" />
+                </el-row>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="text item">
+            <el-row v-if="contactDetail.signature !== null">
+              <span>{{ contactDetail.signature }}</span>
+            </el-row>
+          </div>
+        </el-card>
+      </el-row>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import { getAuthedUser } from '@/utils/auth'
+import {
+  addUserContact,
+  approveUserContact, contactReply,
+  declineUserContact, getApplyContactCount,
+  getApplyRecords, getContactDetail,
+  getUserContact,
+  searchUserContact
+} from '@/api/user'
+
+export default {
+  name: 'MyContact',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      loginUser: null,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      msgCount: 0,
+      searchForm: {
+        page: 1,
+        type: 1,
+        keyword: null
+      },
+      searchUserForm: {
+        page: 1,
+        type: 1,
+        keyword: null
+      },
+      addContactForm: {
+        friendId: null,
+        remark: null
+      },
+      addContactDialog: false,
+      newContactDialog: false,
+      showUserList: false,
+      userList: [],
+      userContact: null,
+      contactDetailDialog: false,
+      contactDetail: null,
+      replyDialog: false,
+      replyForm: {
+        replyId: null,
+        content: null
+      }
+    }
+  },
+  created() {
+    document.title = '我的联系人'
+    this.loginUser = getAuthedUser()
+    this.getData()
+
+    getApplyContactCount().then(resp => {
+      if (resp.code === 0) {
+        this.msgCount = resp.data.unreadNum
+      }
+    })
+  },
+  mounted() {
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      this.dataList = []
+      getUserContact(this.searchUserForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    getApplyRecordsWrapper() {
+      getApplyRecords(1).then(resp => {
+        if (resp.code === 0) {
+          this.userList = resp.data.list
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    showAddContactDialog() {
+      this.addContactDialog = true
+    },
+    showNewContactDialog() {
+      this.newContactDialog = true
+      this.getApplyRecordsWrapper()
+    },
+    onSearchUser() {
+      searchUserContact(this.searchUserForm).then(resp => {
+        if (resp.code === 0) {
+          this.showUserList = true
+          this.userList = []
+          this.userList.push(resp.data)
+          this.userContact = resp.data
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    handleDialogClose(done) {
+      this.contactDetailDialog = false
+      this.showUserList = false
+      this.userList = []
+      done()
+    },
+    handleDialogClose1(done) {
+      done()
+    },
+    addContact(userId) {
+      this.addContactForm.friendId = userId
+      addUserContact(this.addContactForm).then(resp => {
+        if (resp.code === 0) {
+          this.showUserList = true
+          this.userList = []
+          this.userList.push(resp.data)
+          this.$notify({
+            message: '添加请求已发送',
+            type: 'warning',
+            duration: 3000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    search() {
+      console.log('search')
+    },
+    approve(row) {
+      var payload = {}
+      payload.applyId = row.id
+      payload.remark = ''
+      approveUserContact(payload).then(resp => {
+        console.log(resp)
+      })
+    },
+    decline(row) {
+      var payload = {}
+      payload.applyId = row.id
+      payload.remark = ''
+      declineUserContact(payload).then(resp => {
+        console.log(resp)
+      })
+    },
+    updateRemark(row) {
+      this.contactDetailDialog = true
+      getContactDetail(row.userId).then(resp => {
+        if (resp.code === 0) {
+          this.contactDetail = resp.data
+        }
+      })
+    },
+    deleteContact(row) {
+    },
+    blockContact(row) {
+    },
+    reply(row) {
+      this.replyForm.replyId = row.id
+      this.replyDialog = true
+    },
+    onReply() {
+      this.replyDialog = false
+      contactReply(this.replyForm).then(resp => {
+        if (resp.code === 0) {
+          console.log(resp)
+        }
+      })
+    },
+    onContactDetail() {
+      console.log('detail')
+    }
+  }
+}
+</script>
+
+<style>
+.uploader-example .uploader-btn {
+  margin-right: 4px;
+}
+.uploader-example .uploader-list {
+  max-height: 440px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 256px;
+  height: 256px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 256px;
+  height: 256px;
+  display: block;
+}
+
+.item {
+  margin-top: 10px;
+  margin-right: 10px;
+}
+</style>