Browse Source

feat(个人中心): 新增邀请绑定页面及导航功能

添加了邀请绑定页面,并在个人中心页面中增加了对应的导航入口。用户可以通过输入邀请码进行绑定操作。
master
前端-胡立永 2 months ago
parent
commit
79d6b10d2f
3 changed files with 217 additions and 0 deletions
  1. +9
    -0
      pages.json
  2. +11
    -0
      pages/personalCenter/index.vue
  3. +197
    -0
      pages_order/mine/InvitationCode.vue

+ 9
- 0
pages.json View File

@ -402,6 +402,15 @@
"enablePullDownRefresh": false,
"navigationBarTextStyle": "white"
}
},
{
"path": "mine/InvitationCode",
"style": {
"navigationBarTitleText": "邀请绑定",
"navigationBarBackgroundColor": "#FFBF60",
"enablePullDownRefresh": false,
"navigationBarTextStyle": "white"
}
}
]
}


+ 11
- 0
pages/personalCenter/index.vue View File

@ -229,6 +229,11 @@
label: '任务中心',
path:'taskList'
},
{
icon:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/lock.png',
label: '邀请绑定',
path:'InvitationCode'
},
]
}
@ -457,6 +462,12 @@
});
break;
}
case 'InvitationCode':{
uni.navigateTo({
url: `/pages_order/mine/InvitationCode`
});
break;
}
case 'userInfo':{
uni.navigateTo({
url: `/pages/personalCenter/userInfo`


+ 197
- 0
pages_order/mine/InvitationCode.vue View File

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

Loading…
Cancel
Save