今天头条的小程序_vue完成个人信息查看和密码修

vue实现个人信息查看和密码修改功能       本文通过实例代码给大家介绍了vue实现个人信息查看和密码修改功能,文中给大家补充介绍了vue实现密码显示隐藏切换功能,非常不错,具有一定的参考借鉴价值,感兴趣的朋友一起看看吧
el-tabs v-model="activeName" @tab-click="handleClick" el-tab-pane label="基本信息" name="first" el-form :model="userlist" :rules="rules" ref="EditorUserForms" el-form-item label="头像" prop="avatar_url" :label-width="formLabelWidth" el-upload action="//shujiaoke.-" :before-upload="beforeupload" :data="uploadParm" :show-file-list="false" :ess="ess" img v-if="userlist.avatar_url" :src="userlist.avatar_url" i v-else /i /el-upload /el-form-item el-form-item label="用户名" prop="username" :label-width="formLabelWidth" el-col :span="8" el-input v-model="userlist.username" disabled /el-input /el-col /el-form-item el-form-item label="电话" prop="phone" :label-width="formLabelWidth" el-col :span="8" el-input v-model="userlist.phone" placeholder="请输入电话" /el-input /el-col /el-form-item el-form-item label="邮箱" prop="email" :label-width="formLabelWidth" el-col :span="8" el-input v-model="userlist.email" placeholder="请输入邮箱" /el-input /el-col /el-form-item el-form-item label="用户角色" prop="full_name" :label-width="formLabelWidth" el-col :span="8" el-input v-model="userlist.full_name" disabled /el-input /el-col /el-form-item /el-form div el-button type="primary" @click="EditorUserClick('userlist')" 保存 /el-button /div /el-tab-pane el-tab-pane label="修改密码" name="second" el-form :model="ruleForm" :rules="rules" ref="ruleForm" el-form-item label="原密码" prop="pass" :label-width="formLabelWidth" el-col :span="8" el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password" /el-input /el-col /el-form-item el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth" el-col :span="8" el-input v-model="ruleForm.newpass" placeholder="请输入新密码" id="newkey" type="password" /el-input /el-col /el-form-item el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth" el-col :span="8" el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password" /el-input /el-col /el-form-item /el-form div el-button type="primary" @click="submitForm('ruleForm')" 保存 /el-button /div /el-tab-pane /el-tabs /div /div /template script //这些不要在意,这些是我们自定义的接口,用的时候就直接拿来了 import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSize} from "@/api/dbhelper"; //这一步很重要,一般我们直接从后台拿过来输出来会是在data里面,但是我发现却在store里面,这里就要用到vuex import { mapGetters } from "vuex"; export default { data() { /*****检验两次密码是否一致***/ var validatePass = (rule, value, callback) = { if (value === "") { callback(new Error("请输入密码")); } else { if (this.ruleForm.checknewpass !== "") { this.$refs.ruleForm.validateField("checknewpass"); callback(); var validatePass2 = (rule, value, callback) = { if (value === "") { callback(new Error("请再次输入密码")); } else if (value !== this.ruleForm.newpass) { callback(new Error("两次输入密码不一致!")); } else { callback(); return { uploadParm: {}, //图片的上传 ruleForm: {},//修改密码的表单 activeName: "first", loading: true, baseUrl: process.env.BASE_API, userlist: {},//用户信息表单 formLabelWidth: "150px", /***校验***/ rules: { phone: [ required: true, message: "请输入电话号码" pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: "手机格式不对" email: [ required: true, message: "请输入电子邮箱" pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: "请输入有效的邮箱" pass: [ required: true, trigger: "blur", message: "请输入密码" newpass: [ validator: validatePass, trigger: "blur" checknewpass: [ validator: validatePass2, trigger: "blur" created() { this.getUser(); this.upload(); computed: { ...mapGetters(["username"]) methods: { //获取个人用户的信息 getUser() { postData("接口", this.username).then(response = { if (response.status === 200) { this.userlist = response.data; this.loading = false; console.log(this.userlist, 9696); } else { this.$message({ message: "获取信息失败," + response.message, type: "error" //tab切换 handleClick(tab, event) { console.log(tab, event); //上传参数图片初始化 upload() { var currentTimeStamp = new Date().getTime() / 1000; if ( this.uploadParams == null || this.uploadParams.expire + 3 currentTimeStamp this.$store .dispatch("GetUploadParams") .then(req = { this.uploadParm = req.data; .catch(err = { this.$message({ message: err.message, type: "warning" }); } else { this.uploadParm = this.uploadParams; //上传之前 beforeupload(file) { this.uploadParm.key = this.uploadParm.dir + guid(); // console.log(this.uploadParm) //图片上传上传成功 ess(response, file, fileList) { var newfile = { name: file.name, type: file.raw.type, size: bytesToSize(file.size), url: this.uploadParm.key postData("file", newfile).then(response = { if (response.status == 200) { this.$message({ message: "修改成功", type: "success" }); this.userlist.style_file_id = response.data.id; this.userlist.avatar_url = this.baseUrl + response.data.url; } else { this.$message({ message: "修改失败", type: "error" }); console.log(this.userlist); //修改密码 submitForm(ruleForm) { var obj = { username: this.username, oldpwd: this.ruleForm.pass, newpwd: this.ruleForm.newpass console.log(obj); postData("接口", obj).then(response = { if (response.status == 200) { this.$message({ message: "保存成功", type: "success" } else { this.$message({ message: "修改失败" + response.message, type: "error" // 编辑提交的方法 EditorUserClick() { this.$refs.EditorUserForms.validate(valid = { if (valid) { console.log(this.userlist); putData("接口", this.userlist).then(response = { if (response.status == 200) { this.$message({ message: "编辑成功", type: "success" } else { this.$message({ message: "修改失败" + response.message, type: "error" /script

点击查看

总结

以上所述是小编给大家介绍的vue实现个人信息查看和密码修改功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对凡科网站的支持!


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://jzabcd.cn/jingyan/3199.html