sin
/
flytalk


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<html lang="cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="美天旺">
    <title>美天旺客服系统登录页</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .signin {
            width: 350px;
            padding: 20px;
            margin:100px auto;
            background: #fff;
            -webkit-box-shadow: 0 1px 2px 0 rgba(101,129,156,.08);
            box-shadow: 0 1px 2px 0 rgba(101,129,156,.08);
        }
        .signin h1,.signin h2,.signin .copyright{
            font-weight: normal;
            color: #4d627b;
            text-align: center;
        }
        .signin .loginTitle{
            font-size: 24px;
        }
        .signin .loginDesc{
            font-size: 14px;
            margin-bottom: 15px;
        }
        .signin .loginDesc a{
            color: #409EFF;
            text-decoration: none;
        }
        .signin .copyright{
            font-size: 12px;
        }
        @media (max-width: 768px) {
            .signin{
                width: 90%;
                margin:40px auto;
                background-color: #f5f5f5;
                box-shadow:none;
            }
        }
    </style>

</head>
<body>
<div id="app" class="signin">
    <template>
        <h1 class="loginTitle">美天旺客服登录</h1>
        <h2 class="loginDesc">请联系管理员获取登录账号</h2>
        <el-form :model="kefuForm"  :rules="rules" ref="kefuForm">
            <el-form-item  prop="username">
                <el-input v-model="kefuForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item  prop="password">
                <el-input :type="pass_attr" v-model="kefuForm.password" placeholder="密码"></el-input>
                <i slot="suffix" :class="icon" @click="showHidePassword"></i>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%" :loading="loading" type="primary" @click="kefuLogin('kefuForm')">登录</el-button>
            </el-form-item>
        </el-form>
        <p class="copyright">美天旺版权所有 &copy; 2020 </p>
</template>
</div>
</body>
<script>
	new Vue({
		el: '#app',
        delimiters:["<{","}>"],
		data: {
            window:window,
            activeName:"second",
			loading:false,
            pass_attr: "password",    // 密码输入框属性
            icon: "el-input__icon el-icon-view",    // 显示/隐藏密码图标
            localAuth:{
                username:'',
                password:'',
            },
            ruleForm:{
                server:'',
                email:'',
                password:'',
            },
            kefuForm:{
                username:'kefu2',
                password:'123',
            },
            rules: {
                server: [
                    { required: true, message: 'IMAP服务器如"imap.sina.net:143"包含端口号', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '邮箱地址', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ],
            },
		},
		methods: {
		    showHidePassword(){
                if(this.pass_attr=='text'){
                    this.pass_attr="password";
                    this.icon="el-input__icon el-icon-view";
                }else{
                    this.pass_attr="text";
                    this.icon="el-input__icon el-icon-loading";
                }
            },
            //提交表单
            kefuLogin(formName){
                let _this=this;
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        return false;
                    } else {
                        let data = {};
                        data.type="kefu";
                        data.username = _this.kefuForm.username;
                        data.password = _this.kefuForm.password;
                        _this.loading = true;
                        $.post("/check", data, function (data) {
                            if (data.code == 200) {
                                _this.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                localStorage.setItem("token",data.result.token);
                                localStorage.setItem("ref_token",data.result.ref_token);
                                localStorage.setItem("create_time",data.result.create_time);
                                window.location.href="/main";
                            } else {
                                _this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                            _this.loading = false;
                        });
                    }
                });
			},
            //重置表单
            resetForm(formName) {
                this.loading=false;
                this.$refs[formName].resetFields();
            },
		},
        created: function () {
            if (top.location != location){
                top.location.href = location.href;
            }
        }
	})

</script>

</html>