秦佳浩 2 months ago
commit 79e48d23ca

@ -1,172 +1,183 @@
<template> <template>
<!-- 使用view标签创建一个类名为"con"的容器元素作为整个登录页面内容的包裹元素 -->
<view class="con"> <view class="con">
<!-- 展示一个图片元素图片来源为项目中静态资源目录下的"logo.png"文件 -->
<image src="@/static/logo.png" /> <image src="@/static/logo.png" />
<!-- 登录 --> <!-- 登录表单部分的整体容器类名为"login-form" -->
<view class="login-form"> <view class="login-form">
<!-- 根据"errorTips"的值来动态添加"error"类名用于控制账号输入框相关的错误提示显示与否同时基础类名为"item" -->
<view :class="['item',errorTips==1? 'error':'']"> <view :class="['item',errorTips==1? 'error':'']">
<!-- 账号输入框所在的容器类名为"account"内部包含账号提示文本和输入框元素 -->
<view class="account"> <view class="account">
<!-- 显示"账号"提示文本类名为"input-item" -->
<text class="input-item"> <text class="input-item">
账号 账号
</text> </text>
<input <!-- 账号输入框类型为文本输入框type="text"绑定了自定义数据属性"data-type""account"
type="text" 设置了占位符样式类和具体的占位符文本同时监听输入事件当输入时会触发"getInputVal"方法 -->
data-type="account" <input type="text"
placeholder-class="inp-palcehoder" data-type="account"
placeholder="请输入用户名" placeholder-class="inp-palcehoder"
@input="getInputVal" placeholder="请输入用户名"
> @input="getInputVal">
</view> </view>
<view <!-- "errorTips"等于1时显示这个错误提示文本元素类名为"error-text"包含一个警告图标和具体的提示信息 -->
v-if="errorTips==1" <view v-if="errorTips==1"
class="error-text" class="error-text">
>
<text class="warning-icon"> <text class="warning-icon">
! !
</text> </text>
请输入账号 请输入账号
</view> </view>
</view> </view>
<!-- 与账号输入框部分类似根据"errorTips"的值来动态添加"error"类名用于控制密码输入框相关的错误提示显示与否基础类名为"item" -->
<view :class="['item',errorTips==2? 'error':'']"> <view :class="['item',errorTips==2? 'error':'']">
<view class="account"> <view class="account">
<text class="input-item"> <text class="input-item">
密码 密码
</text> </text>
<input <input type="password"
type="password" data-type="password"
data-type="password" placeholder-class="inp-palcehoder"
placeholder-class="inp-palcehoder" placeholder="请输入密码"
placeholder="请输入密码" @input="getInputVal">
@input="getInputVal"
>
</view> </view>
<view <view v-if="errorTips==2"
v-if="errorTips==2" class="error-text">
class="error-text"
>
<text class="warning-icon"> <text class="warning-icon">
! !
</text> </text>
请输入密码 请输入密码
</view> </view>
</view> </view>
<!-- 操作相关元素的容器类名为"operate"目前里面包含了跳转到注册页面的链接 -->
<view class="operate"> <view class="operate">
<view <view class="to-register"
class="to-register" @tap="toRegitser">
@tap="toRegitser"
>
还没有账号 还没有账号
<text>去注册></text> <text>去注册></text>
</view> </view>
</view> </view>
</view> </view>
</view>
<view> <!-- 包含登录按钮和回到首页按钮的容器 -->
<button <view>
class="authorized-btn" <!-- 登录按钮类名为"authorized-btn"点击时会触发"login"方法 -->
@tap="login" <button class="authorized-btn"
> @tap="login">
登录 登录
</button> </button>
<button <!-- 回到首页按钮类名为"to-idx-btn"点击时会触发"toIndex"方法 -->
class="to-idx-btn" <button class="to-idx-btn"
@tap="toIndex" @tap="toIndex">
> 回到首页
回到首页 </button>
</button> </view>
</view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { encrypt } from '@/utils/crypto.js' // "@/utils/crypto.js""encrypt"
import { encrypt } from '@/utils/crypto.js'
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示当页面显示时执行以下代码
*/ * 设置页面头部导航栏的标题为"用户登录"
onShow(() => { */
// onShow(() => {
uni.setNavigationBarTitle({ //
title: '用户登录' uni.setNavigationBarTitle({
title: '用户登录'
})
}) })
})
const principal = ref('') // // 使Vueref"principal"
const errorTips = ref(0) // const principal = ref('') //
watch( // 使Vueref"errorTips"0
() => principal.value, const errorTips = ref(0) //
() => { // "principal""errorTips"0
errorTips.value = 0 watch(
} () => principal.value,
) () => {
errorTips.value = 0
}
)
const credentials = ref('') // // 使Vueref"credentials"
/** const credentials = ref('') //
* 输入框的值
*/ /**
const getInputVal = (e) => { * 输入框的值发生变化时触发的方法用于获取输入框输入的值并根据输入框的类型账号或密码分别存储到对应的响应式数据中
const type = e.currentTarget.dataset.type * @param {Object} e - 输入事件对象包含了输入框相关的各种信息如输入的值绑定的数据属性等
if (type == 'account') { */
principal.value = e.detail.value const getInputVal = (e) => {
} else if (type == 'password') { const type = e.currentTarget.dataset.type
credentials.value = e.detail.value if (type == 'account') {
principal.value = e.detail.value
} else if (type == 'password') {
credentials.value = e.detail.value
}
} }
}
/** /**
* 登录 * 登录按钮点击时触发的方法用于处理登录逻辑
*/ * 首先判断账号和密码是否为空如果为空则设置相应的错误提示如果都不为空则发起登录请求
const login = () => { * 将加密后的密码和账号信息作为请求数据发送到服务器的"/login"接口根据服务器返回结果进行相应处理
if (principal.value.length == 0) { * 登录成功后显示提示信息并在1秒后跳转到首页
errorTips.value = 1 */
} else if (credentials.value.length == 0) { const login = () => {
errorTips.value = 2 if (principal.value.length == 0) {
} else { errorTips.value = 1
errorTips.value = 0 } else if (credentials.value.length == 0) {
http.request({ errorTips.value = 2
url: '/login', } else {
method: 'post', errorTips.value = 0
data: { http.request({
userName: principal.value, url: '/login',
passWord: encrypt(credentials.value) method: 'post',
} data: {
}) userName: principal.value,
.then(({ data }) => { passWord: encrypt(credentials.value)
http.loginSuccess(data, () => { }
uni.showToast({ })
title: '登录成功', .then(({ data }) => {
icon: 'none', http.loginSuccess(data, () => {
complete: () => { uni.showToast({
setTimeout(() => { title: '登录成功',
wx.switchTab({ icon: 'none',
url: '/pages/index/index' complete: () => {
}) setTimeout(() => {
}, 1000) wx.switchTab({
} url: '/pages/index/index'
})
}, 1000)
}
})
}) })
}) })
}) }
} }
}
/** /**
* 去注册 * 跳转到注册页面的方法使用uni-app的导航函数跳转到"/pages/register/register"页面
*/ */
const toRegitser = () => { const toRegitser = () => {
uni.navigateTo({ uni.navigateTo({
url: '/pages/register/register' url: '/pages/register/register'
}) })
} }
/** /**
* 回到首页 * 回到首页的方法使用微信小程序相关的切换页面函数这里可能是在uni-app中兼容微信小程序的写法切换到"/pages/index/index"页面
*/ */
const toIndex = () => { const toIndex = () => {
wx.switchTab({ wx.switchTab({
url: '/pages/index/index' url: '/pages/index/index'
}) })
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "./accountLogin.scss"; // "./accountLogin.scss"
// "scoped"
@import "./accountLogin.scss";
</style> </style>

Loading…
Cancel
Save