个人信息界面+修改密码界面

最新推荐文章于 2023-08-17 16:59:16 发布
最新推荐文章于 2023-08-17 16:59:16 发布
阅读量1.4w 收藏 82
点赞数 53
分类专栏： element UI vue 文章标签： 时间按钮 个人信息界面 elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45527702/article/details/113618660
版权
使用Vue和Element UI构建的个人设置界面，包含个人信息展示与密码修改功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述在这里插入图片描述下班没啥事，花费三个小时做了一个“个人设置”界面，所使用的框架是vue，技术是element UI组件。
拿去不谢！！！有帮助的话，点个赞再走


<template>
    <div style="background-color:#FCFCFC;font-family:'宋体';height:100%;">
        <div>
            <my-bread level1='个人中心' level2='修改密码' :level3="levelName"></my-bread>
        </div>
        <div style="margin-top:25px;margin-left:80px;">
            <el-row :gutter="10">
                <el-col :span="2">
                    <div style="background-color:#FFEBCD;width:60px;height:60px;display:inline-block;border-radius:50%;overflow:hidden;">
                        <el-image :src="src" style="width:60px;height:60px;"></el-image>
                    </div>
                    <div style="margin-top:5px;margin-left:6px;"><span>王某某</span></div>
                    <div style="margin-top:50px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;"  @click="infomationClick()">个人信息<span style="color:#B0E0E6;" v-show="infomationShow" class="el-icon-s-promotion"></span></el-button></div>
                    <div style="margin-top:5px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;" @click="passwordClick()">修改密码<span style="color:#B0E0E6;" v-show="passwordShow" class="el-icon-s-promotion"></span></el-button></div>
                </el-col>

                <el-col :span="21">
                    <el-row :gutter="10" style="margin-top:20px;">
                        <el-col :span="2"><div style="text-align:right;"><span>账号：</span></div></el-col>
                        <el-col :span="5">0000000000</el-col>
                    </el-row>
                    <!-- 个人信息 -->
                    <el-row v-show="infomationShow">
                        <el-card style="margin-top:30px;">
                            <el-row>
                                <el-col :span="6">
                                    <el-row :gutter="12" style="margin-top:20px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>姓名：</span></div></el-col>
                                        <el-col :span="16">王某某</el-col>
                                    </el-row>
                                    <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>手机号：</span></div></el-col>
                                        <el-col :span="16">17125463265</el-col>
                                    </el-row>
                                    <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>电子邮箱：</span></div></el-col>
                                        <el-col :span="16">2036128127@qq.com</el-col>
                                    </el-row>
                                    <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>部门：</span></div></el-col>
                                        <el-col :span="16">某某管理中心</el-col>
                                    </el-row>
                                    <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>职位：</span></div></el-col>
                                        <el-col :span="16">部门负责人</el-col>
                                    </el-row>
                                    <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>项目：</span></div></el-col>
                                        <el-col :span="16">某某107项目</el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="18">
                                    <el-row>
                                        <el-col>
                                            <el-timeline>
                                                <el-timeline-item timestamp="项目一" placement="top">
                                                    <el-card>
                                                        <div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                        <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                    </el-card>
                                                </el-timeline-item>
                                                <el-timeline-item timestamp="项目二" placement="top">
                                                    <el-card>
                                                        <div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                        <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                    </el-card>
                                                </el-timeline-item>
                                                <el-timeline-item timestamp="项目三" placement="top">
                                                    <el-card>
                                                        <div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                        <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                    </el-card>
                                                </el-timeline-item>
                                                <el-timeline-item timestamp="项目四" placement="top">
                                                    <el-card>
                                                        <div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                        <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                    </el-card>
                                                </el-timeline-item>
                                                <el-timeline-item timestamp="项目五" placement="top">
                                                    <el-card>
                                                        <div><span><span style="font-family:'宋体';font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                        <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                    </el-card>
                                                </el-timeline-item>
                                            </el-timeline>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-row>
                    <!-- 修改密码 -->
                    <el-row v-show="passwordShow">
                        <el-card style="margin-top:30px;">
                            <el-form :model="personalForm">
                                <el-row :gutter="12" style="margin-top:20px;">
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>账号：</span></div>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="account">
                                            <el-input type="text" v-model="personalForm.account" placeholder="请输入您的账号" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>手机号：</span></div>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="phone_num">
                                            <el-input type="text" v-model="personalForm.phone_num" placeholder="绑定的手机号" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>密码：</span></div>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="password1">
                                            <el-input type="password" show-password v-model="personalForm.password1" placeholder="请输入新的密码" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>确认密码：</span></div>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="password2">
                                            <el-input type="password" show-password v-model="personalForm.password2" placeholder="请再次输入新的密码" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>验证码：</span></div>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="verification">
                                            <el-input type="text" v-model="personalForm.verification" placeholder="验证码" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button type="primary" plain round size="medium" @click="sendMsg()" :disabled="isDisabled">{{ buttonName }}</el-button>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:10px;">
                                    <el-col :span="17" style="text-align:center;">
                                        <el-button type="primary" plain round size="medium" @click="submit()">修改</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        
        <div>

        </div>
    </div>
