分享图片

<template>
    <view class="layout" :style="'height:' + scrollHeight+'px'">
        <image class="bg mt50 u-margin-left-55" src="../../../static/images/Combined-Shape@2x.png" mode=""></image>
        <view class="invitation-code flex flex-column-center">
            <view class="invitation-title">
                <text>邀请码</text>
            </view>
            <view class="flex mt20">
                <text class="mr10">{{inviteCode}}</text>
                <view class="copy-btn" @click="copyCode">
                    <text class="pl20">复制</text>
                </view>
            </view>
            <view class="mt20">
                <text>您的注册手机号码可以作为邀请码</text>
            </view>
            <view class="two-bar-codes">
                <image :src="imgUrl"></image>
            </view>
            <view class="scan">
                <text>微信扫一扫</text>
            </view>
        </view>
        <view class="more-share flex flex-column-center">
            
            <text class="u-margin-top-55 more">更多分享方式</text>
            <view class="we-chat flex flex-column-center u-margin-top-70">
                <button open-type="share">分享</button>
                <image src="../../../static/images/weixin@2x.png" mode=""></image>
                <text class="u-margin-top-20">微信好友</text>
            </view>
        </view>

    </view>
</template>

<script>
    import Https from '../../../api/http.js'
    export default {
        data() {
            return {
                imgUrl: '',
                inviteCode: '',
                shareInfo:{},
                scrollHeight:''
            }
        },
        onLoad() {
            this.shareFriend()
        },
        onShareAppMessage() {
            return {
                title: this.shareInfo.title,
                imageUrl: this.imgUrl,
            }
        },
        created() {
            this.scrollHeight =uni.getSystemInfoSync().windowHeight
        },
        methods: {
            async shareFriend() {
                let res = await Https.shareFriend()
                // console.log(res)
                this.shareInfo= res.data
                this.imgUrl = res.data.share_qr_code
                this.inviteCode = res.data.invite_code
            },
            copyCode() {
                uni.setClipboardData({
                    data: this.inviteCode,
                    success(res) {
                        uni.getClipboardData({
                            success(res) {}
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../assets/css/common.scss";
    @import "../../../assets/css/base.css";

    .layout {
        background: linear-gradient(#70a2e6, #4760a1);

        .bg {
            width: 640upx;
            height: 800upx;
        }

        .invitation-code {
            position: absolute;
            top: 90upx;
            left: 160upx;

            .copy-btn {
                width: 100upx;
                height: 40upx;
                border: 1px solid #979797;
                color: #979797;
                border-radius: 5px;
                background-color: #F2F2F2;
            }

            .invitation-title {
                font-size: $theme-f36;
            }

            .two-bar-codes {
                image {
                    width: 450upx;
                    height: 450upx;
                    margin-top: 65upx;
                }
            }

            .scan {
                font-size: $theme-f30;
            }
        }

        .more-share {

            button {
                position: absolute;
                opacity: 0;
                z-index: 1;
            }

            color: #a7b6d6;

            .more {
                font-size: $theme-f30;
            }

            .we-chat {

                image {
                    width: 80upx;
                    height: 80upx;
                }

                text {
                    font-size: $theme-f26;
                }
            }
        }


    }
</style>