yanzong_qianduan/pages/invite/index.vue

<template>
	<view class="invite">
		<view class="invite-notice">
			<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar>
		</view>
		<view class="invite-hd">
			<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> -->
			<view class="btn" @click="openPage(3)">
			</view>
			<view class="rule" @click="openPage(4)"></view>
		</view>
		<view class="invite-bd">
			<view class="invite-bd-a">
				<view class="a">
					<view class="l">
						累计邀请好友(人）
						<view class="p">{{info.count_people}}</view>
					</view>
					<view class="l" style="border: none;">
						累计现金奖励(元）
						<view class="p">{{info.money}}</view>
					</view>
				</view>
				<view class="b" @click="openPage(1)">
					我的邀请<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="c" @click="openPage(2)">
					立即提现<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="invite-bd-b">
				<image :src="$picUrl+'/static/news/invite-bg2.png'"></image>
				<view class="a">
					<view class="l">
						可得188积分
						<!-- 可得{{info.integral}}积分
						<br />{{info.coupon_name}} -->
					</view>
					<view class="l">
						可返现3-5%
						<!-- 可返现{{info.one_order_rate}}% -->
					</view>
					<view class="l">
						新人首单礼
						<!-- {{info.one_order_rate}}元{{info.coupon_name}} -->
					</view>
				</view>
			</view>
			<view class="invite-bd-c">
				<image :src="$picUrl+'/static/news/invite-bg3.png'"></image>
				<view class="a">
					<view class="l">
						优惠券
						<!-- {{info.one_order_rate}}元{{info.coupon_name}} -->
					</view>
					<view class="l">
						积分
						<!-- {{info.integral}}积分 -->
					</view>
					<view class="l">
						长期返现
						<!-- 首单返{{info.one_order_rate}}% -->
					</view>
				</view>
			</view>
			<!-- <view class="invite-bd-d">
				<image :src="$picUrl+'/static/news/invite-bg4.png'"></image>
				<view class="p" @click="openPage(3)">立即邀请</view>
			</view> -->
		</view>
		<!--  -->
		<view class="invite-popup" v-if="isPopup">
			<view class="popup">
				<image class="bg" show-menu-by-longpress src="https://www.royaum.com.cn/static/3@2x.png"></image>
				<image class="code" show-menu-by-longpress :src="qrcode"></image>
				<view class="qrcode">{{userInfo.user_id}}</view>
				<view class="tips">
					<view class="cancle" @click="download(1)">取消</view>
					<view class="sure"  @click="download(2)">保存到相册</view>
				</view>
			</view>
		</view>
		<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas" :style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px'}" ></canvas>
	</view>
</template>

<script>
	const ctx = uni.createCanvasContext('myCanvas')
	import {
		createQrCodeImg
	} from '@/utils/qrcode'
	import * as newFunApi from '@/api/newFun'
	import * as Api from '@/api/help'
	export default {
		data() {
			return {
				qrcode: "",
				userInfo: {},
				backgroundBg: {
					"background": "rgba(255,255,255,0.22)"
				},
				backgroundBg1: {
					"background-color": "transparent"
				},
				isPopup: false,
				info: {},
				list: [],
				devicePixelRatio: 750/uni.getSystemInfoSync().windowHeight
			}
		},
		onReady() {
			this.getList();
			this.getCarousel()
			console.log(uni.getSystemInfoSync().devicePixelRatio)
		},
		onShow() {
			if (uni.getStorageSync("AccessToken")) {
				this.userInfo = uni.getStorageSync("userInfo");
				// this.qrcode = createQrCodeImg(this.userInfo.user_id, { 'size': 500 });
			} else {
				this.userInfo = {}
				// this.qrcode = ""
			}
		},
		methods: {
			createImge() {
				const that = this;
				
				ctx.fillRect(0, 0, 702/that.devicePixelRatio, 1248/that.devicePixelRatio);
				uni.downloadFile({
					url: 'https://www.royaum.com.cn/static/3@2x.png',
					success(res) {
						ctx.drawImage(res.tempFilePath, 0, 0, 702/that.devicePixelRatio, 1248/that.devicePixelRatio);
						uni.downloadFile({
							url: that.qrcode,
							success: (res2) => {
								ctx.save(); // 保存
								ctx.beginPath(); // 开始绘制
								ctx.arc(162/that.devicePixelRatio / 2 + 285/that.devicePixelRatio, 162/that.devicePixelRatio / 2 + 870/that.devicePixelRatio, 162/that.devicePixelRatio / 2, 0, Math.PI * 2, false);
								ctx.clip();
								ctx.drawImage(res2.tempFilePath, 285/that.devicePixelRatio, 870/that.devicePixelRatio, 162/that.devicePixelRatio, 162/that.devicePixelRatio);
							    // 恢复之前保存的绘图上下文
							    ctx.restore();
								// 邀请码
								ctx.setFontSize(45/that.devicePixelRatio);
								ctx.setFillStyle('#cf100d');
								ctx.fillText(that.userInfo.user_id, 200/that.devicePixelRatio, 1213/that.devicePixelRatio);
								ctx.draw()
								uni.canvasToTempFilePath({
								  width: 702/that.devicePixelRatio,
								  height: 1248/that.devicePixelRatio,
								  destWidth: 702/that.devicePixelRatio,
								  destHeight: 1248/that.devicePixelRatio,
								  canvasId: 'myCanvas',
								  success: function(res) {
									// 在H5平台下，tempFilePath 为 base64
									console.log(res.tempFilePath)
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success(data) {
											that.$success('保存成功')
										},
										fail(err) {
											if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
												that.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
											}
										}
									})
								  } 
								})
								
							},
						})

					}
				})

				
			},
			// 获取预售规则
			getCarousel() {
				const app = this;
				app.list = []
				Api.getAgreement({
						type: 'invite_notice'
					})
					.then(result => {
						if (result.data.detail && result.data.detail.content) {
							app.list.push(this.formatRichText(result.data.detail.content))
						}
					})
					.finally(() => app.isLoading = false)
			},
			formatRichText(value) {
				value = value.replace(/\s*/g, ""); //去掉空格
				value = value.replace(/<[^>]+>/g, ""); //去掉所有的html标记
				value = value.replace(/↵/g, ""); //去掉所有的↵符号
				value = value.replace(/[\r\n]/g, "") //去掉回车换行
				value = value.replace(/&nbsp;/g, "") //去掉空格
				value = this.convertIdeogramToNormalCharacter(value);
				return value
			},
			convertIdeogramToNormalCharacter(val) {
				const arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
			//生成海报
			async InviteUserPoster() {
				const {
					status,
					data
				} = await newFunApi.InviteUserPoster({});
				if (status == 200) {
					console.log(data)
					this.isPopup = true;
					this.qrcode = data.imageUrl
				}
			},
			download(type) {
				const app = this
				app.isPopup = false;
				if(type == 1){
					return ;
				}else{
					uni.showLoading({
						title: '加载中'
					})
					this.createImge();
				}
				return ;
				uni.showLoading({
					title: '加载中'
				})
				// 下载海报图片
				uni.downloadFile({
					url: app.qrcode,
					success(res) {
						console.log(res)
						uni.hideLoading()
						// 图片保存到相册
						app.onSaveImage(res.tempFilePath)
					},
					fail(res) {
						console.log('fail', res)
						uni.hideLoading()
						app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000)
					}
				})
			},
			// 图片保存到相册
			onSaveImage(tempFilePath) {
				const app = this
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success(data) {
						app.$success('保存成功')
					},
					fail(err) {
						if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
						}
					}
				})
				// #ifdef H5
				const names = tempFilePath.split('/')
				const fileName = names[names.length - 1]
				app.fileDownLoadForH5({
					name: fileName,
					blob: tempFilePath
				})
				// #endif
			},

			// 兼容H5端下载图片
			// #ifdef H5
			fileDownLoadForH5({
				name,
				blob
			}) {
				const linkElement = document.createElement('a')
				linkElement.setAttribute('href', blob)
				linkElement.setAttribute('downLoad', name)
				linkElement.click()
			},
			// #endif
			async getList() {
				uni.showLoading({
					title: "加载中"
				})
				const {
					status,
					data
				} = await newFunApi.inviteInit({});
				if (status == 200) {
					uni.hideLoading();
					this.info = data;
					console.log(this.info)
				}
			},
			openPage(index) {
				if (!uni.getStorageSync("AccessToken")) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return;
				}
				if (index == 1) {
					uni.navigateTo({
						url: "/pages/invite/list"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/news/user/withdrawal?balance=" + this.userInfo.withdrawal_money
					})
				} else if (index == 3) {
					this.InviteUserPoster();
				} else if (index == 4) {
					uni.navigateTo({
						url: "/pages/invite/rule"
					})

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.invite {
		background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center -40px no-repeat;
		background-size: 100% auto;
		position: relative;
		overflow: hidden;
		.myCanvas{
			position: absolute;
			left: 0;
			top: -1200rpx;
			z-index: -1;
			opacity: 0;
		}
		&-popup {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			position: fixed;
			left: 0;
			top: 0;
			z-index: 55;

			.popup {
				width: 620rpx;
				height: 1220rpx;
				position: absolute;
				left: 50%;
				margin-left: -310rpx;
				top: 50%;
				margin-top: -635rpx;
				z-index: 2;
				.bg{
					width: 620rpx;
					height: 1102rpx;
				}
				.code {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					position: absolute;
					left: 50%;
					bottom: 305rpx;
					z-index: 2;
					margin-left: -62rpx;
				}

				.qrcode {
					width: 200rpx;
					height: 80rpx;
					position: absolute;
					left: 70px;
					bottom: 115rpx;
					z-index: 2;
					font-size: 45rpx;
					color: #cf100d;
					text-align: center;
				}

				.tips {
					width: 100%;
					height: 80rpx;
					position: absolute;
					text-align: center;
					font-size: 30rpx;
					line-height: 80rpx;
					color: #212121;
					left: 0;
					bottom: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.cancle{
						flex: 1;
						background-color: #FFFFFF;
						margin-right: 30rpx;
						border-radius: 10rpx;
					}
					.sure{
						border-radius: 10rpx;
						flex: 1;
						color: #FFFFFF;
						background-color: #FF4A49;
					}
				}

				.close {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					left: 50%;
					bottom: -150rpx;
					color: #FFFFFF;
					z-index: 2;
				}
			}

		}

		&-notice {
			// background-color: #FF5554;
		}

		&-hd {
			width: 100%;
			text-align: center;
			// background-color: #FF5554;
			height: 436rpx;
			position: relative;

			.rule {
				width: 130rpx;
				height: 50rpx;
				position: absolute;
				right: 0;
				top: 208rpx;
				z-index: 2;
			}

			.btn {
				width: 396rpx;
				height: 88rpx;
				position: absolute;
				left: 50%;
				margin-left: -205rpx;
				bottom: 0rpx;
				z-index: 2;
			}
		}

		&-bd {
			padding: 0 32rpx 60rpx 32rpx;
			// background: linear-gradient(181deg, #FF5F55 0%, #FAC39D 100%);
			overflow: hidden;

			&-a {
				width: 100%;
				height: 366rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-top: 40rpx;

				.a {
					padding: 50rpx 0 30rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;

					.l {
						flex: 1;
						border-right: 1px solid #DDDDDD;
						font-size: 28rpx;
						font-weight: 500;
						color: #414141;

						.p {
							font-size: 54rpx;
							font-weight: 500;
							color: #FF5251;
							margin-top: 20rpx;
						}
					}
				}

				.b {
					width: 396rpx;
					height: 88rpx;
					background: linear-gradient(180deg, #FD5B54 0%, #FFC277 100%);
					border-radius: 106rpx;
					border: 1px solid #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #FFFFFF;
					margin: 0 auto;
				}

				.c {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #FF5251;
					margin-top: 20rpx;
				}
			}

			&-b {
				width: 100%;
				height: 515rpx;
				margin-top: 20rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.a {
					width: 100%;
					bottom: 40rpx;
					padding: 0 25rpx;
					box-sizing: border-box;
					z-index: 1;
					left: 0;
					position: absolute;
					display: flex;
					align-items: center;
					justify-content: center;

					.l {
						flex: 1;
						text-align: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #FF4D4C;
					}
				}
			}

			&-c {
				width: 100%;
				height: 375rpx;
				margin-top: 20rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.a {
					width: 260rpx;
					bottom: -60rpx;
					box-sizing: border-box;
					z-index: 1;
					right: 0;
					position: absolute;
					display: flex;
					flex-wrap: wrap;

					.l {
						width: 130rpx;
						height: 135rpx;
						text-align: center;
						font-size: 22rpx;
						font-weight: 500;
						color: #414141;
					}
				}
			}

			&-d {
				width: 100%;
				height: 108rpx;
				position: relative;
				margin-top: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.p {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					text-align: center;
					line-height: 105rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #FF5251;
				}
			}
		}
	}
</style>