259 lines
8.6 KiB
Vue
259 lines
8.6 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 用户信息 -->
|
||
<view class="user-info u-border-bottom">
|
||
<u-avatar :src="userInfo.portraitUrl" size="100" />
|
||
|
||
<view class="nickname">{{ userInfo.username }}</view>
|
||
<view class="gender">
|
||
<u-tag text="保密" v-if="userInfo.gender === 0" color="#fff" borderColor="#999" size="mini"
|
||
bgColor="#999"></u-tag>
|
||
<u-tag text="男" v-if="userInfo.gender === 1" color="#fff" borderColor="#5db6ee" size="mini" icon="man"
|
||
bgColor="#5db6ee"></u-tag>
|
||
<u-tag text="女" v-if="userInfo.gender === 2" color="#fff" borderColor="#e4867a" size="mini" icon="woman"
|
||
bgColor="#e4867a"></u-tag>
|
||
</view>
|
||
<view class="address" @longpress="copyAddress">{{ userInfo.address }}</view>
|
||
</view>
|
||
|
||
<block v-if="userInfo.is_friend">
|
||
<view class="actions">
|
||
<u-cell-group>
|
||
<u-cell isLink title="设置备注" @click="setRemark"></u-cell>
|
||
<u-cell isLink title="设置标签" @click="setRemark"></u-cell>
|
||
<u-cell title="聊天免打扰">
|
||
<u-switch slot="value" size="18" v-model="status" activeColor="#34CE98" @change="setStatus">
|
||
</u-switch>
|
||
</u-cell>
|
||
<u-cell title="聊天置顶">
|
||
<u-switch slot="value" size="18" v-model="isTop" activeColor="#34CE98" @change="setTop">
|
||
</u-switch>
|
||
</u-cell>
|
||
<!-- <u-cell title="加入黑名单">
|
||
<u-switch slot="value" size="18" v-model="block" activeColor="#34CE98" @change="setBlock"></u-switch>
|
||
</u-cell> -->
|
||
<u-cell isLink titleStyle="color: red" title="删除好友" @click="deleteFriend"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<u-button @click="toPrivate">
|
||
<u-icon name="chat" size="20" /> 发送消息
|
||
</u-button>
|
||
<u-button @click="toPrivate">
|
||
<u-icon name="mic" size="20" /> 音视频通话
|
||
</u-button>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="footer">
|
||
<u-button @click="toBeFriend" color="#34CE98">
|
||
<uni-icons color="#FFFFFF" type="staff" size="20"></uni-icons> 申请成为好友
|
||
</u-button>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getFriendInfo,
|
||
pedingFriend,
|
||
deleteFriend
|
||
} from '@/apis/interfaces/im.js'
|
||
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
targetId: '',
|
||
userInfo: {},
|
||
status: false, // 0 是免打扰，1是正常通知
|
||
isTop: false,
|
||
block: false,
|
||
conversationType: 1
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.targetId = e.targetId
|
||
getFriendInfo(e.targetId).then(res => {
|
||
this.userInfo = res
|
||
uni.setNavigationBarTitle({
|
||
title: res.name
|
||
})
|
||
})
|
||
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
|
||
status
|
||
}) => {
|
||
this.status = !Boolean(status)
|
||
})
|
||
RongIMLib.getConversation(this.conversationType, this.targetId, ({
|
||
code,
|
||
conversation
|
||
}) => {
|
||
if (code == 0) {
|
||
this.isTop = conversation.isTop
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
copyAddress() {
|
||
uni.setClipboardData({
|
||
data: this.userInfo.address,
|
||
success: () => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '复制区块链成功'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
toPrivate() {
|
||
uni.redirectTo({
|
||
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
|
||
})
|
||
},
|
||
setRemark() {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '开发中'
|
||
})
|
||
},
|
||
deleteFriend() {
|
||
uni.showModal({
|
||
title: '删除确认',
|
||
content: '确认删除后不可恢复',
|
||
success: (e) => {
|
||
if (e.confirm) {
|
||
deleteFriend(this.targetId).then(res => {
|
||
// 删除聊天记录
|
||
RongIMLib.deleteMessages(1, this.targetId)
|
||
RongIMLib.removeConversation(1, this.targetId)
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '好友删除成功',
|
||
success() {
|
||
uni.switchTab({
|
||
url: '/pages/im/index'
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
setStatus() {
|
||
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
|
||
status
|
||
}) => {
|
||
this.status = !Boolean(status)
|
||
})
|
||
},
|
||
setTop() {
|
||
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
|
||
RongIMLib.getConversation(this.conversationType, this.targetId, ({
|
||
conversation
|
||
}) => {
|
||
this.isTop = conversation.isTop
|
||
})
|
||
})
|
||
},
|
||
setBlock() {
|
||
|
||
},
|
||
// 申请好友
|
||
toBeFriend() {
|
||
pedingFriend(this.targetId).then(res => {
|
||
uni.showToast({
|
||
title: '申请成功',
|
||
icon: "none"
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: err.message,
|
||
duration: 2000
|
||
})
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
min-height: 100vh;
|
||
background: $window-color;
|
||
}
|
||
|
||
.actions {
|
||
background: white;
|
||
margin-top: $padding / 2;
|
||
}
|
||
|
||
// 用户信息
|
||
.user-info {
|
||
padding: $padding 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: white;
|
||
|
||
.nickname {
|
||
font-size: 42rpx;
|
||
padding-top: $padding;
|
||
}
|
||
|
||
.address {
|
||
line-height: 64rpx;
|
||
font-size: 26rpx;
|
||
color: $text-gray;
|
||
}
|
||
|
||
.gender {
|
||
padding-top: $padding/2;
|
||
|
||
text {
|
||
font-size: $title-size-sm;
|
||
background: #303133;
|
||
padding: 0 10rpx;
|
||
color: white;
|
||
border-radius: $radius-m;
|
||
line-height: 30rpx;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-lists {
|
||
margin-top: $margin;
|
||
background: white;
|
||
|
||
.user-lists-item {
|
||
padding: 0 $padding;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 90rpx;
|
||
font-size: $title-size-lg;
|
||
|
||
label {
|
||
color: $text-color;
|
||
}
|
||
|
||
text {
|
||
color: $text-gray;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
padding: $padding / 2;
|
||
|
||
.u-button {
|
||
margin-top: $padding / 2;
|
||
}
|
||
}
|
||
</style>
|