<template>
	<view class="park" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="park-navbar">
			<u-navbar title="招募服务商" :border-bottom="false" :background="background"></u-navbar>
		</view>
		<view class="recruit-title">
			全国服务商招募令
		</view>
		<view class="recruit-img" :style="{backgroundImage:`url(${recruitBackgroundImage})`}">
			· 一次邀请 持续收益 ·
		</view>
		<view class="extension-img" :style="{backgroundImage:`url(${extensionBackgroundImage})`}">
		</view>
		<view class="recruit-explain">
			<view class="recruit-tips" style="border: none;">
				<image :src="$picUrl+'/static/shangjia/recruit_1.png'" style="height: 48rpx;" mode=""></image>
				<text>零门槛，无需任何成本投入</text>
			</view>
			<view class="recruit-tips">
				<image :src="$picUrl+'/static/shangjia/recruit_2.png'" style="height: 48rpx;" mode=""></image>
				<text>易操作，一键分享，只需动动手指，邀请商家</text>
			</view>
			<view class="recruit-tips">
				<image :src="$picUrl+'/static/shangjia/recruit_3.png'" style="height: 48rpx;" mode=""></image>
				<text>永久收益，受邀者每次交易，邀请人都有服务佣金</text>
			</view>
			<view class="recruit-tips">
				<image :src="$picUrl+'/static/shangjia/recruit_4.png'" style="height: 48rpx;" mode=""></image>
				<text>无上限，邀请人数越多，收益越高，上不封顶</text>
			</view>
			<view class="recruit-tips">
				<image :src="$picUrl+'/static/shangjia/recruit_5.png'" style="height: 48rpx;" mode=""></image>
				<text>秒到账，收益实时查看，提成即时到账</text>
			</view>
		</view>
		<view class="recruit-explain" style="padding-bottom: 24rpx;">
			<view class="invite-num">
				<image :src="$picUrl+'/static/shangjia/invite_1.png'" style="height: 48rpx;" mode=""></image>
				<image :src="$picUrl+'/static/shangjia/invite_to.png'" style="height: 48rpx;" mode=""></image>
				<image :src="$picUrl+'/static/shangjia/invite_2.png'" style="height: 48rpx;" mode=""></image>
				<image :src="$picUrl+'/static/shangjia/invite_to.png'" style="height: 48rpx;" mode=""></image>
				<image :src="$picUrl+'/static/shangjia/invite_3.png'" style="height: 48rpx;" mode=""></image>
				<image :src="$picUrl+'/static/shangjia/invite_to.png'" style="height: 48rpx;" mode=""></image>
				<image :src="$picUrl+'/static/shangjia/invite_4.png'" style="height: 48rpx;" mode=""></image>
			</view>
			<view class="invite-name">
				<view class="invite-box">
					<view class="title">
						发送注册邀请
					</view>
					<view class="tips">
						邀请人
					</view>
				</view>
				<view class="invite-box">
					<view class="title">
						注册账号
					</view>
					<view class="tips">
						被邀请人
					</view>
				</view>
				<view class="invite-box">
					<view class="title">
						下单购物
					</view>
					<view class="tips">
						被邀请人
					</view>
				</view>
				<view class="invite-box">
					<view class="title">
						永久得奖励
					</view>
					<view class="tips">
						邀请人
					</view>
				</view>
			</view>
		</view>
		<view class="recruit-explain" style="padding:5rpx 16rpx 40rpx 16rpx;">
			<view class="active">
				<image :src="$picUrl+'/static/shangjia/invite_left.png'" style="height: 23rpx;" mode=""></image>
				<view class="title">
					活动规则
				</view>
				<image :src="$picUrl+'/static/shangjia/invite_right.png'" style="height: 23rpx;" mode=""></image>
			</view>
			<view class="contents" v-html="activity_rules"></view>
			<view class="agreement">
				<u-checkbox active-color="#08CC57" size="25" v-model="isCheckout" style="margin-right: -20rpx"></u-checkbox>
				我已阅读并同意<text @click="openPage(2)">《服务商共富计划推广协议》</text>
			</view>
		</view>
		<view class="recruit-explain" style="padding:5rpx 16rpx 40rpx 16rpx;">
			<view class="active">
				<image :src="$picUrl+'/static/shangjia/invite_left.png'" style="height: 23rpx;" mode=""></image>
				<view class="title">
					成功故事
				</view>
				<image :src="$picUrl+'/static/shangjia/invite_right.png'" style="height: 23rpx;" mode=""></image>
			</view>
			<view class="story">
				<scroll-view class="tabs" scroll-x>
					<view class="story-box" v-for="(a,i) in storysList" :key="i" @click="previewImage(a.image_url)">
						<image :src="a.image_url" style="height: 160rpx;" mode="aspectFill"></image>
						<view class="content">
							{{a.successful}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="invite-popup" v-if="isPopup">
			<view class="popup">
				<image class="bg" mode="heightFix" show-menu-by-longpress :src="qrcode1"></image>
				<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',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		<view class="park-button" @click="openPage(3)">
			立即邀请
		</view>
		<view class="button-fixed" @click="openPage(4)">邀<br>请<br>规<br>则
		</view>
		<view class="button-fixed" @click="openPage(1)" style="top: 470rpx;">邀<br>请<br>记<br>录
		</view>
		<view v-if="userInfo.user_type!=30" class="button-fixed" @click="openPage(5)" style="top: 630rpx;">
			立<br>即<br>升<br>级
		</view>
		<addShuiyin />
	</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 {
				background: {
					background: 'none'
				},
				indexBackgroundImage: 'https://www.amiami.com.cn/static/shangjia/recruit_bg.png?t=1',
				recruitBackgroundImage: 'https://www.amiami.com.cn/static/shangjia/recruit_name.png?t=1',
				extensionBackgroundImage: 'https://www.amiami.com.cn/static/shangjia/recruit_extension.png?t=1',
				qrcode1: "",
				qrcode: "",
				userInfo: {},
				backgroundBg: {
					"background": "rgba(255,255,255,0.22)"
				},
				backgroundBg1: {
					"background-color": "transparent"
				},
				isPopup: false,
				info: {},
				info1: {},
				list: [],
				devicePixelRatio: 750 / uni.getSystemInfoSync().windowHeight,
				activity_rules: '',
				storysList: [],
				isCheckout: false,
			}
		},
		onLoad(options) {},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo");
		},
		onReady() {
			this.getCarousel()
			this.getCarouselList()
		},
		methods: {
			previewImage(image_url) {
				// 调用预览图片API
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: [image_url] // 需要预览的图片URL列表
				});
			},
			getCarouselList() {
				const app = this;
				Api.getAgreement({
						type: 'activity_rules'
					})
					.then(result => {
						let content = result.data.detail.content;
						if (content) {
							content = content.replace(/style=""/g, '').replace(/<img src=/g,
								'<img style="width: 100%; display:block" src=')
						}
						this.activity_rules = content
					})
					.finally(() => app.isLoading = false)
			},
			getCarousel() {
				const app = this;
				app.list = []
				Api.storyList()
					.then(result => {
						this.storysList = result.data.list.data
						console.log(this.storysList)
					})
					.finally(() => app.isLoading = false)
			},
			convertIdeogramToNormalCharacter(val) {
				const arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
			createImge() {
				const that = this;
				ctx.fillRect(0, 0, 702 / that.devicePixelRatio, 1248 / that.devicePixelRatio);
				uni.downloadFile({
					url: 'https://www.amiami.com.cn/static/news1/business.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)
										that.qrcode1 = res.tempFilePath;
										that.isPopup = true;
										ctx.clearRect(0, 0, 702, 1248);
										// uni.saveImageToPhotosAlbum({
										// 	filePath: res.tempFilePath,
										// 	success(data) {
										// 		that.$success('保存成功')
										// 	},
										// 	fail(err) {
										// 		if (err.errMsg ===
										// 			'saveImageToPhotosAlbum:fail auth deny'
										// 		) {
										// 			that.$toast(
										// 				'请允许访问相册后重试 (右上角菜单 - 设置 - 相册)',
										// 				3000)
										// 		}
										// 	}
										// })
									}
								})

							},
						})

					}
				})


			},
			//生成海报
			async InviteUserPoster() {
				const {
					status,
					data
				} = await newFunApi.InviteUserPoster({});
				if (status == 200) {
					console.log(data)
					this.qrcode = data.imageUrl;
					this.createImge();
				}
			},
			download(type) {
				const app = this
				app.isPopup = false;
				if (type == 1) {
					return;
				} else {
					uni.showLoading({
						title: '加载中'
					})
					app.onSaveImage(app.qrcode1)
					// 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
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success(data) {
						app.$success('保存成功')
					},
					fail(err) {
						if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
						}
					}
				})
				// #endif
				// #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 getList1() {
				const {
					status,
					data
				} = await newFunApi.inviteStatistics({});
				if (status == 200) {
					this.info1 = data;
				}
			},
			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/invite/rule?type=1"
					})
				} else if (index == 3) {
					if (!this.isCheckout) {
						uni.showToast({
							title: "请阅读服务商共富计划推广协议",
							icon: 'none'
						})
						return
					}
					if (!this.qrcode1) {
						this.InviteUserPoster();
					} else {
						this.isPopup = true;
					}
				} else if (index == 4) {
					uni.navigateTo({
						url: "/pages/invite/rule?type=2"
					})
				} else if (index == 5) {
					uni.navigateTo({
						url: "/pages/invite/upgrade"
					})

				}
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.park {
		overflow: hidden;
		width: 100%;
		background-size: 100% auto;
		min-height: 100vh;
		padding-bottom: 68rpx;
		background-size: cover;

		.invite-popup {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			position: fixed;
			left: 0;
			top: 0;
			z-index: 55;

			.popup {
				display: flex;
				justify-content: center;
				/* 水平居中 */
				width: 672rpx;
				height: 912rpx;
				position: absolute;
				left: 50%;
				margin-left: -336rpx;
				top: 50%;
				margin-top: -556rpx;
				z-index: 2;

				.bg {
					width: 672rpx;
					height: 100%;
					border-radius: 26rpx;
				}

				.qrcode {
					width: 200rpx;
					height: 200rpx;
					position: absolute;
					right: 25rpx;
					top: 670rpx;
					border: 8rpx solid #FFFFFF;
					z-index: 2;
					border-radius: 5rpx;
				}

				.tips {
					width: 672rpx;
					height: 80rpx;
					position: absolute;
					text-align: center;
					font-size: 30rpx;
					line-height: 80rpx;
					color: #212121;
					left: 50%;
					margin-left: -336rpx;
					bottom: -120rpx;
					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;
				}
			}

		}

		.button-fixed {
			width: 44rpx;
			padding: 10rpx 0;
			background: #E01B1B;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			position: fixed;
			top: 310rpx;
			right: 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			text-align: center;
		}

		.recruit-title {
			padding-top: 24rpx;
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 72rpx;
			color: #EB1CDD;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.story {
			overflow: hidden;
			padding: 5rpx 16rpx 0 16rpx;

			.tabs {
				overflow: hidden;
				margin-top: 16rpx;
				width: 100%;
				align-items: center;
				white-space: nowrap;
				overflow-x: auto;
				overflow-y: hidden;
				display: flex;

				.story-box {
					display: inline-block;
					width: 272rpx;
					overflow: hidden;
					margin-right: 24rpx;

					image {
						display: block;
						margin: 0 auto;
						width: 100%;
						height: 160rpx;
						border-radius: 16rpx;
					}

					.content {
						margin-top: 16rpx;
						max-width: 272rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						overflow: hidden;
						/* 确保内容超出容器时会被隐藏 */
						display: -webkit-box;
						/* 作为弹性伸缩盒子模型显示 */
						-webkit-line-clamp: 3;
						/* 限制在两行 */
						-webkit-box-orient: vertical;
						/* 垂直排列盒子 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						white-space: normal;
						/* 使用正常的白空格处理方式，允许换行 */
					}
				}
			}
		}

		.active {
			padding: 24rpx 0;
			width: 100%;
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 229rpx;
				height: 23rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
				line-height: 10rpx;
				font-style: normal;
				text-transform: none;
				margin: 0 16rpx;
			}
		}

		.contents {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			line-height: 46rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 16rpx 16rpx 0 16rpx;
		}

		.invite-num {
			overflow: hidden;
			padding: 24rpx 42rpx 16rpx 42rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 48rpx;
				height: 48rpx;
				margin: 0 19rpx;
			}
		}

		.invite-name {
			display: flex;
			justify-content: space-between;
			overflow: hidden;
			padding: 0 14rpx;

			.invite-box {
				width: 30%;
				overflow: hidden;

				.title {
					width: 100%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-bottom: 8rpx;
				}

				.tips {
					width: 100%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		.recruit-img {
			width: 500rpx;
			background-repeat: no-repeat;
			background-size: cover;
			height: 144rpx;
			margin: 0 auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 178rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.recruit-tips {
			display: flex;
			align-items: center;
			height: 80rpx;
			line-height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin: 0 16rpx;
			border-top: 2rpx solid #F5F5F5;

			image {
				margin-right: 24rpx;
				width: 48rpx;
				height: 48rpx;
			}

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

		.recruit-explain {
			overflow: hidden;
			background: #fff;
			border-radius: 16rpx;
			margin: 40rpx 32rpx 24rpx 32rpx;
		}

		.extension-img {
			width: 415rpx;
			background-repeat: no-repeat;
			background-size: cover;
			height: 52rpx;
			margin: 16rpx auto 0 auto;
		}

		.park-button {
			width: 686rpx;
			height: 88rpx;
			background: #D9E8FF;
			border-radius: 44rpx;
			margin: 32rpx auto 0 auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #002280;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.agreement {
			font-size: 24rpx;
			font-weight: 400;
			color: #999;
			margin-top: 16rpx;

			text {
				color: #333;
			}

			::v-deep .u-checkbox__icon-wrap--square {
				border-radius: 50% !important;
				width: 17px !important;
				height: 17px !important;
			}
		}
	}
</style>
