You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
4.7 KiB
197 lines
4.7 KiB
<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>
|