123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <!-- 蓝色简洁登录页面 -->
- <template class="denglu">
- <view class="t-login">
- <!-- 标题 -->
- <view class="t-b">
- <image class="logo" src="~@/static/img/logo.png"></image>
- </view>
- <view class="t-b2">{{ subTitle }}</view>
- <form>
- <!-- 登录账号 -->
- <view class="login-form-item">
- <u-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
- <u-icon color="#E60012" slot="prefix" name="account" size="25px"></u-icon>
- </u-input>
- </view>
- <!-- 登录密码 -->
- <view class="login-form-item">
- <u-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
- <u-icon color="#E60012" slot="prefix" name="lock" size="25px"></u-icon>
- </u-input>
- </view>
- <!-- 图形验证码 -->
- <view class="login-form-item t-captcha" v-if="false">
- <u-input v-model="captchaCode" type="number" placeholder="请输入验证码" maxlength="4">
- <u-icon slot="prefix" name="fingerprint" size="35px"></u-icon>
- </u-input>
- <image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image>
- </view>
- <button class="login-button" @tap="login()">登 录</button>
- </form>
- </view>
- </template>
- <script>
- import * as CaptchaApi from '@/api/captcha'
- import {
- isEmpty
- } from '@/utils/verify.js'
- export default {
- data() {
- return {
- // subTitle: 'Global Project Management Syste',
- subTitle: '全球项目管理平台',
- // 图形验证码信息
- captcha: null,
- // 登录账号
- username: 'admin',
- // 密码
- password: 'admin123',
- // 图形验证码
- captchaCode: '',
- uuid: '',
- //是否开启验证码
- captchaEnabled: false
- };
- },
- created() {
- // 获取图形验证码
- this.getCaptcha()
- },
- methods: {
- // 获取图形验证码
- getCaptcha() {
- const app = this
- CaptchaApi.image().then(result => {
- let {
- captchaEnabled
- } = result
- app.captchaEnabled = captchaEnabled
- if (captchaEnabled) {
- app.captcha = 'data:image/gif;base64,' + result.img
- app.uuid = result.uuid
- }
- })
- },
- // 验证表单内容
- validItem() {
- const app = this
- if (isEmpty(app.username)) {
- uni.$u.toast('请输入登录用户名')
- return false
- }
- if (isEmpty(app.password)) {
- uni.$u.toast('请输入登录密码')
- return false
- }
- return true
- },
- // 确认登录
- login() {
- const app = this
- let valid = app.validItem();
- if (valid) {
- app.isLoading = true
- app.$store.dispatch('Login', {
- username: app.username,
- password: app.password,
- code: app.captchaCode,
- uuid: app.uuid
- }).then(result => {
- // uni.switchTab({
- // url: '/pages/work/index',
- // fail(err) {
- // console.log(err)
- // }
- // })
- // 直接跳转审批页面
- uni.navigateTo({
- url: '/pages/work/approve/list',
- fail(err) {
- console.log(err)
- }
- })
- })
- .catch(err => {
- app.captchaCode = ''
- app.getCaptcha()
- })
- .finally(() => app.isLoading = false)
- }
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- @import 'index.scss';
- page {
- background: linear-gradient(181deg, rgba(255, 224, 224, 0.17) 0%, rgba(252, 247, 247, 0.84) 18%, #FFFFFF 100%);
- overflow-y: hidden;
- }
- </style>
|