| @ -0,0 +1,197 @@ | |||
| <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> | |||