????<div?class="login-wrap">
????????<div?class="ms-login">
????????????<div?class="ms-title">新人后臺管理系統</div>
????????????<el-form?:model="ruleForm"?:rules="rules"?ref="ruleForm"?label-width="0px"?class="ms-content">
????????????????<el-form-item?prop="username">
????????????????????<el-input?v-model="ruleForm.username"?placeholder="請輸入用戶名">
????????????????????????<el-button?slot="prepend"?><i?class="fa?fa-user-o"?aria-hidden="true"></i>?</el-button>
????????????????????</el-input>
????????????????</el-form-item>
????????????????<el-form-item?prop="password">
????????????????????<el-input?type="password"?placeholder="請輸入密碼"?v-model="ruleForm.password"?@keyup.enter.native="submitForm('ruleForm')">
????????????????????????<el-button?slot="prepend"?><i?class="fa?fa-key"?aria-hidden="true"></i></el-button>
????????????????????</el-input>
????????????????</el-form-item>
????????????????<!--?<el-form-item?prop="code"?class="item">
????????????????????<el-input??placeholder="請輸入驗證碼"?v-model="ruleForm.code"?>
????????????????????</el-input>
????????????????</el-form-item>
????????????????<img?id="verify"?:src="url"?@click="updateImg()"?/>?-->
????????????????<div?class="login-btn">
????????????????????<el-button?type="primary"?@click="submitForm('ruleForm')">登錄</el-button>
????????????????</div>
????????????????<!--?<p?class="login-tips">Tips?:?用戶名和密碼隨便填。</p>?-->
????????????</el-form>
????????</div>
????</div>
</template>
<script>
import?{?setTimeout?}?from?'timers';
????export?default?{
????????data:?function(){
????????????return?{
????????????????ruleForm:?{
????????????????????username:?'',
????????????????????password:?'',
????????????????????//?code:''
????????????????},
????????????????rules:?{
????????????????????username:?[
????????????????????????{?required:?true,?message:?'請輸入用戶名',?trigger:?'blur'?}
????????????????????],
????????????????????password:?[
????????????????????????{?required:?true,?message:?'請輸入密碼',?trigger:?'blur'?}
????????????????????],
????????????????????//?code:[
????????????????????//?????{?required:?true,?message:?'請輸入驗證碼',?trigger:?'blur'?}
????????????????????//?],
????????????????}
????????????}
????????},
????????computed:{
????????????//?url(){
????????????//?????return?Url+"/admin/login/checkVerify";
????????????//?}
????????},
????????methods:?{
????????????submitForm(formName)?{//登錄驗證
????????????????var?that?=this;
????????????????this.$refs[formName].validate((valid)?=>?{
????????????????????if?(valid)?{
????????????????????????this.$axios({
????????????????????????????url:Url+'/api/login',
????????????????????????????method:'post',
????????????????????????????data:{
????????????????????????????????username:this.ruleForm.username,
????????????????????????????????password:this.ruleForm.password,
????????????????????????????????code:this.ruleForm.code
????????????????????????????}
????????????????????????}).then((res)=>{
????????????????????????????console.log(res)
????????????????????????????????if(res.data.code==200){
?????????????????????????????????????this.$message.success({
?????????????????????????????????????????message:'登錄成功',
?????????????????????????????????????????duration:1000
?????????????????????????????????????});
?????????????????????????????????????sessionStorage.setItem('ms_username',this.ruleForm.username);??
?????????????????????????????????????sessionStorage.setItem('role_id',res.data.data)
????????????????????????????????????setTimeout(function(){
????????????????????????????????????????that.$router.push('/');
????????????????????????????????????},1000)
????????????????????????????????}else{
????????????????????????????????????this.$message.error({
?????????????????????????????????????????message:res.data.msg,
?????????????????????????????????????????duration:2000
?????????????????????????????????????});
????????????????????????????????????//?that.updateImg()
????????????????????????????????}
????????????????????????????})
????????????????????}?else?{
????????????????????????console.log('error?submit!!');
????????????????????????return?false;
????????????????????}
????????????????});
????????????}
????????????//?updateImg(){
????????????//?????$('#verify').attr('src',Url+'/admin/login/checkVerify?tm='+Math.random());
????????????//?}
????????}
????}
</script>
<style?scoped>
????.login-wrap{
????????position:?relative;
????????width:100%;
????????height:100%;
????????background-image:?url(../../assets/img/banner.jpg);
????????background-size:?100%?100%;
????????background-repeat:?no-repeat;
????????background-position:?center;
????}
????.ms-title{
????????width:100%;
????????line-height:?50px;
????????text-align:?center;
????????font-size:20px;
????????color:?#fff;
????????border-bottom:?1px?solid?#ddd;
????}
????.ms-login{
????????position:?absolute;
????????left:50%;
????????top:50%;
????????width:350px;
????????margin:-190px?0?0?-175px;
????????border-radius:?5px;
????????background:?rgba(255,255,255,?0.3);
????????overflow:?hidden;
????}
????.ms-content{
????????padding:?30px?30px;
????}
????.login-btn{
????????text-align:?center;
????}
????.login-btn?button{
????????width:100%;
????????height:36px;
????????margin-bottom:?10px;
????}
????.login-tips{
????????font-size:12px;
????????line-height:30px;
????????color:#fff;
????}
????.item?/deep/{
????????display:?inline-block;
????????width:?180px;
????}
????#verify{
????????/*?margin-top:?10px;?*/
????????float:?right;
????}
</style>
