|
|
@@ -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>
|
