a77/pages/my/invitation/invitation.vue

<template>
	<view class="container index">
		<view class="top">
			<view class="" @click="back">
				<image src="/static/2.png" mode="widthFix" style="width: 40rpx;margin-top: 30rpx;"></image>
			</view>
			<view class="">

			</view>
			<view class="" @click="href('/pages/my/invitation/details')" style="color: #fff;">
				邀请规则
			</view>
		</view>
		<view class="" style="width: 170rpx;margin: 100rpx auto;text-align: center;font-weight: bold;">
			<image src="/static/logo.png" mode="widthFix" style="width: 170rpx;color: #fff;"></image>
			<view class="">
				鲑鱼数藏
			</view>
		</view>

		<!-- 	<view class="">
			<image :src="img" mode=""></image>
		</view> -->

		<!-- 中间 -->
		<view class="">
			<view class="center_first"
				style="background: #1D1F1E;width: 686rpx;height: 264rpx;margin: auto;border-radius: 24rpx;">
				<xinyu-canvas-drawer ref="poster" :width="250" :height="264">
					<template v-slot="{src}">
						<!-- #ifdef APP-PLUS -->
						<image :src="src" style="width: 250rpx;height: 264rpx;"></image>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<img :src="src" style="width: 250rpx;height: 264rpx;"></img>
						<!-- #endif -->
					</template>
				</xinyu-canvas-drawer>
				<!-- <image :src="img" mode="" style="width: 250rpx;height: 250rpx"></image>	 -->

				<view class="" style="margin:-250rpx 0 0 250rpx;">
					<view class="" style="font-size: 24rpx;">
						我的邀请码
					</view>
					<view class="" style="font-size: 36rpx;margin-top: 16rpx;font-weight: bold;">
						{{invite_code}}
					</view>

					<view @click="href('/pages/my/invitation/inv1')" class=""
						style=" border-radius: 8rpx;margin-top: 40rpx;
