dtx_store/pages/invitation/invitation.vue

<template>
	<view class="invitation">
		<view class="invitation-refund">
			<view class="invitation-refund-btn" @click="onBack">
				<uni-icons type="back" color="white" size="24"></uni-icons>
			</view>
		</view>
		<image class="invitation-back" src="@/static/img/code_back.png" mode="aspectFill"></image>
		<view class="invitation-content">
			<view class="invitation-lay">
				<image class="invitation-code" :src="code"></image>
				<view class="invitation-text">
					<view class="invitation-text-code" @click="copyInvite"><text>{{invite}}</text>点击复制</view>
					<view class="invitation-text-sub">扫码下载共力生态App</view>
					<view class="invitation-text-sub">邀请好友增加共力分增长</view>
				</view>
			</view>
			<button class="invitation-btn" @click="onShare">分享邀请</button>
		</view>
		<!-- 分享 -->
		<uni-popup ref="popupShare" type="share" background-color="#fff">
			<uni-popup-share title="分享到" @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import { invitationCode } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				invite: '',
				code  : '',
			};
		},
		created() {
			invitationCode().then(res => {
				this.invite = res[0].invite
				this.code = res[0].code
			})
		},
		methods: {
			// 返回
			onBack(){
				this.$Router.back()
			},
			// 复制邀请码
			copyInvite(){
				uni.setClipboardData({
					data: this.invite,
					success() {
						uni.showToast({
							title: '邀请码已复制',
							icon : 'none'
						})
					}
				})
			},
			// 分享
			onShare(){
				this.$refs.popupShare.open();
			},
			// 分享选项
			select(e){
				switch(e.item.name){
					case 'wxchum':
						uni.share({
							provider: 'weixin',
							scene	: 'WXSceneSession',
							type 	: 0,
							href	: 'https://invite.gongli.vip?invitation_code=' + this.invite,
							title	: '共力生态',
							summary	: '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
							imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
							fail(err) {
								uni.showToast({
									title: err.errMsg,
									icon : 'none'
								})
							}
						})
						break;
					case 'wxcircle':
						uni.share({
							provider: 'weixin',
							scene	: 'WXSceneTimeline',
							type 	: 0,
							href	: 'https://invite.gongli.vip?invitation_code=' + this.invite,
							summary	: '共商 共建 共享 共赢 带您进入Web 3.0！推动全体成员共同富裕',
							imageUrl: 'https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/11/3b7e6e330f465ecbf136d15def1039fd.jpg',
							fail(err) {
								uni.showToast({
									title: err.errMsg,
									icon : 'none'
								})
							}
						})
						break;
					case 'qq':
						uni.showToast({
							title: 'qq好友分享近期开放，敬请期待',
							icon : 'none'
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	.invitation{
		position: relative;
		background: #1c2472;
		min-height: 100vh;
		.invitation-refund{
			@extend .ios-top;
			position: absolute;
			top: 30rpx;
			left: $margin*2;
			z-index: 9;
			.invitation-refund-btn{
				border-radius: 50%;
				line-height: 58rpx;
				width: 58rpx;
				height: 58rpx;
				text-align: center;
				font-weight: bold;
				background: rgba(0, 0, 0, .5);
			}
		}
		.invitation-back{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	.invitation-content{
		padding: $padding*2;
		position: absolute;
		bottom: 5vh;
		width: 100%;
		box-sizing: border-box;
		.invitation-lay{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background: rgba(0, 0, 0, .5);
			border-radius: $radius;
			padding: $padding;
			margin-bottom: $margin;
			color: white;
			.invitation-code{
				width: 168rpx;
				height: 168rpx;
				background: white;
			}
			.invitation-text{
				width: calc(100% - 198rpx);
				.invitation-text-code{
					font-size: 26rpx;
					line-height: 50rpx;
					text{
						font-weight: bold;
						font-size: 40rpx;
						margin-right: 10rpx;
						text-decoration: underline;
					}
				}
				.invitation-text-sub{
					font-size: 26rpx;
					line-height: 50rpx;
				}
			}
		}
		.invitation-btn{
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: bold;
			background: linear-gradient(to top left, #5a0399, #5a0399);
			color: white;
			&::after{
				display: none;
			}
		}
	}
</style>