<template>
    <view class="invite">
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="邀请好友"></u-navbar>
        <image class="invite-bg" :src="$apiFilesUrl+'/static/images/my/invite-bg.png'" mode=""></image>
        <view class="invite-c">
            <view class="invite-w">
                <view class='invite-w-t'>我的专属邀请码</view>
                <text class='invite-w-num'>{{code}}</text>
                <view class='invite-w-detail'>快去分享您的邀请码吧，让更多的好友加入到【{{appTitle}}】，您也可以获得丰厚的奖励！</view>
                <view class='invite-w-bot'>
                    <view bindtap='commission' @click="toMoney">
                        <text class="cuIcon-coin text-red" style="font-size: 44rpx;"></text>
                        <text class='invite-w-bot-red'>￥{{money}}元</text>
                        <text class='invite-w-bot-gray'>邀请收益</text>
                    </view>
                    <view bindtap='recommendUserList' @click="toList">
                        <text class="cuIcon-friend text-red" style="font-size: 44rpx;"></text>
                        <text class='invite-w-bot-red'>{{number}}人</text>
                        <text class='invite-w-bot-gray'>邀请人数</text>
                    </view>
                </view>
            </view>
            <view class="invite-w" v-if="!isSuperior">
                <text class='invite-w-t-blue'>谁推荐你的？</text>
                <input class='invite-w-input' placeholder='请输入推荐人邀请码' v-model="inviteKey" />
                <view class='invite-w-btn' @click="setMyInvite">提交</view>
            </view>
            <view class='invite-btn'>
                <!-- #ifdef MP-WEIXIN -->
                <button class='share coreshop-btn' open-type="share">
                    <u-icon name="weixin-fill" size="90" top="4"></u-icon>
                </button>
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <button class='share coreshop-btn' @click="copyUrl()" v-show="!ifwx">
                    <u-icon name="zhuanfa" size="90" top="4"></u-icon>
                </button>
                <!-- #endif -->
                <button class='share coreshop-btn' @click="createPoster()">
                    <u-icon name="moments" size="90" top="4"></u-icon>
                </button>
            </view>
        </view>
    </view>

