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.
183 lines
3.7 KiB
183 lines
3.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"
|
|
: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>
|