代码展示
1、头部实现
<template>
<div class="box">
<div class="box1">
<span class="iconfont con-zuojiantou"></span>
<b>账户登录</b>
<h3 style="font-size: 0.16rem"></h3>
</div>
<div class="box2">
<img src="../../../assets/zx/img/图片3_03.jpg" />
</div>
</div>
</template>
<script>
import Vue from "vue";
import { ActionSheet } from "vant";
import { Toast } from "vant";
Vue.use(Toast);
Vue.use(ActionSheet);
export default {
name: "Up",
data() {
return {
show: false,
actions: [
{
name: "换个账户登录",
},
{
name: "注册",
},
],
};
},
methods: {
goBack() {
this.$router.back();
},
},
};
</script>
<style scoped>
.box1 {
width: 100%;
height: 0.4rem;
display: flex;
justify-content: space-between;
line-height: 0.4rem;
font-size: 0.17rem;
}
.box1 span {
font-size: 0.15rem;
color: black;
}
.box2 {
width: 100%;
height: 0.9rem;
margin-top: 0.15rem;
}
.box2 img {
display: block;
width: 0.6rem;
height: 0.6rem;
margin: auto;
}
.box1 > * {
width: 0.7rem;
}
</style>
2、登录内容
<template>
<div class="box">
<div class="box1">
<input
class="inputText"
type=""
v-model="usernum"
placeholder="请输入手机号码"
/>
<input
class="inputText"
type="password"
v-model="userpass"
placeholder="请输入密码"
/>
<span class="forget">忘记密码</span>
</div>
<div class="box2">
<h3 @click="logSave">登录</h3>
<span @click="yz">短信验证码登录</span>
<b @click="zc">注册</b>
</div>
<div class="box3">
<h5>— 其他登陆方式 —</h5>
<span
class="iconfont icon-taobao"
style="font-size: 0.45rem; color: orange; border-radius: 50%"
></span>
<span
class="iconfont icon-alipay"
style="font-size: 0.4rem; color: deepskyblue"
></span>
</div>
<div class="box4">
<van-checkbox v-model="checked">
您已阅读并同意<b>《咸鱼社区用户服务协议》《隐私权政策》</b>
</van-checkbox>
</div>
</div>
</template>
<script>
import axios from "axios";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
name: "Password",
data: function () {
return {
// opt: 1,
usernum: "",
userpass: "",
checked: false,
};
},
methods: {
yz() {
this.$router.push("/Ver");
},
zc() {
this.$router.push("/Register");
},
// 验证手机号
checkPhone(phone) {
let reg = /^1[3|4|5|7|8][0-9]{9}$/;
return reg.test(phone);
},
// 验证密码
checkPass(phone) {
let reg = /^.{6,}$/;
return reg.test(phone);
},
// 登录接口
loginApi() {
var params = new URLSearchParams();
params.append("phone", this.usernum);
params.append("pwd", this.userpass);
axios({
url: "/auth/login/?opt=1",
method: "post",
data: params,
}).then((res) => {
console.log(res);
if (res.status == 200) {
Toast("登录成功");
localStorage.setItem("token", res.data.token);
localStorage.setItem("phone", this.usernum);
this.$router.push("/home");
}
});
},
// 登录
logSave() {
if (this.checkPhone(this.usernum)) {
if (this.checkPass(this.userpass)) {
if (this.checked) {
this.loginApi();
} else {
Toast("请勾选同意用户协议");
}
} else {
Toast("请检查您的密码格式");
}
} else {
Toast("请检查您的手机号");
}
},
},
created() {
if (localStorage.getItem("token")) {
this.$router.push("/home");
}
},
};
</script>
<style scoped>
.box1 {
width: 100%;
margin-top: 0.6rem;
}
.box1 input {
margin-top: 0.2rem;
width: 70%;
height: 0.2rem;
color: gray;
border: none;
}
.box1 span {
margin-top: 0.2rem;
float: right;
color: black;
font-size: 0.14rem;
}
.box1 hr {
width: 100%;
}
.box2 {
width: 100%;
height: 0.5rem;
margin-top: -0.25rem;
}
.box2 h3 {
width: 100%;
height: 0.4rem;
background-color: yellow;
border-radius: 0.15rem;
font-size: 0.2rem;
text-align: center;
line-height: 0.4rem;
margin-top: 0.1rem;
color: black;
}
.box2 span {
font-size: 0.14rem;
}
.box2 b {
float: right;
font-size: 0.14rem;
font-weight: normal;
}
.box3 {
margin-top: 1rem;
text-align: center;
}
.box3 h5 {
margin-bottom: 0.15rem;
}
.box3 span {
width: 0.35rem;
height: 0.35rem;
font-size: 0.35rem;
margin: 0 0.25rem;
border-radius: 50%;
}
.box3 span:first-of-type {
width: 0.35rem;
height: 0.35rem;
}
.box4 {
width: 100%;
height: 0.3rem;
margin-top: 0.25rem;
font-size: 0.14rem;
}
.box4 b {
font-weight: normal;
color: deepskyblue;
}
.forget {
display: block;
}
.inputText {
display: block !important;
width: 100% !important;
height: 0.4rem !important;
box-sizing: border-box !important;
padding: 0.2 0.2rem !important;
font-size: 0.16rem !important;
border-bottom: 0.01rem solid #eee !important;
padding-left: 0.2rem;
}
.inputText::-webkit-input-placeholder {
font-size: 0.13rem;
color: rgba(204, 201, 201, 0.87);
}
</style>