You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
514 lines
12 KiB
514 lines
12 KiB
<template>
|
|
<view class="refundsOrExchange">
|
|
<navbar :title="titleList[titleIndex]" leftClick
|
|
@leftClick="$utils.redirectTo('/pages/index/index')" />
|
|
|
|
<view class="frame">
|
|
|
|
<!-- 注册 -->
|
|
<view class='forgetPassword' v-if='titleIndex == 0'>
|
|
<!-- 标题 -->
|
|
<view class="title">{{titleList[titleIndex]}}</view>
|
|
|
|
<!-- 表单 -->
|
|
<view class="form1">
|
|
<view class="userName">
|
|
<uv-input v-model="form1.username" placeholder="请输入手机号" border="surround" shape='circle'
|
|
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view class="code">
|
|
<view class="left">
|
|
<uv-input v-model="form1.captcha" placeholder="请输入验证码" border="surround" shape='circle'
|
|
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view class="right">
|
|
<view>
|
|
<uv-toast ref="toast"></uv-toast>
|
|
<uv-code :seconds="seconds" @end="end" @start="start" ref="code"
|
|
@change="codeChange"></uv-code>
|
|
<uv-button @tap="getCode" iconSize='10rpx' color='#1f1c39'
|
|
shape='circle'>{{tips}}</uv-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="password1">
|
|
<uv-input v-model="form1.password" placeholder="设置您的新密码(6到50个字符)" password clearable
|
|
border="surround" shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view class="password2">
|
|
<uv-input v-model="form1.newPassword" placeholder="重新确认密码" password clearable border="surround"
|
|
shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<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"
|
|
@click="$refs.popup.open('getPrivacyPolicy')">《隐私条款》</span>和<span
|
|
style="color: #fd5100"
|
|
@click="$refs.popup.open('getUserAgreement')">《服务协议》</span>
|
|
</view>
|
|
</view>
|
|
</uv-checkbox-group>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 登录 -->
|
|
<view class="loginRegister" v-if='titleIndex==1'>
|
|
<!-- 标题 -->
|
|
<view class="title">{{titleList[titleIndex]}}</view>
|
|
|
|
<!-- 头像 -->
|
|
<view class="userIamge">
|
|
<view>
|
|
<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' clearable
|
|
:customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view>
|
|
<uv-input v-model="form.password" password placeholder="请输入密码" border="surround" shape='circle'
|
|
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view>
|
|
<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"
|
|
@click="$refs.popup.open('yszc')">《隐私条款》</span>和<span
|
|
style="color: #fd5100"
|
|
@click="$refs.popup.open('fwxy')">《服务协议》</span>
|
|
</view>
|
|
</view>
|
|
</uv-checkbox-group>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 忘记密码 -->
|
|
<view class='forgetPassword' v-if='titleIndex == 2'>
|
|
<!-- 标题 -->
|
|
<view class="title">{{titleList[titleIndex]}}</view>
|
|
|
|
<!-- 表单 -->
|
|
<view class="form1">
|
|
<view class="userName">
|
|
<uv-input v-model="form1.username" placeholder="请输入手机号" border="surround" shape='circle'
|
|
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view class="code">
|
|
<view class="left">
|
|
<uv-input v-model="form1.captcha" placeholder="请输入验证码" border="surround" shape='circle'
|
|
clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view class="right">
|
|
<view>
|
|
<uv-toast ref="toast"></uv-toast>
|
|
<uv-code :seconds="seconds" @end="end" @start="start" ref="code"
|
|
@change="codeChange"></uv-code>
|
|
<uv-button @tap="getCode" iconSize='10rpx' color='#1f1c39'
|
|
shape='circle'>{{tips}}</uv-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="password1">
|
|
<uv-input v-model="form1.password" placeholder="设置您的新密码(6到50个字符)" password clearable
|
|
border="surround" shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view class="password2">
|
|
<uv-input v-model="form1.newPassword" placeholder="重新确认密码" password clearable border="surround"
|
|
shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
</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 configPopup from '@/components/config/configPopup.vue';
|
|
export default {
|
|
components: {
|
|
configPopup
|
|
},
|
|
onLoad(option) {
|
|
this.titleIndex = option.index || 1
|
|
},
|
|
data() {
|
|
return {
|
|
titleIndex: 0,
|
|
titleList: ['注册', '登录', '重置密码'],
|
|
checkboxValue: [],
|
|
form: {
|
|
username: '',//19330214982
|
|
password: '',//1234567
|
|
loginModel: 0,
|
|
captcha: '',
|
|
},
|
|
form1: {
|
|
username: '',
|
|
captcha: '',
|
|
password: '',
|
|
newPassword: '',
|
|
},
|
|
tips: '获取验证码',
|
|
seconds: 60,
|
|
}
|
|
},
|
|
methods: {
|
|
submit() {
|
|
if (!this.checkboxValue.length && this.titleIndex != 2) {
|
|
return uni.showToast({
|
|
title: '请先同意隐私协议',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
if (this.titleIndex == 0) {
|
|
// 注册
|
|
this.register()
|
|
} else if (this.titleIndex == 1) {
|
|
// 登录
|
|
this.login()
|
|
} else {
|
|
// 忘记密码
|
|
this.updatePassword()
|
|
}
|
|
},
|
|
// 登录
|
|
login(){
|
|
|
|
if (this.$utils.verificationAll(this.form, {
|
|
username: '请输入账号',
|
|
password: '请输入密码',
|
|
})) {
|
|
return
|
|
}
|
|
|
|
if (!this.$utils.verificationPhone(this.form.username)) {
|
|
return uni.showToast({
|
|
title: '请输入合法的手机号',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
// 登录
|
|
this.$store.commit('login', this.form)
|
|
},
|
|
// 注册
|
|
register(){
|
|
|
|
if (this.$utils.verificationAll(this.form1, {
|
|
username: '请输入账号',
|
|
captcha : '请输入验证码',
|
|
password: '请输入密码',
|
|
newPassword: '请确认密码',
|
|
})) {
|
|
return
|
|
}
|
|
|
|
if (!this.$utils.verificationPhone(this.form1.username)) {
|
|
return uni.showToast({
|
|
title: '请输入合法的手机号',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
if (this.form1.password != this.form1.newPassword) {
|
|
return uni.showToast({
|
|
title: '密码与确认密码不一致',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
this.$api('registerUser', this.form1, res => {
|
|
this.form1 = {}
|
|
if (res.code == 200) {
|
|
this.titleIndex = 1
|
|
uni.showToast({
|
|
title: '注册成功，请登录！',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
updatePassword(){
|
|
|
|
if (this.$utils.verificationAll(this.form1, {
|
|
username: '请输入账号',
|
|
captcha : '请输入验证码',
|
|
password: '请输入新密码',
|
|
newPassword: '请确认密码',
|
|
})) {
|
|
return
|
|
}
|
|
|
|
if (!this.$utils.verificationPhone(this.form1.username)) {
|
|
return uni.showToast({
|
|
title: '请输入合法的手机号',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
if (this.form1.password != this.form1.newPassword) {
|
|
return uni.showToast({
|
|
title: '密码与确认密码不一致',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
this.$api('newPassword', this.form1, res => {
|
|
this.form1 = {}
|
|
if (res.code == 200) {
|
|
this.titleIndex = 1
|
|
uni.showToast({
|
|
title: '修改成功，请登录！',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 切换页面
|
|
changePage(index) {
|
|
this.titleIndex = index
|
|
},
|
|
|
|
confirm() {
|
|
|
|
},
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
},
|
|
getCode() {
|
|
if (this.$refs.code.canGetCode) {
|
|
|
|
if (!this.$utils.verificationPhone(this.form1.username)) {
|
|
return uni.showToast({
|
|
title: '请输入合法的手机号',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
uni.showLoading({
|
|
title: '正在获取验证码'
|
|
})
|
|
this.$api('sendSms', {
|
|
username: this.form1.username,
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
uni.hideLoading();
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
uni.$uv.toast('验证码已发送');
|
|
// 通知验证码组件内部开始倒计时
|
|
this.$refs.code.start();
|
|
}
|
|
})
|
|
} else {
|
|
uni.$uv.toast('请勿重复发送');
|
|
}
|
|
},
|
|
end() {
|
|
// uni.$uv.toast('倒计时结束');
|
|
},
|
|
start() {
|
|
// uni.$uv.toast('倒计时开始');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.content{
|
|
font-size: 22rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.refundsOrExchange {
|
|
background-color: #FFF;
|
|
height: 100vh;
|
|
|
|
.frame {
|
|
background-color: #FFF;
|
|
|
|
.loginRegister {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40rpx;
|
|
padding-bottom: 50rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
height: 10vh;
|
|
color: #000;
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.userIamge {
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 10vh;
|
|
|
|
>view:nth-of-type(1) {
|
|
width: 25%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
height: 12vh;
|
|
|
|
>view:nth-of-type(1) {
|
|
padding: 20rpx 100rpx;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
padding: 0 100rpx;
|
|
}
|
|
|
|
>view:nth-of-type(3) {
|
|
display: flex;
|
|
padding: 30rpx 100rpx 0 100rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.btn {
|
|
// height: 5vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 90rpx 0 0 0;
|
|
|
|
.a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 70%;
|
|
height: 80rpx;
|
|
color: #FFF;
|
|
background-color: $uni-color;
|
|
box-shadow: 0 0 4rpx 4rpx rgba($uni-color, 0.2);
|
|
border-radius: 100rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.bottomTab {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 10vh;
|
|
padding: 0 80rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.tabbarItemActive {
|
|
color: $uni-color;
|
|
}
|
|
|
|
.tabbarItemNoActive {
|
|
color: #9c9fa4;
|
|
}
|
|
}
|
|
|
|
.forgetPassword {
|
|
padding: 100rpx 40rpx 0 40rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
height: 10vh;
|
|
color: #000;
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
margin-top: 20rpx;
|
|
padding: 20rpx 80rpx;
|
|
|
|
.userName {
|
|
// padding: 20rpx 100 rpx;
|
|
}
|
|
|
|
.code {
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
.left {
|
|
width: 55%;
|
|
}
|
|
|
|
.right {
|
|
width: 45%;
|
|
height: 100%;
|
|
|
|
>view:nth-of-type(1) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.password1 {}
|
|
|
|
.password2 {}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|