302 lines
6.5 KiB
Vue
302 lines
6.5 KiB
Vue
<template>
|
||
<view class="TUI-Create-conversation-container">
|
||
<view class="tui-search-area">
|
||
<view class="tui-search-bar">
|
||
<image
|
||
class="tui-searchcion"
|
||
src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/serach-icon.svg"
|
||
></image>
|
||
<input class="tui-search-bar-input" :value="userID" placeholder="请输入用户ID"
|
||
confirm-type='search'
|
||
@input="userIDInput" @confirm="getuserProfile" @blur="getuserProfile" />
|
||
</view>
|
||
<view class="tui-showID">您的用户ID {{ userInfo.userID }}</view>
|
||
</view>
|
||
<view class="tui-person-to-invite" v-if="searchUser.userID">
|
||
<image
|
||
@click="handleChoose"
|
||
class="tui-normal-choose"
|
||
:src="
|
||
isChoose
|
||
? 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/single-choice-hover.svg'
|
||
: 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/single-choice-normal.svg'
|
||
"
|
||
></image>
|
||
<view class="tui-person-profile">
|
||
<image
|
||
class="tui-person-profile-avatar"
|
||
:src="
|
||
searchUser.avatar ||
|
||
'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'
|
||
"
|
||
></image>
|
||
<view>
|
||
<view class="tui-person-profile-nick">{{ searchUser.nick }}</view>
|
||
<view class="tui-person-profile-userID"
|
||
>用户ID：{{ searchUser.userID }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tui-confirm-btn" @tap="bindConfirmInvite">确认添加</view>
|
||
<addFrien ref="addRef" ></addFrien>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const app = getApp();
|
||
import url from "@/common/http/url.js"
|
||
import addFrien from "@/components/IM/add-frien.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
userID: "",
|
||
searchUser: {},
|
||
isChoose: false,
|
||
userInfo: uni.getStorageSync('TIMInfo') || {},
|
||
};
|
||
},
|
||
components: {addFrien},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad() {
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady() {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {},
|
||
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
|
||
userIDInput(e) {
|
||
this.setData({
|
||
userID: e.detail.value,
|
||
searchUser: {},
|
||
});
|
||
},
|
||
|
||
getuserProfile() {
|
||
let userID = this.userID;
|
||
// this.$http("POST", url.im.queryFriend,{userId:userID,addUserName:userID}).then(res =>{
|
||
// console.log(res);
|
||
// })
|
||
// return false;
|
||
if(userID){
|
||
uni.$TUIKit.getUserProfile({userIDList: [this.userID]}).then((imRes) => {
|
||
if (imRes.data.length > 0) {
|
||
if(userID!==this.userInfo.userID){
|
||
this.searchUser = imRes.data[0]
|
||
}
|
||
} else {
|
||
this.$msg('用户不存在');
|
||
this.searchUser = ''
|
||
}
|
||
});
|
||
}else{
|
||
this.$msg('请输入用户ID');
|
||
}
|
||
|
||
},
|
||
|
||
handleChoose() {
|
||
this.isChoose = !this.isChoose;
|
||
this.setData({
|
||
searchUser: this.searchUser,
|
||
});
|
||
},
|
||
|
||
bindConfirmInvite() {
|
||
if (this.isChoose) {
|
||
let toUser = this.searchUser;
|
||
/* 需要经过自己确认对方才能添加自己为好友 */
|
||
if(toUser.allowType=='AllowType_Type_NeedConfirm'){
|
||
this.$refs.addRef.open(toUser)
|
||
}
|
||
/* 允许任何人添加好友 */
|
||
if(toUser.allowType=='AllowType_Type_AllowAny'){
|
||
this.$refs.addRef.addID(toUser).then(()=>{
|
||
// 同意好友成功后，SDK 会触发 TIM.EVENT.FRIEND_APPLICATION_LIST_UPDATED 事件
|
||
let message = uni.$TUIKit.createTextMessage({
|
||
to:toUser.userID,
|
||
conversationType:this.TIM.TYPES.CONV_C2C,
|
||
payload: {
|
||
text: `我已添加你为好友`
|
||
},
|
||
})
|
||
uni.$TUIKit.sendMessage(message).then(imResponse=>{
|
||
console.log('发送成功',imResponse);
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}).catch((imError)=> {
|
||
// 发送失败
|
||
console.warn('sendMessage error:', imError);
|
||
});
|
||
// uni.navigateTo({
|
||
// url: `/pages/im/chat/chat?conversationID=C2C${toUser.userID}`,
|
||
// });
|
||
})
|
||
|
||
}
|
||
/* 不允许任何人添加自己为好友 */
|
||
if(toUser.allowType=='AllowType_Type_DenyAny'){
|
||
this.$msg('不允许任何人添加自己为好友')
|
||
}
|
||
} else {
|
||
this.$msg('请选择相关用户')
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.TUI-Create-conversation-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #f4f5f9;
|
||
}
|
||
|
||
.tui-navigatorbar {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 750rpx;
|
||
height: 176rpx;
|
||
background-color: #5856d5;
|
||
}
|
||
|
||
.tui-navigatorbar-back {
|
||
position: absolute;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
left: 24rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
|
||
.conversation-title {
|
||
position: absolute;
|
||
width: 350rpx;
|
||
height: 88rpx;
|
||
line-height: 56rpx;
|
||
font-size: 36rpx;
|
||
color: #ffffff;
|
||
z-index: 100;
|
||
bottom: 0;
|
||
left: 200rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.tui-search-area {
|
||
width: 100%;
|
||
background-color: #5856d5;
|
||
padding-top: 20rpx;
|
||
}
|
||
.tui-showID {
|
||
padding-left: 80rpx;
|
||
font-size: 28rpx;
|
||
color: white;
|
||
height: 50rpx;
|
||
padding-top: 18rpx;
|
||
}
|
||
.tui-search-bar {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
margin-left: 40rpx;
|
||
margin-top: 32rpx;
|
||
width: 670rpx;
|
||
height: 80rpx;
|
||
background: #ffffff;
|
||
border-radius: 40rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.tui-searchcion {
|
||
display: inline-block;
|
||
margin-left: 24rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.tui-search-bar-input {
|
||
margin-left: 16rpx;
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.tui-person-to-invite {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
width: 750rpx;
|
||
height: 150rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.tui-normal-choose {
|
||
margin-left: 40rpx;
|
||
margin-right: 40rpx;
|
||
margin-top: 52rpx;
|
||
margin-bottom: 50rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.tui-person-profile {
|
||
width: 622rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tui-person-profile-avatar {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.tui-person-profile-nick {
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
font-size: 36rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.tui-person-profile-userID {
|
||
color: #999999;
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tui-confirm-btn {
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
bottom: 100rpx;
|
||
width: 670rpx;
|
||
height: 96rpx;
|
||
background: #5856d5;
|
||
color: #ffffff;
|
||
border-radius: 48rpx;
|
||
border-radius: 48rpx;
|
||
margin-left: 40rpx;
|
||
line-height: 44rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
</style>
|