im/pages/profile/index/index.vue

<template>
	<view class="user_page">
		<view class="uni-white-bg">
			<view class="self_info_row"></view>

			<view class="info_card">
				<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="64" />

				<view class="id_row">
					<text class="nickname">{{ selfInfo.nickname }}</text>
					<view class="id_row_copy" @click="copy">
						<text class="id">{{ selfInfo.userID }}</text>
						<image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
					</view>
				</view>

				<view class="qr" @click="toSelfQr">
					<img src="static/images/self_info_qr.png" alt="" />
					<img src="static/images/common_right.png" alt="" />
				</view>
			</view>
		</view>
		<uni-list style="margin: 20rpx auto;width: 100%;">
			<uni-list-item title="我的信息" thumb="/static/images/profile_menu_info.png" to="/pages/profile/selfInfo/index" clickable showArrow ></uni-list-item>
			<uni-list-item title="账号设置" thumb="/static/images/profile_menu_account.png" to="/pages/profile/messageNotification/index" clickable showArrow ></uni-list-item>
			<uni-list-item title="关于我们" thumb="/static/images/profile_menu_about.png" to="/pages/profile/accountSetting/index" clickable showArrow ></uni-list-item>
		</uni-list>
		<uni-list>
			<uni-list-item title="退出登录" thumb="/static/images/profile_menu_logout.png" @click="logout" clickable showArrow ></uni-list-item>
		</uni-list>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import IMSDK from "openim-uniapp-polyfill";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import util from "@/util";
	export default {
		components: {
			MyAvatar,
		},
		data() {
			return {
				profileMenus: [
					{
						idx: 4,
						title: "退出登录",
						icon: require("static/images/profile_menu_logout.png"),
					},
				],
			};
		},
		computed: {
			selfInfo() {
				return this.$store.getters.storeSelfInfo;
			},
		},
		methods: {
			...util,
			copy() {
				console.log(this.selfInfo)
				uni.setClipboardData({
					showToast: false,
					data: this.selfInfo.userID,
					success: function() {
						uni.showToast({
							icon: "none",
							title: "复制成功",
						});
					},
				});
			},
			logoutConfirm() {
				IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid()).then(() => {
					uni.removeStorage({
						key: "IMToken",
					});
					uni.removeStorage({
						key: "BusinessToken",
					});
				}).catch((err) => {
					console.log(err)
				}).finally(() => {
					uni.$u.route("/pages/login/index");
				});
			},
			
			logout(){
				
				uni.showModal({
					title: "提示",
					content: "确定要退出当前账号吗？",
					confirmText: "确认",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							this.logoutConfirm();
						}
					},
				});
			},
			toSelfQr() {
				uni.navigateTo({
					url: `/pages/common/userOrGroupQrCode`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/uni-scss/index.scss';
	.user_page {
		background-color: #ececec;

		.self_info_row {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			height: 276rpx;
			//background-image: url("@/static/images/profile_top_bg.png");
			background-repeat: round;
		}

		.info_card {
			width: 640rpx;
			height: 196rpx;
			border-radius: 6px;
			background: #fff;
			margin: -120rpx auto 0 auto;
			padding: 0 36rpx;
			color: #0c1c33;
			display: flex;
			align-items: center;

			.id_row {
				@include vCenterBox();
				display: flex;
				//height: 46px;
				margin-left: 16rpx;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				flex: 1;
				font-size: 28rpx;

				&_copy {
					@include vCenterBox();
				}

				.nickname {
					@include nomalEllipsis();
					max-width: 400rpx;
					font-weight: 500;
					font-size: 34rpx;
				}

				.id {
					color: #8e9ab0;
				}
			}

			img {
				width: 18px;
				height: 18px;
			}
		}

	}
</style>