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

<template>
	<view class="web_box">
		<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="" mode="" class="code-img"></image> -->
			<view class="code-text vflex acenter">
				<view class="hflex acenter jcenter">
					<view class="text">邀请码</view>
					<view class="text">{{code}}</view>
				</view>
				<view class="copy" @click="copy">复制邀请码</view>
			</view>
		</view>
		<view class="bottom hflex acenter jbetween">
			<button class="save" @click="save">保存图片</button>
			<button class="invite" @click="invite">马上邀请好友</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="28"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		index,
		invite_list
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				code: '',
				num: 0,
				list: [],
				money: 0,
			};
		},
		onLoad() {
			this.getuser()
			this.getlist()
		},
		methods: {
			getuser() {
				index().then((res) => {
					console.log(res);
					this.code = res.data.invitation_code
					this.money = res.data.money
				})
			},
			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('复制成功')
					}
				})
			},
			save() {

			},
			invite() {},
			tolist() {
				uni.navigateTo({
					url: '/pagesD/invite-list?money=' + this.money
				})
			},
		}
	}
</script>

<style lang="scss">
	.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;
				height: 168rpx;
				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;
			}

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