jiaoyisuo/h5-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 注册页改版 - 匹配目标设计稿

Browse Source 
- 移除C1 fund Logo顶部品牌区
- 新增Mailbox tab标签
- 新增Mobile手机号输入框
- 移除Trading Password(交易密码)字段
- 新增用户协议勾选框(必须勾选才能注册)
- 新增Already have an account? Login底部链接
- 按钮文字改为Register
- 输入框背景改为浅蓝#F0F4FA
- 保留代理专属注册链接(?code=自动填入)
This commit is contained in:
li
2026-03-30 15:24:04 +08:00
parent c58dc3fdb8
commit e31adaaba8
1 changed files with 144 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/login/register.vue
+144 -106
View File
@@ -1,61 +1,83 @@
<template> <template>
<view :style="'background-color: '+theme.bg+';color: '+theme.text" class="registerPage"> <view class="regPage" :style="'background-color: '+theme.bg+';color: '+theme.text">
<view class="registerClose" @click="onClose">×</view> <myNav :title="''"></myNav>
<image class="registerLang" :src="i18n.login.langImg" mode="aspectFit" @click="router.push('/pages/lang/lang')"></image> <view class="regBody">
<!-- 标题 -->
<text class="regTitle">{{i18n.regist.navTitle}}</text>
<view class="registerBrand"> <!-- Tab -->
<image class="registerLogo" src="../../static/logo/logo.jpg" mode="widthFix"></image> <view class="regTabs">
<view class="registerBrandText">C1 fund</view> <view class="regTab regTabActive">
</view> <text class="font-26 color-white">{{i18n.regist.phone}}</text>
<view class="registerWrap">
<view class="registerTitle">{{i18n.regist.navTitle}}</view>
<view class="registerField">
<view class="registerLabel">{{i18n.regist.phone}}</view>
<view class="registerInputBox">
<input class="registerInput" type="text" v-model="email" :placeholder="i18n.regist.phoneTag" />
</view> </view>
</view> </view>
<view class="registerField"> <!-- 邮箱 -->
<view class="registerLabel">{{i18n.regist.code}}</view> <view class="regField">
<view class="registerInputBox registerInputBoxCode"> <text class="regLabel">{{i18n.regist.phone}}</text>
<input class="registerInput" type="number" v-model="code" :placeholder="i18n.regist.codeTag" /> <view class="regInputBox">
<text class="registerCodeBtn" @click="cutTime()">{{codeText}}</text> <input class="regInput" type="text" v-model="email" :placeholder="i18n.regist.phoneTag" />
</view> </view>
</view> </view>
<view class="registerField"> <!-- 手机号（可选） -->
<view class="registerLabel">{{i18n.regist.login}}</view> <view class="regField">
<view class="registerInputBox"> <text class="regLabel">{{i18n.regist.mobile}}</text>
<input class="registerInput" type="text" v-model="password" password :placeholder="i18n.regist.loginTag" /> <view class="regInputBox">
<input class="regInput" type="text" v-model="mobile" :placeholder="i18n.regist.mobileTag" />
</view> </view>
</view> </view>
<view class="registerField"> <!-- 密码 -->
<view class="registerLabel">{{i18n.regist.confirm}}</view> <view class="regField">
<view class="registerInputBox"> <text class="regLabel">{{i18n.regist.login}}</text>
<input class="registerInput" type="text" v-model="password2" password :placeholder="i18n.regist.confirmTag" /> <view class="regInputBox">
<input class="regInput" type="text" v-model="password" password :placeholder="i18n.regist.loginTag" />
</view> </view>
</view> </view>
<view class="registerField"> <!-- 确认密码 -->
<view class="registerLabel">{{i18n.regist.transaction}}</view> <view class="regField">
<view class="registerInputBox"> <text class="regLabel">{{i18n.regist.confirm}}</text>
<input class="registerInput" type="text" v-model="pay_pwd" password :placeholder="i18n.regist.transactionTag" /> <view class="regInputBox">
<input class="regInput" type="text" v-model="password2" password :placeholder="i18n.regist.confirmTag" />
</view> </view>
</view> </view>
<view class="registerField"> <!-- 邀请码 -->
<view class="registerLabel">{{i18n.regist.invitation}}</view> <view class="regField">
<view class="registerInputBox"> <text class="regLabel">{{i18n.regist.invitation}}</text>
<input class="registerInput" type="text" v-model="referral_code" :placeholder="i18n.regist.invitationTag" /> <view class="regInputBox">
<input class="regInput" type="text" v-model="referral_code" :placeholder="i18n.regist.invitationTag" />
</view> </view>
</view> </view>
<button @click="register" class="cu-btn registerBtn">{{i18n.forget.sure}}</button> <!-- 验证码 -->
<view class="height-40"></view> <view class="regField">
<text class="regLabel">{{i18n.regist.code}}</text>
<view class="regInputBox regInputRow">
<input class="regInput" type="text" v-model="code" :placeholder="i18n.regist.codeTag" />
<text class="regCodeBtn" @click="cutTime()">{{codeText}}</text>
</view>
</view>
<!-- 协议 -->
<view class="regAgree" @click="agreed=!agreed">
<view class="regCheckbox" :class="agreed?'regChecked':''">
<text v-if="agreed" class="font-24 color-white">✓</text>
</view>
<text class="font-24 color-999">{{i18n.login.tag}}</text>
<text class="font-24 regLink" @click.stop="router.push('/pages/my/aboutUs/agreement')">{{i18n.login.tag1}}</text>
</view>
<!-- 注册按钮 -->
<button @click="register" class="cu-btn regBtn">{{i18n.regist.navTitle}}</button>
<!-- 已有账号 -->
<view class="regFooter">
<text class="font-26 color-999">{{i18n.login.noAccount}}</text>
<text class="font-26 regLink" @click="router.push('/pages/login/index')">{{i18n.login.login}}</text>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -65,15 +87,15 @@
data() { data() {
return { return {
email: '', email: '',
mobile: '',
password: '', password: '',
password2: '', password2: '',
code: '', code: '',
referral_code: '', referral_code: '',
pay_pwd: '',
flag: true, flag: true,
time: '获取验证码', time: '获取验证码',
timeFlag: true, timeFlag: true,
agreed: false,
theme: '', theme: '',
} }
}, },
@@ -104,9 +126,7 @@
}, },
methods: { methods: {
onClose() { onClose() {
uni.navigateBack({ uni.navigateBack({ delta: 1 })
delta: 1
})
}, },
register() { register() {
if (!this.flag) return if (!this.flag) return
@@ -114,7 +134,6 @@
this.tos(this.i18n.regist.phoneTag) this.tos(this.i18n.regist.phoneTag)
return return
} }
if (this.code == '') { if (this.code == '') {
this.tos(this.i18n.regist.codeTag) this.tos(this.i18n.regist.codeTag)
return return
@@ -131,8 +150,8 @@
this.tos(this.i18n.regist.tos1) this.tos(this.i18n.regist.tos1)
return return
} }
if (this.pay_pwd == '') { if (!this.agreed) {
this.tos(this.i18n.regist.transactionTag) this.tos(this.i18n.login.tos1)
return return
} }
uni.showLoading({ uni.showLoading({
@@ -145,9 +164,10 @@
password: this.password, password: this.password,
code: this.code, code: this.code,
referral_code: this.referral_code, referral_code: this.referral_code,
pay_pwd: this.pay_pwd,
} }
// console.log(obj) if (this.mobile) {
obj.mobile = this.mobile
}
this.post('/user/register', obj).then(res => { this.post('/user/register', obj).then(res => {
console.log(res) console.log(res)
uni.hideLoading() uni.hideLoading()
@@ -201,106 +221,124 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.registerPage { .regPage {
min-height: 100vh; min-height: 100vh;
position: relative;
padding-bottom: 60rpx;
} }
.registerClose { .regBody {
position: absolute; padding: 30rpx 50rpx 60rpx;
left: 30rpx;
top: 24rpx;
font-size: 44rpx;
line-height: 44rpx;
color: #111111;
z-index: 5;
} }
.registerLang { .regTitle {
position: absolute; font-size: 48rpx;
right: 30rpx;
top: 26rpx;
width: 44rpx;
height: 44rpx;
z-index: 5;
}
.registerBrand {
padding-top: 110rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.registerLogo {
width: 150rpx;
}
.registerBrandText {
margin-top: 16rpx;
font-size: 28rpx;
color: #111111;
}
.registerWrap {
padding: 50rpx 60rpx 0;
}
.registerTitle {
font-size: 44rpx;
font-weight: 700; font-weight: 700;
color: #111111; color: #111111;
display: block;
margin-bottom: 36rpx;
}
.regTabs {
display: flex;
margin-bottom: 36rpx;
}
.regTab {
height: 60rpx;
padding: 0 30rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
background: #D1D3D8;
margin-right: 20rpx;
}
.regTabActive {
background: #10C7A0;
}
.regField {
margin-bottom: 28rpx; margin-bottom: 28rpx;
} }
.registerField { .regLabel {
margin-bottom: 30rpx;
}
.registerLabel {
font-size: 28rpx; font-size: 28rpx;
font-weight: 700; font-weight: 700;
color: #111111; color: #333333;
margin-bottom: 14rpx; margin-bottom: 12rpx;
display: block;
} }
.registerInputBox { .regInputBox {
height: 88rpx; height: 88rpx;
background: #EAF3FF; background: #F0F4FA;
border-radius: 10rpx; border-radius: 10rpx;
padding: 0 22rpx; padding: 0 24rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.registerInputBoxCode { .regInputRow {
justify-content: space-between; justify-content: space-between;
} }
.registerInput { .regInput {
flex: 1; flex: 1;
height: 88rpx; height: 88rpx;
font-size: 28rpx; font-size: 28rpx;
color: #111111; color: #111111;
} }
.registerCodeBtn { .regCodeBtn {
font-size: 26rpx; font-size: 26rpx;
font-weight: 700; font-weight: 700;
color: #1A74FF; color: #1A74FF;
margin-left: 18rpx; margin-left: 18rpx;
flex: 0 0 auto; flex: 0 0 auto;
white-space: nowrap;
} }
.registerBtn { .regAgree {
display: flex;
align-items: center;
margin: 30rpx 0;
}
.regCheckbox {
width: 36rpx;
height: 36rpx;
border: 2rpx solid #CCCCCC;
border-radius: 50%;
margin-right: 14rpx;
display: flex;
align-items: center;
justify-content: center;
}
.regChecked {
background: #1A74FF;
border-color: #1A74FF;
}
.regLink {
color: #1A74FF;
margin-left: 6rpx;
}
.regBtn {
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
background: #1A74FF !important; background: #1A74FF !important;
border-radius: 10rpx; border-radius: 10rpx;
line-height: 90rpx; line-height: 90rpx;
color: #FFFFFF; color: #FFFFFF;
font-size: 30rpx; font-size: 32rpx;
text-align: center; text-align: center;
margin-top: 10rpx;
}
.regFooter {
text-align: center;
margin-top: 30rpx;
} }
</style> </style>