dou_fire/pages/user/code.vue

<template>
	<view class="code">
		<image class="code-back main-back" src="@/static/code/code_back.png" mode="widthFix"></image>
		<image class="code-back header-back" src="@/static/code/code_header.png" mode="widthFix"></image>
		<image class="code-back img-lay" src="@/static/code/code_img_lay.png" mode="widthFix"></image>
		<view class="code-content">
			<view class="header">
				<image class="sign" src="@/static/code/code_sign.png" mode="widthFix"></image>
				<image class="logo" src="@/static/code/code_logo.png" mode="widthFix"></image>
			</view>
			<view class="block">
				<view class="qrcode">
					<l-painter class="qrcode-src">
						<l-painter-qrcode
							:text="'https://app.douhuofalv.com/app?invite_code=' + invite"
							css="width: 130px; height: 130px; background-color:white; padding: 10px;  border-radius: 10rpx;"
						/>
					</l-painter>
					<view class="qrcode-text" @click="copyInvite">邀请码{{invite}}</view>
				</view>
				<image class="btn" src="@/static/code/code_btn.png" mode="widthFix" @click="onWx"></image>
			</view>
			<image class="footer" src="@/static/code/code_footer.png" mode="widthFix"></image>
		</view>
		<!-- 绘制二维码 -->
		<l-painter ref="painter" class="code-canvas" />
	</view>
</template>

<script>
	import {
		code
	} from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				invite : '',
				codeLay: false,
				codeImg: ''
			};
		},
		created() {
			code().then(res => {
				let {
					invite
				} = res;
				this.invite = invite
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon: 'none'
				})
			})
		},
		methods: {
			copyInvite() {
				uni.setClipboardData({
					data: this.invite,
					success() {
						uni.showToast({
							title: '邀请码已复制',
							icon: 'none'
						})
					}
				})
			},
			onWx() {
				uni.showLoading({
					title: '保存二维码...',
					mask : true
				})
				if(this.codeImg != ''){
					this.onDowCode()
					return
				}
				this.$refs.painter.render({
					css: {
						width: "600rpx",
						height: "1218rpx",
						background: "#1F25AE",
						position: "relative"
					},
					views: [
						{
							type: "image",
							src: require('@/static/code/code_back.png'),
							css: {
								width: "600rpx",
								height: "679rpx",
								marginTop: "200rpx"
							}
						},{
							type: "image",
							src: require('@/static/code/code_header.png'),
							css: {
								width: "600rpx",
								height: "415rpx",
								position: "absolute",
								top: 0,
								zIndex: 1
							}
						},{
							type: "image",
							src: require('@/static/code/code_img_lay.png'),
							css: {
								width: "200rpx",
								height: "277rpx",
								position: "absolute",
								bottom: 0,
								zIndex: 1
							}
						},{
							type: "image",
							src: require('@/static/code/code_footer.png'),
							css: {
								width: "400rpx",
								height: "84rpx",
								position: "absolute",
								bottom: "50rpx",
								left: "100rpx",
								zIndex: 1
							}
						},{
							type: "image",
							src: require('@/static/code/code_sign.png'),
							css: {
								width: "460rpx",
								height: "164rpx",
								position: "absolute",
								top: "50rpx",
								left: "70rpx",
								zIndex: 1
							}
						},{
							type: "image",
							src: require('@/static/code/code_logo.png'),
							css: {
								width: "160rpx",
								height: "160rpx",
								position: "absolute",
								top: "230rpx",
								left: "220rpx",
								zIndex: 1
							}
						},{
							type: "view",
							css: {
								borderWidth: '1rpx',
								borderColor: '#ffe2c2',
								borderRadius: '20rpx',
								height: '450rpx',
								width: '360rpx',
								position: "absolute",
								top: "450rpx",
								left: "120rpx",
								background: "#0a2763"
							},
							views: [
								{
									text: "https://app.douhuofalv.com/app?invite_code=" + this.invite,
									type: "qrcode",
									css: {
										width: "280rpx",
										height: "280rpx",
										background: "#FFF",
										padding: "20rpx",
										borderRadius: "10rpx",
										marginLeft: "21rpx",
										marginTop: "20rpx"
									},
								},{
									type: "text",
									text: "邀请码" + this.invite,
									css: {
										width: "320rpx",
										marginLeft: "21rpx",
										marginTop: "20rpx",
										lineClamp: "1",
										lineHeight: "80rpx",
										textAlign: "center",
										color: "#ffffeb",
										fontSize: "32rpx"
									},
								}
							]
						}
					]
				});
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					quality: 1,
					success: (res) => {
						this.codeLay = true;
						this.codeImg = res.tempFilePath
						this.onDowCode()
					}
				});
			},
			onDowCode(){
				uni.saveImageToPhotosAlbum({
					filePath: this.codeImg,
					success: ()=>  {
						uni.showToast({
							title: '二维码已保存到您的相册',
							icon : 'none'
						})
					},
					fail: err => {
						uni.showToast({
							title: '保存失败，请检查您的App[访问您的系统相册]系统权限',
							icon : 'none'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.code-canvas{
		position: absolute;
		left: -100%;
		top:  -100%;
	}
	// 二维码
	.code {
		background: #1F25AE;
		height: 100vh;
		position: relative;

		.code-back {
			width: 100%;
			position: absolute
		}

		.main-back {
			top: 20vh;
		}

		.header-back {
			z-index: 1;
		}

		.img-lay {
			width: 30vw;
			bottom: 0;
			left: 0;
			z-index: 1;
		}

		.code-content {
			position: absolute;
			padding: 50rpx;
			z-index: 2;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.header {
				text-align: center;
				width: 100%;

				.sign {
					width: 90%;
					vertical-align: top;
					margin-bottom: 30rpx;
				}

				.logo {
					width: 25vw;
				}
			}

			.block {
				text-align: center;
				margin-bottom: 30rpx;
				width: 100%;
				.qrcode {
					display: inline-block;
					border: solid 2rpx #ECC997;
					background: #0E2660;
					border-radius: 20rpx;
					padding: 30rpx;
					.qrcode-src{
						width: 150px;
						height: 150px;
					}
					.qrcode-text {
						text-align: center;
						color: #FFF5C6;
						line-height: 50rpx;
						padding-top: 30rpx;
						font-size: 30rpx;
					}
				}
				.btn {
					width: 400rpx;
					margin-top: 30rpx;
				}
			}

			.footer {
				width: 70%;
				vertical-align: top;
			}
		}
	}
</style>