dou_fire/pages/user/salesmanCode.vue

<template>
	<view class="code" :style="'background-image: url(' + require('@/static/code/back.png') + ')'">
		<image class="code-back code-logo" src="@/static/code/logo.png" mode="widthFix"></image>
		<image class="code-back code-heder" src="@/static/code/header.png" mode="widthFix"></image>
		<view class="block">
			<view class="qrcode" :style="'background-image: url(' + require('@/static/code/code.png') + ')'">
				<view class="qrcode-column">
					<l-painter class="qrcode-src">
						<l-painter-qrcode
							:text="'https://app.douhuofalv.com?invite_code=' + invite"
							css="width: 250rpx; height: 250rpx;"
						/>
					</l-painter>
					<view class="qrcode-text" @click="copyInvite">邀请码{{invite}}</view>
				</view>
			</view>
			<image class="btn" src="@/static/code/btn.png" mode="widthFix" @click="onWx"></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: "1300rpx",
						background: "#1F25AE",
						position: "relative"
					},
					views: [
						{
							type: "image",
							src: require('@/static/code/back.png'),
							css: {
								width: "600rpx",
								height: "1300rpx",
							}
						},{
							type: "image",
							src: require('@/static/code/logo.png'),
							css: {
								width: "200rpx",
								height: "55rpx",
								position: "absolute",
								top: "80rpx",
								left: "50rpx",
								zIndex: 1
							}
						},{
							type: "image",
							src: require('@/static/code/header.png'),
							css: {
								width: "400rpx",
								height: "160rpx",
								position: "absolute",
								top: "200rpx",
								left: "100rpx",
								zIndex: 1
							}
						},{
							type: "image",
							src: require('@/static/code/code.png'),
							css: {
								width: "360rpx",
								height: "325rpx",
								position: "absolute",
								top: "440rpx",
								left: "120rpx",
								zIndex: 1
							}
						}, {
							type: "view",
							css: {
								height: '325rpx',
								width: '360rpx',
								position: "absolute",
								top: "440rpx",
								left: "120rpx",
							},
							views: [
								{
									text: "https://app.douhuofalv.com?invite_code=" + this.invite,
									type: "qrcode",
									css: {
										width: "220rpx",
										height: "220rpx",
										background: "#FFF",
										marginLeft: "70rpx",
										marginTop: "40rpx"
									},
								},{
									type: "text",
									text: "邀请码" + this.invite,
									css: {
										width: "300rpx",
										marginLeft: "30rpx",
										marginTop: "10rpx",
										lineClamp: "1",
										lineHeight: "40rpx",
										textAlign: "center",
										color: "gray",
										fontSize: "28rpx"
									},
								}
							]
						}
					]
				});
				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;
		position: relative;
		height: 100vh;
		background-position: center bottom;
		background-size: cover;
		padding: 50rpx;
		box-sizing: border-box;
		.code-back{
			&.code-logo{
				width: 240rpx;
			}
			&.code-heder{
				width: 90%;
				margin: 40rpx 5%;
			}
		}
		.block{
			text-align: center;
			.qrcode{
				display: inline-block;
				width: 70%;
				padding-top: 63%;
				position: relative;
				background-size: cover;
				margin-bottom: 30rpx;
				.qrcode-column{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.qrcode-src{
						width: 250rpx;
						height: 250rpx;
						margin-top: 20rpx;
					}
					.qrcode-text{
						margin-top: 20rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						width: 100%;
						text-align: center;
						color: gray;
					}
				}
			}
			.btn{
				width: 70%;
			}
		}
	}
</style>