278 lines
6.4 KiB
Vue
278 lines
6.4 KiB
Vue
<template>
|
||
|
||
|
||
<view class="box">
|
||
<view class="" style="height: var(--status-bar-height);">
|
||
|
||
</view>
|
||
<view class="" style="margin-left: 20rpx;float: left;" @click="back">
|
||
<u-icon name="arrow-left" color="white" size="20"></u-icon>
|
||
</view>
|
||
<Myindex style="float: right;"></Myindex>
|
||
<view class="content">
|
||
|
||
<view class="tit" style="margin-bottom: 10rpx;">
|
||
您好！
|
||
</view>
|
||
<view class="tit">
|
||
欢迎进入吟龙土壤墒情监测溯系统!
|
||
</view>
|
||
<view class="input-card" style="color: #7A7A7A;">
|
||
<view class="login-type" style="color: black;font-weight: bold;">
|
||
注册
|
||
<view class="line" />
|
||
</view>
|
||
<view class="" style="margin: 30rpx 0;">
|
||
<view class="" style="display: flex;margin-bottom: 10rpx;">
|
||
<up-image :src="u('sj')" width="30rpx" height="44rpx"
|
||
style="margin-right: 20rpx;"></up-image>手机号
|
||
</view>
|
||
<u-input placeholder="请输入账号"
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none" shape='circle'
|
||
border="surround" v-model="formData.mobile"></u-input>
|
||
</view>
|
||
<view class="" style="display: flex;margin-top: 30rpx;margin-bottom: 10rpx;">
|
||
<up-image :src="u('yzm')" width="30rpx" height="44rpx" style="margin-right: 20rpx;"></up-image>验证码
|
||
</view>
|
||
<view class="" style="position: relative;">
|
||
<u-input type="number" shape='circle'
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none;margin-bottom:15rpx"
|
||
placeholder="请输入验证码" border="surround" v-model="formData.verify_code"></u-input>
|
||
|
||
|
||
<view class="get-code" :style="{color: countDown?'#ADADAD':''}" @click="getCode"><text
|
||
class="lineY"></text>
|
||
验证码 <text v-if='countDown'>{{countDown}}s</text> </view>
|
||
</view>
|
||
|
||
<view class="" style="margin: 30rpx 0;">
|
||
<view class="" style="display: flex;margin-top: 30rpx;margin-bottom: 10rpx;">
|
||
<up-image :src="u('mm')" width="30rpx" height="44rpx" style="margin-right: 20rpx;"></up-image>密码
|
||
</view>
|
||
<u-input :password="!pwdShow" shape='circle'
|
||
customStyle="background:#F5F5F5;height:80rpx;;padding-left:40rpx;border:none"
|
||
placeholder="请输入密码" border="surround" v-model="formData.password">
|
||
|
||
</u-input>
|
||
</view>
|
||
<!-- <view class="">
|
||
<u-input :password="!pwdShow1" shape='circle'
|
||
customStyle="background:#F5F5F5;height:80rpx;;padding-left:40rpx;border:none"
|
||
placeholder="请确认密码" border="surround" v-model="formData.password_confirm">
|
||
<template #suffix>
|
||
<u-icon :name="pwdShow1?'eye-off':'eye-fill'" size="25"
|
||
@click="pwdShow1=!pwdShow1"></u-icon>
|
||
</template>
|
||
</u-input>
|
||
|
||
|
||
</view> -->
|
||
|
||
<view class="sub-btn">
|
||
<u-button @click="submitFn" type="primary"
|
||
customStyle="border:none;height:90rpx;border-radius: 100rpx;" color="#34D190"
|
||
text="注册"></u-button>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Myindex from '@/components/return/index.vue';
|
||
import {
|
||
logregister,
|
||
registerCode
|
||
} from '@/api/api.js';
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
const pwdShow = ref(false)
|
||
const pwdShow1 = ref(false)
|
||
const formData = reactive({
|
||
mobile: "19130550023",
|
||
verify_code: "",
|
||
password: "",
|
||
password_confirm: "",
|
||
|
||
|
||
})
|
||
|
||
const countDown = ref(0)
|
||
const u = (name) => {
|
||
return `/static/main/login/${name}.png`
|
||
}
|
||
//倒计时
|
||
const startCountDown = () => {
|
||
countDown.value = 60
|
||
const timer = setInterval(() => {
|
||
countDown.value -= 1; // 更新倒计时秒数
|
||
|
||
if (countDown.value <= 0) {
|
||
clearInterval(timer); // 倒计时结束，清除定时器
|
||
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
|
||
const getCode = () => {
|
||
|
||
if (countDown.value) return
|
||
|
||
if (!formData.mobile) return uni.$u.toast('账号不能为空');
|
||
|
||
let data = {
|
||
mobile: formData.mobile,
|
||
scene: 'YZMDL'
|
||
}
|
||
registerCode(data).then((res) => {
|
||
|
||
if (res.code == 1) {
|
||
uni.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
startCountDown()
|
||
}
|
||
})
|
||
}
|
||
|
||
const submitFn = () => {
|
||
var pattern = /^(?=.*[a-zA-Z])(?=.*\d).+$/;
|
||
|
||
if (!formData.mobile) return uni.$u.toast('账号不能为空');
|
||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formData.mobile)) return uni.$u.toast(
|
||
'请输入正确的手机号码'
|
||
);
|
||
if (!formData.password)
|
||
return uni.$u.toast('密码不能为空')
|
||
if (formData.password.length < 6)
|
||
return uni.$u.toast('密码长度至少在6-25位之间')
|
||
if (!pattern.test(formData.password)) return uni.$u.toast('密码要包含数字与英文')
|
||
formData.password_confirm = formData.password
|
||
logregister(formData).then((res) => {
|
||
|
||
if (res.code == 1) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
uni.$u.toast('注册成功');
|
||
} else {
|
||
if (res.data && res.data.has_register == 1) {
|
||
uni.redirectTo({
|
||
url: '/pages/Login/login'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
}
|
||
const back = () => {
|
||
uni.navigateBack()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: $theme-main-color;
|
||
position: relative;
|
||
}
|
||
|
||
.content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
// border-radius: 100rpx;
|
||
width: 700rpx;
|
||
|
||
.tit {
|
||
color: white;
|
||
font-size: 45rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.input-card {
|
||
width: 700rpx;
|
||
background-color: #fff;
|
||
height: auto;
|
||
padding: 40rpx;
|
||
border-radius: 30rpx;
|
||
|
||
.login-type {
|
||
display: flex;
|
||
|
||
// margin-right: 50rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
// justify-content: flex-start;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
|
||
.line {
|
||
border-top: 3px solid #34D190;
|
||
margin-top: 10rpx;
|
||
width: 60rpx;
|
||
}
|
||
}
|
||
|
||
.yanzm {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.u-input {
|
||
|
||
margin-right: 60rpx;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.code {
|
||
width: 120rpx;
|
||
height: 80rpx;
|
||
background-color: #34D190;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
border-radius: 20rpx 20rpx;
|
||
font-size: 20rpx;
|
||
padding: 0rpx 20rpx;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.sub-btn {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.resgiter {
|
||
font-size: 20rpx;
|
||
margin-top: 40rpx;
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.get-code {
|
||
color: $theme-main-color;
|
||
font-size: 28rpx;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 20rpx;
|
||
|
||
.lineY {
|
||
width: 1px;
|
||
height: 20rpx;
|
||
background-color: $theme-main-color;
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
</style> |