6

2025-11-27 03:55:38 +08:00
parent 1626f0c52a
commit 198c3dd4a5
24 changed files with 2043 additions and 201 deletions
@@ -0,0 +1,131 @@
+<template>
+	<view style="display: flex;height: 100vh;align-items: center;flex-direction: column;">
+		<uni-nav-bar 
+			style="width: 100%;"
+			statusBar
+			left-icon="left" 
+			@clickLeft="goto(1)"
+			right-icon="more-filled"  
+			@clickRight="scan"
+			:border="false"
+			backgroundColor="transparent"
+			title=""
+			>
+		</uni-nav-bar>
+		<view style="flex:1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
+			<view class="info_card">
+				<my-avatar :src="userInfo.faceURL" :desc="userInfo.nickname" size="64" />
+				<view class="id_row">
+					<text class="nickname">{{ userInfo.nickname }}</text>
+					<view class="id_row_copy" @click="copy">
+						<text class="id">{{ userInfo.userID }}</text>
+						<image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
+					</view>
+				</view>
+			</view>
+			<canvas canvas-id="qrcode_canvas" id="qrcode_canvas" style="width: 600rpx; height: 600rpx"></canvas>
+			<view style="color: #b4b4b4;">扫一扫上面的二维码图案，加我为朋友</view>
+		</view>
+		<view style="width: 80%;display: flex;align-items: center;justify-content: center;height: 20%;">
+			<u-button type="default" plain :hairline="false" iconColor="#9aa2b2" @click="scan">扫一扫</u-button>
+			<u-button type="default" plain :hairline="false" iconColor="#9aa2b2">换个样式</u-button>
+			<u-button type="default" plain :hairline="false" iconColor="#9aa2b2">保存图片</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import MyAvatar from "@/components/MyAvatar/index.vue";
+	import QRCode  from "@/components/qrcode.js";
+	import UserBase from '@/components/User.vue';
+	import util from "@/util";
+	export default {
+		mixins:[UserBase],
+		components: {
+			MyAvatar,
+		},
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+			console.log(this.userInfo)
+			this.createQrcode();
+		},
+		methods: {
+			...util,
+			createQrcode() {
+				const _this = this;
+				return new Promise((resolve, reject) => {
+					new QRCode({
+						context: _this, // 上下文环境
+						canvasId: 'qrcode_canvas', // canvas-id
+						usingComponents: true, // 是否是自定义组件
+						showLoading: false, // 是否显示loading
+						loadingText: "", // loading文字
+						text: "/pages/common/invite_register?code=", // 生成内容
+						size: 320, // 二维码大小
+						background: "#fff", // 背景色
+						foreground: '#000000', // 前景色
+						pdground: '#000000', // 定位角点颜色
+						correctLevel: 3, // 容错级别
+						image: "", // 二维码图标
+						imageSize: 40, // 二维码图标大小
+						cbResult: function(res) { // 生成二维码的回调
+							//_this.qrcode_src = (res)
+							//resolve(res);
+						},
+					});
+				});
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+		.info_card {
+			width: 600rpx;
+			height: 196rpx;
+			border-radius: 6px;
+			background: #fff;
+			margin: 0 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>