<!-- 蓝色简洁登录页面 -->
<template>
<div class="t-login" @touchmove.prevent @touchmove.prevent @mousewheel.prevent>
<!-- 页面装饰图片 -->
<img class="img-a" src="../../assets/static/2.png"></img>
<img class="img-b" src="../../assets/static/3.png"></img>
<!-- 标题 -->
<div class="t-b">{{ title }}</div>
<form class="cl" autocomplete="off">
<div class="t-a">
<img src="../../assets/static/sj.png"></img>
<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="phone"
autocomplete="off" />
</div>
<div class="t-a">
<img src="../../assets/static/yz.png"></img>
<input name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm" autocomplete="off" />
<div v-if="showText" class="t-c" @click="getCode()">获取验证码</div>
<div v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</div>
</div>
<div class="mybutton" @click="uuulogin">登 录</div>
</form>
<!-- <div class="t-f"><text>————— 第三方账号登录 —————</text></div> -->
<!-- 多选框 -->
<div class="selfCheckBox" @click="clickCheckBox(index)" v-for="( item,index) in checkBoxArr" :key="index">
<div class="selfCkeckImgBox">
<img v-show="item.selectStatus==1" src="../../assets/选中.png" alt="选中图标">
<img v-show="item.selectStatus==0" src="../../assets/未选中.png" alt="未选中图标">
</div>
<div>
首次登陆会自动创建帐号.且代表您同意
<span class="textred">《用户服务协议》</span>
<span>和</span>
<span class="textred">《隐私政策》</span>
</div>
</div>
<!-- -->
</div>
</template>
<script>
export default {
data() {
return {
myuserdata: [], //用户数据
title: '用户登陆', //填写logo或者app名称，也可以用：欢迎回来，看您需求
second: 60, //默认60秒
showText: true, //判断短信是否发送
phone: '', //手机号码
yzm: '', //验证码
backyzm: "", //后端验证码
checkBoxArr: [{
text: '',
selectStatus: 0
}, ]
};
},
methods: {
getCurrentTime() {
//获取当前时间并打印
var _this = this;
let yy = new Date().getFullYear();
let mm = new Date().getMonth() + 1;
let dd = new Date().getDate();
let hh = new Date().getHours();
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
let
ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date()
.getSeconds();
_this.gettime = yy + '.' + mm + '.' + dd + ' ' + hh + ':' + mf + ':' + ss;
console.log(_this.gettime)
return _this.gettime
},
clickCheckBox(index) {
if (this.checkBoxArr[index].selectStatus == 1) {
this.checkBoxArr[index].selectStatus = 0;
console.log(this.checkBoxArr[index].selectStatus) //选中输出1...没选中输出0
} else {
this.checkBoxArr[index].selectStatus = 1
console.log(this.checkBoxArr[index].selectStatus)
}
},
//当前登录按钮操作
uuulogin() {
let that = this;
console.log("打印一下登陆用户类型", "普通用户登陆")
console.log(this.checkBoxArr[0].selectStatus == 1)
if (this.checkBoxArr[0].selectStatus != 1) {
that.$toast("同意下面协议才能登陆");
return false
}
if (!that.phone) {
that.$toast("请填写手机号");
return;
}
if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
that.$toast("手机号格式不正确");
return;
}
if (!that.yzm) {
that.$toast("请输入验证码");
return;
}
if (that.yzm != that.backyzm) {
that.$toast("验证码不正确");
return;
}
let thistime = that.getCurrentTime();
var kkkdata = {
"myuserphone": that.phone, //
"thistime": thistime
}
console.log(kkkdata)
let kkk = JSON.stringify(kkkdata)
let params = new URLSearchParams();
params.append('kkk', kkk)
that.Axios({
url: 'api/hellologin/',
method: 'post',
data: params,
responseType: "text",
}).then(function (obj) {
console.log("收到后端返回的数据--xzy", obj.data); //
that.myuserdata = obj.data
window.localStorage.setItem("userdata", JSON.stringify(obj.data))
window.localStorage.setItem("Loginusertype ", 1)
that.$toast("成功登陆");
setTimeout(function () {
that.$router.push("/Main")
}, 1500);
})
},
//获取短信验证码
getCode() {
var that = this;
console.log("执行了获取验证码")
if (that.phone == '') {
that.$toast("手机号不能为空");
return
}
let reg = /^1[3456789]\d{9}$/;
if (!reg.test(that.phone)) {
that.$toast("手机号格式不正确");
return
}
var interval = setInterval(() => {
that.showText = false;
var times = that.second - 1;
//that.second = times<10?'0'+times:times ;//小于10秒补 0
that.second = times;
console.log(times);
}, 1000);
setTimeout(() => {
clearInterval(interval);
that.second = 60;
that.showText = true;
}, 60000);
//这里请求后台获取短信验证码
// console.log("222222222222222222222222222222222222222222222222222", that.youreturndata)
/////////////////////////////////
let myurl = 'api/PHONESMS/' + that.phone + '/'
that.Axios.get(myurl)
.then(function (resp) {
console.log("写入数据库后前端接收到的返回值", resp.data); //
that.backyzm = resp.data
that.showText = false;
}).catch(function (error) {
console.log(error);
})
},
}
};
</script>fristitem.vue页面代码
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇：
genymotion模拟器.一文搞定
下一篇：
手机验证码-后端代码