|
- <template>
- <div class="bjimg">
- <x-header :left-options="{showBack: false}">{{token}}登录</x-header>
- <box gap="20px 30px">
- <flexbox orient="vertical" style="">
- <flexbox-item>
- <h2 style="color: white;text-align:center;margin: 30px 0 15px 0">东软智能云POS管理系统</h2>
- </flexbox-item>
- <flexbox-item>
- <x-input title="" placeholder="用户名" class="inputcss" v-model.trim="loginForm.username">
- <img slot="label" style="padding-right:10px;display:block;"
- src="../assets/user.png" width="20" height="20">
- </x-input>
- </flexbox-item>
- <flexbox-item>
- <x-input title="" placeholder="密码" type="password" class="inputcss"
- v-model.trim="loginForm.password">
- <img slot="label" style="padding-right:10px;display:block;"
- src="../assets/password.png" width="20" height="20">
- </x-input>
- </flexbox-item>
- <flexbox-item>
- <x-input title="验证码" placeholder="验证码" class="inputcss" v-model.trim="loginForm.captcha">
- <img slot="label" style="padding-right:10px;display:block;"
- src="../assets/yzm.png" width="20" height="20">
- <img slot="right-full-height"
- @click="reRand" :src="captcha" width="100"
- height="50">
- </x-input>
- </flexbox-item>
- <flexbox-item>
- <!--<x-button type="default" style="width: 85%;margin-top: 20px" @click.native="sub">登录</x-button>-->
- <el-button type="primary" style="width:100%;margin-top: 15px"
- @click.native.prevent="sub">
- 立即登录
- </el-button>
- </flexbox-item>
- </flexbox>
- <toast v-model="showMessage" type="text" width="16em">{{msg}}</toast>
- </box>
- </div>
- </template>
-
- <script>
- import {XInput, Flexbox, FlexboxItem, XButton, Box} from 'vux'
- import {login} from "@/api/login";
-
- export default {
- components: {
- Flexbox,
- FlexboxItem,
- XInput,
- XButton,
- Box
- },
- created() {
- this.randStr = Math.random().toString()
- },
- data() {
- return {
- randStr: "",
- msg: '',
- showMessage: false,
- loginForm: {
- username: "",
- password: "",
- captcha: ""
- },
- token: this.$store.getters.name
- }
- },
- methods: {
- reRand() {
- this.randStr = Math.random().toString()
- },
- sub() {
- // console.log(this.loginForm.username, this.loginForm.password, this.loginForm.captcha)
- var username = this.loginForm.username
- var password = this.loginForm.password
- var captcha = this.loginForm.captcha
- const reg = /^[a-zA-Z0-9]+$/
- if (!reg.test(username)) {
- this.msg = "请输入正确的用户名"
- this.showMessage = true
- return
- }
- if (password.length < 6) {
- this.msg = "密码不能小于6位"
- this.showMessage = true
- return
- }
- if (captcha.length != 5) {
- this.msg = "验证码有误"
- this.showMessage = true
- return
- }
- this.msg = ""
- login(this.loginForm).then(response => {
- if (response.code != 200) {
- this.msg = response.message
- this.showMessage = true
- } else {
- if (response.result.type == "sa" || response.result.type == "ca") {
- this.msg = '无权登录'
- this.showMessage = true
- } else {
- this.$store.dispatch("Login", response.result)
- .then(() => {
- this.$router.push({path: "/order/ratiostatistics"});
- });
- }
- }
- })
- // this.showMessage = true
- }
- },
- computed: {
- captcha: function () {
- return process.env.BASE_API + "service-user/login/captcha?rand=" + this.randStr
- }
- }
-
-
- }
- </script>
-
- <style>
- .vux-demo {
- text-align: center;
- }
-
- .logo {
- width: 100px;
- height: 100px
- }
-
- .weui-input::placeholder {
- color: white;
- }
- .bjimg {
- position:absolute;
- width:100%;
- height:100%;
- background-image: url('../assets/background.png');
- overflow:hidden
- }
- .inputcss {
- border: 1px solid hsla(0, 0%, 100%, .1);
- background: rgba(0, 0, 0, .1);
- border-radius: 5px;
- color: white;
- margin-top: 8px;
- }
- </style>
|