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" 
				:disabled="!!userInfo.inviteCode"
				placeholder="请输入邀请码" v-model="inviteCode" />
            </view>
			
            <view class="submit-btn" 
			v-if="userInfo.inviteCode"
			style="background-color: #aaa;color: #fff;"
			>已绑定</view>
			
            <view class="submit-btn" 
			v-else
			@click="submitInviteCode">立即绑定</view>
        </view>

    </view>
</template>

<script>
import { bindCode } from '@/api/order/order.js'
	import {
		getOpenIdKey
	} from '@/utils/auth'
export default {
    name: 'InvitationCode',
    data() {
        return {
            inviteCode: '', // 用户输入的邀请码
            myInviteCode: 'b1014pib' // 我的邀请码
        }
    },
	onLoad() {
		this.inviteCode = this.userInfo.inviteCode || ''
	},
    methods: {
        // 提交邀请码
        async submitInviteCode() {
            if (!this.inviteCode) {
                uni.showToast({
                    title: '请输入邀请码',
                    icon: 'none'
                })
                return
            }
			
			await bindCode({
				openId : getOpenIdKey(),
				code : this.inviteCode,
			})
            uni.showToast({
                title: '邀请码绑定成功',
                icon: 'success'
            })
			this.$store.commit('getUserInfo')
			
			setTimeout(uni.navigateBack, 500, -1)
        },
    }
}
</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;
	text-align: center;
	font-weight: 900;
}

.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>