lcc
152 lines
5.8 KiB
PHP
152 lines
5.8 KiB
PHP
<?$this->load->view('h5/paic/header');?>
|
|
<body class="bg-fff">
|
|
<div class="height-500 fixed left-0 right-0 top-0 z-index-0 bg-1a1a1a"></div>
|
|
<div class="bg-fff" id="app" ref="app">
|
|
<div class="container relative bg-repeat-y bg-size-fullwidth bg-pos-center"
|
|
style="background-image:url(https://qs.haodian.cn/web/images/project/H5-ShiYu/loginbg2.jpg?v=221008)">
|
|
<div class="absolute box-middle left-0 right-0 pl80 pr80 pb220">
|
|
<div class="color-fff">
|
|
<div class="font-52">手机号登录</div>
|
|
<!-- <div class="mt20 font-28">欢迎使用理车宝-私域活动系统</div>-->
|
|
</div>
|
|
<div>
|
|
<div class="relative mt50 bg-fff-op15 ulib-r750">
|
|
<input class="wp100 pt30 pb30 pl40 pr20 bg-transparent border-none font-32 color-fff placeholder-color-ccc"
|
|
type="tel" v-model="telPhone" placeholder="请输入手机号"/>
|
|
</div>
|
|
<div class="relative mt50 bg-fff-op15 ulib-r750">
|
|
<input class="wp100 pt30 pb30 pl40 pr40 bg-transparent border-none font-32 color-fff placeholder-color-ccc"
|
|
type="number" oninput="if(value.length>4)value=value.slice(0,4)" v-model="vCode"
|
|
placeholder="请输入验证码"/>
|
|
<div class="absolute right-0 box-middle mr30 font-32 color-fff" @click="getcode()">{{codeTx}}</div>
|
|
</div>
|
|
<button class="mt50 wp100 bg-fff-op80 border-none pt30 pb30 font-32 color-333 ulib-r750"
|
|
@click="submit()">立即登录
|
|
</button>
|
|
<!--
|
|
<div class="mt50 text-center font-24 color-fff">
|
|
<label>
|
|
<input type="checkbox" class="checkbox-input" v-model="rememberMe" />
|
|
<span>记住账号</span>
|
|
</label>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 right-0 pl40 pr40 pb80 text-center color-fff">
|
|
<!-- <div class="font-22">powered by haodian.cn</div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
telPhone: '',
|
|
vCode: '',
|
|
codeState: true,
|
|
codeTx: '获取验证码',
|
|
isSubmiting: false,
|
|
rememberMe: true,
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
var Timer;
|
|
},
|
|
beforeDestroy() {
|
|
|
|
},
|
|
methods: {
|
|
|
|
countDownTime(time) {
|
|
let that = this;
|
|
if (time > 1) {
|
|
time--;
|
|
this.codeState = false;
|
|
this.codeTx = time + "s后重新获取";
|
|
Timer = setTimeout(function () {
|
|
that.countDownTime(time);
|
|
}, 1000)
|
|
} else {
|
|
clearTimeout(Timer);
|
|
that.codeState = true;
|
|
that.codeTx = "获取验证码";
|
|
}
|
|
},
|
|
|
|
getcode() {
|
|
if (!this.codeState) return;
|
|
if (!/^1[3456789]\d{9}$/.test(this.telPhone)) {
|
|
//alert('请输入正确手机号')
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入正确手机号"
|
|
});
|
|
} else {
|
|
//按钮倒计时
|
|
var that = this;
|
|
$.post('/h5/common/sms', {'mobile': this.telPhone, 'type': 'login'}, function (response) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: response.msg
|
|
});
|
|
if (response.code == 200) {
|
|
that.countDownTime(91)
|
|
}
|
|
}, 'json')
|
|
}
|
|
},
|
|
submit() {
|
|
if (this.isSubmiting) return;
|
|
if (!/^1[3456789]\d{9}$/.test(this.telPhone)) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入正确手机号"
|
|
});
|
|
} else if (!this.vCode) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入验证码"
|
|
});
|
|
} else {
|
|
// this.isSubmiting = true
|
|
$.post('/h5/paic/login', {
|
|
'mobile': this.telPhone,
|
|
'code': this.vCode,
|
|
'remember': this.rememberMe
|
|
}, function (response) {
|
|
if (response.code == 200) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: response.msg,
|
|
onClose: function () {
|
|
window.location = "/h5/paic/home"
|
|
}
|
|
});
|
|
} else {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: response.msg
|
|
});
|
|
}
|
|
}, 'json')
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|