background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);width: 220rpx;height: 68rpx;color: #fff;font-size: 28rpx;text-align: center;line-height: 68rpx;">
						立即邀请
					</view>
				</view>

			</view>

			<view class="bot">
				<view class="bottom">
					<view class="top1">
						<view class="">
						</view>
						<view class="">
							<!-- 邀请记录 -->
						</view>
						<view class="">
						</view>
					</view>
					<view class="num">
						邀请记录 <text
							style="font-weight: normal;font-size: 24rpx;color: #666;">（我已邀请{{team_list.length}}人）</text>
					</view>

					<view class="people">
						<view class="top2">
							<view class="">
								编号
							</view>
							<view class="">
								用户手机
							</view>
							<view class="">
								邀请结果
							</view>
						</view>
						<scroll-view scroll-y="true" style="height: 40vh;">
							<view class="bot1" v-for="(item,index) in team_list" :key="index">
								<view class="">
									<text v-if="index<9">0</text> {{index+1}}
								</view>
								<view class="">
									{{item.phone}}
								</view>
								<view class="" v-if="item.is_cert ==1" style="color: #2cbf6e;">
									已认证
								</view>
								<view class="" v-else style="color: #999;">
									未认证
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="down">
					<!--  -->
					<view class="">
						<view class="" @click="copy(link)">
							<!-- <view class="" style="margin-top: 10rpx;">
								<image src="/static/my/049.png" mode="widthFix"
									style="width: 32rpx;margin-right: 16px;"></image>
							</view> -->
							<view class="">
								复制链接
							</view>
						</view>

						<view class="">
						</view>

						<!-- #ifdef H5 -->
						<view class="" @click="save(1)">
							<!-- <view class="">
								<image src="/static/my/050.png" mode="widthFix"
									style="width: 32rpx;margin-right: 16px;"></image>
							</view> -->
							<view class="">
								保存图片
							</view>
						</view>
						<!-- #endif -->


						<!-- #ifdef APP-PLUS -->
						<view class="" @click="save(2)">
							<!-- <view class="" style="margin-top: 10rpx;">
								<image src="/static/my/050.png" mode="widthFix"
									style="width: 32rpx;margin-right: 16px;"></image>
							</view> -->
							<view class="">
								保存图片
							</view>
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navHeader from "@/components/my/nav_header.vue"
	import XinyuCanvasDrawer from "@/components/xinyu-canvas-drawer/index.vue";
	import aQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
	export default {
		components: {
			navHeader,
			aQrcode,
			XinyuCanvasDrawer
		},
		data() {
			return {
				show: true, //切换页面状态
				team_list: [],
				link: "", //跳转路径
				img: '', //海报地址
				coderich: "",
				posterRef: "",
				invite_code: '',
				userinfo: {},
				page: 0,
				showinv: false
			}
		},

		onLoad(e) {
			// uni.showLoading({
			// 	title: '海报加载中',
			// })
			this.api.get_user_info()
			this.userinfo = uni.getStorageSync('user_info')
			//获取其他路径过来的图片
			
			//获取团队列表
			this.get_team()
			this.link = uni.baseUrl + '#/pages/login/register?code=' + uni.getStorageSync("user_info")
				.invite_code


			this.invite_code = uni.getStorageSync("user_info").invite_code

		},
		onReady() {
			this.initcavas()
		},
		methods: {
			close() {
				this.showinv = false
			},
			//复制
			copy(val) {
				this.$api.setclip(val)
			},
			async initcavas() {
				var that = this;

				this.posterRef = this.$refs.poster;
				uni.showLoading({
					title: "渲染海报中"
				});

				// let fontFaceSet = document.fonts;
				var img = await this.posterRef
					.addQRCode(that.link, 20, 30, 200, 200)
					.draw();
				// console.log(img)
				this.posterRef = this.$refs.poster;
				uni.hideLoading();
			},


			save(val) {
				if (val == 1) {
					uni.showToast({
						title: "请长按二维码保存保存",
						icon: 'none'
					})
				} else {
					this.posterRef.saveImageToPhotosAlbum();
					uni.showToast({
						title: "已保存到相册"
					})
				}


			},
			complete(e, refName) {
				if (e.success) {
					console.log(refName + '生成成功');
				} else {
					console.log(refName + '生成失败');
				}
			},
			poster() {
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') {
					this.$api.pop("请长按电源键 + 音量上键")
					console.log('我是iOS')
				} else if (platform == 'android') {
					this.$api.pop("请长按电源键 + 音量下键")
					console.log('我是安卓')
				}
			},
			lower() {
				this.get_team()
			},
			get_team() {
				this.api.team(10, ++this.page).then(res => {

					res.data.data.forEach(ele => {
						this.team_list.push({
							nickname: ele.nickname,
							phone: ele.phone,
							is_cert: ele.is_cert,
							headimg: ele.headimg,
							create_at: ele.create_at,
							level: ele.level
						})
					})
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.index {
		box-sizing: border-box;
		position: relative;
	}

	.top {
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		color: #000;
		font-size: 32rpx;
		line-height: 90rpx;
		width: 680rpx;
		z-index: 999;
		text-align: center;
	}

	.center_first {
		position: relative;
	}

	.center {
		position: absolute;
		color: #000;
		top: 95%;
		left: 42.5%;
		z-index: 999;
	}

	.bot {
		width: 750rpx;

		.bottom {
			background: #1D1F1E;
			width: 686rpx;
			margin: 32rpx auto;
			border-radius: 32rpx;

			.bsn {
				width: 348rpx;
				margin: 32rpx auto;
			}

			.top1 {
				display: flex;
				color: #FFEC01;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;

				>view:first-child,
				>view:last-child {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin: 0 15rpx;
				}
			}

			.num {
				color: #fff;
				text-align: center;
				font-size: 32rpx;
				margin-top: ;
				border-bottom: 1px solid #333;
				width: 590rpx;
				margin: 46rpx auto 0;
				padding-bottom: 20rpx;
				font-weight: bold;
			}

			.people {
				width: 690rpx;
				height: 622rpx;
				margin: 20rpx auto 0;
				border-radius: 24rpx;
				font-size: 28rpx;

				.top2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 88rpx;
					border-radius: 24rpx 24rpx 0 0;
					padding: 0 42rpx 0 70rpx;
				}

				.bot1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 12rpx 70rpx 32rpx 84rpx;
				}

			}

		}

		.bsn {
			width: 348rpx;
			margin: 32rpx auto 48rpx;
		}

		.down {
			width: 645rpx;
			height: 96rpx;
			// background: linear-gradient(to right, #47372A, #0E0B08);
			margin: 0 auto 86rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000;
			font-size: 28rpx;
			background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);
			border-radius: 24rpx;

			>view {
				// border: 1px solid #937D63;
				width: 500rpx;
				height: 108rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// padding: 0 32rpx;

				>view {
					display: flex;
					// flex-direction: column;
					align-items: center;
				}

				>view:nth-child(2) {
					border-left: 1px solid #fff;
					height: 40rpx;
				}
			}
		}


	}

	.invint {
		width: 670rpx;
		height: 1028rpx;
		margin: auto;
	}
</style>