feat(login): 实现手机号登录功能

- 新增手机号登录页面组件
- 添加手机号输入和验证码获取功能
- 实现验证码输入和登录功能
- 优化页面样式和布局
This commit is contained in:
xingyy 2025-01-10 09:56:19 +08:00
parent 9092b59027
commit 64536663d7
4 changed files with 61 additions and 51 deletions

View File

@ -1,16 +1,70 @@
<script setup>
const phoneNum=ref('')
const code=ref('')
const pane=ref(0)
</script>
<template>
<div class="bg-[url('@/static/images/asdfsdd.png')] w-[100vw] h-[100vh] bg-cover pt-[86px]">
<div class="w-full flex justify-center">
<img class="w-[189px] h-[105px]" src="@/static/images/ghfggff.png" alt="">
<div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
<div class="w-full flex justify-center mb-[100px]">
<img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
</div>
<div v-if="pane===0">
<div class="">
<div class="w-full flex justify-between">
<div class="text-[16px] text-[#000]">
中国大陆
</div>
<div><van-icon color="#777" name="arrow" size="14" /></div>
</div>
<div class="border-b-[1.7px] mt-[8px]">
<van-field v-model="phoneNum" clearable placeholder="请输入手机号">
<template #label>
<div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
+86
</div>
</template>
</van-field>
</div>
<div />
</div>
<div class="mt-[55px]">
<van-button v-if="phoneNum" type="primary" block style="height: 48px" >获取验证码</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px" >获取验证码</van-button>
</div>
</div>
<div v-else>
<div class="flex mb-[16px]">
<div class="text-[16px] text-[#BDBDBD] mr-[10px]">已发送验证码至</div>
<div class="text-[16px] text-[#000]">15834362333</div>
</div>
<van-password-input
:value="code"
:gutter="10"
focused
/>
<div class="text-#2B53AC text-14px">
重新发送
</div>
<div class="mt-[17px]">
<van-button v-if="code.length === 6" type="primary" block style="height: 48px" >登录</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px" >登录</van-button>
</div>
</div>
</div>
</template>
<style scoped>
<style scoped lang="scss">
:deep(.van-cell.van-field){
padding-left: 0;
}
:deep(.van-password-input){
margin: 0;
}
:deep(.van-password-input__item){
border: 1px solid #E5E5E5;
width: 41px;
height: 41px;
}
</style>

View File

@ -1,32 +0,0 @@
import type { UserConfig } from '@commitlint/types'
import { RuleConfigSeverity } from '@commitlint/types'
const Configuration: UserConfig = {
extends: ['@commitlint/config-conventional'],
formatter: '@commitlint/format',
rules: {
'type-enum': [
RuleConfigSeverity.Error,
'always',
[
'feat',
'fix',
'perf',
'style',
'docs',
'test',
'refactor',
'build',
'ci',
'chore',
'revert',
'wip',
'workflow',
'types',
'release',
],
],
},
}
export default Configuration

View File

@ -1,9 +0,0 @@
import antfu from '@antfu/eslint-config'
import nuxt from './.nuxt/eslint.config.mjs'
export default nuxt(
antfu({
unocss: true,
formatters: true,
}),
)

View File

@ -21,11 +21,8 @@
"vue-router": "^4.5.0"
},
"devDependencies": {
"@antfu/eslint-config": "^3.12.1",
"@iconify-json/carbon": "^1.2.5",
"@nuxt/eslint": "^0.7.4",
"@pinia/nuxt": "^0.9.0",
"@unocss/eslint-plugin": "0.65.2",
"@unocss/nuxt": "0.65.2",
"@unocss/preset-rem-to-px": "0.65.2",
"@vant/nuxt": "^1.0.6",