Ai_GirlFriend/xuniYou/pages/mine/invite.vue

<template>
    <view>
        <view class="body">
            <view class="invite-info">
                <view class="invite-code-box">
                    <text class="label">我的邀请码</text>
                    <text class="code">{{ inviteCode }}</text>
                    <view class="copy-btn" @click="copyInviteCode">复制</view>
                </view>
                <view class="invite-stats">
                    <view class="stat-item">
                        <text class="stat-value">{{ inviteCount }}</text>
                        <text class="stat-label">邀请人数</text>
                    </view>
                    <view class="stat-item">
                        <text class="stat-value">{{ inviteReward }}</text>
                        <text class="stat-label">累计奖励</text>
                    </view>
                </view>
            </view>
            
            <!-- 二维码显示 -->
            <view class="qrcode-container">
                <view class="qrcode-title">扫描二维码获取邀请码</view>
                <image 
                    class="qrcode-image" 
                    :src="qrCodeUrl" 
                    mode="aspectFit"
                    @longpress="saveQRCode">
                </image>
                <view class="qrcode-tip">长按保存二维码分享给好友</view>
            </view>
            
            <view class="invite-rule">
                <text class="rule-title">邀请规则</text>
                <text class="rule-item">• 分享邀请码或二维码给好友</text>
                <text class="rule-item">• 好友扫码或输入邀请码注册</text>
                <text class="rule-item">• 您获得10金币，好友获得5金币</text>
                <text class="rule-item">• 金币可用于购买会员、音色等</text>
            </view>
        </view>
    </view>
</template>

<script>
    import { baseURLPy } from '@/utils/request.js'
    
    export default {
        data() {
            return {
                inviteCode: '',
                inviteCount: 0,
                inviteReward: 0,
                qrCodeUrl: '',
                baseURLPy: baseURLPy,
            }
        },
        onLoad() {
            this.getInviteInfo();
        },
        methods: {
            getInviteInfo() {
                uni.request({
                    url: this.baseURLPy + '/config/invite/info',
                    method: 'GET',
                    header: {
                        'token': uni.getStorageSync("token") || "",
                    },
                    success: (res) => {
                        if (res.data.code === 1) {
                            const data = res.data.data;
                            this.inviteCode = data.invite_code;
                            this.inviteCount = data.invite_count;
                            this.inviteReward = data.invite_reward_total;
                            
                            // 生成二维码 URL
                            this.qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=${encodeURIComponent(this.inviteCode)}`;
                        }
                    },
                    fail: (err) => {
                        console.error('获取邀请信息失败:', err);
                    }
                });
            },
            
            copyInviteCode() {
                uni.setClipboardData({
                    data: this.inviteCode,
                    success: () => {
                        uni.showToast({
                            title: '邀请码已复制',
                            icon: 'success'
                        });
                    }
                });
            },
            
            saveQRCode() {
                uni.showModal({
                    title: '提示',
                    content: '长按二维码可保存到相册',
                    showCancel: false
                });
            }
        }
    }
</script>

<style>
    page {
        background: #F6F8FA;
    }
    
    .body {
        position: relative;
        padding: 20rpx;
    }
    
    /* 邀请信息卡片 */
    .invite-info {
        background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
        border-radius: 20rpx;
        padding: 40rpx;
        margin-bottom: 30rpx;
    }
    
    .invite-code-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12rpx;
        padding: 20rpx 30rpx;
        margin-bottom: 30rpx;
    }
    
    .invite-code-box .label {
        color: #FFFFFF;
        font-size: 28rpx;
    }
    
    .invite-code-box .code {
        color: #FFFFFF;
        font-size: 36rpx;
        font-weight: bold;
        letter-spacing: 4rpx;
    }
    
    .copy-btn {
        background: #FFFFFF;
        color: #9F47FF;
        padding: 10rpx 30rpx;
        border-radius: 30rpx;
        font-size: 26rpx;
    }
    
    .invite-stats {
        display: flex;
        justify-content: space-around;
    }
    
    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .stat-value {
        color: #FFFFFF;
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
    }
    
    .stat-label {
        color: rgba(255, 255, 255, 0.8);
        font-size: 24rpx;
    }
    
    /* 二维码容器 */
    .qrcode-container {
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 40rpx;
        margin-bottom: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .qrcode-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
    }
    
    .qrcode-image {
        width: 400rpx;
        height: 400rpx;
        border: 2rpx solid #E0E0E0;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
    }
    
    .qrcode-tip {
        font-size: 24rpx;
        color: #999;
    }
    
    /* 邀请规则 */
    .invite-rule {
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 30rpx;
    }
    
    .rule-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 20rpx;
    }
    
    .rule-item {
        font-size: 28rpx;
        color: #666;
        line-height: 50rpx;
        display: block;
    }
</style>