101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<pb-layout :leftIcon="''" navbar="inner" :bgStyle="{ backgroundColor: '#fff' }">
|
||
|
|
<view class="login-module">
|
||
|
|
<view>
|
||
|
|
{{ title }}
|
||
|
|
</view>
|
||
|
|
<uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind">
|
||
|
|
<uni-forms-item name="mobile">
|
||
|
|
<uni-easyinput
|
||
|
|
placeholder="请输入手机号"
|
||
|
|
v-model="state.model.mobile"
|
||
|
|
:inputBorder="false"
|
||
|
|
type="number"
|
||
|
|
/>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item name="code">
|
||
|
|
<uni-easyinput
|
||
|
|
placeholder="验证码"
|
||
|
|
v-model="state.model.code"
|
||
|
|
:inputBorder="false"
|
||
|
|
type="number"
|
||
|
|
maxlength="4"
|
||
|
|
>
|
||
|
|
<template #right>
|
||
|
|
<button class="ss-reset-button code-btn code-btn-start" @tap="smsLoginSubmit">
|
||
|
|
获取验证码
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
</uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-forms>
|
||
|
|
<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">登录</button>
|
||
|
|
</view>
|
||
|
|
</pb-layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const title = ref('欢迎登录')
|
||
|
|
|
||
|
|
const state = ref({
|
||
|
|
model: {
|
||
|
|
mobile: '',
|
||
|
|
code: '',
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
mobile: {
|
||
|
|
rules: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
errorMessage: '手机号不能为空',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
pattern: /^1[3-9]\d{9}$/,
|
||
|
|
errorMessage: '手机号格式错误',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
code: {
|
||
|
|
rules: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
errorMessage: '验证码不能为空',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
pattern: /^\d{4}$/,
|
||
|
|
errorMessage: '验证码格式错误',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.login-module {
|
||
|
|
.login-btn-start {
|
||
|
|
width: 158rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
line-height: normal;
|
||
|
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||
|
|
border-radius: 28rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.code-btn-start {
|
||
|
|
width: 160rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
line-height: normal;
|
||
|
|
border: 2rpx solid var(--ui-BG-Main);
|
||
|
|
border-radius: 28rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: var(--ui-BG-Main);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|