BlockChainH5/pages/user/code.vue

<template>
	<!-- v-if="loaded" -->
	<view class="content">
		<view class="code">
			<swiper class="code-swiper" previous-margin="70rpx" next-margin="70rpx">
				<swiper-item>
					<view class="code-item">
						<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
						<view class="codDate">
						    <view class="codDate-year">
						        2020.09
						    </view>
						    <view class="codDate-day">
						        02
						    </view>
						    <view class="codDate-lunar">
						        农历八月二十
						    </view>
						</view>
						<view class="codeCont">
						    <image class="codeCont-avatar" src="@/static/user/user-portrait.png" mode="aspectFill"></image>
						    <view class="codeCont-text">
						        <view class="codeCont-name">
						            唐明明
						        </view>
						        <view class="codeCont-number">
						            邀请码：
						            <view class="codeBack-number" @click="copyCenter(inviteData.invite)">
						                21321321
						            </view>
						        </view>
						    </view>
						</view>
						<view class="codeImg">
						    <image class="codeImg-code" mode="widthFix"></image>
						    <view class="codeImg-name">长按识别</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="code-item">
						<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="code-item">
						<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="footer">
			<view class="hith">朋友通过你的邀请注册成功后，将与您绑定好友关系通过成为平台用户，你都可以获得能量碎片奖励。</view>
			<view class="number">
				<view class="title">邀请码</view>
				<view class="value">2173978217389729</view>
			</view>
			<view class="button">
				<view class="title" @click="coverCode">生成分享海报</view>
			</view>
		</view>
		<canvas canvas-id="myCanvas"></canvas>
	</view>
</template>

<script>
    import { userInvite } from '@/apis/interfaces/user'
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
	export default {
		data() {
			return {
				inviteData: {} ,//二维码信息
                loaded    : false
			};
		},
        onLoad() {
            // 获取二维码
            // this.inviteInfo()
        },
        methods:{
            // 二维码
            inviteInfo(){
                userInvite().then(res => {
                    this.inviteData = res
                    this.loaded = true
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            },
			
			// 生成海报
			coverCode(){
				let canvas = new Draw({
					width: '375',
					height: '745',
					canvasId: 'myCanvas',
					_this: this,
					background: {
						type: 'color',
						color: '#fffff'
					},
					quality: 1, // 导出图片的质量, 默认1 值范围0~1, 大于一都为1处理
					drawTipsText: '绘制中...'
				})
				// await draw.createdSharePoster(() => {
					
				// 	return textArray
				// })
			},
            
            // 复制邀请码
            copyCenter(e) {
                let copyNo = e
                uni.vibrateShort({
                    success: () => {
                        uni.setClipboardData({
                            data    : copyNo,   
                            success : res=> {
                                uni.showToast({
                                    title   : '复制成功',
                                    icon    :'none',
                                    duration: 3000
                                });
                            }
                        })
                    }
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
	.content{
		background: white;
		padding: $padding 0;
		min-height: 100vh;
		@extend .vertical;
	}
	// 轮播
	.code{
		position: relative;
		width: 100%;
		padding-top: calc(199% - 280rpx - #{$padding * 2});
		.code-swiper{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			.code-item{
				height: 100%;
				width: 100%;
				padding: 0 $padding/2;
				.code-back-image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	// 提示信息
	.footer{
		padding: $padding ($padding*2);
		text-align: center;
		.hith{
			color: $text-gray;
			font-size: $title-size-sm;
		}
		// number
		// title
		// value
		// button
		// title
	}
	
    // 头像昵称
    .codeCont {
        position: absolute;
        left: 0;
        bottom: 140rpx;
        width: 100%;
        bottom: 100rpx;
        left: 0;
        padding: 40rpx;
        box-sizing: border-box;
        z-index: 9;
        .codeCont-avatar {
           width: 100rpx;
           height: 100rpx;
           border-radius: 50%;
           border: 6rpx solid #FFFFFF;
        }
        .codeCont-text {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            padding: 50rpx 40rpx 0 180rpx;
            box-sizing: border-box;
            .codeCont-name {
                color: #FFFFFF;
                font-size: 34rpx;
                margin-bottom: 10rpx;
            }
            .codeCont-number {
                font-size: 28rpx;
                display: flex;
                color: #c4a1cb;
            }
        }
    }
	// 日历
    .codDate {
        position: absolute;
        top: 30rpx;
        right: 70rpx;
        z-index: 9;
        color: #FFFFFF;
        text-align: center;
        font-size: 24rpx;
        border: 2rpx solid #fffefc;
        .codDate-year {
            padding-top: 5rpx;
        }
        .codDate-day {
            padding: 5rpx 0;
            font-size: 32rpx;
            font-weight: 600;
            border-bottom: 2rpx solid #a980c6;
        }
        .codDate-lunar {
            font-size: 24rpx;
            transform: scale(.8);
            padding: 4rpx 0;
        }
    }
</style>