|
|
@@ -1,651 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-row class="movie-list">
|
|
|
- <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-col :md="12">
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>我的联系人</span>
|
|
|
- <el-button style="float: right; padding: 3px;" type="text" @click="showAddContactDialog">添加</el-button>
|
|
|
- <el-badge :value="msgCount" :max="99">
|
|
|
- <el-button style="float: right; padding: 3px;" type="text" @click="showNewContactDialog">
|
|
|
- 新联系人
|
|
|
- </el-button>
|
|
|
- </el-badge>
|
|
|
- </div>
|
|
|
- <div class="text item">
|
|
|
- <el-table
|
|
|
- :data="dataList"
|
|
|
- border
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <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"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </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.mobile"
|
|
|
- placeholder="手机号"
|
|
|
- style="width: 90%; padding-right: 2px"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :md="12">
|
|
|
- <el-form-item>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="warning"
|
|
|
- @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">添加</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
|
|
|
- v-if="false"
|
|
|
- prop="applyId"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- v-if="false"
|
|
|
- prop="userId"
|
|
|
- />
|
|
|
- <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="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="联系人详情"
|
|
|
- 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 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>
|
|
|
- </el-dialog>
|
|
|
- </el-row>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getAuthedUser } from '@/utils/auth'
|
|
|
-import {
|
|
|
- addUserContact,
|
|
|
- approveUserContact, contactReply,
|
|
|
- declineUserContact, getApplyContactCount,
|
|
|
- getApplyRecords, getContactDetail,
|
|
|
- getUserContact,
|
|
|
- searchUserContact, updateContactRemark
|
|
|
-} from '@/api/contact'
|
|
|
-
|
|
|
-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: {
|
|
|
- mobile: 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
|
|
|
- },
|
|
|
- remarkDialog: false,
|
|
|
- remarkDialogTitle: null,
|
|
|
- remarkForm: {
|
|
|
- friendId: null,
|
|
|
- remarkName: 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() {
|
|
|
- this.addContactForm.friendId = this.userContact.id
|
|
|
- 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
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- approve(row) {
|
|
|
- var payload = {}
|
|
|
- payload.applyId = row.applyId
|
|
|
- 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)
|
|
|
- })
|
|
|
- },
|
|
|
- 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) {
|
|
|
- this.contactDetail = resp.data
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- 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
|
|
|
- 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>
|
