|
|
|
@ -6,19 +6,19 @@ |
|
|
|
<!-- 登录和注册 --> |
|
|
|
<view class="loginRegister" v-if='titleIndex!=2'> |
|
|
|
<!-- 标题 --> |
|
|
|
<view class="title">{{title}}</view> |
|
|
|
<view class="title">{{titleList[titleIndex]}}</view> |
|
|
|
|
|
|
|
<!-- 头像 --> |
|
|
|
<view class="userIamge"> |
|
|
|
<view> |
|
|
|
<img src="../../static/image/center/11.svg" alt="" style="width: 100%;height: 100%;"> |
|
|
|
<img src="/static/image/center/11.svg" alt="" style="width: 100%;height: 100%;"> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 用户名&密码&隐私条款 --> |
|
|
|
<view class="form"> |
|
|
|
<view> |
|
|
|
<uv-input v-model="form.userName" placeholder="请输入手机号/用户/邮箱" border="surround" shape='circle' |
|
|
|
<uv-input v-model="form.account" placeholder="请输入账号" border="surround" shape='circle' |
|
|
|
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> |
|
|
|
</view> |
|
|
|
<view> |
|
|
|
@ -26,12 +26,14 @@ |
|
|
|
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> |
|
|
|
</view> |
|
|
|
<view> |
|
|
|
<uv-checkbox-group v-model="form.checkboxValue" shape="circle"> |
|
|
|
<uv-checkbox-group v-model="checkboxValue" shape="circle"> |
|
|
|
<view class="content"> |
|
|
|
<view style="display: flex;"> |
|
|
|
<uv-checkbox size="30rpx" :name="1"></uv-checkbox> |
|
|
|
请你阅读并同意我们的<span style="color: #fd5100">《隐私条款》</span>和<span |
|
|
|
style="color: #fd5100">《服务协议》</span> |
|
|
|
请你阅读并同意我们的<span style="color: #fd5100" |
|
|
|
@click="$refs.popup.open('getPrivacyPolicy')">《隐私条款》</span>和<span |
|
|
|
style="color: #fd5100" |
|
|
|
@click="$refs.popup.open('getUserAgreement')">《服务协议》</span> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uv-checkbox-group> |
|
|
|
@ -39,29 +41,12 @@ |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 按钮 --> |
|
|
|
<view class="btn"> |
|
|
|
<button class='a'>{{btnText}}</button> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- tab --> |
|
|
|
<view class="bottomTab"> |
|
|
|
<span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(0)'>注册账号</span> |
|
|
|
<span style="color: #9c9fa4">|</span> |
|
|
|
<span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(1)'>账号登录</span> |
|
|
|
<span style="color: #9c9fa4">|</span> |
|
|
|
<span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(2)'>忘记密码</span> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 忘记密码 --> |
|
|
|
<view class='forgetPassword' v-if='titleIndex==2'> |
|
|
|
<!-- 标题 --> |
|
|
|
<view class="title">{{title}}</view> |
|
|
|
<view class="title">{{titleList[titleIndex]}}</view> |
|
|
|
|
|
|
|
<!-- 表单 --> |
|
|
|
<view class="form1"> |
|
|
|
@ -94,50 +79,52 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 按钮 --> |
|
|
|
<view class="btn"> |
|
|
|
<button class='a'>{{btnText}}</button> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- tab --> |
|
|
|
<view class="bottomTab"> |
|
|
|
<span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(0)'>注册账号</span> |
|
|
|
<span style="color: #9c9fa4">|</span> |
|
|
|
<span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(1)'>账号登录</span> |
|
|
|
<span style="color: #9c9fa4">|</span> |
|
|
|
<span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(2)'>忘记密码</span> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 按钮 --> |
|
|
|
<view class="btn" |
|
|
|
@click="submit"> |
|
|
|
<button class='a'>{{titleList[titleIndex]}}</button> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- tab --> |
|
|
|
<!-- <view class="bottomTab"> |
|
|
|
<span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(0)'>注册账号</span> |
|
|
|
<span style="color: #9c9fa4">|</span> |
|
|
|
<span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(1)'>账号登录</span> |
|
|
|
<span style="color: #9c9fa4">|</span> |
|
|
|
<span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'" |
|
|
|
@click='changePage(2)'>忘记密码</span> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<configPopup ref="popup"></configPopup> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import bottomBtn from "../../components/bottom/bottomBtn.vue" |
|
|
|
import configPopup from '@/components/config/configPopup.vue'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
bottomBtn |
|
|
|
configPopup |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
this.titleIndex = option.index |
|
|
|
this.title = option.index == 0 ? '注册' : option.index == 1 ? '登录' : '忘记密码' |
|
|
|
this.btnText = option.index == 0 ? '注册' : option.index == 1 ? '登录' : '重置密码' |
|
|
|
this.titleIndex = option.index || 1 |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
titleIndex: 0, |
|
|
|
titleList: ['注册账号', '账号密码登录', '重置密码'], |
|
|
|
checkboxValue: ['apple'], |
|
|
|
titleList: ['注册', '登录', '重置密码'], |
|
|
|
checkboxValue: [], |
|
|
|
form: { |
|
|
|
userName: '', |
|
|
|
password: '', |
|
|
|
checkboxValue: 'apple', |
|
|
|
account: '13135294009', |
|
|
|
password: 'lzx123456', |
|
|
|
}, |
|
|
|
form1: { |
|
|
|
userName: '', |
|
|
|
@ -145,30 +132,31 @@ |
|
|
|
password1: '', |
|
|
|
password2: '', |
|
|
|
}, |
|
|
|
|
|
|
|
bottomBtnStyle: { |
|
|
|
color: '#FFF', |
|
|
|
backgroundColor: '#fd5100', |
|
|
|
fontSize: '34rpx', |
|
|
|
|
|
|
|
width: '400rpx', |
|
|
|
height: '80rpx', |
|
|
|
borderRadius: '100rpx', |
|
|
|
bottom: '42%' |
|
|
|
}, |
|
|
|
title: "", //标题 |
|
|
|
btnText: "", //按钮文字, |
|
|
|
tips: '获取验证码', |
|
|
|
seconds: 60, |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
submit(){ |
|
|
|
if(!this.checkboxValue.length){ |
|
|
|
return uni.showToast({ |
|
|
|
title: '请先同意隐私协议', |
|
|
|
icon:'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
if(this.$utils.verificationAll(this.form, { |
|
|
|
account: '请输入账号', |
|
|
|
password: '请输入密码', |
|
|
|
})){ |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.$store.commit('accountLogin', this.form) |
|
|
|
}, |
|
|
|
// 切换页面 |
|
|
|
changePage(index) { |
|
|
|
this.titleIndex = index |
|
|
|
this.title = index == 0 ? '注册' : index == 1 ? '登录' : '忘记密码' |
|
|
|
this.btnText = index == 0 ? '注册' : index == 1 ? '登录' : '重置密码' |
|
|
|
}, |
|
|
|
|
|
|
|
confirm() { |
|
|
|
@ -213,7 +201,7 @@ |
|
|
|
.refundsOrExchange { |
|
|
|
background-color: #FFF; |
|
|
|
height: 100vh; |
|
|
|
|
|
|
|
|
|
|
|
.frame { |
|
|
|
background-color: #FFF; |
|
|
|
|
|
|
|
@ -262,45 +250,43 @@ |
|
|
|
font-size: 22rpx |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
// height: 5vh; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
// height: 5vh; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin: 90rpx 0 0 0; |
|
|
|
|
|
|
|
.a { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin: 50rpx 0 0 0; |
|
|
|
|
|
|
|
.a { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 70%; |
|
|
|
height: 80rpx; |
|
|
|
color: #FFF; |
|
|
|
background-color: #fd5100; |
|
|
|
border: 1px solid red; |
|
|
|
border-radius: 100rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
align-items: center; |
|
|
|
width: 70%; |
|
|
|
height: 80rpx; |
|
|
|
color: #FFF; |
|
|
|
background-color: $uni-color; |
|
|
|
border: 1px solid red; |
|
|
|
border-radius: 100rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottomTab { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
height: 10vh; |
|
|
|
padding: 0 80rpx; |
|
|
|
|
|
|
|
.tabbarItemActive { |
|
|
|
color: #fd5100; |
|
|
|
} |
|
|
|
|
|
|
|
.tabbarItemNoActive { |
|
|
|
color: #9c9fa4; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottomTab { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
height: 10vh; |
|
|
|
padding: 0 80rpx; |
|
|
|
margin-top: 30rpx; |
|
|
|
|
|
|
|
.tabbarItemActive { |
|
|
|
color: $uni-color; |
|
|
|
} |
|
|
|
|
|
|
|
.tabbarItemNoActive { |
|
|
|
color: #9c9fa4; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.forgetPassword { |
|
|
|
@ -354,45 +340,6 @@ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
// height: 5vh; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin: 30rpx 0 0 0; |
|
|
|
|
|
|
|
.a { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 70%; |
|
|
|
height: 80rpx; |
|
|
|
color: #FFF; |
|
|
|
background-color: #fd5100; |
|
|
|
border: 1px solid red; |
|
|
|
border-radius: 100rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bottomTab { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin: 50rpx 0 0 0; |
|
|
|
padding: 0 80rpx; |
|
|
|
|
|
|
|
.tabbarItemActive { |
|
|
|
color: #fd5100; |
|
|
|
} |
|
|
|
|
|
|
|
.tabbarItemNoActive { |
|
|
|
color: #9c9fa4; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
