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>
<view :style="'background-color: '+theme.bg+';color: '+theme.text" class="registerPage">
<view class="registerClose" @click="onClose">×</view>
<image class="registerLang" :src="i18n.login.langImg" mode="aspectFit" @click="router.push('/pages/lang/lang')"></image>
<view class="regPage" :style="'background-color: '+theme.bg+';color: '+theme.text">
<myNav :title="''"></myNav>
<view class="regBody">
<!-- 标题 -->
<text class="regTitle">{{i18n.regist.navTitle}}</text>
<view class="registerBrand">
<image class="registerLogo" src="../../static/logo/logo.jpg" mode="widthFix"></image>
<view class="registerBrandText">C1 fund</view>
</view>
<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" />
<!-- Tab -->
<view class="regTabs">
<view class="regTab regTabActive">
<text class="font-26 color-white">{{i18n.regist.phone}}</text>
</view>
</view>
<view class="registerField">
<view class="registerLabel">{{i18n.regist.code}}</view>
<view class="registerInputBox registerInputBoxCode">
<input class="registerInput" type="number" v-model="code" :placeholder="i18n.regist.codeTag" />
<text class="registerCodeBtn" @click="cutTime()">{{codeText}}</text>
<!-- 邮箱 -->
<view class="regField">
<text class="regLabel">{{i18n.regist.phone}}</text>
<view class="regInputBox">
<input class="regInput" type="text" v-model="email" :placeholder="i18n.regist.phoneTag" />
</view>
</view>
<view class="registerField">
<view class="registerLabel">{{i18n.regist.login}}</view>
<view class="registerInputBox">
<input class="registerInput" type="text" v-model="password" password :placeholder="i18n.regist.loginTag" />
<!-- 手机号（可选） -->
<view class="regField">
<text class="regLabel">{{i18n.regist.mobile}}</text>
<view class="regInputBox">
<input class="regInput" type="text" v-model="mobile" :placeholder="i18n.regist.mobileTag" />
</view>
</view>
<view class="registerField">
<view class="registerLabel">{{i18n.regist.confirm}}</view>
<view class="registerInputBox">
<input class="registerInput" type="text" v-model="password2" password :placeholder="i18n.regist.confirmTag" />
<!-- 密码 -->
<view class="regField">
<text class="regLabel">{{i18n.regist.login}}</text>
<view class="regInputBox">
<input class="regInput" type="text" v-model="password" password :placeholder="i18n.regist.loginTag" />
</view>
</view>
<view class="registerField">
<view class="registerLabel">{{i18n.regist.transaction}}</view>
<view class="registerInputBox">
<input class="registerInput" type="text" v-model="pay_pwd" password :placeholder="i18n.regist.transactionTag" />
<!-- 确认密码 -->
<view class="regField">
<text class="regLabel">{{i18n.regist.confirm}}</text>
<view class="regInputBox">
<input class="regInput" type="text" v-model="password2" password :placeholder="i18n.regist.confirmTag" />
</view>
</view>
<view class="registerField">
<view class="registerLabel">{{i18n.regist.invitation}}</view>
<view class="registerInputBox">
<input class="registerInput" type="text" v-model="referral_code" :placeholder="i18n.regist.invitationTag" />
<!-- 邀请码 -->
<view class="regField">
<text class="regLabel">{{i18n.regist.invitation}}</text>
<view class="regInputBox">
<input class="regInput" type="text" v-model="referral_code" :placeholder="i18n.regist.invitationTag" />
</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>
</template>
@@ -65,15 +87,15 @@
data() {
return {
email: '',
mobile: '',
password: '',
password2: '',
code: '',
referral_code: '',
pay_pwd: '',
flag: true,
time: '获取验证码',
timeFlag: true,
agreed: false,
theme: '',
}
},
@@ -104,9 +126,7 @@
},
methods: {
onClose() {
uni.navigateBack({
delta: 1
})
uni.navigateBack({ delta: 1 })
},
register() {
if (!this.flag) return
@@ -114,7 +134,6 @@
this.tos(this.i18n.regist.phoneTag)
return
}
if (this.code == '') {
this.tos(this.i18n.regist.codeTag)
return
@@ -131,8 +150,8 @@
this.tos(this.i18n.regist.tos1)
return
}
if (this.pay_pwd == '') {
this.tos(this.i18n.regist.transactionTag)
if (!this.agreed) {
this.tos(this.i18n.login.tos1)
return
}
uni.showLoading({
@@ -145,9 +164,10 @@
password: this.password,
code: this.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 => {
console.log(res)
uni.hideLoading()
@@ -201,106 +221,124 @@
</script>
<style lang="scss">
.registerPage {
.regPage {
min-height: 100vh;
position: relative;
padding-bottom: 60rpx;
}
.registerClose {
position: absolute;
left: 30rpx;
top: 24rpx;
font-size: 44rpx;
line-height: 44rpx;
color: #111111;
z-index: 5;
.regBody {
padding: 30rpx 50rpx 60rpx;
}
.registerLang {
position: absolute;
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;
.regTitle {
font-size: 48rpx;
font-weight: 700;
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;
}
.registerField {
margin-bottom: 30rpx;
}
.registerLabel {
.regLabel {
font-size: 28rpx;
font-weight: 700;
color: #111111;
margin-bottom: 14rpx;
color: #333333;
margin-bottom: 12rpx;
display: block;
}
.registerInputBox {
.regInputBox {
height: 88rpx;
background: #EAF3FF;
background: #F0F4FA;
border-radius: 10rpx;
padding: 0 22rpx;
padding: 0 24rpx;
display: flex;
align-items: center;
}
.registerInputBoxCode {
.regInputRow {
justify-content: space-between;
}
.registerInput {
.regInput {
flex: 1;
height: 88rpx;
font-size: 28rpx;
color: #111111;
}
.registerCodeBtn {
.regCodeBtn {
font-size: 26rpx;
font-weight: 700;
color: #1A74FF;
margin-left: 18rpx;
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%;
height: 90rpx;
background: #1A74FF !important;
border-radius: 10rpx;
line-height: 90rpx;
color: #FFFFFF;
font-size: 30rpx;
font-size: 32rpx;
text-align: center;
margin-top: 10rpx;
}
.regFooter {
text-align: center;
margin-top: 30rpx;
}
</style>