heshanApp/pages_im/pages/common/userCardMore/index.vue

<template>
	<view class="user_more_container">
		<custom-nav-bar title="好友设置" />
        <view class="row_wrap">
			<view class="info_row">
				<user-info-row-item v-if="isFriend" @click="toMark" lable="设置备注" arrow />
				<user-info-row-item @click="toMore" lable="个人资料" arrow />
				<user-info-row-item @click="toShare" lable="推荐给朋友" arrow />
			</view>
			
			<view class="info_row">
				<user-info-row-item lable="加入黑名单" arrow>
					<u-switch asyncChange :loading="blackLoading" size="20" :value="isBlacked" @change="change"></u-switch>
				</user-info-row-item>
			</view>
			
			<view v-if="isFriend" class="info_row">
				<u-button @click="() => (showConfirm = true)" type="error" plain text="解除好友关系"></u-button>
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal
				:content="`确定要解除与${sourceInfo.nickname}的好友关系吗？`"
				asyncClose
				:show="showConfirm"
				showCancelButton
				@confirm="confirmRemove"
				@cancel="() => (showConfirm = false)"
			></u-modal>
		</view>
	
	</view>
</template>

<script>
import IMSDK from 'openim-uniapp-polyfill';
import CustomNavBar from '../../../components/CustomNavBar/index.vue';
import UserInfoRowItem from '../userCard/components/UserInfoRowItem.vue';
import { ContactChooseTypes } from '../../../constant';
export default {
	components: {
		CustomNavBar,
		UserInfoRowItem
	},
	data() {
		return {
			blackLoading: false,
			sourceInfo: {},
			showConfirm: false
		};
	},
	computed: {
		isFriend() {
			return this.$store.getters.storeFriendList.findIndex((friend) => friend.userID === this.sourceInfo.userID) !== -1;
		},
		isBlacked() {
			return this.$store.getters.storeBlackList.findIndex((black) => black.userID === this.sourceInfo.userID) !== -1;
		}
	},
	onLoad(options) {
		const { sourceInfo } = options;
		this.sourceInfo = JSON.parse(sourceInfo);
	},
	methods: {
		change(isBlack) {
			this.blackLoading = true;
			if (isBlack) {
				IMSDK.asyncApi(IMSDK.IMMethods.AddBlack, IMSDK.uuid(), {
					toUserID: this.sourceInfo.userID,
					ex: ''
				}).catch(() => this.showToast('操作失败'))
				.finally(() => (this.blackLoading = false));
				return;
			}
			IMSDK.asyncApi(IMSDK.IMMethods.RemoveBlack, IMSDK.uuid(), this.sourceInfo.userID)
				.catch(() => this.showToast('操作失败'))
				.finally(() => (this.blackLoading = false));
		},
		confirmRemove() {
			IMSDK.asyncApi(IMSDK.IMMethods.DeleteFriend, IMSDK.uuid(), this.sourceInfo.userID)
				.then(() => this.showToast('操作成功'))
				.catch(() => this.showToast('操作失败'))
				.finally(() => (this.showConfirm = false));
		},
		toMore() {
			let sourceInfo=JSON.stringify(this.sourceInfo);
			uni.navigateTo({
				url: `/pages_im/pages/common/detailsFileds/index?sourceInfo=${sourceInfo}`
			});
		},
		toMark() {
			const friendInfo = this.$store.getters.storeFriendList.find((friend) => friend.userID === this.sourceInfo.userID);
			uni.navigateTo({
				url: `/pages_im/pages/common/markOrIDPage/index?isRemark=true&sourceInfo=${JSON.stringify(friendInfo)}`
			});
		},
		toShare() {
			uni.navigateTo({
				url: `/pages_im/pages/common/contactChoose/index?type=${ContactChooseTypes.ShareCard}&cardInfo=${JSON.stringify(this.sourceInfo)}`
			});
		},
		showToast(message) {
			this.$refs.uToast.show({
				message
			});
		}
	}
};
</script>

<style lang="scss">
.user_more_container {
	@include colBox(false);
	height: 100vh;
	background-color: #f6f6f6;
	.row_wrap {
		flex: 1;
	    overflow-y: auto;
	}
	.info_row {
		background-color: #fff;
		margin: 24rpx;
		border-radius: 6px;
		overflow: hidden;

		.u-button {
			border: none;
		}
	}
}
</style>