You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
5.5 KiB

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/framework7-icons.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="statusbar"></div>
<div id="app">
<f7-app :params="$root.f7params">
<f7-view main>
<f7-page>
<f7-navbar title="登录">
<a href="config.html" slot="nav-right" class="link external"><i class="icon f7-icons">command</i></a>
</f7-navbar>
<form method="post" :action="server+'/UserCenter/Account/AppLogin'" @submit.prevent="submit">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="icon f7-icons">person</i>
</div>
<div class="item-inner">
<div class="item-input-wrap">
<input name="UserName" v-model="username" data-val="true" data-val-required="请输入用户名" type="text" placeholder="用户名">
<span class="input-clear-button"></span>
<div class="item-input-info field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></div>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon f7-icons">lock</i>
</div>
<div class="item-inner">
<div class="item-input-wrap">
<input name="Password" data-val="true" data-val-required="请输入密码" type="password" placeholder="密码">
<span class="input-clear-button"></span>
<div class="item-input-info field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<p class="row">
<button class="col button button-large button-fill" type="submit">登录</button>
</p>
</div>
</form>
</f7-page>
</f7-view>
</f7-app>
</div>
<script type="text/javascript" src="lib/axios/axios.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation.unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
<script type="text/javascript">
Framework7.use(Framework7Vue);
var app;
var vm = new Vue({
el: '#app',
data() {
return {
f7params: {
routes: [],
name: 'My App',
id: 'com.myapp.test',
theme: 'ios',
},
server: localStorage.getItem('server'),
username: localStorage.getItem('username')
};
},
mounted() {
if (!this.server) {
location.href = "config.html";
}
this.$f7ready((f7) => {
app = this.$f7;
$.validator.unobtrusive.parse('form');
});
},
methods: {
submit: function (e) {
if (!$(e.target).valid()) {
return;
}
var url = e.target.action;
var data = $(e.target).serialize();
axios.post(url, data)
.then(function (response) {
console.log(response);
var data = response.data;
if (data.Code === 0) {
localStorage.setItem("token", data.Token);
window.location.href = "index.html";
}
else {
app.dialog.alert(data.Message, '警告', function () { });
}
})
.catch(function (error) {
app.dialog.alert(error, '警告', function () { })
});
}
}
})
</script>
</body>
</html>