lipin/pages/users/spread/index.vue

<template>
	<view class="page" :style="{ 'height': setHeight + 'px' }">
		<image src="../../../static/images/spread.png" mode="widthFix" class="image"></image>
		<button class="share" @click='copy'>分享H5 邀请好友</button>
		<view class="qrcode">
			<image :src="qrcode"></image>
		</view>
		<view class="tip">佣金计算方式=好友支付订单包裹数 * 0.05元/单</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {		
		spreadLink
	} from '@/api/api.js';
	import Qr from "@/utils/wxqrcode.js";
	import H5Api from '@/utils/ican-H5Api.js'
	export default {
		data() {
			return {
				link:'',
				qrcode: '',
				setHeight: 0
			}
		},
		computed: mapGetters(['isLogin']),
		mounted() {
		    let that = this
		    uni.getSystemInfo({
				success: function (res) {
					that.setHeight = res.windowHeight
				}
		    })
		},
		onLoad() {
		    if (this.isLogin) {
		    	this.getSpreadLink();				
		    }else{
				toLogin();
			}
		},
		methods: {
			getSpreadLink: function() {
				let that = this;
				spreadLink().then(res => {
					that.link = window.location.protocol+"//"+window.location.host + res.data.url3;
					that.qrcode = Qr.createQrCodeImg(that.link, {typeNumber: 7});
				});
			},
			copy: function() {
				uni.setClipboardData({ 
					data: '我发现一个电商人必备的礼品代发网站，注册网址是 ' + this.link,
					success:function(){
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{background: #fff6d7;}
	.image{
		width:100%;
		vertical-align: bottom;
	}
	.share{
		width:90%;
		margin: 0 auto;
		margin-top: 60rpx;
		line-height: 88rpx;
		border-radius: 60rpx;
		font-size: 32rpx;
		color:#fff;
		background: linear-gradient(rgb(255, 142, 109) 0%, rgb(255, 53, 22) 100%);
	}
	.qrcode{
		width:220rpx;
		height:220rpx;
		background: #fff;
		margin: 0 auto;
		margin-top: 50rpx;
		image{
			width:200rpx;
			height:200rpx;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}
	.tip {
	    color: #983f3f;
	    line-height: 40rpx;
	    margin-top: 30rpx;
	    text-align: center;
	}
</style>