hire-wx-houxuanren/pagesD/my-fapiao.vue

<template>
	<view class="web_box">
		<u-navbar title="邀请好友" leftIconColor="#000" :safeAreaInsetTop='true' :placeholder='true'>
			<view class="navbar-left" slot="left">
				<view class="u-flex">
					<u-icon name="arrow-left" size="20" @click='return1'></u-icon>
					<u-icon name="list" @click="showmenu = !showmenu" size="18"></u-icon>
				</view>
				<view class="navbar-popup" v-if="showmenu">
					<view class="popup-item u-flex" @click="tochangeimg('hxr')">
						<text>候选人</text>
					</view>
					<view class="popup-item u-flex" @click="tochangeimg('hr')">
						<text>HR</text>
					</view>
					<view class="popup-item u-flex" @click="tochangeimg('lt')">
						<text>猎头</text>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="vflex acenter jcenter top">
			<view class="title">邀请好友加入内核</view>
			<view class="subtitle">你与好友均可获得超值奖励</view>
		</view>
		<view class="box vflex acenter">
			<image src="../static/images/logo.png" mode="" class="logo"></image>
			<view class="title">内核招聘</view>
			<view class="subtitle">邀请你注册内核招聘，完成注册可获得超值奖励</view>
			<image :src="invite_img" mode="" class="code-img"></image>
			<view class="code-text vflex acenter">
				<view class="hflex acenter jcenter">
					<view class="text">邀请码</view>
					<view class="text">{{data.invitation_code}}</view>
				</view>
				<view class="copy" @click="copy">复制邀请码</view>
			</view>
		</view>
		<view class="bottom hflex acenter jbetween">
			<view class="save" @click="setimg">保存图片</view>
			<button class="invite" open-type="share">马上邀请好友</button>
		</view>
		<view class="list hflex acenter jcenter" @click="tolist">
			<view>已邀请<span style="color: #0C66C2;">{{num || 0}}</span>人</view>
			<u-icon name="arrow-rightward" color="rgba(68,68,68,.4)" size="14"></u-icon>
		</view>
		<view class="" style="height: 40rpx;"></view>
		<canvas-drawer ref="poster" :width="646" :height="842"></canvas-drawer>
	</view>
</template>

