登录后，应有一个主页，可以展示当前用户的一些信息，例如上次登录时间地点、修改手机号、重置密码等简单功能，如图：
首先在views下新建HomeView.vue文件：
<template>
<el-row>
<el-col :span="24">
<!-- user卡片 -->
<el-card>
<div class="user">
<img :src="avatar" alt="avatar" />
<div class="userInfo">
<p div class="name">{{ name }}</p>
<p div class="access">超级管理员</p>
</div>
</div>
<div class="loginInfo">
<el-descriptions class="margin-top" :column="1" border>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
上次登陆
</template>
厦门
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-mobile-phone"></i>
手机号码
</template>
{{ phone }}
<BindPhone :user-name="'12345'" @reset="reset">
<template v-slot="{ showDialog }">
<i
class="el-icon-edit"
style="cursor: pointer; margin-left: 8px"
@click="showDialog"
></i
></template>
</BindPhone>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-edit-outline"></i>
其他操作
</template>
<el-button size="mini" @click="visible = true"
>重置密码</el-button
>
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</el-col>
<el-dialog
:visible.sync="visible"
width="480px"
center
append-to-body
title="重置密码"
>
<p>账号： {{ name }}</p>
<p>{{ text }}</p>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="handleOk">确 定</el-button>
</span>
</el-dialog>
</el-row>
</template>
<script>
import BindPhone from "@/components/BindPhone.vue";
import { getUserInfo } from "@/utils/auth";
export default {
data() {
return {
visible: false,
phone: "15788889999",
text: "将重置登录密码为123456，此操作不可逆，请确认后执行",
};
},
computed: {
avatar() {
return this.$store.state.user.avatar || getUserInfo("avatar");
},
name() {
return this.$store.state.user.name || getUserInfo("name");
},
},
mounted() {},
methods: {
reset() {
// v
},
handleOk() {
this.$alert(`账号${this.name} 密码已重置为123456`, "操作成功", {
confirmButtonText: "确定",
callback: () => {
this.visible = false;
this.$emit("getDetail");
},
});
},
},
components: {
BindPhone,
},
};
</script>
<style lang="scss" scoped>
.user {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 40px;
}
.userInfo {
.name {
font-size: 32px;
margin-bottom: 10px;
}
.access {
color: #999999;
}
}
}
.loginInfo {
p {
line-height: 28px;
font-size: 14px;
color: #999999;
span {
color: #666666;
margin-left: 36px;
margin-right: 8px;
}
}
}
.num {
display: flex;
// 要换行
flex-wrap: wrap;
// 从头到尾均匀排列
justify-content: space-between;
margin-left: 20px;
.el-card {
width: 32%;
margin-bottom: 20px;
.icon {
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 30px;
color: #fff;
}
.details {
// 竖着排且居中
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 15px;
.price {
font-size: 30px;
margin-bottom: 10px;
line-height: 30px;
height: 30px;
}
.desc {
font-size: 14px;
color: #999;
text-align: center;
}
}
}
}
.graph {
display: flex;
// 两个靠边
justify-content: space-between;
margin-top: 20px;
.el-card {
width: 49%;
}
}
</style>
手机改绑组件：
<template>
<span>
<slot :show-dialog="showDialog"
><el-button size="mini" @click="showDialog" style="margin-left: 8px">{{
btnText
}}</el-button></slot
>
<el-dialog :visible.sync="visible" width="480px" center append-to-body>
<el-form
:model="bindForm"
:rules="rules"
ref="bindForm"
label-position="right"
>
<el-form-item
label="新手机号"
prop="newPhone"
:label-width="formLabelWidth"
>
<el-input
v-model="bindForm.newPhone"
autocomplete="off"
maxlength="11"
>
<template slot="append"
><el-button size="mini" :disabled="disabled" @click="getCode">{{
codeBtnText
}}</el-button></template
>
</el-input>
</el-form-item>
<el-form-item label="验证码" prop="code" :label-width="formLabelWidth">
<el-input
v-model="bindForm.code"
autocomplete="off"
maxlength="6"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="handleOk('bindForm')"
>确 定</el-button
>
</div>
</el-dialog>
</span>
</template>
<script>
export default {
name: "BindPhone",
props: {
userName: {
type: String,
default: "",
},
},
data() {
return {
btnText: "手机改绑",
visible: false,
disabled: false,
codeBtnText: "获取验证码",
bindForm: {
newPhone: "",
code: "",
},
formLabelWidth: "80px",
rules: {
newPhone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
required: true,
pattern:
/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
message: "请输入正确的手机号",
trigger: "blur",
},
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
};
},
computed: {},
mounted() {},
methods: {
showDialog() {
this.visible = true;
},
// 验证码倒数60秒
validBtnText() {
let time = 60;
let timer = setInterval(() => {
if (time === 0) {
clearInterval(timer);
this.codeBtnText = "获取验证码";
this.disabled = false;
} else {
this.disabled = true;
this.codeBtnText = time + "秒后重新获取";
time -= 1;
}
}, 1000);
},
getCode() {
this.$refs["bindForm"].validateField("newPhone", (err) => {
if (err) {
return;
} else {
this.validBtnText();
}
});
},
handleOk(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
this.visible = false;
this.$emit("reset");
}
});
},
},
};
</script>
（是的依旧没有接口）
其中包括了获取验证码的倒数功能，还是比较常用的。
标签：flex,false,name,bottom,element,从零开始,vue2,height,margin From： https://www.cnblogs.com/nangras/p/17704862.html