login.html 10.2 KB
<html style="overflow: hidden;">
<head>
    <meta charset='UTF-8'>
    <!--<script src="/ufoPlatform/js/include.js"></script>-->
    <script type="text/javascript" src="/ufoPlatform/js/vue.min.js"></script>
    <script type="text/javascript" src="/ufoPlatform/js/iview.min.js"></script>
    <script type="text/javascript" src="/ufoPlatform/js/axios.min.js"></script>
    <link rel="stylesheet" href="/ufoPlatform/css/iview.css">
    <title>Yoho!UFO运营平台-登录</title>
    <style>
        .wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #464c5b;
        }

        .main {
            margin: 200px auto;
        }

        .main-title {
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 40px;
            line-height: 56px;
        }

        .login-container {
            position: relative;
            width: 350px;
            margin: 0 auto;
        }

        .ivu-form {
            width: 90%;
            margin: 20px auto;
        }

        .ivu-btn {
            display: block;
            width: 50%;
            height: 36px;
            font-size: 14px;
            margin: 10px auto 0 auto;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div id="main" class="main">
        <p class="main-title">UFO运营管理平台</p>
        <card class="login-container">
            <i-form ref="formInline" :model="formInline" :rules="ruleInline">
                <form-item prop="loginName">
                    <i-input type="text" size="large" v-model="formInline.loginName" placeholder="用户名">
                        <icon type="ios-person-outline" slot="prepend"></icon>
                    </i-input>
                </form-item>
                <form-item prop="loginPwd">
                    <i-input type="password" size="large" v-model="formInline.loginPwd" placeholder="密码">
                        <icon type="ios-lock-outline" slot="prepend"></icon>
                    </i-input>
                </form-item>
                <form-item>
                    <i-button size="large" type="primary" @click="login">登录</i-button>
                </form-item>
            </i-form>
        </card>
    </div>
</div>
<!--<form name="id" id="f1" method="post">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%;">
        <tr>
            <td valign="middle">
                <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td><img src="/ufoPlatform/images/login_03.png" width="460" height="60"/></td>
                                    <td>
                                        <div align="right">
                                            <a>ENGLISH</a> &nbsp; | &nbsp; <a>帮 助</a>&nbsp; | &nbsp; <a>技术支持</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="login_bg">
                            <table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="440" background="/ufoPlatform/images/pic1.png">
                                        <table id="loginTable" width="310" border="0" align="right" cellpadding="0"
                                               cellspacing="0" style="margin-right: 20px;filter:Alpha(opacity=80)">
                                            <tr id="loginTitle" title="我不会告诉你,我是可以拖动的">
                                                <td><img src="/ufoPlatform/images/login_1_03.png" width="310"
                                                         height="42"/></td>
                                            </tr>
                                            <tr>
                                                <td height="350" valign="top"
                                                    background="/ufoPlatform/images/login_1_05.png">
                                                    <table width="250" border="0" align="center" cellpadding="0"
                                                           cellspacing="0">
                                                        <tr>
                                                            <td height="36" valign="bottom">用户名:</td>
                                                        </tr>
                                                        <tr>
                                                            <td height="40"><input name="loginName" id="loginName"
                                                                                   class="login_input easyui-validatebox"
                                                                                   data-options="
												required : true,
												missingMessage : '请输入登录账号名!',
												iconCls:'icon-man'
											"/></td>
                                                        </tr>
                                                        <tr>
                                                            <td height="36" valign="bottom">密&nbsp;&nbsp;&nbsp;码:</td>
                                                        </tr>
                                                        <tr>
                                                            <td height="40"><input name="loginPwd" id="loginPwd"
                                                                                   type="password"
                                                                                   class="login_input easyui-validatebox"
                                                                                   data-options="
												required : true,
												missingMessage : '请输入登录密码!',
												iconCls:'icon-man',
												type : 'password'
											"/></td>
                                                        </tr>

                                                        <tr>
                                                            <td height="50" valign="bottom">
                                                                <input type="image"
                                                                       src="/ufoPlatform/images/login_1_08.png"
                                                                       id="submitBtn"/>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><img src="/ufoPlatform/images/login_1_11.png" width="310"
                                                         height="15"/></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="60" class="font_color_01">Copyright &copy;2010-2014 dinglicom.All Rights
                                        Reserved.
                                    </td>
                                    <td>
                                        <div align="right" class="font_color_01">版权所有</div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>-->
<script>
  const domain = document.location.href.indexOf('test3') > 0 ? 'http://java-ufo-platform.test3.ingress.dev.yohocorp.com' : '';
  const contextPath = '/ufoPlatform';

  // mali  Fs123qwe~'
  let app = new Vue({
    el: '#main',
    data: {
      list: [1, 2, 3],
      formInline: {
        loginName: '',
        loginPwd: ''
      },
      ruleInline: {
        loginName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        loginPwd: [
          {required: true, message: '清输入密码', trigger: 'blur'}
        ]
      }
    },
    methods: {
      login: function () {
        let self = this;
        this.$refs['formInline'].validate((valid) => {
          console.log(valid);
          if (valid) {
            axios.defaults.withCredentials = true;
            axios({
              url: domain + contextPath + '/loginController/platformLogin.do',
              method: 'post',
              data: self.formInline,
              transformRequest: [function (data) {
                let ret = '';
                for(let it in data) {
                  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                console.log(ret);
                return ret;
              }],
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then(ret => {
                console.log(ret);
                if(ret.data.code === 200) {
                    location.href = document.location.protocol + '//' + document.location.hostname + '/ufoPlatform/html/index/index.html';
                } else {
                  self.$Message.error(ret.data.message || '登录失败');
                }
            })
          } else {
            this.$Message.error('请输入正确的用户名和密码');
          }
        });
      }
    }
  });
</script>
</body>
</html>