pet-front-order/pages_order/mine/InvitationCode.vue

<template>
    <view class="invitation-container">
        <!-- 填写邀请码区域 -->
        <view class="invitation-section">
            <view class="section-header">
                <text class="iconfont icon-invite"></text>
                <text class="section-title">填写邀请码</text>
            </view>
            <view class="section-subtitle">邀请人有且只有一位，添加后不可更改</view>
            <view class="input-area">
                <input type="text" class="invite-input" placeholder="请输入邀请码，领取优惠券" v-model="inviteCode" />
            </view>
            <view class="submit-btn" @click="submitInviteCode">立即领取</view>
        </view>

        <!-- 我的邀请码区域 -->
        <!-- <view class="my-invitation-section">
            <view class="section-header">
                <text class="iconfont icon-myinvite"></text>
                <text class="section-title">我的邀请码</text>
            </view>
            <view class="section-subtitle">有关邀请码的更多功能，请前往服务者端了解~</view>
            <view class="my-code-area">
                <text class="my-code">{{ myInviteCode }}</text>
                <view class="copy-btn" @click="copyInviteCode">复制</view>
            </view>
        </view> -->

        <!-- 推广员入口 -->
        <!-- <view class="promotion-section">
            <text class="promotion-text">了解并加入布了推广员，赚取高达80%收益分成!!!</text>
            <view class="promotion-btn" @click="goToPromotion">推广员后台</view>
        </view> -->
    </view>
</template>

<script>
export default {
    name: 'InvitationCode',
    data() {
        return {
            inviteCode: '', // 用户输入的邀请码
            myInviteCode: 'b1014pib' // 我的邀请码
        }
    },
    methods: {
        // 提交邀请码
        submitInviteCode() {
            if (!this.inviteCode) {
                uni.showToast({
                    title: '请输入邀请码',
                    icon: 'none'
                })
                return
            }

            // 这里添加提交邀请码的逻辑
            uni.showToast({
                title: '邀请码提交成功',
                icon: 'success'
            })
        },

        // 复制邀请码
        copyInviteCode() {
            uni.setClipboardData({
                data: this.myInviteCode,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    })
                }
            })
        },

        // 前往推广员后台
        goToPromotion() {
            // 这里添加跳转到推广员后台的逻辑
            uni.navigateTo({
                url: '/pages_order/mine/promotion'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.invitation-container {
    padding: 20rpx;
    font-family: PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
}

/* 公共样式 */
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}

.iconfont {
    margin-right: 10rpx;
    font-size: 36rpx;
    color: #FFBF60;
}

.section-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
}

.section-subtitle {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 20rpx;
}

/* 填写邀请码区域 */
.invitation-section {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.input-area {
    background-color: #F5F7FA;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
}

.invite-input {
    height: 80rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
}

.submit-btn {
    background-color: #FFBF60;
    color: #fff;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
}

/* 我的邀请码区域 */
.my-invitation-section {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.my-code-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.my-code {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.copy-btn {
    border: 1px solid #FFBF60;
    color: #FFBF60;
    padding: 8rpx 30rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
}

/* 推广员入口 */
.promotion-section {
    text-align: center;
    margin-top: 60rpx;
}

.promotion-text {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.promotion-btn {
    background-color: #FFBF60;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;
}
</style>