681 lines
17 KiB
Vue
681 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="contain">
|
|||
|
|
<view class="view-image-text">
|
|||
|
|
<image class="image-radius"
|
|||
|
|
:src="userInfo.url || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'">
|
|||
|
|
</image>
|
|||
|
|
<view class="text-container">
|
|||
|
|
<view class="name">
|
|||
|
|
<text class="hasname">{{ userInfo.remark || userInfo.nick }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="ID">id：{{ userInfo.id }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<block>
|
|||
|
|
<view class="list one" @tap="handleEditToggle" v-if="isMsg">
|
|||
|
|
<view class="list-name">备注名</view>
|
|||
|
|
<view class="remarkname">
|
|||
|
|
<text class="aside-right">{{ userInfo.remark }}</text>
|
|||
|
|
<u-icon class="listimage" name="arrow-right" color="#000000" size="20"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-mask" v-if="popupToggle" @tap.stop="handleEditToggle">
|
|||
|
|
<view class="popup-main" @tap.stop="handleCatchTap">
|
|||
|
|
<view class="popup-main-header">
|
|||
|
|
<label class="popup-main-header-title">修改备注</label>
|
|||
|
|
<button class="button" @tap.stop="handleEditSubmit" :disabled="!infoNick">确认</button>
|
|||
|
|
</view>
|
|||
|
|
<input class="popup-main-input" type="text" :value="infoNick" @input="bindEditInput" />
|
|||
|
|
<label class="text">仅限中文、字母、数字和下划线，2-20个字</label>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list one" v-else>
|
|||
|
|
<view class="list-name">昵称</view>
|
|||
|
|
<view class="remarkname">
|
|||
|
|
<text class="aside-right">{{ userInfo.nick || userInfo.id }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list one">
|
|||
|
|
<view class="list-name">来源</view>
|
|||
|
|
<view class="remarkname">
|
|||
|
|
<text class="aside-right">API</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<view class="quit-main" v-show="isAdd" @tap="handleAdd">
|
|||
|
|
<view class="quit-main-text">添加好友</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="quit-main" @tap="navigateBack" v-show="isMsg">
|
|||
|
|
<view class="quit-main-text">发送消息</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="quit-main" @tap="delFriend(userInfo.id)" v-show="dele">
|
|||
|
|
<view class="quit-main-text del">删除好友</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="quit-main" @tap="join(userInfo.id)" v-if="isShow">
|
|||
|
|
<view class="quit-main-text del">加入黑名单</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="quit-main" @tap="remove(userInfo.id)" v-else>
|
|||
|
|
<view class="quit-main-text del">移除黑名单</view>
|
|||
|
|
</view>
|
|||
|
|
<addFrien ref="addRef"></addFrien>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import addFrien from "@/components/IM/add-frien.vue"
|
|||
|
|
export default {
|
|||
|
|
// 在test.vue页面，向起始页通过事件传递数据
|
|||
|
|
onLoad: function(option) {
|
|||
|
|
// index 1 是好友 2加好友 3已拉黑
|
|||
|
|
console.log(option);
|
|||
|
|
if (option && option.id) {
|
|||
|
|
this.userInfo = option;
|
|||
|
|
this.checkFriend(option.id).then((res) => {
|
|||
|
|
switch (res) {
|
|||
|
|
// A 的好友表中有 B，B 的好友表中也有 A
|
|||
|
|
case 4:
|
|||
|
|
this.dele = true;this.isMsg = true;
|
|||
|
|
break;
|
|||
|
|
// A 的好友表中没有 B，B 的好友表中也没有 A
|
|||
|
|
case 1:
|
|||
|
|
this.isMsg = false;this.isAdd = true;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
// isAdd:false, //是否加好友
|
|||
|
|
// dele: false, //是否删除
|
|||
|
|
// isShow: true, //是否加入黑名单
|
|||
|
|
// isMsg:false, //是否可以发信息
|
|||
|
|
// - relation: TIM.TYPES.SNS_TYPE_NO_RELATION A 的好友表中没有 B，B 的好友表中也没有 A
|
|||
|
|
// - relation: TIM.TYPES.SNS_TYPE_A_WITH_B A 的好友表中有 B，但 B 的好友表中没有 A
|
|||
|
|
// - relation: TIM.TYPES.SNS_TYPE_B_WITH_A A 的好友表中没有 B，但 B 的好友表中有 A
|
|||
|
|
// - relation: TIM.TYPES.SNS_TYPE_BOTH_WAY A 的好友表中有 B，B 的好友表中也有 A
|
|||
|
|
})
|
|||
|
|
this.checkBlack(option.id)
|
|||
|
|
}
|
|||
|
|
this.getPer();
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
display: false,
|
|||
|
|
show: true,
|
|||
|
|
popupToggle: false,
|
|||
|
|
popupToggleAvatar: false,
|
|||
|
|
popupAdd: false,
|
|||
|
|
userInfo: '',
|
|||
|
|
infoNick: '', //备注设置
|
|||
|
|
infoTest: '', //验证信息
|
|||
|
|
infoRemark: '', //申请备注
|
|||
|
|
own: '',
|
|||
|
|
isAdd: false, //是否加好友
|
|||
|
|
dele: false, //是否删除
|
|||
|
|
isShow: true, //是否加入黑名单
|
|||
|
|
isMsg: false, //是否可以发信息
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
addFrien
|
|||
|
|
},
|
|||
|
|
props: {},
|
|||
|
|
|
|||
|
|
onShow() {},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 校验是否在黑名单
|
|||
|
|
checkBlack(id){
|
|||
|
|
uni.$TUIKit.getBlacklist().then((res)=>{
|
|||
|
|
if(res.data){
|
|||
|
|
if(res.data.includes(id)){
|
|||
|
|
this.isShow = false;
|
|||
|
|
}else{
|
|||
|
|
this.isShow = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
//
|
|||
|
|
},
|
|||
|
|
// 检测是否是好友
|
|||
|
|
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];
|
|||
|
|
console.log(relation);
|
|||
|
|
if (relation == this.TIM.TYPES.SNS_TYPE_NO_RELATION) {
|
|||
|
|
resolve(1)
|
|||
|
|
}
|
|||
|
|
if (relation == this.TIM.TYPES.SNS_TYPE_A_WITH_B) {
|
|||
|
|
resolve(2)
|
|||
|
|
}
|
|||
|
|
if (relation == this.TIM.TYPES.SNS_TYPE_B_WITH_A) {
|
|||
|
|
resolve(3)
|
|||
|
|
}
|
|||
|
|
if (relation == this.TIM.TYPES.SNS_TYPE_BOTH_WAY) {
|
|||
|
|
resolve(4)
|
|||
|
|
}
|
|||
|
|
} else if (failureUserIDList.length > 0) {
|
|||
|
|
console.log('好友检测失败');
|
|||
|
|
}
|
|||
|
|
}).catch(function(imError) {
|
|||
|
|
console.warn('checkFriend error:', imError);
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
bindEditInput(e) {
|
|||
|
|
const val = e.detail.value;
|
|||
|
|
this.infoNick = val ? val : '';
|
|||
|
|
console.log(val);
|
|||
|
|
},
|
|||
|
|
testInput(e) {
|
|||
|
|
const val = e.detail.value;
|
|||
|
|
this.infoTest = val ? val : '';
|
|||
|
|
console.log(val);
|
|||
|
|
},
|
|||
|
|
remarksInput(e) {
|
|||
|
|
const val = e.detail.value;
|
|||
|
|
this.infoRemark = val ? val : '';
|
|||
|
|
console.log(val);
|
|||
|
|
},
|
|||
|
|
// 修改昵称 禁止冒泡
|
|||
|
|
handleCatchTap() {
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
// 修改昵称确认
|
|||
|
|
handleEditSubmit() {
|
|||
|
|
console.log(this.userInfo.id);
|
|||
|
|
console.log(this.userInfo.remark);
|
|||
|
|
const ID = this.userInfo.id;
|
|||
|
|
const remark = this.userInfo.remark;
|
|||
|
|
if (this.infoNick === this.remark) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.popupToggle = false;
|
|||
|
|
let promise = uni.$TUIKit.updateFriend({
|
|||
|
|
userID: ID,
|
|||
|
|
remark: this.infoNick,
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
console.log(imResponse.data); // Friend 实例
|
|||
|
|
this.userInfo.remark = imResponse.data.remark;
|
|||
|
|
this.popupToggle = false;
|
|||
|
|
})
|
|||
|
|
.catch(function(imError) {
|
|||
|
|
console.warn('getFriendProfile error:', imError); // 更新失败
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 添加好友确认
|
|||
|
|
friendApplication(id) {
|
|||
|
|
console.log(this.TIM); //添加的好友id
|
|||
|
|
console.log(this.own); //我的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
|
|||
|
|
} = imResponse.data;
|
|||
|
|
console.log(code);
|
|||
|
|
if (code === 30539) {
|
|||
|
|
// 30539 说明 user1 设置了【需要经过自己确认对方才能添加自己为好友】，此时 SDK 会触发 TIM.EVENT.FRIEND_APPLICATION_LIST_UPDATED 事件
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '申请添加好友成功',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确定');
|
|||
|
|
this.setData({
|
|||
|
|
popupAdd: !this.popupAdd,
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
} else if (code === 0) {
|
|||
|
|
// 0 说明 user1 设置了【允许任何人添加自己为 好友】，此时 SDK 会触发 TIM.EVENT.FRIEND_LIST_UPDATED 事件
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '添加好友成功',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确定');
|
|||
|
|
this.display = false;
|
|||
|
|
this.dele = true;
|
|||
|
|
this.popupAdd = !this.popupAdd;
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}).catch(function(imError) {
|
|||
|
|
console.warn('addFriend error:', imError); // 添加好友失败的相关信息
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleEditToggle() {
|
|||
|
|
this.popupToggle = !this.popupToggle;
|
|||
|
|
this.infoNick = this.userInfo.remark;
|
|||
|
|
},
|
|||
|
|
handleAdd() {
|
|||
|
|
if(!this.isShow){
|
|||
|
|
this.$msg('先将对方移除黑名单，再重试！',2500)
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
let userID = this.userInfo.id
|
|||
|
|
let promise = uni.$TUIKit.getUserProfile({
|
|||
|
|
userIDList: [userID] // 请注意：即使只拉取一个用户的资料，也需要用数组类型，例如：userIDList: ['user1']
|
|||
|
|
});
|
|||
|
|
promise.then((imResponse)=> {
|
|||
|
|
let toUser = imResponse.data[0]
|
|||
|
|
/* 需要经过自己确认对方才能添加自己为好友 */
|
|||
|
|
if(toUser.allowType=='AllowType_Type_NeedConfirm'){
|
|||
|
|
this.$refs.addRef.open(toUser)
|
|||
|
|
}
|
|||
|
|
/* 允许任何人添加好友 */
|
|||
|
|
if(toUser.allowType=='AllowType_Type_AllowAny'){
|
|||
|
|
this.$refs.addRef.addID(toUser).then(()=>{
|
|||
|
|
this.dele = true;this.isMsg = true;this.isAdd = false;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/* 不允许任何人添加自己为好友 */
|
|||
|
|
if(toUser.allowType=='AllowType_Type_DenyAny'){
|
|||
|
|
this.$msg('对方设置了，不允许添加为好友！')
|
|||
|
|
}
|
|||
|
|
}).catch(function(imError) {
|
|||
|
|
console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
navigateBack() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/im/chat/chat?conversationID=C2C' + this.userInfo.id,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 删除好友
|
|||
|
|
delFriend(id) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定删除好友',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确定');
|
|||
|
|
console.log(id);
|
|||
|
|
let promise = uni.$TUIKit.deleteFriend({
|
|||
|
|
userIDList: [id],
|
|||
|
|
type: this.TIM.TYPES.SNS_DELETE_TYPE_BOTH,
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
const {
|
|||
|
|
successUserIDList,
|
|||
|
|
failureUserIDList
|
|||
|
|
} = imResponse.data;
|
|||
|
|
console.log(successUserIDList);
|
|||
|
|
// 删除成功的 userIDList
|
|||
|
|
successUserIDList.forEach(item => {
|
|||
|
|
const {
|
|||
|
|
userID
|
|||
|
|
} = item;
|
|||
|
|
});
|
|||
|
|
this.add = true;
|
|||
|
|
// 删除失败的 userIDList
|
|||
|
|
failureUserIDList.forEach(item => {
|
|||
|
|
const {
|
|||
|
|
userID,
|
|||
|
|
code,
|
|||
|
|
message
|
|||
|
|
} = item;
|
|||
|
|
});
|
|||
|
|
// 如果好友列表有变化，则 SDK 会触发 TIM.EVENT.FRIEND_LIST_UPDATED 事件
|
|||
|
|
let onFriendListUpdated = function(event) {
|
|||
|
|
console.log(event.data);
|
|||
|
|
};
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 2,
|
|||
|
|
});
|
|||
|
|
uni.$TUIKit.on(this.TIM.EVENT.FRIEND_LIST_UPDATED,
|
|||
|
|
onFriendListUpdated);
|
|||
|
|
})
|
|||
|
|
.catch(function(imError) {
|
|||
|
|
console.warn('removeFromFriendList error:', imError);
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 加入黑名单
|
|||
|
|
join(id) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定是否加入黑名单',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确定');
|
|||
|
|
console.log(id);
|
|||
|
|
let promise = uni.$TUIKit.addToBlacklist({
|
|||
|
|
userIDList: [id],
|
|||
|
|
}); // 请注意：即使只添加一个用户帐号到黑名单，也需要用数组类型，例如：userIDList: ['user1']
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
this.isShow = false;
|
|||
|
|
this.isMsg = false;this.dele = false;
|
|||
|
|
console.log(imResponse
|
|||
|
|
.data); // 成功添加到黑名单的账号信息，结构为包含用户 userID 的数组 - [userID]
|
|||
|
|
})
|
|||
|
|
.catch(function(imError) {
|
|||
|
|
console.warn('addToBlacklist error:', imError); // 添加用户到黑名单列表失败的相关信息
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
remove(id) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定是否移除黑名单',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
let promise = uni.$TUIKit.removeFromBlacklist({
|
|||
|
|
userIDList: [id],
|
|||
|
|
}); // 请注意：即使只从黑名单中移除一个用户帐号，也需要用数组类型，例如：userIDList: ['user1']
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
this.isShow = true;
|
|||
|
|
this.isAdd = true;
|
|||
|
|
console.log(imResponse
|
|||
|
|
.data); // 从黑名单中成功移除的账号列表，结构为包含用户 userID 的数组 - [userID]
|
|||
|
|
})
|
|||
|
|
.catch(function(imError) {
|
|||
|
|
console.warn('removeFromBlacklist error:',
|
|||
|
|
imError); // 将用户从黑名单中移除失败的相关信息
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取个人ID
|
|||
|
|
getPer() {
|
|||
|
|
let promise = uni.$TUIKit.getMyProfile();
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
this.own = imResponse.data.userID;
|
|||
|
|
})
|
|||
|
|
.catch(function(imError) {
|
|||
|
|
console.warn('getMyProfile error:', imError); // 获取个人资料失败的相关信息
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.add-url {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-url text {
|
|||
|
|
line-height: 120rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-input {
|
|||
|
|
background: #f4f5f9;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.test {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.test text {
|
|||
|
|
width: 34%;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contain {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view {
|
|||
|
|
height: 358rpx;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view-image-text {
|
|||
|
|
display: flex;
|
|||
|
|
height: 189rpx;
|
|||
|
|
justify-content: left;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #ffffff;
|
|||
|
|
z-index: 1;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-radius {
|
|||
|
|
height: 120rpx;
|
|||
|
|
width: 120rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ID {
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666666;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: white;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 56px;
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 24px;
|
|||
|
|
border-bottom: 1px solid #eef0f3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-name {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 24px;
|
|||
|
|
margin: 0 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-container {
|
|||
|
|
padding-top: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hasname {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quit-main {
|
|||
|
|
margin-top: 36px;
|
|||
|
|
margin-left: 25px;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
background-color: white;
|
|||
|
|
width: 85%;
|
|||
|
|
height: 46px;
|
|||
|
|
border: 1px solid #5856d5;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quit-main-text {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 13px;
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #5856d5;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.one {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.one .api {
|
|||
|
|
margin-right: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.aside-right {
|
|||
|
|
float: right;
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #999999;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
text-align: right;
|
|||
|
|
line-height: 56px;
|
|||
|
|
padding-right: 36px;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.listimage {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-mask {
|
|||
|
|
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-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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-main {
|
|||
|
|
width: 100vw;
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 20px 20px;
|
|||
|
|
height: 400rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-main {
|
|||
|
|
width: 100vw;
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 20px 20px;
|
|||
|
|
height: 450rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-main-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #000000;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 36px;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-main-header button {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #5856d5;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 28px;
|
|||
|
|
width: auto !important;
|
|||
|
|
background: transparent;
|
|||
|
|
margin: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-main-input {
|
|||
|
|
background: #f4f5f9;
|
|||
|
|
padding: 14px 20px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999999;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.del {
|
|||
|
|
color: #dd524d;
|
|||
|
|
}
|
|||
|
|
</style>
|