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>
			<view id="qrcode_canvas_container" style="width: 600rpx; height: 600rpx">
				<canvas canvas-id="qrcode_canvas" id="qrcode_canvas" style="width: 600rpx; height: 600rpx"></canvas>
			</view>
			<u-gap></u-gap>
			<view style="color: #b4b4b4;">扫一扫上面的二维码图案，加我为朋友</view>
		</view>
		<view style="width: 80%;display: flex;align-items: center;justify-content: center;height: 20%;">
			<u-button @click="scan" type="default" plain :hairline="false" color="#506388" iconColor="#9aa2b2">扫一扫</u-button>
			<u-button @click="createQrcode" type="default" plain :hairline="false" color="#506388" iconColor="#9aa2b2">换个样式</u-button>
			<u-button @click="save" type="default" plain :hairline="false" color="#506388" 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";
	export default {
		mixins:[UserBase],
		components: {
			MyAvatar,
		},
		data() {
			return {
				qrcodeUrl:"",
				qrcode_src:"",
				source:{
					type:"user",
					showName:"",
					faceURL:"",
					code:"",
				},
				qrcodeSize:"360",
				qrcodeStyle:[]
			}
		},
		computed:{
			...mapGetters(["storeFriendList","storeGroupList","config"]),
		},
		watch:{
			qrcodeSize(nv,ov){
				if(nv && this.qrcodeUrl){
					this.createQrcode();
				}
			}
		},
		onLoad(opt) {
			if(opt.sourceInfo){
				this.source = util.aesdecode(opt.sourceInfo);
			}else{
				this.source = {
					type:"user",
					showName:"",
					faceURL:"",
					code:"",
				};
			}
			if(this.source.type == "user"){
				this.qrcodeUrl = `${this.config.website}/u/${this.source.code}`;
			}else{
				this.qrcodeUrl = `${this.config.website}/g/${this.source.code}`;
			}
			this.qrcodeStyle.push({
				background: "#fff", // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 定位角点颜色
				correctLevel: 3, // 容错级别
				image: this.config.app_logo, // 二维码图标
				imageSize: 40, // 二维码图标大小
			});
			this.qrcodeStyle.push({
				background: "#fff", // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 定位角点颜色
				correctLevel: 3, // 容错级别
				image: this.source.faceURL, // 二维码图标
				imageSize: 40, // 二维码图标大小
			});
		},
		mounted() {
			const _this = this;
			uni.createSelectorQuery().in(this).select("#qrcode_canvas_container")
				.boundingClientRect((data) => {
					_this.qrcodeSize = data.width
					
				})
				.exec();
		},
		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;
				const style = this.qrcodeStyle[Math.floor(Math.random() * this.qrcodeStyle.length)];
				style.imageSize = parseInt(this.qrcodeSize * 0.2);
				return new Promise((resolve, reject) => {
					var createFn = (icon)=>{
						console.log(icon)
						new QRCode({
							context: _this, // 上下文环境
							canvasId: 'qrcode_canvas', // canvas-id
							usingComponents: true, // 是否是自定义组件
							showLoading: false, // 是否显示loading
							loadingText: "", // loading文字
							text: `${_this.qrcodeUrl}`, // 生成内容
							size: _this.qrcodeSize, // 二维码大小
							background: style.background, // 背景色
							foreground: style.foreground, // 前景色
							pdground: style.pdground, // 定位角点颜色
							correctLevel: 3, // 容错级别
							image: icon || "", // 二维码图标
							imageSize: style.imageSize || 40, // 二维码图标大小
							cbResult: function(res) { // 生成二维码的回调
								_this.qrcode_src = (res)
								//resolve(res);
							},
						});
					}
					
					if(!style.image){
						createFn();
						return ;
					}
					if(style.image.startsWith("/static/images")){
						createFn(style.image);
						return ;
					}
					if(!style.image.startsWith("http")){
						style.image = util.cdn(style.image);
					}
					util.cacheFile(style.image,'avatar').then(fn=>{
						createFn(fn);
                    });
					return ;
				});
			},
		}
	}
</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>