</template>
<script>
    import { h5Url } from '@/common/setting/constVarsHelper.js'
    // #ifdef MP-TOUTIAO
    import { ttPlatform } from '@/common/setting/constVarsHelper.js'
    // #endif
    export default {
        data() {
            return {
                code: '',
                money: 0,
                number: 0,
                isSuperior: false,
                inviteKey: '',
                imageUrl: '/static/images/ShareImage.png',
                shareUrl: '/pages/share/jump/jump'
            }
        },
        computed: {
            appTitle() {
                return this.$store.state.config.shopName;
            }
        },
        onShow() {
            this.getInviteData();
            this.ifwxl()
        },
        methods: {
            // 判断是不是微信浏览器
            ifwxl() {
                this.ifwx = this.$common.isWeiXinBrowser()
            },
            //获取数据
            getInviteData() {
                this.$u.api.myInvite(null).then(res => {
                    this.code = res.data.code;
                    this.money = res.data.money;
                    this.number = res.data.number;
                    this.isSuperior = res.data.isSuperior;
                });
                this.getShareUrl();
            },
            //去佣金明细
            toMoney() {
                this.$u.route('/pages/member/balance/details?status=5');
            },
            //去邀请列表
            toList() {
                this.$u.route('/pages/member/invite/list');
            },
            //填写设置要求
            setMyInvite() {
                let data = {
                    id: this.inviteKey
                }
                this.$u.api.setMyInvite(data).then(res => {
                    if (res.status) {
                        this.$refs.uToast.show({ title: '邀请码填写成功', type: 'success' })
                        this.isSuperior = true;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            // 生成邀请海报
            createPoster() {
                let data = {
                    page: 1,//首页
                    type: 3,//海报
                }
                let userToken = this.$db.get('userToken')
                if (userToken) {
                    data.token = userToken
                }
                // #ifdef H5 || APP-PLUS || APP-PLUS-NVUE
                data.client = 1;
                data.url = h5Url + 'pages/share/jump/jump'
                // #endif
                // #ifdef MP-WEIXIN
                data.client = 2;
                data.url = 'pages/share/jump/jump'
                // #endif
                // #ifdef MP-TOUTIAO
                data.client = 4;
                data.url = 'pages/share/jump/jump'
                // #endif
                // #ifdef MP-ALIPAY
                data.client = 6;
                data.url = 'pages/share/jump/jump'
                // #endif
                this.$u.api.share(data).then(res => {
                    if (res.status) {
                        this.$u.route('/pages/share/sharePoster/sharePoster?poster=' + encodeURIComponent(res.data))
                    } else {
                        this.$u.toast(res.msg)
                    }
                });
            },
            //复制URL链接
            copyUrl() {
                let data = {
                    page: 1,//首页
                    type: 1,//海报
                }
                let userToken = this.$db.get('userToken')
                if (userToken) {
                    data.token = userToken
                }
                // #ifdef H5 || APP-PLUS || APP-PLUS-NVUE
                data.client = 1;
                data.url = h5Url + 'pages/share/jump/jump'
                // #endif
                // #ifdef MP-WEIXIN
                data.client = 2;
                data.url = 'pages/share/jump/jump'
                // #endif
                // #ifdef MP-TOUTIAO
                data.client = 4;
                data.url = '/pages/share/jump/jump'
                // #endif
                // #ifdef MP-ALIPAY
                data.client = 6;
                data.url = '/pages/share/jump/jump'
                // #endif
                let _this = this;
                this.$u.api.share(data).then(res => {
                    if (res.status) {
                        uni.setClipboardData({
                            data: res.data,
                            success: function (data) {
                                _this.$refs.uToast.show({ title: '复制成功', type: 'success' })
                            },
                            fail: function (err) {
                                _this.$u.toast('复制分享URL失败');
                            }
                        })
                    } else {
                        _this.$u.toast('复制分享URL失败');
                    }
                });
            },
            //获取分享URL
            getShareUrl() {
                let data = {
                    client: 2,
                    url: "pages/share/jump/jump",
                    type: 1,
                    page: 1,
                };
                let userToken = this.$db.get('userToken');
                if (userToken && userToken != '') {
                    data['token'] = userToken;
                }
                this.$u.api.share(data).then(res => {
                    this.shareUrl = res.data
                });
            }
        },
        //分享
        onShareAppMessage(res) {
            return {
                title: this.$store.state.config.shareTitle,
                imageUrl: this.$store.state.config.shareImage,
                path: this.shareUrl
            }
        },
        onShareTimeline(res) {
            return {
                title: this.$store.state.config.shareTitle,
                imageUrl: this.$store.state.config.shareImage,
                path: this.shareUrl
            }
        },
    }
</script>
<style lang="scss">
    .invite { width: 100%; /* height: calc(100vh - 100px);*/ background: linear-gradient(to right, #4c21d2, #4864f8); height: 100vh }
    .invite-bg { position: absolute; width: 750rpx; height: 683rpx; z-index: 66; }
    .invite-c { position: absolute; z-index: 67; width: 750rpx; padding: 0 30rpx; top: 668rpx; background: linear-gradient(to right, #4c21d2, #4864f8); }
    .invite-w { background-color: #fff; width: 690rpx; text-align: center; padding: 40rpx 100rpx; box-sizing: border-box; border-radius: 30rpx; margin-bottom: 70rpx; position: relative; top: -148rpx; }
    .invite-w-t { width: 70%; margin: 0 auto; color: #fff; border-radius: 50rpx; font-size: 30rpx; box-sizing: border-box; padding: 10rpx; display: block; background: linear-gradient(to right, #5f2ef6, #b945dd); }
    .invite-w-num { color: #5f2ef6; display: block; font-size: 36rpx; margin-top: 20rpx; }
    .invite-w-detail { color: #666; font-size: 24rpx; line-height: 1.5; margin-top: 20rpx; }
    .invite-w-bot { margin: 20rpx 0 50rpx; }
        .invite-w-bot > view { width: 49%; display: inline-block; }
    .invite-w-bot-ic { width: 48rpx; height: 48rpx; }
    .invite-w-bot-red { font-size: 24rpx; color: #ca0400; display: block; }
    .invite-w-bot-gray { font-size: 24rpx; color: #acacac; display: block; }
    .invite-w-t-blue { color: #348dfc; font-size: 30rpx; margin-bottom: 50rpx; display: block; }
    .invite-w-input { font-size: 30rpx; border-bottom: 1px solid #dadada; margin-bottom: 50rpx; color: #999; }
    .invite-w-btn { background: linear-gradient(to right, #4a6af9, #28c4ff); color: #fff; width: 50%; margin: 0 auto; border-radius: 50rpx; font-size: 30rpx; padding: 10rpx 0; }
    .invite-btn { position: absolute; bottom: 10rpx; text-align: center; width: 690rpx; }
    .share { background-color: none; position: relative; width: 98rpx; height: 98rpx; display: inline-block; border-radius: 50%; padding: 0; margin: 0 40rpx 40rpx; }
    .invite-btn image { width: 98rpx; height: 98rpx; }
</style>
