update MyContact.vue

src/api/contact.js

@@ -0,0 +1,54 @@
+import { get, post } from '@/utils/request'
+
+const contactApi = {
+  applyContactApi: '/api/user/contact/apply/records',
+  applyContactCountApi: '/api/user/contact/apply/unread',
+  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',
+  updateContactRemarkApi: '/api/user/contact/remark'
+}
+
+export function getApplyRecords(pageNumber) {
+  return get(contactApi.applyContactApi + '?pageNumber=' + pageNumber)
+}
+
+export function getUserContact(userId) {
+  return get(contactApi.getContactApi, userId)
+}
+
+export function getApplyContactCount() {
+  return get(contactApi.applyContactCountApi)
+}
+
+export function searchUserContact(userId) {
+  return get(contactApi.searchContactApi, userId)
+}
+
+export function addUserContact(addForm) {
+  return post(contactApi.addContactApi, addForm)
+}
+
+export function approveUserContact(payload) {
+  return post(contactApi.acceptApplyContactApi, payload)
+}
+
+export function declineUserContact(payload) {
+  return post(contactApi.declineApplyContactApi, payload)
+}
+
+export function getContactDetail(userId) {
+  return get(contactApi.getContactDetailApi + '/' + userId)
+}
+
+export function contactReply(payload) {
+  return post(contactApi.contactReplyApi, payload)
+}
+
+export function updateContactRemark(payload) {
+  return post(contactApi.updateContactRemarkApi, payload)
+}

src/api/user.js

@@ -7,16 +7,7 @@ const userApi = {
   unfollowUserApi: '/api/user/relation/unfollow',
   checkRelationApi: '/api/user/relation/check',
   userFollowerApi: '/api/user/relation/follower',
-  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'
+  userFollowingApi: '/api/user/relation/following'
 }
 
 export function getUserInfo(userId) {
@@ -48,39 +39,3 @@ 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/views/my/MyContact.vue

@@ -1,126 +1,108 @@
 <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"
+      <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-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>我的联系人</span>
+          </div>
+          <div class="text item">
+            <el-table
+              :data="dataList"
+              border
+              style="width: 100%"
             >
-              <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
+                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
+                v-if="false"
+                prop="userId"
+                label="用户 ID"
+              />
+              <el-table-column
+                prop="screenName"
+                label="名字"
+              >
+                <template slot-scope="scope">
+                  <span v-if="scope.row.remarkName.length !== 0">{{ scope.row.remarkName }}</span>
+                  <span v-else>{{ scope.row.screenName }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="300px"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="warning"
+                    @click="showRemarkDialog(scope.row)"
+                  >备注名</el-button>
+                  <el-button
+                    size="mini"
+                    type="warning"
+                    @click="getContactDetail(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"
             />
-            <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>
+          </div>
+        </el-card>
+      </el-col>
     </el-row>
 
     <!-- 添加联系人弹窗 -->
@@ -207,12 +189,12 @@
           height="400px"
         >
           <el-table-column
-            prop="applyId"
             v-if="false"
+            prop="applyId"
           />
           <el-table-column
-            prop="userId"
             v-if="false"
+            prop="userId"
           />
           <el-table-column
             prop="avatarUrl"
@@ -292,6 +274,38 @@
         </el-row>
       </el-form>
     </el-dialog>
+    <!-- 备注名弹窗 -->
+    <el-dialog
+      :title="remarkDialogTitle"
+      append-to-body
+      :visible.sync="remarkDialog"
+      :before-close="handleDialogClose1"
+      width="30%"
+      center
+    >
+      <el-form ref="form" :model="remarkForm">
+        <el-row>
+          <el-col :md="12">
+            <el-form-item label="备注名">
+              <el-input
+                v-model="remarkForm.remarkName"
+                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="updateRemark"
+              >确定</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
     <!-- 联系人详情弹窗 -->
     <el-dialog
       title="联系人详情"
@@ -319,8 +333,13 @@
           </div>
           <div class="text item">
             <el-row v-if="contactDetail.signature !== null">
+              <span style="color: red">签名: </span>
               <span>{{ contactDetail.signature }}</span>
             </el-row>
+            <el-row v-if="contactDetail.remarkName.length !== 0">
+              <span style="color: red">备注名: </span>
+              <span>{{ contactDetail.remarkName }}</span>
+            </el-row>
           </div>
         </el-card>
       </el-row>
@@ -336,8 +355,8 @@ import {
   declineUserContact, getApplyContactCount,
   getApplyRecords, getContactDetail,
   getUserContact,
-  searchUserContact
-} from '@/api/user'
+  searchUserContact, updateContactRemark
+} from '@/api/contact'
 
 export default {
   name: 'MyContact',
@@ -376,6 +395,12 @@ export default {
       replyForm: {
         replyId: null,
         content: null
+      },
+      remarkDialog: false,
+      remarkDialogTitle: null,
+      remarkForm: {
+        friendId: null,
+        remarkName: null
       }
     }
   },
@@ -386,7 +411,7 @@ export default {
 
     getApplyContactCount().then(resp => {
       if (resp.code === 0) {
-        this.msgCount = resp.data.unreadNum
+        this.msgCount = resp.data
       }
     })
   },
@@ -516,7 +541,7 @@ export default {
     },
     approve(row) {
       var payload = {}
-      payload.applyId = row.id
+      payload.applyId = row.applyId
       payload.remark = ''
       approveUserContact(payload).then(resp => {
         console.log(resp)
@@ -530,7 +555,24 @@ export default {
         console.log(resp)
       })
     },
-    updateRemark(row) {
+    showRemarkDialog(row) {
+      this.remarkForm.friendId = row.userId
+      this.remarkDialogTitle = '修改 ' + row.screenName + ' 的备注名'
+      this.remarkDialog = true
+    },
+    updateRemark() {
+      this.remarkDialog = false
+      updateContactRemark(this.remarkForm).then(resp => {
+        if (resp.code === 0) {
+          this.$notify({
+            message: '已更新',
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      })
+    },
+    getContactDetail(row) {
       this.contactDetailDialog = true
       getContactDetail(row.userId).then(resp => {
         if (resp.code === 0) {
@@ -539,8 +581,32 @@ export default {
       })
     },
     deleteContact(row) {
+      this.$confirm('确定要删除 ' + row.screenName, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('删除联系人')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
     },
     blockContact(row) {
+      this.$confirm('确定要拉黑 ' + row.screenName, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('拉黑联系人')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
     },
     reply(row) {
       this.replyForm.replyId = row.id