/pages/mail/user-base/user-base.vue
<template>
<view class="page">
<!-- 导航栏 -->
<free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white">
<free-icon-button slot="right" v-if="detail.friend"><text class="iconfont font-md"
@click="openAction"></text></free-icon-button>
</free-nav-bar>
<view class="px-3 py-4 flex align-center bg-white border-bottom">
<free-avatar :src="detail.avatar" size="120"></free-avatar>
<view class="flex flex-column ml-3 flex-1">
<view class="font-lg font-weight-bold flex justify-between">
<text class="font-lg font-weight-bold mb-1">{{detail.nickname}}</text>
<image v-if="detail.star" src="/static/images/star.png" style="width: 40rpx;height: 40rpx;"></image>
</view>
<text class="font-md text-light-muted mb-1">账号：{{detail.username}}</text>
<!-- <text class="font-md text-light-muted">地区：广东广州</text> -->
</view>
</view>
<free-list-item v-if="detail.friend" showRight :showLeftIcon="false" @click="navigate(tagPath)">
<view class="flex align-center">
<text class="font-md text-dark mr-3">标签</text>
<text class="font-md text-light-muted mr-2" v-for="(item,index) in detail.tags"
:key="index">{{item}}</text>
</view>
</free-list-item>
<free-divider></free-divider>
<free-list-item v-if="detail.friend" showRight :showLeftIcon="false">
<view class="flex align-center">
<text class="font-md text-dark mr-3">朋友圈</text>
<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
<image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
</view>
</free-list-item>
<free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item>
<free-divider></free-divider>
<view v-if="detail.friend" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="doEvent">
<text class="iconfont text-primary mr-1" v-if="!detail.isBlack"></text>
<text class="font-md text-primary">{{detail.isblack ? '移除黑名单' : '发信息'}}</text>
</view>
<view v-else class="py-3 flex align-center justify-center bg-white" hover-class="bg-light"
@click="navigate(addFriend())">
<text class="font-md text-primary">添加好友</text>
</view>
<!-- 扩展菜单 -->
<free-popup ref="action" bottom transformOrigin="center bottom" maskColor>
<scroll-view style="height: 580rpx;" scroll-y="true" class="bg-white" :show-scrollbar="false">
<free-list-item v-for="(item,index) in actions" :key="index" :title="item.title" :showRight="false"
:border="false" @click="popupEvent(item)">
<text slot="icon" class="iconfont font-lg py-1">{{item.icon}}</text>
</free-list-item>
</scroll-view>
</free-popup>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeIconButton from '@/components/free-ui/free-icon-button.vue';
import freeChatItem from '@/components/free-ui/free-chat-item.vue';
import freePopup from '@/components/free-ui/free-popup.vue';
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeDivider from '@/components/free-ui/free-divider.vue';
import freeAvatar from '@/components/free-ui/free-avatar.vue';
import auth from '@/common/mixin/auth.js';
import $H from '@/common/free-lib/request.js';
export default {
mixins: [auth],
components: {
freeNavBar,
freeIconButton,
freeChatItem,
freePopup,
freeListItem,
freeDivider,
freeAvatar
},
data() {
return {
detail: {
id: 0,
username: '',
nickname: '',
avatar: '',
sex: '',
sign: '',
area: '',
friend: false,
lookhim: 1,
lookme: 1,
star: 0,
isblack: 0,
tags: []
},
}
},
onShow() {
this.getData();
},
onl oad(e) {
uni.$on('saveRemarkTag', (e) => {
this.detail.tagList = e.detail.tagList
this.nickname = e.nickname;
})
if (!e.user_id) {
return this.backToast();
}
this.detail.id = e.user_id;
// 获取当前用户资料
this.getData();
},
beforeDestroy() {
this.$refs.action.hide();
uni.$off('saveRemarkTag')
},
computed: {
tagPath() {
return "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({
user_id:this.detail.id,
nickname:this.detail.nickname,
tags:this.detail.tags ? this.detail.tags.join(',') : ''
})
},
actions() {
return [{
icon: "\ue6b3",
title: "设置备注和标签",
type: "navigate",
path: "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({
user_id:this.detail.id,
nickname:this.detail.nickname,
tags:this.detail.tags ? this.detail.tags.join(',') : ''
})
}, {
icon: "\ue613",
title: "把他推荐给朋友",
type: "navigate",
path: "mail/send-card/send-card"
}, {
icon: "\ue6b0",
title: this.detail.star ? '取消星标好友' : "设为星标朋友",
type: "event",
event: "setStar"
}, {
icon: "\ue667",
title: "设置朋友圈和动态权限",
type: "navigate",
path: "mail/user-moments-auth/user-moments-auth?user_id="+this.detail.id+"¶ms="+JSON.stringify({
lookme:this.detail.lookme,
lookhim:this.detail.lookhim,
})
}, {
icon: "\ue638",
title: this.detail.isblack ? '移出黑名单' : "加入黑名单",
type: "event",
event: "setBlack"
}, {
icon: "\ue61c",
title: "投诉",
type: "navigate",
path: "mail/user-report/user-report?params="+JSON.stringify({
user_id:this.detail.id,
type:'user'
})
}, {
icon: "\ue638",
title: "删除",
type: "event",
event: "deleteItem"
}]
}
},
methods: {
addFriend() {
let obj = {
friend_id: this.detail.id,
nickname: this.detail.nickname,
lookme: typeof this.detail.lookme === 'number' ? this.detail.lookme : 1,
lookhim: typeof this.detail.lookhim === 'number' ? this.detail.lookhim : 1,
};
return 'mail/add-friend/add-friend?params=' + JSON.stringify(obj);
},
getData() {
$H.get('/friend/read/' + this.detail.id).then(res => {
if (!res) {
return this.backToast('该用户不存在');
}
this.detail = res;
console.log(res);
});
},
openAction() {
this.$refs.action.show()
},
navigate(url) {
console.log(url)
uni.navigateTo({
url: '/pages/' + url,
});
},
// 操作菜单事件
popupEvent(e) {
if (!e.type) {
return;
}
setTimeout(() => {
// 关闭弹出层
this.$refs.action.hide()
}, 300)
switch (e.type) {
case 'navigate':
this.navigate(e.path);
break;
case 'event':
this[e.event](e);
break;
}
},
// 删除好友
deleteItem(){
uni.showModal({
title: '是否要删除好友？',
success: res => {
if(res.confirm){
$H.post('/friend/destroy',{friend_id:this.detail.id}).then(res=>{
uni.showToast({
title:'删除好友成功',
icon:'none'
});
uni.reLaunch({
url:'/pages/tabbar/index/index'
})
})
}
},
fail: () => {},
complete: () => {}
});
},
// 设为星标
setStar(e) {
let star = this.detail.star == 0 ? 1 : 0;
$H.post('/friend/setstar/' + this.detail.id, {
star
}).then(res => {
this.detail.star = star;
e.title = this.detail.star ? '取消标星好友' : '设为标星好友';
});
},
// 加入黑名单
setBlack(e) {
let msg = this.detail.isblack ? '移出黑名单' : '加入黑名单';
uni.showModal({
content: '是否要' + msg,
success: (res) => {
if (res.confirm) {
let isblack = this.detail.isblack == 0 ? 1:0
$H.post('/friend/setblack/' + this.detail.id, {
isblack
}).then(res => {
this.detail.isblack = isblack;
});
// this.detail.isBlack = !this.detail.isBlack;
// e.title = this.isBlack ? '移出黑名单' : '加入黑名单';
uni.showToast({
title: msg + '成功',
icon: 'none'
})
}
}
})
},
// 发送消息
doEvent(e){
if(this.detail.isblack){
return this.setBlack();
}
uni.navigateTo({
url:'../../chat/chat/chat?params='+encodeURIComponent(JSON.stringify({
id:this.detail.id,
name:this.detail.nickname ? this.detail.nickname : this.detail.username,
avatar:this.detail.avatar,
chat_type:'user'
}))
})
}
}
}
</script>
<style>
</style>
/pages/chat/chat-set/chat-set.vue
<template>
<view style="background-color: #EDEDED;">
<!-- 导航栏 -->
<free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
<view class="flex flex-wrap py-3 bg-white">
<!-- 私聊 -->
<view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
<free-avatar :src="detail.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
<text class="font text-muted mt-1" >{{detail.name}}</text>
</view>
<!-- 群聊 -->
<view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" v-for="(item,index) in list" :key='index'>
<free-avatar :src="item.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
<text class="font text-muted mt-1" >{{item.name}}</text>
</view>
<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" @click="openMail">
<view class="flex align-center justify-center border" hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
<text class="text-light-muted" style="font-size: 100rpx;" >+</text>
</view>
</view>
<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" @click="deleteUser">
<view class="flex align-center justify-center border" hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
<text class="text-light-muted" style="font-size: 100rpx;" >-</text>
</view>
</view>
</view>
<free-divider></free-divider>
<view v-if="detail.chat_type==='group'">
<free-list-item title="群聊名称" showRight :showLeftIcon="false" @click="updateName()">
<text slot="right" class="font text-muted">{{detail.name}}</text>
</free-list-item>
<free-list-item title="群二维码" showRight :showLeftIcon="false" @click="openCode">
<text slot="right" class="iconfont font-md text-light-muted"></text>
</free-list-item>
<free-list-item title="群公告" showRight :showLeftIcon="false" @click="openGroupRemark"></free-list-item>
</view>
<free-divider></free-divider>
<free-list-item title="查找聊天记录" showRight :showLeftIcon="false" @click="openHistory"></free-list-item>
<free-divider></free-divider>
<free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.nowarn" @change="updateChatItem($event,'nowarn')" color="#08C060" />
</free-list-item>
<free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.istop" @change="updateChatItem($event,'istop')" color="#08C060"/>
</free-list-item>
<free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.strongwarn" @change="updateChatItem($event,'strongwarn')" color="#08C060"/>
</free-list-item>
<free-divider></free-divider>
<free-list-item title="清空聊天记录" showRight :showLeftIcon="false" @click="clear"></free-list-item>
<free-divider></free-divider>
<view v-if="detail.chat_type==='group'">
<free-divider></free-divider>
<free-list-item title="我在本群的昵称" showRight :showLeftIcon="false" @click="updatenickName">
<text slot="right" class="font text-muted">{{nickname}}</text>
</free-list-item>
<free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.shownickname" @change="updateChatItem($event,'shownickname')" color="#08C060"/>
</free-list-item>
</view>
<free-divider></free-divider>
<free-list-item title="投诉" showRight :showLeftIcon="false" @click="openReport"></free-list-item>
<free-divider></free-divider>
<view v-if="detail.chat_type === 'group'" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="quit">
<text class="font-md text-danger">删除并退出</text>
</view>
<free-confirm :title="'修改'+confirmTitle" ref="confirm">
<input type="text" class="border-bottom font-md" :placeholder="confirmTitle" v-model="confirmText"/>
</free-confirm>
<view style="height: 200rpx;"></view>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeAvatar from '@/components/free-ui/free-avatar.vue';
import freeDivider from '@/components/free-ui/free-divider.vue';
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeConfirm from '@/components/free-ui/free-confirm.vue';
import auth from '@/common/mixin/auth.js';
import { mapState } from 'vuex';
import $H from '@/common/free-lib/request.js';
export default {
mixins:[auth],
components:{
freeNavBar,
freeAvatar,
freeDivider,
freeListItem,
freeConfirm
},
computed:{
...mapState({
chat:state=>state.user.chat,
user:state=>state.user.user
}),
confirmTitle(){
return this.confirmType === 'name' ? '群名称' : '昵称';
}
},
data() {
return {
list:[],
confirmText:'',
nickname:'',
detail:{
id:0, // 接收人/群 id
chat_type:'user', // 接收类型 user 单聊 group群聊
name:'', // 接收人/群 昵称
avatar:"", // 接收人/群 头像
type:'',// 最后一条消息类型
istop:false, // 是否置顶
shownickname:false, // 是否显示昵称
nowarn:false, // 是否免打扰
strongwarn:false, // 是否强提醒
user_id:0,//管理员id，
remark:'', // 群公告
invite_confirm:0, // 邀请确认
}
}
},
methods: {
clear(){
uni.showModal({
content:'是否要清空聊天记录？',
success:(res)=>{
if(res.confirm){
this.chat.clearChatDetail(this.detail.id,this.detail.chat_type);
uni.showToast({
title:'清除成功',
icon:'none'
})
uni.$emit('updateHistory');
}
}
})
},
openCode(){
uni.navigateTo({
url:'../../my/code/code?params='+encodeURIComponent(JSON.stringify({
id:this.detail.id,
name:this.detail.name,
avatar:this.detail.avatar
}))+'&type=group',
})
},
updateChatItem(e,k){
console.log(e.detail.value,k);
this.detail[k] = e.detail.value;
this.chat.updateChatItem({
id:this.detail.id,
chat_type:this.detail.chat_type
},this.detail);
},
quit(){
uni.showModal({
content:'是否要删除或退出群聊？',
success: (res) => {
if(res.cancel) return;
$H.post('/group/quit',{
id:this.detail.id
}).then(res=>{
uni.showToast({
title: '操作成功',
icon:'none'
});
uni.navigateBack({
delta:1
})
})
}
})
},
updatenickName(){
this.confirmType = 'nickname';
this.confirmText = this.nickname
this.$refs.confirm.show((close)=>{
if(this.confirmText == ''){
return uni.showToast({
title:'昵称不能为空',
icon:'none'
})
}
$H.post('/group/nickname',{
id:this.detail.id,
nickname:this.confirmText
}).then(res=>{
uni.showToast({
title:'修改成功',
icon:'none'
});
this.nickname = this.confirmText;
close();
})
});
},
openGroupRemark(){
uni.navigateTo({
url: '../group-remark/group-remark?params='+encodeURIComponent(JSON.stringify({
id:this.detail.id,
remark:this.detail.remark
}))
});
},
openReport(){
uni.navigateTo({
url:'/pages/mail/user-report/user-report?params='+JSON.stringify({
user_id:this.detail.id,
type:this.detail.chat_type
})
});
},
openMail(){
let params = this.detail.chat_type === 'user' ? '?type=createGroup' : '?type=inviteGroup&id='+this.detail.id;
uni.navigateTo({
url:'/pages/mail/mail/mail'+params
});
},
openHistory(){
uni.navigateTo({
url:`../chat-history/chat-history?chat_tpe=${this.detail.chat_type}&id=${this.detail.id}`,
})
},
deleteUser(){
uni.navigateTo({
url:'../group-user/group-user?id='+this.detail.id
})
},
updateName(){
this.confirmText = this.detail.name
this.$refs.confirm.show((close)=>{
if(this.confirmText == ''){
return uni.showToast({
title:'群名称不能为空',
icon:'none'
})
}
$H.post('/group/rename',{
id:this.detail.id,
name:this.confirmText
}).then(res=>{
uni.showToast({
title:'修改成功',
icon:'none'
});
this.detail.name = this.confirmText;
close();
})
});
}
},
onShow() {
if(this.detail.chat_type === 'group'){
$H.get('/group_info/'+this.detail.id).then(res=>{
this.detail.remark = res.remark;
this.list = res.group_users.map(item=>{
if(item.user_id === this.user.id){
this.nickname = item.nickname;
}
return {
id:item.user_id,
name:item.nickname || item.user.nickname || item.user.username,
avatar:item.user.avatar
}
})
})
}
},
onl oad(e) {
if(!e.params){
return this.backToast();
}
let detail = JSON.parse(e.params);
// 获取当前会话的详细资料
detail = this.chat.getChatListItem(detail.id,detail.chat_type);
if(!detail){
return this.backToast()
}
this.detail = detail;
}
}
</script>
<style>
</style>
感谢大家观看，我们下次见