<template>
	<view class="supplier">
		<image class="supplier-cover" src="@/static/background/supplier_back.png" mode="widthFix"></image>
		<view class="supplier-content">
			<view class="supplier-title">入驻共力生态</view>
			<view class="supplier-sbutitle">共商 | 共建 | 共享 | 共赢</view>
			<view class="supplier-url">邀请码：{{invite}}</view>
			<view class="supplier-hint">前往电脑使用浏览器打开申请入驻</view>
			<view class="supplier-btn" @click="copyInvite">复制链接</view>
			<!-- https://apply.gongli.vip/?invite=XXXXX -->
		</view>
	</view>
</template>

<script>
	import { invitationCode } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				invite: ''
			};
		},
		created() {
			invitationCode().then(res => {
				this.invite = res[0].invite
			})
		},
		methods: {
			// 复制邀请码
			copyInvite(){
				uni.setClipboardData({
					data: 'https://apply.gongli.vip/?invite=' + this.invite,
					success() {
						uni.showToast({
							title: '申请地址已复制',
							icon : 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.supplier{
		@extend .vertical;
		background: #201f48;
		min-height: 100vh;
		color: white;
		.supplier-content{
			padding: $padding * 2;
			text-align: center;
		}
		.supplier-cover{
			width: 100%;
		}
		.supplier-title{
			font-size: 70rpx;
			font-weight: bold;
		}
		.supplier-sbutitle{
			font-size: 34rpx;
			line-height: 50rpx;
		}
		.supplier-url{
			background: rgba(255, 255, 255, .2);
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			margin-top: $margin*2;
		}
		.supplier-hint{
			font-size: 28rpx;
			padding: $padding 0;
			color: rgba(255, 255, 255, .5);
		}
		.supplier-btn{
			margin-top: $margin;
			background: white;
			color: #201f48;
			font-weight: bold;
			font-size: 32rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			&::after{
				display: none;
			}
		}
	}
</style>
