181 lines
3.9 KiB
Vue
181 lines
3.9 KiB
Vue
<template>
|
||
<j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#ffffff00"/>
|
||
|
||
<div class="content">
|
||
<j-gap height="50" background="#F9BF3A" opacity="0"/>
|
||
<div class="slogan">
|
||
<div class="slogan-1">注册</div>
|
||
</div>
|
||
|
||
|
||
<div class="input-box">
|
||
<!-- 允许输入数字，调起带符号的纯数字键盘 -->
|
||
<van-field
|
||
v-model="loginData.phoneNumber"
|
||
class="login-btn"
|
||
label="手机号码"
|
||
placeholder="请输入手机号码"
|
||
type="tel"
|
||
/>
|
||
|
||
<van-field
|
||
v-model="loginData.code"
|
||
class="login-btn"
|
||
label="验证码"
|
||
placeholder="请输入验证码"
|
||
type="number"
|
||
>
|
||
<template #button>
|
||
<div class="password-btn">
|
||
<van-count-down v-show="countDownFlag" ref="countDown" :auto-start="false" :time="time" @finish="onFinish">
|
||
<template #default="timeData">
|
||
<span class="block">{{ timeData.seconds }}秒</span>
|
||
</template>
|
||
</van-count-down>
|
||
<div v-show="!countDownFlag" style="color: #bc7c1c" @click="start">发送验证码</div>
|
||
</div>
|
||
</template>
|
||
</van-field>
|
||
|
||
<!-- 允许输入数字，调起带符号的纯数字键盘 -->
|
||
<van-field
|
||
v-model="loginData.password"
|
||
class="login-btn"
|
||
label="登录密码"
|
||
placeholder="请设置6-16位密码"
|
||
type="text"
|
||
/>
|
||
|
||
</div>
|
||
|
||
<van-button
|
||
:disabled="!loginData.password || !loginData.phoneNumber"
|
||
color="linear-gradient(to right, #D2A64C, #F9D88D)"
|
||
round
|
||
style="width: 100%; margin: 20px 0"
|
||
@click.stop="registerBtn"
|
||
>
|
||
注册
|
||
</van-button>
|
||
|
||
<view class="op">
|
||
<view class="register" @click="goLogin">登录</view>
|
||
</view>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {reactive, ref} from "vue";
|
||
import {showToast} from "vant";
|
||
import {useRouter} from "vue-router";
|
||
import {register, sendSmsRegister} from "@/api/login";
|
||
import {useUserStore} from "@/store/modules/user";
|
||
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
|
||
const loginData = reactive({
|
||
phone: null,
|
||
phoneNumber: '',
|
||
code: null,
|
||
password: '',
|
||
loginRole: 5,
|
||
openId: '',
|
||
ticket: null,
|
||
randStr: null
|
||
})
|
||
const time = ref(60 * 1000);
|
||
const countDown = ref();
|
||
const countDownFlag = ref(false);
|
||
const start = () => {
|
||
if (loginData.phoneNumber) {
|
||
countDown.value.start();
|
||
countDownFlag.value = true
|
||
sendSmsRegister({
|
||
phoneNumber: loginData.phoneNumber
|
||
}).then(res => {
|
||
console.log(res)
|
||
loginData.code = res
|
||
onFinish()
|
||
})
|
||
} else {
|
||
showToast('请输入手机号')
|
||
}
|
||
};
|
||
|
||
|
||
const registerBtn = () => {
|
||
register(loginData).then(res => {
|
||
// goLogin()
|
||
userStore.login({
|
||
mobile: loginData.phoneNumber,
|
||
password: loginData.password
|
||
}).then(res => {
|
||
router.replace('/home')
|
||
}, err => {
|
||
router.replace('/home')
|
||
})
|
||
})
|
||
}
|
||
|
||
const goLogin = () => {
|
||
router.back()
|
||
}
|
||
|
||
|
||
|
||
const onFinish = () => {
|
||
countDownFlag.value = false
|
||
countDown.value.reset();
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 0 20px;
|
||
background-image: linear-gradient(to bottom, #F9BF3A, #ffffff, #ffffff, #ffffff, #ffffff);
|
||
height: 100vh;
|
||
|
||
.slogan {
|
||
padding-top: 168px;
|
||
|
||
.slogan-1 {
|
||
font-size: 70px;
|
||
color: #3f3f3f;
|
||
}
|
||
|
||
.slogan-2 {
|
||
font-weight: 400;
|
||
font-size: 32px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.input-box {
|
||
margin-top: 40px;
|
||
padding: 20px 0 10px 0;
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
box-shadow: 0px 0px 7px -3px #b4b3b3;
|
||
|
||
.login-btn {
|
||
margin-bottom: 40px;
|
||
background: #12332100;
|
||
}
|
||
|
||
.password-btn {
|
||
border-left: 1px solid #CCCCCC;
|
||
padding-left: 20px;
|
||
}
|
||
}
|
||
|
||
.op {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
</style>
|