<script>
	import CanvasDrawer from "@/components/xinyu-canvas-drawer/index.vue";
	import {
		index,
		invite_list
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				code: '',
				num: 0,
				list: [],
				money: 0,
				data: {},
				isCanvasLoading: false,
				src: '',
				invite_img: '',
				invite_type: 'hxr',
				showmenu: false
			};
		},
		components: {
			CanvasDrawer
		},
		onLoad() {
			this.getuser()
			this.getlist()
		},
		onShareAppMessage() {
			return {
				path: '',
				// imageUrl: this.data.invitation_code,
				title: '内核招聘'
			}
		},
		async mounted() {

		},
		methods: {
			return1() {
				uni.navigateBack()
			},
			tochangeimg(type) {
				if (type == 'hxr') {
					this.$set(this, 'invite_img', this.data.invitation_code_url)
				} else if (type == 'hr') {
					this.$set(this, 'invite_img', this.data.invitation_code_url_hr)
				} else if (type == 'lt') {
					this.$set(this, 'invite_img', this.data.invitation_code_url_headhunter)
				}
				this.showmenu = false
			},

			// aaa() {
			// 	res.data //	接口返回数据
			// 	res.data.forEach(item => {
			// 		province.forEach(a => {
			// 			if (item.areaBelongsProvince == a.value) {
			// 				item.city = a.label
			// 			}
			// 		})
			// 		this.list.push(item)  //需要渲染的列表
			// 	})
			// }



			getuser() {
				index().then((res) => {
					// this.code = res.data.invitation_code
					this.data = res.data
					// this.money = res.data.statistic_data.invite_commission
					this.invite_img = res.data.invitation_code_url
				})
			},
			getlist() {
				invite_list({
					page: 1
				}).then((res) => {
					this.list = res.data.data
					this.num = res.data.total
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.code,
					success: function() {
						this.$u.toasta('复制成功')
					}
				})
			},
			async setimg() {
				let posterRef = this.$refs.poster;
				uni.showLoading({
					title: "渲染海报中"
				});
				await posterRef.init();
				this.src = await posterRef
					.setBackgroundColor("#fff") //指定渲染图片的背景色
					// .addRect(0, 0, 750, 198, "#FEFEFE") //绘制矩形
					.addImage(require("@/static/images/logo.png"), 268, 48, 107,
						107) //绘制圆图片，如果不绘制圆图片最后一个参数可以不传或传false，当最后一个参数为true时圆形的直径为w，h参数将没有意义
					// .addQRCode(, 585, 22, 130, 130) //绘制二维码（不要太长否则会扫不出来）
					.addText("内核招聘", 252, 208, 36, "#222222") //绘制文本
					.addText("邀请你注册内核招聘，完成注册可获得超值奖励", 92, 282, 22, "#555555") //绘制文本	
					.addImage(this.invite_img, 218, 370, 210, 210) //绘制云端图片时第一个参数直接传云端图片地址即可，不需要require。注意不要跨域
					.addRect(50, 646, 546, 112, "#F3F3F3")
					.addText("邀请码", 150, 678, 36, "#222222")
					.addText("|", 306, 678, 36, "#E0E0E0")
					.addText(this.data.invitation_code, 354, 678, 36, "#222222")
					.draw();
				this.isCanvasLoading = true;
				this.save()
				uni.hideLoading();
				this.$forceUpdate();
			},
			save() {
				if (!this.isCanvasLoading)
					return this.$u.toast("稍安勿躁，图片还没有加载完哦~");
				let posterRef = this.$refs.poster;
				posterRef.saveImageToPhotosAlbum(this.src).then(() => {
					uni.showModal({
						title: '提示',
						content: '保存成功',
						success(res) {
							if (res.confirm) {
								// return recv();
							} else if (res.cancel) {
								// return recj();
							}
						}
					});
				}).catch((e) => {
					uni.showModal({
						title: '提示',
						content: '保存失败',
						success(res) {
							if (res.confirm) {
								// return recv();
							} else if (res.cancel) {
								// return recj();
							}
						}
					});
				});
			},
			tolist() {
				uni.navigateTo({
					url: '/pagesD/invite-list?money=' + this.money
				})
			},
		}
	}
</script>

<style lang="scss">
	.navbar-left {
		position: relative;
		z-index: 100;

		.navbar-popup {
			position: absolute;
			width: 224rpx;
			top: 50rpx;
			left: -32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			padding: 15rpx 0;

			.popup-item {
				padding: 15rpx 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

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

		.navbar-popup::after {
			content: " ";
			border-bottom: 20rpx solid #fff;
			border-right: 20rpx solid rgba(0, 0, 0, 0);
			border-left: 20rpx solid rgba(0, 0, 0, 0);
			position: absolute;
			top: -20rpx;
			left: 30rpx;
		}
	}

	.web_box {
		background: #FAFAFC;
		padding: 0 52rpx;

		.top {
			padding: 54rpx 0;

			.title {
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #141414;
			}

			.subtitle {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #444444;
				padding: 16rpx 0 0;
			}
		}

		.box {
			width: 646rpx;
			height: 872rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 68rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			position: relative;

			.logo {
				width: 107rpx;
				height: 107rpx;
				margin: 0 auto;
				z-index: 9;
			}

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

			.subtitle {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #555555;
				padding: 0 0 56rpx;
			}

			.code-img {
				width: 210rpx;
				height: 210rpx;
				margin-bottom: 66rpx;
			}

			.code-text {
				width: 546rpx;
				background: #F3F3F3;
				border-radius: 20rpx;
				padding: 32rpx 0;

				.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;
				}
			}
		}

		.box::before {
			content: "";
			position: absolute;
			width: 110rpx;
			height: 110rpx;
			background: #fff;
			top: -40rpx;
			left: 268rpx;
			border-radius: 50%;
		}

		.bottom {
			padding: 28rpx 0 60rpx;

			.save {
				width: 244rpx;
				height: 112rpx;
				background: #E7E7E7;
				border-radius: 56rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding: 0;
				line-height: 112rpx;
				text-align: center;
			}

			.invite {
				width: 364rpx;
				height: 112rpx;
				background: #0C66C2;
				border-radius: 56rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding: 0;
				line-height: 112rpx;
			}
		}

		.list {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 0.6);
			padding: 0 12rpx 0 0;
		}
	}
</style>