yizhizan-h5/pages/public/invite/index.vue

<template>
	<view class="container">
		<image src="/static/images/logo-long.png" class="logo"></image>
		<image src="/static/images/invite.png" class="main-img"></image>
		<view class="company-info">
			<view class="name">{{ userName }}</view>
			<view class="company-name">{{ companyName }}</view>
		</view>
		<view class="tip">诚邀您加入亿职赞</view>
		<u-button class="button" shape="circle" :hair-line="false" @click="join">立即加入</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inviteCode: '', // 邀请码
				userName: '', // 用户名
				companyName: '' // 公司名
			};
		},
		onLoad(options) {
			if (options.inviteCode) {
				this.inviteCode = decodeURIComponent(options.inviteCode)
			}
			if (options.userName) {
				this.userName = decodeURIComponent(options.userName)
			}
			if (options.companyName) {
				this.companyName = decodeURIComponent(options.companyName)
			}
		},
		methods: {
			join() {
				// type: 2.手机验证码登录
				// scene: 1.H5邀请
				uni.navigateTo({
					url: `/pages/public/loginphone?type=2&scene=1&inviteCode=${this.inviteCode}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 72rpx 30rpx 0;
	}
	.logo {
		display: block;
		width: 204rpx;
		height: 56rpx;
		margin: 0 auto 92rpx;
	}
	.main-img {
		display: block;
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto 72rpx;
	}
	.company-info {
		width: 670rpx;
		text-align: center;
		margin: 0 auto 72rpx;
		.name {
			font-size: 40rpx;
			font-weight: bold;
			line-height: 52rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		.company-name {
			line-height: 36rpx;
			color: #999999;
		}
	}
	.tip {
		text-align: center;
		margin-bottom: 100rpx;
		font-weight: bold;
		font-size: 48rpx;
	}
	.button {
		width: 686rpx;
		height: 90rpx;
		border-radius: 126px;
		background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
		color: #fff;
		font-size: 32rpx;
	}
</style>