distribution-uni/pages/rebate/rebateShare.vue

<template>
	<view class="content">
		<button open-type="share" class="btn"></button>
		<view class="title" id='arktitle'>邀请注册最高返现50元</view>
		<view class="banner">1、被邀请人需注册成功并缴纳年费后返佣<br>2、根据被邀请人开通服务的时间长短，返现金额不同<br>3、邀请成功后返佣金额自动进入店铺账户，可直接提现</view>
		<view class="bottom">*最终解释权归快衣店所有</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onShareAppMessage(res) {
			return {
				title: '你的好友邀请你注册快衣店！',
				imageUrl:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/3c50b6541b2d4780bab4b3fd0c0af490.jpg',
				path: '/pages/rebate/rebateShare?inviteUserId='+ this.id+'&inviteShopId='+ this.shopId
			}
		},
		onLoad(option) {
			if(option.inviteUserId){ //被邀请进来的，带参数跳注册页 inviteShopId 1739537306278301696 inviteUserId 1739537305905008640
				uni.redirectTo({
					url: "/package2/login/register?inviteUserId=" + option.inviteUserId+'&inviteShopId='+option.inviteShopId
				})
			}else{
				this.shopId = uni.getStorageSync('shopId')
				this.id = uni.getStorageSync('id')
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/352c2490d88b47ac84bf13bfa046abcf.png') no-repeat;
		background-size: cover;
		background-position: center;
		overflow: hidden;
	}

	.title,
	.banner,
	.bottom {
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}

	.title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 48rpx;
		margin-top: 200rpx;
	}

	.banner {
		margin-top: 750rpx;
	}

	.bottom {
		margin-top: 100rpx;
		font-size: 26rpx;
	}

	.btn {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0);
		position: absolute;
		top: 0;
	}

	#arktitle {
		background: linear-gradient(to bottom, #000, blue);
		-webkit-background-clip: text;
		color: transparent;
		animation: blink 2s linear infinite;
		-webkit-animation: blink 2s linear infinite;
		-moz-animation: blink 2s linear infinite;
		-ms-animation: blink 2s linear infinite;
		-o-animation: blink 2s linear infinite;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0.8;
		}
	}

	@-webkit-keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0.8;
		}
	}

	@-moz-keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0.8;
		}
	}

	@-ms-keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0.8;
		}
	}

	@-o-keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0.8;
		}
	}
</style>