yixiang/pageC/invite.vue

<template>
	<view class="content">
		<u-navbar title="邀请好友" @leftClick="leftClick" :bgColor="bgColor" placeholder safeAreaInsetTop></u-navbar>
		<view class="title">邀请好友加入忆象</view>
		<view class="box vflex acenter jcenter">
			<view class="user hflex acenter">
				<image :src="user.avatar" mode="aspectFill"></image>
				<view class="user-right vflex jbetween">
					<text>{{user.username}}</text>
					<text>分享邀请码或者链接给好友</text>
				</view>
			</view>
			<view class="code-text vflex acenter">
				<view class="hflex acenter jcenter">
					<view class="text">邀请码</view>
					<view class="text">{{user.invite_code}}</view>
				</view>
				<view class="copy" @click="copy">复制邀请码</view>
			</view>
			<view class="img-box hflex acenter jcenter">
				<yz-qr :qrPath.sync="qrPath" :text="user.invite_code" :size="200" quality="L" colorDark="#000000"
					colorLight="#ffffff"></yz-qr>
			</view>
		</view>
		<view class="bottom hflex acenter jbetween">
			<button class="save" @click="setimg">保存图片</button>
			<button class="invite" @click="share">邀请好友</button>
		</view>
		<view class="poster-pop" v-if="posterImageStatus">
			<image :src="posterImage"></image>
		</view>
		<view class="mask" v-if="posterImageStatus"></view>
		<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				user: {},
				qrPath: '',
				text: 'hello',
				posterImage: '',
				posterImageStatus: false,
				canvasStatus: false,
				bgColor: 'rgba(0, 0, 0, 0)'
			}
		},
		onLoad() {
			that = this
			this.getuser()
		},
		onPageScroll(e) {
			console.log(e);
			if (e.scrollTop > 0) {
				this.bgColor = 'rgba(255,255,255)'
			} else {
				this.bgColor = 'rgba(0, 0, 0, 0)'
			}
		},
		watch: {
			qrPath(newVal, oldVal) {
				return this.qrPath;
			}
		},
		methods: {
			share() {
				// this.goPoster();
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.qrPath,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			setimg() {
				uni.saveImageToPhotosAlbum({
					filePath: this.qrPath,
					success: function () {
						console.log('save success');
					$api.info('保存成功')
					}
				});
			},
			goPoster() {

			},
			copy() {
				uni.setClipboardData({
					data: this.user.invite_code,
					success: function() {
						this.$u.toasta('复制成功')
					}
				})
			},
			getuser() {
				$api.req({
					url: 'user/info',
				}, function(res) {
					if (res.code == 10000) {
						that.user = res.data
					}
				})
			},
			leftClick() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: url('static/invite_bg.png') no-repeat;
		min-height: 100vh;
		background-size: 100% 100%;
		padding: 42rpx 34rpx;

		.u-navbar--fixed {
			z-index: 999;
		}

		.title {
			width: 100%;
			text-align: center;
			font-size: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #222222;
			padding: 88rpx 0 38rpx;
		}

		.box {
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			width: 100%;
			padding: 48rpx 30rpx;

			.user {
				width: 100%;

				image {
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}

				.user-right {
					padding: 0 0 0 20rpx;
					height: 92rpx;

					text:first-child {
						font-size: 32rpx;
						font-family: SFPro, SFPro;
						font-weight: 500;
						color: #222222;
					}

					text:last-child {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #222222;
					}
				}

			}

			.code-text {
				width: 602rpx;
				background: #F4F4F4;
				border-radius: 12rpx;
				padding: 40rpx 0;
				margin: 36rpx 0 68rpx;

				.text {
					font-size: 36rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #222222;
					padding: 0 48rpx 0 0;
				}

				.text:nth-child(2) {
					padding: 0 0 0 48rpx;
					border-left: 1px solid #E0E0E0;
				}

				.copy {
					padding: 32rpx 0 0;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #0C66C2;
				}

			}

			.img-box {
				width: 526rpx;
				height: 526rpx;
				background: url('static/code_bg.png') no-repeat;
				background-size: 100% 100%;
				margin: 0 0 34rpx;

				image {
					width: 422rpx;
					height: 422rpx;
				}
			}
		}

		.bottom {

			padding: 28rpx 0 60rpx;

			.save {
				width: 296rpx;
				height: 96rpx;
				background: #E3E3E3;
				border-radius: 56rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #444444;
				padding: 0;
				line-height: 96rpx;
			}

			.invite {
				width: 352rpx;
				height: 96rpx;
				background: #00B0B0;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				padding: 0;
				line-height: 96rpx;
			}
		}

		.u-navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}
	}
</style>