im/pages/common/userOrGroupQrCode.vue

<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="source.faceURL" :desc="source.showName" size="64" />
				<view class="id_row">
					<text class="nickname">{{ source.showName }}</text>
					<view class="id_row_copy" @click="copy(source.code)">
						<text class="id">{{ source.code }}</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 @click="save" 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";
	import { mapGetters } from "vuex";
	import md5 from "md5";
	export default {
		mixins:[UserBase],
		components: {
			MyAvatar,
		},
		data() {
			return {
				qrcodeUrl:"",
				qrcode_src:"",
				source:{
					type:"user",
					showName:"",
					faceURL:"",
					code:"",
				}
			}
		},
		computed:{
			...mapGetters(["storeFriendList","storeGroupList","config"]),
		},
		onLoad(opt) {
			if(opt.sourceInfo){
				this.source = JSON.parse(opt.sourceInfo);
			}else{
				this.source = {
					type:"user",
					showName:"",
					faceURL:"",
					code:"",
				};
			}
			console.log(this.config);
			if(this.source.type == "user"){
				this.qrcodeUrl = `${this.config.website}/u/${this.source.code}`;
			}else{
				this.qrcodeUrl = `${this.config.website}/g/${this.source.code}`;
			}
			console.log(this.qrcodeUrl);
			this.createQrcode();
		},
		methods: {
			...util,
			save(){
				const _this = this;
				uni.saveImageToPhotosAlbum({
					filePath:_this.qrcode_src,
					success() {
						util.success("保存成功");
					},
					fail(e) {
						console.log(e);
						util.error("保存失败");
					}
				})
			},
			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: `${this.qrcodeUrl}`, // 生成内容
						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;
		border-radius: 6px;
		background: #fff;
		margin: 0 auto 0 auto;
		padding: 40rpx 36rpx;
		color: #0c1c33;
		display: flex;
		align-items: center;

		.id_row {
			display: flex;
			margin-left: 16rpx;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-around;
			height: 100%;
			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>