mall_client/zyhs_app_java/zyhs3_uniapp/components/IM/add-frien.vue

<template>
	<view>
		<view class="add-frien" v-if="popupAdd" @tap.stop="handleAdd">
			<view class="add-main" @tap.stop="handleCatchTap">
				<!-- <view class="popup-main-header">
					<label class="popup-main-header-title">好友验证</label>
					<button class="button" @tap.stop="friendApplication(userInfo.id)">确认</button>
				</view> -->
				<!-- <view class="add-url">
					<image class="image-radius" :src="userInfo.url || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'">
					</image>
					<text>{{ userInfo.userID || userInfo.id }}</text>
				</view> -->
				<view class="test">
					<text>验证信息</text>
					<textarea class="add-input" placeholder="请输入验证信息" @input="testInput" :value="infoTest" maxlength="100"></textarea>
				</view>
				<view class="test">
					<text>设置备注</text>
					<input class="add-input" type="text" placeholder="请输入" @input="remarksInput" :value="infoRemark" />
				</view>
				<view class="test">
					<button class="button" @tap.stop="friendApplication(userInfo.userID || userInfo.id)">发送</button>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props: {
		},
		data() {
			return {
				userInfo:{},
				popupAdd:false,
				infoTest:'',
				infoRemark:''
			}
		},
		created() {
			this.popupAdd = this.show;
		},
		methods: {
			// 直接添加好友
			addID(info){
				return new Promise((resolve, reject)=>{
					uni.$TUIKit.addFriend({
					  to: info.userID || info.id,
					  source: 'AddSource_Type_Web',
					  type: this.TIM.TYPES.SNS_ADD_TYPE_BOTH,
					}).then((imResponse)=>{
						const { code,message } = imResponse.data;
						if (code === 0) {
							resolve()
						}else{
							reject(message)
						}
					}).catch((imError)=> {
						if(imError.message=='Err_SNS_FriendAdd_Exist_In_Reverse_Black_List'){
							this.$msg('对方已将你拉黑！',2500)
						}else{
							this.$msg(imError.message,2500)
						}
						console.warn('addFriend error:', imError); // 添加好友失败的相关信息
					});
				})
			},
			open(info){
				// 校验好友关系
				this.checkFriend(info.userID || info.id).then(()=>{
					this.userInfo = info;
					this.popupAdd = true;
				})
			},
			// 添加好友确认
			friendApplication(id) {
				let promise = uni.$TUIKit.addFriend({
				  to: id,
				  source: 'AddSource_Type_Web',
				  remark: this.infoRemark,
				  // groupName: '好友',
				  wording: this.infoTest,
				  type: this.TIM.TYPES.SNS_ADD_TYPE_BOTH,
				})
				promise.then(imResponse => {
					// 添加好友的请求发送成功
					const { code,message } = imResponse.data;
					if (code === 30539) {
						this.$msg('等待对方同意');
						this.handleAdd()
					} else if (code === 0) {
						this.handleAdd()
					}
				}).catch((imError)=> {
					if(imError.message=='请求添加好友时，对方在自己的黑名单中，不允许加好友'){
						this.$msg('对方在自己的黑名单中，不允许加好友',2500)
					}else if(imError.message=='Err_SNS_FriendAdd_Exist_In_Reverse_Black_List'){
						this.$msg('对方已将你拉黑！',2500)
					}else{
						this.$msg(imError.message,2500)
					}
					this.handleAdd()
					console.warn('addFriend error:', imError); // 添加好友失败的相关信息
				});
				
			},
			// 检测是否是好友
			checkFriend(id){
				return new Promise((resolve, reject)=>{
					let pcheckFriend = uni.$TUIKit.checkFriend({
					  userIDList: [id],
					  // type: this.TIM.TYPES.SNS_CHECK_TYPE_BOTH,  //多检查
					  type: this.TIM.TYPES.SNS_CHECK_TYPE_SINGLE,  //单检查
					});
					pcheckFriend.then((imResponse)=> {
						const { successUserIDList, failureUserIDList } = imResponse.data;
						// 检查成功
						if(successUserIDList.length>0){
							let {relation} = successUserIDList[0];
							if(relation==this.TIM.TYPES.SNS_TYPE_A_WITH_B){
								this.$msg('已是好友关系')
							}
							if(relation==this.TIM.TYPES.SNS_TYPE_NO_RELATION){
								resolve()
							}
						}else if(failureUserIDList.length>0){
							this.$msg('好友检测失败！');
						}
					}).catch(function(imError) {
						console.warn('checkFriend error:', imError);
					});
				})
			},
			handleCatchTap() {
			  return;
			},
			handleAdd() {
			   this.popupAdd = !this.popupAdd;
			},
			testInput(e) {
			  const val = e.detail.value;
			  this.infoTest = val ? val : '';
			},
			remarksInput(e) {
			  const val = e.detail.value;
			  this.infoRemark = val ? val : '';
			},
		}
	}
</script>

<style lang="scss" scoped>
.add-frien {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 10;
  top: 0;
  /*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));
  /*  #endif  */
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  
  .add-main {
    width: 100vw;
    background: #ffffff;
    padding: 20px 20px;
    height: auto;
    .test {
      display: flex;flex-direction: column;
      margin-bottom: 20rpx;
	  text {
	    margin: 10rpx;color: #999;font-size: 28rpx;
	  }
	  .add-input {
	    background: #f7f7f7;width: 590rpx;font-size: 28rpx;color: #333;font-weight: bold;
	    padding: 8px 12px;height: 80rpx;
	    border-radius: 10px;
	  }
	   textarea.add-input{min-height: 120rpx;height: auto;}
	   .button{
		   margin: 60rpx auto;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   width: 540rpx;
		   height: 96rpx;
		   background: #5856d5;
		   color: #ffffff;
		   border-radius: 48rpx;
		   border-radius: 48rpx;
		   line-height: 44rpx;
		   font-size: 32rpx;
	   }
    }
  }
}
</style>