feat(登录)

This commit is contained in:
Ankkaya 2024-05-22 18:05:56 +08:00
parent 70ad660268
commit c6ba320a80
8 changed files with 152 additions and 9 deletions

View File

@ -8,6 +8,15 @@
},
"pages": [
//pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/login",
"style": {
"navigationBarTitleText": "登录"
},
"meta": {
"auth": false
}
},
{
"path": "pages/index/index",
"aliasPath": "/",

100
pages/index/login.vue Normal file
View File

@ -0,0 +1,100 @@
<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>

20
peach/config/zIndex.js Normal file
View File

@ -0,0 +1,20 @@
// uniapp在H5中各API的z-index值如下
/**
* actionsheet: 999
* modal: 999
* navigate: 998
* tabbar: 998
* toast: 999
*/
export default {
toast: 10090,
noNetwork: 10080,
popup: 10075, // popup包含popupactionsheetkeyboardpicker的值
mask: 10070,
navbar: 980,
topTips: 975,
sticky: 970,
indexListSticky: 965,
popover: 960,
}

View File

@ -2,6 +2,8 @@ import $store from '@/peach/store'
import $platform from '@/peach/platform'
import $url from '@/peach/url'
import $router from '@/peach/router'
import $helper from '@/peach/helper'
import zIndex from '@/peach/config/zIndex.js'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import duration from 'dayjs/plugin/duration'
@ -16,6 +18,8 @@ const peach = {
$platform,
$url,
$router,
$helper,
$zIndex: zIndex,
}
export async function peachInit() {

View File

@ -9,12 +9,12 @@
left: sticky ? 'auto' : '0px',
top: state.fixed && !bottom ? (noNav ? val : val + sys_navBar) + 'px' : 'auto',
bottom: insetHeight,
zIndex: index + sheep.$zIndex.navbar,
zIndex: index + peach.$zIndex.navbar,
},
!alway ? { opacity: state.opacityVal } : '',
]"
>
<view class="ui-fixed-content" @tap="toTop" :style="[{ zIndex: index + sheep.$zIndex.navbar }]">
<view class="ui-fixed-content" @tap="toTop" :style="[{ zIndex: index + peach.$zIndex.navbar }]">
<slot></slot>
<view
v-if="safeAreaInsets.bottom && bottom && isInset"
@ -27,7 +27,7 @@
class="ui-fixed-bg"
:class="[ui, bg]"
:style="[
{ zIndex: index + sheep.$zIndex.navbar - 1 },
{ zIndex: index + peach.$zIndex.navbar - 1 },
bgStyles,
opacity ? { opacity: state.opacityVal } : '',
]"
@ -45,7 +45,7 @@
import { onPageScroll } from '@dcloudio/uni-app'
import { getCurrentInstance, unref, onMounted, reactive, nextTick, computed } from 'vue'
import peach from '@/peach'
const { safeAreaInsets } = sheep.$platform.device
const { safeAreaInsets } = peach.$platform.device
const vm = getCurrentInstance()
@ -164,11 +164,11 @@ const setFixed = (value) => {
if (unref(props.bottom)) {
state.fixed =
value >=
state.content.bottom - sheep.$platform.device.windowHeight + state.content.height + unref(props.val)
state.content.bottom - peach.$platform.device.windowHeight + state.content.height + unref(props.val)
} else {
state.fixed =
value >=
state.content.top - (unref(props.noNav) ? unref(props.val) : unref(props.val) + sheep.$platform.navbar)
state.content.top - (unref(props.noNav) ? unref(props.val) : unref(props.val) + peach.$platform.navbar)
}
}

View File

@ -19,7 +19,7 @@
:class="state.isDark ? 'text-white' : 'text-black'"
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
>
<view class="icon-box ss-flex">
<view v-if="leftIcon" class="icon-box ss-flex">
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
<text class="sicon-back" v-if="hasHistory" />
<text class="sicon-home" v-else />
@ -82,6 +82,11 @@ const props = defineProps({
default: 100,
},
leftIcon: {
type: String,
default: '',
},
title: {
//
type: String,

View File

@ -5,6 +5,7 @@
<pb-navbar
v-if="navbar === 'normal'"
:title="title"
:leftIcon="leftIcon"
statusBar
:color="color"
:tools="tools"
@ -14,7 +15,7 @@
/>
<view class="page-body" :style="[bgBody]">
<!-- 顶部导航栏-情况2沉浸式头部 -->
<pb-inner-navbar v-if="navbar === 'inner'" :title="title" />
<pb-inner-navbar v-if="navbar === 'inner'" :title="title" :leftIcon="leftIcon" />
<view v-if="navbar === 'inner'" :style="[{ paddingTop: peach.$platform.navbar + 'px' }]"></view>
<!-- 页面内容插槽 -->
@ -62,6 +63,10 @@ const props = defineProps({
type: String,
default: '',
},
leftIcon: {
type: String,
default: '',
},
navbar: {
type: String,
default: 'normal',

View File

@ -128,7 +128,7 @@ const props = defineProps({
},
leftIcon: {
type: String,
default: 'left',
default: '',
},
rightIcon: {
type: String,