feat(登录)
This commit is contained in:
parent
70ad660268
commit
c6ba320a80
|
@ -8,6 +8,15 @@
|
||||||
},
|
},
|
||||||
"pages": [
|
"pages": [
|
||||||
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||||
|
{
|
||||||
|
"path": "pages/index/login",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "登录"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"aliasPath": "/",
|
"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 $platform from '@/peach/platform'
|
||||||
import $url from '@/peach/url'
|
import $url from '@/peach/url'
|
||||||
import $router from '@/peach/router'
|
import $router from '@/peach/router'
|
||||||
|
import $helper from '@/peach/helper'
|
||||||
|
import zIndex from '@/peach/config/zIndex.js'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
import duration from 'dayjs/plugin/duration'
|
import duration from 'dayjs/plugin/duration'
|
||||||
|
@ -16,6 +18,8 @@ const peach = {
|
||||||
$platform,
|
$platform,
|
||||||
$url,
|
$url,
|
||||||
$router,
|
$router,
|
||||||
|
$helper,
|
||||||
|
$zIndex: zIndex,
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function peachInit() {
|
export async function peachInit() {
|
||||||
|
|
|
@ -9,12 +9,12 @@
|
||||||
left: sticky ? 'auto' : '0px',
|
left: sticky ? 'auto' : '0px',
|
||||||
top: state.fixed && !bottom ? (noNav ? val : val + sys_navBar) + 'px' : 'auto',
|
top: state.fixed && !bottom ? (noNav ? val : val + sys_navBar) + 'px' : 'auto',
|
||||||
bottom: insetHeight,
|
bottom: insetHeight,
|
||||||
zIndex: index + sheep.$zIndex.navbar,
|
zIndex: index + peach.$zIndex.navbar,
|
||||||
},
|
},
|
||||||
!alway ? { opacity: state.opacityVal } : '',
|
!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>
|
<slot></slot>
|
||||||
<view
|
<view
|
||||||
v-if="safeAreaInsets.bottom && bottom && isInset"
|
v-if="safeAreaInsets.bottom && bottom && isInset"
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
class="ui-fixed-bg"
|
class="ui-fixed-bg"
|
||||||
:class="[ui, bg]"
|
:class="[ui, bg]"
|
||||||
:style="[
|
:style="[
|
||||||
{ zIndex: index + sheep.$zIndex.navbar - 1 },
|
{ zIndex: index + peach.$zIndex.navbar - 1 },
|
||||||
bgStyles,
|
bgStyles,
|
||||||
opacity ? { opacity: state.opacityVal } : '',
|
opacity ? { opacity: state.opacityVal } : '',
|
||||||
]"
|
]"
|
||||||
|
@ -45,7 +45,7 @@
|
||||||
import { onPageScroll } from '@dcloudio/uni-app'
|
import { onPageScroll } from '@dcloudio/uni-app'
|
||||||
import { getCurrentInstance, unref, onMounted, reactive, nextTick, computed } from 'vue'
|
import { getCurrentInstance, unref, onMounted, reactive, nextTick, computed } from 'vue'
|
||||||
import peach from '@/peach'
|
import peach from '@/peach'
|
||||||
const { safeAreaInsets } = sheep.$platform.device
|
const { safeAreaInsets } = peach.$platform.device
|
||||||
|
|
||||||
const vm = getCurrentInstance()
|
const vm = getCurrentInstance()
|
||||||
|
|
||||||
|
@ -164,11 +164,11 @@ const setFixed = (value) => {
|
||||||
if (unref(props.bottom)) {
|
if (unref(props.bottom)) {
|
||||||
state.fixed =
|
state.fixed =
|
||||||
value >=
|
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 {
|
} else {
|
||||||
state.fixed =
|
state.fixed =
|
||||||
value >=
|
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'"
|
:class="state.isDark ? 'text-white' : 'text-black'"
|
||||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
: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">
|
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||||
<text class="sicon-back" v-if="hasHistory" />
|
<text class="sicon-back" v-if="hasHistory" />
|
||||||
<text class="sicon-home" v-else />
|
<text class="sicon-home" v-else />
|
||||||
|
@ -82,6 +82,11 @@ const props = defineProps({
|
||||||
default: 100,
|
default: 100,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
leftIcon: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
|
||||||
title: {
|
title: {
|
||||||
//返回文本
|
//返回文本
|
||||||
type: String,
|
type: String,
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
<pb-navbar
|
<pb-navbar
|
||||||
v-if="navbar === 'normal'"
|
v-if="navbar === 'normal'"
|
||||||
:title="title"
|
:title="title"
|
||||||
|
:leftIcon="leftIcon"
|
||||||
statusBar
|
statusBar
|
||||||
:color="color"
|
:color="color"
|
||||||
:tools="tools"
|
:tools="tools"
|
||||||
|
@ -14,7 +15,7 @@
|
||||||
/>
|
/>
|
||||||
<view class="page-body" :style="[bgBody]">
|
<view class="page-body" :style="[bgBody]">
|
||||||
<!-- 顶部导航栏-情况2:沉浸式头部 -->
|
<!-- 顶部导航栏-情况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>
|
<view v-if="navbar === 'inner'" :style="[{ paddingTop: peach.$platform.navbar + 'px' }]"></view>
|
||||||
|
|
||||||
<!-- 页面内容插槽 -->
|
<!-- 页面内容插槽 -->
|
||||||
|
@ -62,6 +63,10 @@ const props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
leftIcon: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
navbar: {
|
navbar: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'normal',
|
default: 'normal',
|
||||||
|
|
|
@ -128,7 +128,7 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
leftIcon: {
|
leftIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'left',
|
default: '',
|
||||||
},
|
},
|
||||||
rightIcon: {
|
rightIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
Loading…
Reference in New Issue