Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 005e1fbe 作者: 宇宙超人
操作

Merge branch 'main' of https://gitee.com/mrf/agri-app

上级 495ad646 4fd308f1
正在显示 包含 483 行增加 和 4 行删除
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/model/userInfo.ts
......@@ -6,6 +6,8 @@ enum Api {
sysLogin = '/sys/mLogin', // 登陆
dictList = '/sys/dict/queryAllDictItems', // 获取字典数据
location = '/tianditu/geocode', // 根据经纬度获取地址
sysSmsCode = '/app/user/getSmsCode', // 短信验证码
sysRegister = '/app/user/register', // 注册
}
/**
* @param params 请求参数
......@@ -64,3 +66,27 @@ export function location(params = {}) {
},
})
}
/**
* @param params 请求参数
* @description: 注册
*/
export function sysRegister(params = {}) {
return otherHttp.post({
url: Api.sysRegister,
params,
})
}
/**
* @param params 请求参数
* @description: 短信验证码
*/
export function sysSmsCode(params = {}) {
return otherHttp.get({
url: Api.sysSmsCode,
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
}
src/pages.json
{
"pages": [
{
"path": "pages/login/login",
......@@ -14,6 +13,18 @@
}
},
{
"path": "pages/login/register",
"style": {
"navigationStyle": "custom",
"transparentTitle": "auto",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": {}
}
}
},
{
"path": "pages/shouye/shouye",
"style": {
"navigationBarTitleText": "",
......@@ -277,7 +288,7 @@
"fontSrc": "/static/uni.ttf",
"color": "#fff",
"fontSize": "28rpx",
"width":"auto"
"width": "auto"
}
]
}
......@@ -383,7 +394,7 @@
"fontSrc": "/static/uni.ttf",
"color": "#fff",
"fontSize": "28rpx",
"width":"auto"
"width": "auto"
}
]
}
......@@ -407,7 +418,7 @@
"fontSrc": "/static/uni.ttf",
"color": "#fff",
"fontSize": "28rpx",
"width":"auto"
"width": "auto"
}
]
}
......
src/pages/login/login.vue
......@@ -151,6 +151,14 @@
})
}
/**
* 跳转到注册页面
*/
function goRegister() {
uni.reLaunch({
url: '/pages/login/register',
})
}
// 添加欢迎登录的文字打字动态效果
let loop = null
let direction = 'right'
......@@ -272,6 +280,7 @@
:loading="model.loading"
/>
</view>
<view class="flex-center p-32rpx box-border btn-register" @click="goRegister"> 立即注册 </view>
</fui-form>
<!-- </view> -->
<fui-checkbox-group class="checkbox" name="checkbox">
......@@ -455,4 +464,7 @@
:deep(.fui-input__border-bottom) {
right: 32rpx !important;
}
.btn-register {
color: cadetblue;
}
</style>
src/pages/login/register.vue 0 → 100644
<script setup lang="ts">
// import { PUSH_CLIENT_KEY } from '/@/enums/cacheEnum'
import { useUserStore } from '@/store/modules/user'
import * as API from '/@/api/model/userInfo'
const userStore = useUserStore()
onShow(async () => {})
// 页面数据
const defaultText = '湖南省农业服务平台'
const form = ref()
const model = reactive({
show: false,
isLogin: false,
loading: false,
text: defaultText,
countdown: 0, // 倒计时秒数
countdownTimer: null, // 倒计时定时器
form: {
rules: [
{
name: 'phone',
rule: ['required'],
msg: ['请输入手机号'],
},
{
name: 'password',
rule: ['required'],
msg: ['请输入密码'],
},
{
name: 'code',
rule: ['required'],
msg: ['请输入验证码'],
},
],
rulesPhone: [
{
name: 'phone',
rule: ['required'],
msg: ['请输入手机号'],
},
],
data: {
phone: '',
password: '',
code: '',
},
},
})
/**
* 注册
*/
function register() {
form?.value.validator(model.form.data, model.form.rules).then(async (res: { isPassed: boolean }) => {
if (res.isPassed) {
// 注册参数
const params = {
phone: model.form.data.phone,
password: model.form.data.password,
code: model.form.data.code,
}
// 短信登录
model.loading = true
API.sysRegister(params)
.then(async (body) => {
console.log('body', body)
if (body) {
// 打开登录页
goLogin()
Message.toast(`注册成功, 请登录~`)
} else {
Message.toast(body.message)
return false
}
})
.finally(() => {
model.loading = false
})
}
})
}
/**
* 获取验证码
*/
function smsCode() {
form?.value.validator(model.form.data, model.form.rulesPhone).then(async (res: { isPassed: boolean }) => {
if (res.isPassed) {
// 如果已经在倒计时中，不重复发送
if (model.countdown > 0) {
return
}
const params = {
phone: model.form.data.phone,
}
API.sysSmsCode(params)
.then(async (body) => {
console.log('body', body)
// 开始倒计时
startCountdown()
})
.catch(() => {
// 即使请求失败也显示倒计时，防止重复点击
startCountdown()
})
}
})
}
/**
* 开始倒计时
*/
function startCountdown() {
model.countdown = 60
model.countdownTimer = setInterval(() => {
model.countdown--
if (model.countdown <= 0) {
clearInterval(model.countdownTimer)
model.countdownTimer = null
}
}, 1000)
}
/**
* 跳转到登录页
*/
function goLogin() {
uni.reLaunch({
url: '/pages/login/login',
})
}
// 添加欢迎登录的文字打字动态效果
let loop = null
let direction = 'right'
const count = ref(defaultText.length)
watch(
() => model.show,
(show) => {
if (show) {
loop && clearInterval(loop)
loop = setInterval(() => {
if (direction === 'right') {
count.value++
if (count.value > defaultText.length + 20) {
direction = 'left'
count.value = defaultText.length
}
} else {
count.value--
if (count.value < 0) {
direction = 'right'
}
}
if (count.value > defaultText.length) {
model.text = defaultText
} else if (count.value < 0) {
model.text = ''
} else {
model.text = defaultText.slice(0, count.value)
}
}, 200)
}
},
)
onHide(() => {
loop && clearInterval(loop)
loop = null
direction = 'right'
count.value = 0
model.show = false
})
</script>
<template>
<view class="warp">
<!-- <image class="login-warp" src="/static/login/login_bg.png" /> -->
<view class="register-bg-wrap">
<!-- <image class="register-bg" src="/static/images/register/register.png" /> -->
<view class="logo-content-wrap">
<view class="logo-text-1">你好，欢迎使用</view>
<view class="logo-text">数字农业服务平台</view>
</view>
</view>
<view class="register-form">
<fui-form class="form" ref="form" top="50" :padding="['0rpx', '32rpx']">
<view class="reigister-form-item">
<image class="reigister-form-image" src="/static/images/register/user.png" />
<text>手机号</text>
</view>
<fui-input
height="100rpx"
class="input"
autocomplete="off"
:required="false"
clearable
trim
placeholder="请输入手机号/账号"
v-model="model.form.data.phone"
name="mobile"
backgroundColor="transparent"
borderColor="#DDDDDD"
maxlength="11"
/>
<view class="reigister-form-item">
<image class="reigister-form-image" src="/static/images/register/pwd.png" />
<text>密码</text>
</view>
<fui-input
height="100rpx"
class="input"
password
autocomplete="new-password"
code
:required="false"
clearable
trim
placeholder="请输入密码"
v-model="model.form.data.password"
name="code"
marginTop="10"
backgroundColor="transparent"
borderColor="#DDDDDD"
/>
<view class="reigister-form-item">
<image class="reigister-form-image" src="/static/images/register/sms.png" />
<text>验证码</text>
</view>
<fui-input
:padding="['20rpx', '32rpx']"
placeholder="请输入验证码"
:bottomLeft="0"
marginTop="10"
v-model="model.form.data.code"
backgroundColor="transparent"
borderColor="#DDDDDD"
>
<fui-button
width="200rpx"
height="64rpx"
:background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'"
:color="model.countdown > 0 ? '#67c17a' : '#fff'"
@click="smsCode"
:size="28"
:disabled="model.countdown > 0"
:text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'"
/>
</fui-input>
<view class="btn__box flex-center p-32rpx box-border">
<fui-button
height="88rpx"
background="#67c17a"
size="32rpx"
radius="8rpx"
text="立即注册"
@click="register"
:disabled="model.loading"
:loading="model.loading"
/>
</view>
<view class="flex-center p-32rpx box-border btn-register" @click="goLogin"> 已有账号，立即登录 </view>
</fui-form>
</view>
</view>
</template>
<style lang="less" scoped>
// .login-warp {
// width: 100%;
// height: calc(100vh);
// position: absolute;
// // border: 1px solid #000;
// z-index: 0;
// }
@keyframes blink-caret {
0%,
100% {
border-right-color: #333;
}
50% {
border-right-color: transparent;
}
}
.warp {
position: relative;
font-size: 24rpx;
height: calc(100vh);
block-size: 100% 100%;
// background-size: 100% 100%;
// border: 1px solid #000;
background-color: #fff;
}
.fui-descr {
letter-spacing: 1rpx;
padding: 50rpx;
font-size: 24rpx;
color: #b2b2b2;
padding-top: 12rpx;
padding-bottom: 48rpx;
::v-deep(.fui-text__content) {
text-indent: 0 !important;
}
}
.register-bg-wrap {
position: absolute;
width: 100%;
height: 30vh;
// border: 1px solid #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url(/static/images/register/register.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
.logo-content-wrap {
display: flex;
flex-direction: column;
justify-content: left;
align-items: flex-start;
width: 86%;
.logo-text-1 {
font-size: 30rpx;
font-weight: 400;
letter-spacing: 0px;
margin-top: 4.25rem;
color: rgba(51, 51, 51, 0.7);
vertical-align: middle;
}
.logo-text {
font-size: 40rpx;
font-weight: 500;
letter-spacing: 0px;
margin-top: 40rpx;
color: rgba(51, 51, 51, 1);
vertical-align: middle;
}
}
}
.register-form {
position: absolute;
width: 100%;
height: 60vh;
left: 0px;
top: 450rpx;
opacity: 1;
border-radius: 14.03px 14.03px 0px 0px;
border: 1px solid #fff;
background: linear-gradient(
180deg,
rgba(181, 238, 215, 1) 0%,
rgba(181, 238, 215, 0.5) 30%,
rgba(255, 255, 255, 0.8) 100%
);
}
.reigister-form-item {
color: #000;
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
margin: 10rpx;
.reigister-form-image {
width: 60rpx;
height: 60rpx;
}
text {
font-size: 32rpx;
display: flex;
flex-direction: row;
margin-left: 20rpx;
}
}
.form {
position: absolute;
top: 80rpx;
width: 100%;
z-index: 10;
}
.checkbox {
position: fixed;
left: 0rpx;
bottom: 32rpx;
width: 100%;
z-index: 10;
}
.privacy-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.input,
.btn__box {
width: 100%;
height: 100rpx;
margin-top: 60rpx;
}
.fiexdText {
// position: absolute;
width: 100%;
margin-top: 40rpx;
}
:deep(.fui-input__border-bottom) {
right: 32rpx !important;
}
.btn-register {
color: cadetblue;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论