</template>
<script>

import yu from '../images/yu.png'

export default {
    data(){
        return {
            src:yu,
            levelName:'',
            isCollapse:false,
            infomationShow:false,
            passwordShow:false,
            buttonName:"发送短信",
            isDisabled:false,
            time:60,
            personalForm:{
                account:"",
                phone_num:"",
                verification:"",
                password1:"",
                password2:"",
            }
        }
    },
    methods:{
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
            console.log(key)
            console.log(keyPath)
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },

        infomationClick(){    //个人信息事件
            this.infomationShow = true
            this.passwordShow = false
        },
        
        passwordClick(){     //密码事件
            this.infomationShow = false
            this.passwordShow = true
        },
        sendMsg() {    //时间按钮
            let me = this;
            me.isDisabled = true;
            let interval = window.setInterval(function() {
                me.buttonName = "(" + me.time + ")秒"
                --me.time;
                if(me.time < 0) {
                    me.buttonName = "重新发送"
                    me.time = 60
                    me.isDisabled = false
                    window.clearInterval(interval)
                }
            }, 1000);
            //获取短信验证码
            // this.$http.get('/?phone_num=' + this.personalForm.phone_num).then(res => {
            //     this.$message.success("短信已发送,请查收")
            // })
        },
        submit(){  //提交
            if(this.personalForm.account === ""){
                this.$message.warning("账号不能为空")
            }else if(this.personalForm.phone_num === ""){
                this.$message.warning("手机号不能为空")
            }else if(this.personalForm.password1 === ""){
                this.$message.warning("密码不能为空")
            }else if(this.personalForm.password2 === ""){
                this.$message.warning("密码不能为空")
            }else if(this.personalForm.verification === ""){
                this.$message.warning("验证码不能为空")
            }else{
                if(this.personalForm.password1 === this.personalForm.password2){
                    this.$message.success("修改成功")
                    // const params = {
                    //     account:this.personalForm.account,
                    //     phone_num:this.personalForm.phone_num,
                    //     password1:this.personalForm.password1,
                    //     password2:this.personalForm.password2,
                    //     verification:this.personalForm.verification,
                    // }
                    // console.log(params)
                    // this.$http.post('',params).then(res => {
                    //     console.log(res)
                    // })
                }else{
                    this.$message.warning("两次输入的密码不一致,请重新输入")
                }
                
            }
        },
 
    }
}
</script>

<style>
    .name{ text-align: right; }
    .value{ text-align: left; }
