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.
395 lines
8.4 KiB
395 lines
8.4 KiB
<template>
|
|
<view class="refundsOrExchange">
|
|
<!-- <navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack" /> -->
|
|
|
|
<view class="frame">
|
|
<!-- 登录和注册 -->
|
|
<view class="loginRegister" v-if='titleIndex!=2'>
|
|
<!-- 标题 -->
|
|
<view class="title">{{titleList[titleIndex]}}</view>
|
|
|
|
<!-- 头像 -->
|
|
<view class="userIamge">
|
|
<view
|
|
@click="upload">
|
|
<image
|
|
:src="form.image"
|
|
v-if="form.image"
|
|
mode="aspectFill" style="width: 100%;height: 100%;">
|
|
|
|
<image
|
|
src="/static/image/center/11.svg"
|
|
v-else
|
|
style="width: 100%;height: 100%;">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户名&密码&隐私条款 -->
|
|
<view class="form">
|
|
<view>
|
|
<uv-input v-model="form.account" 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;flex-wrap: wrap;">
|
|
<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>
|
|
|
|
<!-- 忘记密码 -->
|
|
<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.code" 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='#fd5100'
|
|
shape='circle'>{{tips}}</uv-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="password1">
|
|
<uv-input v-model="form1.password1" placeholder="设置您的新密码(6到50个字符)" password clearable
|
|
border="surround" shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input>
|
|
</view>
|
|
<view class="password2">
|
|
<uv-input v-model="form1.password2" 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">
|
|
<text
|
|
:key="index"
|
|
v-for="(item, index) in titleList"
|
|
:class="{tabbarItemActive : titleIndex == index}"
|
|
@click='changePage(index)'>{{ item }}</text>
|
|
</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 || 0
|
|
},
|
|
data() {
|
|
return {
|
|
titleIndex: 0,
|
|
titleList: ['登录', '注册'],//, '重置密码'
|
|
checkboxValue: [],
|
|
form: {
|
|
image : '',
|
|
account: '',
|
|
password: '',
|
|
// account: '李靖1',
|
|
// password: '123456',
|
|
},
|
|
form1: {
|
|
userName: '',
|
|
code: '',
|
|
password1: '',
|
|
password2: '',
|
|
},
|
|
tips: '获取验证码',
|
|
seconds: 60,
|
|
}
|
|
},
|
|
methods: {
|
|
// 上传头像
|
|
upload(){
|
|
if(this.titleIndex != 1){
|
|
return
|
|
}
|
|
this.$Oss.ossUploadImage({
|
|
success : url => {
|
|
this.form.image = url
|
|
}
|
|
})
|
|
},
|
|
submit(){
|
|
if(!this.checkboxValue.length){
|
|
return uni.showToast({
|
|
title: '请先同意隐私协议',
|
|
icon:'none'
|
|
})
|
|
}
|
|
|
|
if(this.$utils.verificationAll(this.form, {
|
|
account: '请输入账号',
|
|
password: '请输入密码',
|
|
})){
|
|
return
|
|
}
|
|
|
|
// 注册
|
|
if(this.titleIndex == 1){
|
|
|
|
if(this.$utils.verificationAll(this.form, {
|
|
image: '请上传头像',
|
|
})){
|
|
return
|
|
}
|
|
|
|
this.$api('register', {
|
|
name : this.form.account,
|
|
password : this.form.password,
|
|
image : this.form.image,
|
|
}, res => {
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '注册成功，请登录',
|
|
icon: 'none'
|
|
})
|
|
this.form = {
|
|
image : '',
|
|
account: '',
|
|
password: '',
|
|
}
|
|
this.titleIndex = 0
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
this.$store.commit('accountLogin', {
|
|
userName : this.form.account,
|
|
password : this.form.password,
|
|
})
|
|
},
|
|
// 切换页面
|
|
changePage(index) {
|
|
this.titleIndex = index
|
|
},
|
|
|
|
confirm() {
|
|
|
|
},
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
},
|
|
getCode() {
|
|
if (this.$refs.code.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
uni.$uv.toast('验证码已发送');
|
|
// 通知验证码组件内部开始倒计时
|
|
this.$refs.code.start();
|
|
}, 2000);
|
|
} else {
|
|
uni.$uv.toast('请勿重复发送');
|
|
}
|
|
},
|
|
end() {
|
|
// uni.$uv.toast('倒计时结束');
|
|
},
|
|
start() {
|
|
// uni.$uv.toast('倒计时开始');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.refundsOrExchange {
|
|
background-color: #FFF;
|
|
height: 100vh;
|
|
|
|
.frame {
|
|
background-color: #FFF;
|
|
margin-top: 120rpx;
|
|
|
|
.loginRegister {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40rpx;
|
|
|
|
.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 {
|
|
line-height: 50rpx;
|
|
>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;
|
|
border-radius: 100rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.bottomTab {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 60rpx;
|
|
margin-top: 30rpx;
|
|
color: #9c9fa4;
|
|
.tabbarItemActive {
|
|
color: $uni-color;
|
|
}
|
|
|
|
}
|
|
|
|
.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>
|