im/pages/user/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="" />
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
		</view>
		 <!-- 会员 -->
		<template v-if="config.role_buy_open == '1'">
			<view v-if="selfInfo.role_id==2" class="vipbar" @click="goto('/pages/user/vip/vip')">
				<image src="/static/images/user/member_crown.png" mode="widthFix" alt="" />
				<text>会员到期时间:{{selfInfo.expire_at}}</text>
				<u-button>我的权益</u-button>
			</view>
			<view v-else class="vipbar" @click="goto('/pages/user/vip/vip')">
				<image src="/static/images/user/member_crown.png" mode="widthFix" alt="" />
				<text>开通会员立享特权</text>
				<u-button>开通</u-button>
			</view>
		</template>
		<uni-list style="margin: 20rpx auto;width: 100%;">
			<uni-list-item title="我的信息" thumb="/static/images/profile_menu_info.png" to="/pages/user/selfInfo/index" clickable showArrow ></uni-list-item>
			<uni-list-item title="账号设置" thumb="/static/images/profile_menu_account.png" to="/pages/user/accountSetting/index" clickable showArrow ></uni-list-item>
			<uni-list-item title="关于我们" thumb="/static/images/profile_menu_about.png" to="/pages/user/about/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";
	import { mapGetters } from "vuex";
	export default {
		components: {
			MyAvatar,
		},
		computed:{
			...mapGetters(["config"]),
			selfInfo() {
				return this.$store.getters.storeSelfInfo || {expire_at:0};
			},
		},
		data() {
			return {
				profileMenus: [
					{
						idx: 4,
						title: "退出登录",
						icon: require("static/images/profile_menu_logout.png"),
					},
				],
			};
		},
		methods: {
			...util,
			copy() {
				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",
					});
					IMSDK.asyncApi(IMSDK.IMMethods.UnInitSDK,IMSDK.uuid());
				}).catch((err) => {
					console.log(err)
				}).finally(() => {
					uni.$u.route("/pages/common/login/index");
				});
			},
			
			logout(){
				
				uni.showModal({
					title: "提示",
					content: "确定要退出当前账号吗？",
					confirmText: "确认",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							this.logoutConfirm();
						}
					},
				});
			},
			toSelfQr() {
				const info = util.aesencode({
					code	:	this.selfInfo.userID,
					showName:	`${this.selfInfo.nickname}`,
					faceURL	:	this.selfInfo.faceURL,
					type	:	"user"
				});
				
				const url = `/pages/common/userOrGroupQrCode?sourceInfo=${info}`;
				uni.navigateTo({
					url: url,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/uni-scss/index.scss';
	.user_page {
		background-color: #ececec;
		.vipbar{
			background: #0c1c33;
			color: #FFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin: 20rpx 20rpx 0 20rpx;
			padding: 20rpx 20rpx;
			gap: 10rpx;
			uni-image{
				width: 50rpx;
				height: 50rpx;
			}
			uni-text{
				flex: 1;
				color: #f00;
				font-size: 36rpx;
			}
			.u-button{
				font-size: 32rpx;
				background-color: $uni-color-success;
				border-color: $uni-color-success;
				color: #FFF;
				padding: 0;
				height: 2em;
				width: 6em;
			}
		}

		.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: 400;
					font-size: 34rpx;
					margin-bottom: 20rpx;
				}

				.id {
					color: #8e9ab0;
				}
			}
			.qr{
				display: flex;
				align-items: center;
			}
			img {
				width: 18px;
				height: 18px;
			}
		}

	}
</style>