</style>
vue+elementUi 系统后台中的修改密码页面（全）
修炼中的小妖怪
09-20 1万+
就是感觉自己在做这个页面想找参考的时候，没有找到自己特别想要的 ，记录下来，万一能帮到跟我一样有需要的盆友呢 项目背景： 系统后台中右上角需要添加一个修改密码新页面需求，如图： 二，正式建立修改密码页的路由，然后新建修改密码文件 vue文件内容： <template> <div class="app-container common-list-page"> &l...
vue修改编码_vue实现个人信息查看和密码修改功能
weixin_39655993的博客
12-19 1450
下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述：//用了element组件，自己要加载和引入 保存保存//这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSiz...
个人信息界面
zzfr_llex的博客
04-30 3290
1、主页代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/xinxi.css"> <title></title> </head> <body&g...
Vue--修改密码（校验）
好记性，不如烂键盘。
08-17 1416
1：旧密码和新密码不能一致。2：后端校验旧密码是否正确。3：新密码确定密码是否一致。
vue修改密码页面
m0_60540878的博客
09-26 5461
<template> <el-form class="login-box1" ref="loginForm" :model="loginForm" :rules="rules" label-width="100px" > <h3 class="login-title">修改密码</h3> <el-form-item label="原密码" prop="oldpassword"> .
【AndroidUI设计】个人信息界面
守夜人
05-18 2581
描述：写一个简单的个人信息界面，需要具备以下需求。 需求： 1、使用icon矢量图标，能够动态修改图标颜色，减少静态资源所占空间 2、如何使操作模块，像Vue一样，添加方便。 3、点击、长按、松开触发色变事件 难度：初级 知识点： 1、Icon矢量图标的使用 2、Adapter适配的使用 3、setOnTouchListener事件的使用
利用MATLAB APP Designer设计软件登录界面（包括密码修改，注册，忘记密码）
01-07
利用MATLAB APP Designer设计软件登录界面（包括密码修改，注册，忘记密码），密码和账号存储在Excel中，密码框输入时，会转变成*号。各页面之间可以直接跳转，忘记密码需要管理员账号才能重置。同时插入许多交互性...
登录界面、找回密码界面、修改密码界面的源代码
09-05
登录界面、找回密码界面、修改密码界面的源代码。 在制作过程中，有使用CSS、JS、Jquery。其中还有cookie、base64的js插件。 每一次刷新登录页面都可以自动刷新验证码。 提供的源代码仅供参考，如有不足，请多多指教...
利用MATLAB guide设计软件登录界面（包括密码修改，注册，忘记密码）
最新发布
01-24
利用MATLAB guider设计软件登录界面（包括密码修改，注册，忘记密码），密码和账号存储在Excel中，密码框输入时，会转变成有隐藏。各页面之间可以直接跳转，忘记密码需要管理员账号才能重置。同时插入许多交互性问题...
windows 登陆界面修改密码
09-27
忘记登录密码时改密码的小技巧，可应用于带有轻松访问的所有windows系统，虚拟机亲测有效
个人资料：我的个人资料页面
02-18
个人资料：我的个人资料页面
登录页面-登录和密码修改
03-20
登录和修改密码 博文链接：https://waynes.iteye.com/blog/827687
vue实现个人信息查看和密码修改功能
01-19
下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述： //用了element组件，自己要加载和引入 基本信息 name=first> <el-form :model=userlist :rules=rul
html个人主页（含修改密码+修改基本信息）
12-17
这个页面为个人基本信息页面，点击修改密码可跳转至change_...这几个HTML页面都是基于表单的用户界面，旨在允许用户修改他们的个人信息。这些页面使用了基本的HTML元素和样式，以提供一个简洁、易于使用的界面。
个人信息显示界面
06-04 858
package 关;import java.awt.*;public class jextends Frame {public j() //导入AWT包{super("我的信息"); //窗口标题 this.setSize(250,200); //组件尺寸 this.setLocation(300, 240); //组件的显示位置...
vue实现修改密码页面（使用键盘监听事件阻止浏览器对密码输入框的提示）
elephant_my的博客
03-16 2563
vue实现修改密码（ant design of vue）1.效果图2.重要代码2.1输入框2.2输入框校验2.3键盘监听事件3.完整代码及详解 1.效果图 2.重要代码 2.1输入框 若是使用传统的密码框，怎么都阻止不了浏览器的提示。（详情参考修改密码的实现 – element UI 这是我之前尝试使用密码框后再加各种阻止提示的参数，但是最终发现还是会收到浏览器的提示，如下图所示） 因此换成普通的输入框，再使用键盘监听事件将用户输入的密码隐藏。 <a-form-model :layout="'h
Android开发（3）：个人信息界面设计
热门推荐
cxh的博客
02-18 2万+
Github地址：美食分享平台，欢迎star和fork 注：本文只设计个人信息界面的设计，不包括活动和后台逻辑。活动设计和后台可以参见Android开发（4）：个人信息修改个人信息，修改头像设计 效果图 思路 这个界面可以分为三个部分：标题栏，头像栏，其他信息栏。 标题栏其他界面也可能用到，可以直接设计成一个widget 头像栏，因为方形图片会很不好看，这个圆形头像也可以设计成一个widget...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值