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="'http://web.douhuofalv.com/login/register?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>
	</view>
</template>

<script>
	import { code } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				invite: ''
			};
		},
		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.share({
					title	: "抖火法律",
					provider: "weixin",
					scene	: "WXSceneSession",
					imageUrl: require('@/static/logo.png'),
					href	: "http://web.douhuofalv.com/login/register?invite_code=" + this.invite,
					type	: 0,
					summary: "法律问题我们'抖'懂",
					fail: err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.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>