|
|
|
@ -1,13 +1,9 @@ |
|
|
|
<!-- 注册页面 --> |
|
|
|
<template> |
|
|
|
<view class="register bx"> |
|
|
|
|
|
|
|
<!-- 背景图片 --> |
|
|
|
<view class="bg-box"> |
|
|
|
<image @click="showSelectLanguageProp" class="language" src="@/static/login/language.png" mode="aspectFit"> |
|
|
|
</image> |
|
|
|
<image src="@/static/login/logo.png" mode="aspectFit"></image> |
|
|
|
</view> |
|
|
|
<div class="language"> |
|
|
|
<image @click="showSelectLanguageProp" src="@/static/login/language.png" mode="aspectFit"></image> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 加载效果 --> |
|
|
|
<!-- <loading :loading="loading" @close="closeLoading"></loading> --> |
|
|
|
@ -15,70 +11,32 @@ |
|
|
|
<view v-if="!loading" class="main"> |
|
|
|
<!-- 登录标题 --> |
|
|
|
<view class="register-title"> |
|
|
|
|
|
|
|
<view class="title">{{ $t('page.register.title') }}</view> |
|
|
|
|
|
|
|
<view class="register-descript">{{ $t('page.register.please-register') }}</view> |
|
|
|
|
|
|
|
<view class="title">TikTok shop</view> |
|
|
|
<view class="shop-desc">Online rebate mall.</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 输入框列表 --> |
|
|
|
<view class="input-list"> |
|
|
|
|
|
|
|
<view class="input-item"> |
|
|
|
<view class="input-descript">{{ $t('page.register.username') }}</view> |
|
|
|
|
|
|
|
<input v-model="form.account" type="text" :placeholder="$t('page.register.username-placeholder')" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="input-item"> |
|
|
|
<view class="input-descript">{{ $t('page.register.password') }}</view> |
|
|
|
|
|
|
|
<input v-model="form.password" type="password" |
|
|
|
:placeholder="$t('page.register.password-placeholder')" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="input-item"> |
|
|
|
<view class="input-descript">{{ $t('page.register.confirm-password') }}</view> |
|
|
|
|
|
|
|
<input v-model="form.okPassword" type="password" |
|
|
|
:placeholder="$t('page.register.confirm-password')" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="input-item"> |
|
|
|
<view class="input-descript">{{ $t('page.register.PaymentPassword') }}</view> |
|
|
|
|
|
|
|
<input v-model="form.payPass" type="password" :placeholder="$t('page.register.PaymentPassword-placeholder')" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="input-item"> |
|
|
|
<view class="input-descript">{{ $t('page.register.confirm-PaymentPassword') }}</view> |
|
|
|
|
|
|
|
<input v-model="form.okPayPass" type="password" |
|
|
|
:placeholder="$t('page.register.PaymentPassword-placeholder')" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="input-item"> |
|
|
|
<view class="input-descript">{{ $t('page.register.invitation-code') }}</view> |
|
|
|
|
|
|
|
<input v-model="form.invitationCode" :placeholder="$t('page.register.invitation-code')" /> |
|
|
|
</view> |
|
|
|
<input v-model="form.account" type="text" :placeholder="$t('page.register.username-placeholder')" /> |
|
|
|
<input v-model="form.password" type="password" |
|
|
|
:placeholder="$t('page.register.password-placeholder')" /> |
|
|
|
<input v-model="form.okPassword" type="password" :placeholder="$t('page.register.confirm-password')" /> |
|
|
|
<input v-model="form.payPass" type="password" |
|
|
|
:placeholder="$t('page.register.PaymentPassword-placeholder')" /> |
|
|
|
<input v-model="form.okPayPass" type="password" |
|
|
|
:placeholder="$t('page.register.PaymentPassword-placeholder')" /> |
|
|
|
<input v-model="form.invitationCode" :placeholder="$t('page.register.invitation-code')" /> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 勾选协议 --> |
|
|
|
<view class="check-box"> |
|
|
|
<!-- <view class="check-box"> |
|
|
|
<u-checkbox-group v-model="agree" @change="$play"> |
|
|
|
<u-checkbox activeColor="#B0C73B" |
|
|
|
shape="circle" :label="$t('page.register.agreen')" |
|
|
|
<u-checkbox activeColor="#B0C73B" shape="circle" :label="$t('page.register.agreen')" |
|
|
|
name="agree"></u-checkbox> |
|
|
|
</u-checkbox-group> |
|
|
|
<view @click.stop="toAgreement" class="agreement-content">{{ $t('page.register.agreement') }}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 忘记密码 |
|
|
|
<view class="forgot-password"> |
|
|
|
<text>{{ $t('page.register.forgot-password') }}</text> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<!-- 按钮组 --> |
|
|
|
@ -89,6 +47,7 @@ |
|
|
|
<view @click.stop="toLogin" class="now-login-btn">{{ $t('page.register.login') }}</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 切换语言 --> |
|
|
|
@ -143,8 +102,10 @@ |
|
|
|
}, |
|
|
|
|
|
|
|
//跳转登录页面 |
|
|
|
toLogin(sound) { //是否发出声音 |
|
|
|
if(sound){this.$play()} |
|
|
|
toLogin(sound) { //是否发出声音 |
|
|
|
if (sound) { |
|
|
|
this.$play() |
|
|
|
} |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/login/login' |
|
|
|
}) |
|
|
|
@ -160,35 +121,59 @@ |
|
|
|
okPayPass |
|
|
|
} = this.form |
|
|
|
if (account.trim() == '') { |
|
|
|
uni.showToast({title: this.$t('page.register.accountEmpty'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.accountEmpty'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (password.trim() == '') { |
|
|
|
uni.showToast({title: this.$t('page.register.passEmpty'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.passEmpty'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (okPassword.trim() == '') { |
|
|
|
uni.showToast({title: this.$t('page.register.okPassEmpty'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.okPassEmpty'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (password.trim() != okPassword.trim()) { |
|
|
|
uni.showToast({title: this.$t('page.register.passInconsistency'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.passInconsistency'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (payPass.trim() == '') { |
|
|
|
uni.showToast({title: this.$t('page.register.payPassEmpty'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.payPassEmpty'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (okPayPass.trim() == '') { |
|
|
|
uni.showToast({title: this.$t('page.register.okPayPassEmpty'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.okPayPassEmpty'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (payPass.trim() != okPayPass.trim()) { |
|
|
|
uni.showToast({title: this.$t('page.register.payPassInconsistency'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.payPassInconsistency'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (this.agree.length <= 0 && this.agree[0] != 'agree') { |
|
|
|
uni.showToast({title: this.$t('page.register.tickProtocol'),icon : 'none'}); |
|
|
|
uni.showToast({ |
|
|
|
title: this.$t('page.register.tickProtocol'), |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
return true |
|
|
|
@ -209,9 +194,9 @@ |
|
|
|
closeLoading() { |
|
|
|
this.loading = false; |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//跳转用户协议 |
|
|
|
toAgreement(){ |
|
|
|
toAgreement() { |
|
|
|
this.$play() |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/instructions/instructions?index=4' |
|
|
|
@ -226,119 +211,111 @@ |
|
|
|
width: 750rpx; |
|
|
|
height: 100vh; |
|
|
|
margin: 0px auto; |
|
|
|
// background: black; |
|
|
|
// background-image: url('@/static/login/bg.png'); |
|
|
|
background: linear-gradient(to bottom, #fcedff 0%, #ffffff 100%); |
|
|
|
background-size: 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
|
|
|
|
.bg-box { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.language { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
height: 25%; |
|
|
|
|
|
|
|
.language { |
|
|
|
position: absolute; |
|
|
|
top: 30rpx; |
|
|
|
right: 30rpx; |
|
|
|
height: 160rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.register-title { |
|
|
|
padding: 0rpx 10rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #B0C73B; |
|
|
|
font-size: 30rpx; |
|
|
|
color: $uni-bg-color-app; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.register-descript { |
|
|
|
font-size: 32rpx; |
|
|
|
color: white; |
|
|
|
|
|
|
|
.shop-desc { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.input-list { |
|
|
|
padding: 0rpx 10rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
margin: 40rpx 0rpx; |
|
|
|
|
|
|
|
.input-item { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
border: 1px solid #B0C73B; |
|
|
|
padding: 20rpx; |
|
|
|
border-radius: 5rpx; |
|
|
|
margin-bottom: 25rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
.input-descript { |
|
|
|
color: #B0C73B; |
|
|
|
} |
|
|
|
|
|
|
|
input { |
|
|
|
color: #B0C73B; |
|
|
|
|
|
|
|
input { |
|
|
|
display: block; |
|
|
|
width: 90%; |
|
|
|
margin: 0rpx auto; |
|
|
|
color: $uni-bg-color-app; |
|
|
|
border: 1px solid #eeeeee; |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 40rpx; |
|
|
|
background: #fff; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
text-align: center; |
|
|
|
text-indent: 1em; |
|
|
|
padding: 0rpx 15rpx; |
|
|
|
|
|
|
|
&:focus { |
|
|
|
border-color: #6d00be !important; |
|
|
|
background: pink !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.forgot-password { |
|
|
|
color: #B0C73B; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
|
|
text { |
|
|
|
border-bottom: 1rpx solid #ccc; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.check-box{ |
|
|
|
|
|
|
|
.check-box { |
|
|
|
display: flex; |
|
|
|
color: rgb(96, 98, 102); |
|
|
|
|
|
|
|
.agreement-content{ |
|
|
|
|
|
|
|
.agreement-content { |
|
|
|
text-decoration: underline; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btns { |
|
|
|
padding: 0rpx 10rpx; |
|
|
|
margin-top: 40rpx; |
|
|
|
|
|
|
|
.now-login-btn, |
|
|
|
color: $uni-bg-color; |
|
|
|
|
|
|
|
.now-register-btn { |
|
|
|
background: #B0C73B; |
|
|
|
border-radius: 10rpx; |
|
|
|
background: $uni-bg-color-app; |
|
|
|
border-radius: 60rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.now-login-btn { |
|
|
|
height: 60rpx; |
|
|
|
width: 90%; |
|
|
|
font-size: 28rpx; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.now-register-btn { |
|
|
|
height: 90rpx; |
|
|
|
font-size: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.now-login-btn { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: $uni-bg-color-app; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
