239 lines
5.9 KiB
Vue
239 lines
5.9 KiB
Vue
<template>
|
||
<view class="li-login-page">
|
||
<view class=" li-flex li-flex-col li-justify-center li-items-center li-pt-270">
|
||
<image class="li-w-130 li-h-130 li-rd-40" src="/static/logo.png" mode=""></image>
|
||
<text class="li-text-38 li-text-#000000 li-mt-32 li-font-550">{{title}}</text>
|
||
</view>
|
||
<view class="li-w-80% li-mx-auto li-mt-100">
|
||
<!-- 账号 -->
|
||
<wd-input :maxlength="11" placeholder="请输入账号" type='number' v-model="form.username" prefix-icon="user"
|
||
placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
|
||
no-border />
|
||
<!-- 密码 -->
|
||
<view class="li-mt-28">
|
||
<wd-input :maxlength="11" placeholder="请输入密码" v-model="form.password" prefix-icon="lock-off"
|
||
placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
|
||
no-border show-password />
|
||
</view>
|
||
<!-- 验证码 -->
|
||
<view class="li-flex li-items-center li-justify-between li-mt-28">
|
||
<view class="li-w-420">
|
||
<wd-input :maxlength="11" placeholder="请输入验证码" type='text' v-model="form.code" prefix-icon="secured"
|
||
placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
|
||
no-border />
|
||
</view>
|
||
<view class="li-bg-white li-w-150 li-h-68" @click="getCode()">
|
||
<image class="li-w-150 li-h-68" :src="captchaData.image" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- button -->
|
||
<view class="li-w-85% li-mx-auto li-mt-90">
|
||
<wd-button @click="loginHandle" block custom-class="custom-shadow">登录</wd-button>
|
||
</view>
|
||
<!-- -->
|
||
<view class="li-flex li-items-center li-justify-center li-w-90% li-mx-auto li-text-#a5a5a5 li-text-24 li-mt-32">
|
||
<wd-checkbox checked-color="#2EA1EA" v-model="check" />
|
||
阅读并同意
|
||
<text @click="handleUserAgreement" class="li-text-#2EA1EA li-mx-10">
|
||
《用户协议》
|
||
</text>
|
||
和
|
||
<text @click="handlePrivacyPolicy" class="li-text-#2EA1EA li-mx-10">
|
||
《隐私政策》
|
||
</text>
|
||
</view>
|
||
<zero-loading type="wobble" v-if="loading"></zero-loading>
|
||
<wd-toast />
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive } from 'vue'
|
||
import { captcha, login } from '@/api/login';
|
||
import { onLoad, onShow, Uni } from '@dcloudio/uni-app';
|
||
import { md5 } from '@/utils/common';
|
||
import { useToast } from '@/uni_modules/wot-design-uni';
|
||
const Toast = useToast();
|
||
declare const uni : Uni
|
||
|
||
const title = uni.$globalData?.title
|
||
|
||
interface formItem {
|
||
username : string
|
||
password : string
|
||
code : string,
|
||
uuid : string
|
||
}
|
||
|
||
interface CaptchaData {
|
||
uuid : string
|
||
image : string
|
||
}
|
||
const loading = ref<boolean>(false)
|
||
|
||
const form = ref<formItem>({
|
||
username: '',
|
||
password: '',
|
||
code: "",
|
||
uuid: ""
|
||
})
|
||
|
||
let captchaData = ref<CaptchaData>({
|
||
uuid: '',
|
||
image: ''
|
||
})
|
||
|
||
const check = ref<boolean>(false)
|
||
|
||
const loginHandle = async () => {
|
||
if (!check.value) {
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: '请阅读并同意《用户协议》和《隐私政策》',
|
||
// duration: 2000
|
||
// })
|
||
Toast.info('请阅读并同意《用户协议》和《隐私政策》')
|
||
return;
|
||
}
|
||
if (!form.value.username) {
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: '登录账号不能为空',
|
||
// duration: 2000
|
||
// })
|
||
Toast.info('登录账号不能为空')
|
||
return;
|
||
}
|
||
if (!form.value.password) {
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: '登录密码不能为空',
|
||
// duration: 2000
|
||
// })
|
||
Toast.info('登录密码不能为空')
|
||
return;
|
||
}
|
||
if (!form.value.code) {
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: '验证码不能为空',
|
||
// duration: 2000
|
||
// })
|
||
Toast.info('验证码不能为空')
|
||
return;
|
||
}
|
||
// 请求数据处理
|
||
// loading.value = true
|
||
uni.showLoading({
|
||
title: '登录中...'
|
||
})
|
||
form.value.uuid = captchaData.value.uuid
|
||
form.value.password = md5(form.value.password)
|
||
const res = await login(form.value)
|
||
if (res.code != 200) {
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: res.msg,
|
||
// duration: 3000
|
||
// })
|
||
Toast.error(res.msg)
|
||
form.value.password = ""
|
||
form.value.code = ""
|
||
// loading.value = false
|
||
uni.hideLoading()
|
||
getCode()
|
||
return;
|
||
}
|
||
// 登录成功，保存token，跳转首页
|
||
uni.$store.commit("setToken", res.data.token)
|
||
setTimeout(() => {
|
||
// loading.value = false
|
||
uni.hideLoading()
|
||
// 跳转至首页
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}, 300)
|
||
|
||
};
|
||
|
||
/**
|
||
* 查看隐私政策
|
||
*/
|
||
const handlePrivacyPolicy = () => {
|
||
uni.navigateTo({
|
||
url: '/pagesB/agreement/index?type=2'
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 查看用户协议
|
||
*/
|
||
const handleUserAgreement = () => {
|
||
uni.navigateTo({
|
||
url: '/pagesB/agreement/index?type=1'
|
||
});
|
||
};
|
||
|
||
onShow(() => {
|
||
getCode()
|
||
});
|
||
|
||
const getCode = async () => {
|
||
const res = await captcha({})
|
||
captchaData.value = res.data as CaptchaData
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.li-login-page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: linear-gradient(to bottom,
|
||
rgba(197, 224, 253, 0.7) 0%,
|
||
rgba(197, 224, 253, 0.5) 20%,
|
||
rgba(197, 224, 253, 0.1) 40%,
|
||
rgba(242, 243, 247, 1.0) 70%,
|
||
rgba(197, 224, 253, 0.4) 90%,
|
||
rgba(197, 224, 253, 0.5) 100%);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
::v-deep .wd-input__body {
|
||
height: 85rpx;
|
||
|
||
}
|
||
|
||
::v-deep .wd-input__value {
|
||
height: 85rpx;
|
||
}
|
||
|
||
::v-deep .wd-input {
|
||
border-radius: 20rpx !important;
|
||
|
||
}
|
||
|
||
::v-deep .wd-input__icon {
|
||
font-size: 42rpx !important;
|
||
font-weight: 500 !important;
|
||
color: #232323 !important;
|
||
margin-right: 30rpx !important;
|
||
margin-left: 30rpx !important;
|
||
}
|
||
|
||
::v-deep .wd-input__clear {
|
||
margin-right: 20rpx !important;
|
||
}
|
||
|
||
::v-deep .wd-icon-eye-close {
|
||
font-size: 28rpx !important;
|
||
}
|
||
|
||
.custom-shadow {
|
||
height: 85rpx !important;
|
||
font-size: 32rpx !important;
|
||
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||
background-color: #2EA1EA !important;
|
||
}
|
||
</style> |