feat(登录)
This commit is contained in:
parent
70ad660268
commit
c6ba320a80
|
@ -8,6 +8,15 @@
|
|||
},
|
||||
"pages": [
|
||||
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/index/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
},
|
||||
"meta": {
|
||||
"auth": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"aliasPath": "/",
|
||||
|
|
|
@ -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>
|
|
@ -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包含popup,actionsheet,keyboard,picker的值
|
||||
mask: 10070,
|
||||
navbar: 980,
|
||||
topTips: 975,
|
||||
sticky: 970,
|
||||
indexListSticky: 965,
|
||||
popover: 960,
|
||||
}
|
|
@ -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() {
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -128,7 +128,7 @@ const props = defineProps({
|
|||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
default: '',
|
||||
},
|
||||
rightIcon: {
|
||||
type: String,
|
||||
|
|
Loading…
Reference in New Issue