im/pages/common/userCard/index.vue

<template>
	<view class="user_card_container">
		<u-loading-page :loading="isLoading" loading-text="loading..."></u-loading-page>
		<custom-nav-bar title="" @rightClick="toMoreInfo" more v-if="isFriend" />
		<custom-nav-bar title="" v-else />

		<view v-if="!isLoading" style="flex: 1;display: flex;flex-direction: column;">
			<view class="base_info">
				<my-avatar :desc="sourceUserInfo.remark || sourceUserInfo.nickname" :src="sourceUserInfo.faceURL || sourceUserInfo.avatar"
					size="46" />
				<view class="user_name">
					<text class="text">{{ getShowName }}</text>
					<text class="id" @click="copy(sourceUserInfo.userID || sourceUserInfo.id)">{{sourceUserInfo.userID || sourceUserInfo.id}}</text>
				</view>
			</view>
			<view class="info_row">
				<user-info-row-item lable="性别" :content="getGender" />
				<user-info-row-item lable="生日" :content="getBirth" />
				<user-info-row-item lable="个性签名" :content="sourceUserInfo.bio" />
			</view>
			
			<view class="info_row">
				<user-info-row-item v-if="isFriend" @click="toMoreInfo" lable="更多信息" arrow />
				<user-info-row-item v-if="1==1" @click="gotoCircle" lable="朋友圈" arrow />
			</view>
			
			<view class="action_row" v-if="!isSelf">
				<u-button type="primary" icon="chat" text="发消息" @click="toDesignatedConversation" v-if="isFriend"></u-button>
				<u-button type="primary" icon="man-add" text="添加" @click="toAddFriend" v-else></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import {navigateToDesignatedConversation} from "@/util/imCommon";
	import IMSDK, {SessionType,} from "openim-uniapp-polyfill";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import CustomNavBar from "@/components/CustomNavBar/index.vue";
	import UserInfoRowItem from "./components/UserInfoRowItem.vue";
	import {businessSearchUserInfo} from "@/api/login";
	import dayjs from "dayjs";
	import util from "@/util/index.js"

	export default {
		components: {
			CustomNavBar,
			MyAvatar,
			UserInfoRowItem,
		},
		data() {
			return {
				isLoading: false,
				sourceID: "",
				sourceUserInfo: {},
				switchLoading: false,
				showSetRole: false,
			};
		},
		computed: {
			...mapGetters([
				"storeFriendList",
				"storeSelfInfo",
			]),
			getGender() {
				if (this.sourceUserInfo.sex === 0) {
					return "保密";
				}
				if (this.sourceUserInfo.sex === 1) {
					return "男";
				}
				return "女";
			},
			getBirth() {
				const birth = this.sourceUserInfo.birthday ?? 0;
				return dayjs(birth).format("YYYY-MM-DD");
			},
			isFriend() {
				return (
					this.storeFriendList.findIndex(
						(friend) => friend.userID === this.sourceID,
					) !== -1
				);
			},
			trySendRequest() {
				return !this.isFriend && !this.isSelf
			},
			isSelf() {
				return this.sourceID === this.storeSelfInfo.userID;
			},
			getShowName() {
				let suffix = "";
				if (this.sourceUserInfo.remark) {
					suffix = `(${this.sourceUserInfo.remark})`;
				}
				return this.sourceUserInfo.nickname + suffix;
			},
		},
		onLoad(options) {
			const {
				sourceID,
				sourceInfo
			} = options;
			if (sourceID) {
				this.sourceID = sourceID;
			} else {
				const info = util.aesdecode(sourceInfo);
				this.sourceID = info.userID;
			}
			this.getSourceUserInfo();
		},
		methods: {
			copy(userID) {
				uni.setClipboardData({
					showToast: false,
					data: userID,
					success: function() {
						uni.showToast({
							icon: "none",
							title: "复制成功",
						});
					},
				});
			},
			async getSourceUserInfo() {
				let info = {};
				const friendInfo = this.storeFriendList.find((item) => item.userID === this.sourceID);
				if (friendInfo) {
					info = {
						...friendInfo
					};
					console.log(info);
				} else {
					const {
						data
					} = await IMSDK.asyncApi(
						IMSDK.IMMethods.GetUsersInfo,
						IMSDK.uuid(),
						[this.sourceID],
					);
					info = {
						...(data[0] ?? {})
					};
					console.log(info);
				}
				this.isLoading = true
				try {
					const res = await businessSearchUserInfo(this.sourceID);console.log(res);
					if (res.total > 0) {
						info = {
							...info,
							...res.data[0],
						};
					}
				} catch (e) {
					info = {};
				}
				this.isLoading = false
				console.log(info);
				this.sourceUserInfo = {
					...info,
				};
			},
			toAddFriend() {
				uni.$u.route("/pages/common/sendAddRequest/index", {
					isGroup: false,
					sourceID: this.sourceID,
					isScan: false,
					notNeedVerification: false,
				});
			},
			gotoCircle(){
				console.log('gotoCircle');
				return ;
				uni.navigateTo({
					url:"/pages/find/friend-circle/friend-circle?userId="+this.sourceID
				})
			},
			toDesignatedConversation() {
				navigateToDesignatedConversation(
					this.sourceID,
					SessionType.Single,
					false,
				).catch(() => uni.$u.toast("获取会话信息失败"));
			},
			toMoreInfo() {
				const s = util.aesencode(this.sourceUserInfo);
				uni.navigateTo({
					url: `/pages/common/userCardMore/index?sourceInfo=${s}`,
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.user_card_container {
		@include colBox(false);
		height: 100vh;
		background-color: #f6f6f6;
		overflow-y: auto;
		position: relative;

		.base_info {
			@include vCenterBox();
			background-color: #fff;
			padding: 44rpx;
			margin-bottom: 18rpx;


			.u-avatar {
				margin-right: 24rpx;
			}

			.user_name {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 46px;

				.text {
					@include nomalEllipsis();
					max-width: 300rpx;
				}
			}

			.company {
				font-size: 28rpx;
				color: $u-primary;
			}
		}

		.info_row {
			background-color: #fff;
			margin-bottom: 24rpx;
		}

		.mute_right {
			display: flex;
			align-items: center;
		}

		.company_row {
			padding: 20rpx 0;

			.desc_title {
				padding-left: 44rpx;
			}

			::v-deep.title {
				width: 200rpx;
				color: #999 !important;
			}
		}

		.action_row {
			@include vCenterBox();
			align-items: flex-end;
			justify-content: space-around;
			margin: 44rpx;
			flex: 1;

		}

		.id {
			font-size: 24rpx;
			color: #999;
		}

		.online_state {
			@include vCenterBox();
			margin-left: 24rpx;
			font-size: 24rpx;
			color: #999;

			.dot {
				background-color: #10cc64;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			.online_str {
				@include nomalEllipsis();
				max-width: 280rpx;
			}
		}
	}
</style>