详细问题描述
[内容]
重现步骤
[步骤]
[结果]
[期望]
运行环境
[系统版本]
努比亚max11.刷的flyme6.0
[浏览器版本]
[IDE版本]
[mui版本]
附件
[代码片段]
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>登陆</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../../css/mui.css" />
<style>
.spinner {
margin: 300px auto 0;
width: 150px;
text-align: center;
}
.spinner>div {
width: 30px;
height: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 2s infinite ease-in-out;
animation: bouncedelay 2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
div,
body {
background-color: #fff
}
form.mui-input-group:after {
height: 0px;
}
</style>
</head>
<body>
<div class="mui-content" id="muicontent">
<template></template>
<div class="spinner" v-if="loginor">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<script type="text/x-template" id="xtemplate">
<div>
<div style="width: 100%;height: 2rem;"></div>
<div class="mui-row mui-text-center">
<div class="mui-col-xs-4"></div>
<div class="mui-col-xs-4 ">
<img src="../../img/cha.svg" />
<img src="../../img/mi.svg" />
</div>
<div class="mui-col-xs-12">
<div style="width: 100%;height: 2rem;"></div>
</div>
<div class="mui-col-xs-1"> </div>
<div class="mui-col-xs-10">
<form class="mui-input-group" style="border: 0px;">
<div class="mui-input-row" style="margin-top: 2rem;">
<label>手机号</label>
<input v-model="tel" @blur="rejular" type="text" class="mui-input-clear" placeholder="请输入手机号">
</div>
<div v-show="show" style="color: red;">请输入正确的手机号码</div>
<div class="mui-input-row" style="margin-top: 2rem;">
<label>验证码</label>
<input type="tel" class="" @blur="rejular2" placeholder="验证码" v-model="auth">
<a @click="countdown" class="mui-btn mui-btn-link mui-btn-outlined"
style="font-size: 1rem;position: absolute;
z-index:110;top: 0px;right:0;width:6rem;">
{{down|count}}
</a>
</div>
<div v-show="show2" style="color: red;">请输入正确的验证码</div>
<div class="mui-button-row" style="margin-top: 1rem;border: 0px;">
<button type="button" class="mui-btn mui-btn-primary" style="width: 60%;">确认登陆</button>
</div>
</form>
</div>
</div>
<div class="mui-row">
<div class="mui-col-xs-2"> </div>
<div class="mui-col-xs-8">
<h5>点击“登陆”,即表示您同意并愿意遵守福建茶米 <a>用户协议</a> 和 <a>隐私政策</a></h5>
</div>
</div>
</div>
</script>
<script src="../../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
var vm = new Vue({
template: '#xtemplate',
el: '#muicontent',
data: {
rextest: [],
loginor: true,
down: 30,
downnbm: 0,
tel: null,
auth: null,
show: false,
show2: false,
},
methods: {
countdown: function() {
if(vm.downnbm == 0 && vm.rejular()) {
vm.downnbm++
mui.post('http://tea.chamiw.com/index.php/home/login/algetlogin', {
smsmob:vm.tel
}, function(data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
console.log(data.join());
}, 'json');
var dows = setInterval(function() {
vm.down--
if(vm.down <= 0) {
vm.down = 30;
vm.downnbm = 0;
clearInterval(dows);
}
}, 1000)
}
},
rejular: function() {
if(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.tel)) {
this.show = false;
return true;
} else {
this.show = true;
return false;
}
},
rejular2: function() {
if(/^\d{4}$/.test(this.auth)) {
this.show2 = false;
return true;
} else {
this.show2 = true;
return false;
}
}
},
computed: {},
created: function() {
console.log('实例已经创建完成this.a可以访问.dom没绘制.');
},
beforeMount: function() {
console.log('dom载入前...');
},
mounted: function() {
console.log('dom载入后...');
this.loginor = false;
mui.plusReady(function() {
console.log("当前页面URL：" + plus.webview.currentWebview().getURL());
});
},
filters: {
count: function(e) {
if(e == 30) {
return '获取验证码';
} else {
return e + '秒';
}
}
}
})
</script>
</body> </html>
[安装包]
联系方式
[QQ]
164834183
[电话]
1 个回复
云钦 - 学习中
发过后，自己不看看帖子？
看懂个毛啊。