| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/views/user/info.vue?vue&type=script&lang=js&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/views/user/info.vue","mtime":1655256221750},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBFbGVDcm9wcGVyRGlhbG9nIGZyb20gJ0AvY29tcG9uZW50cy9FbGVDcm9wcGVyRGlhbG9nJyAgLy8g5Zu+54mH6KOB5YmqCgpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogIlVzZXJJbmZvIiwKICBjb21wb25lbnRzOiB7RWxlQ3JvcHBlckRpYWxvZ30sCiAgZGF0YSgpIHsKICAgIHJldHVybiB7CiAgICAgIGFjdGl2ZTogJ2luZm8nLCAgLy8gdGFi6aG16YCJ5LitCiAgICAgIGZvcm06IHt9LCAvLyDooajljZXmlbDmja4KICAgICAgcnVsZXM6IHsgIC8vIOihqOWNlemqjOivgeinhOWImQogICAgICAgIHJlYWxuYW1lOiBbCiAgICAgICAgICB7cmVxdWlyZWQ6IHRydWUsIG1lc3NhZ2U6ICfor7fovpPlhaXnnJ/lrp7lp5PlkI0nLCB0cmlnZ2VyOiAnYmx1cid9CiAgICAgICAgXSwKICAgICAgICBuaWNrbmFtZTogWwogICAgICAgICAge3JlcXVpcmVkOiB0cnVlLCBtZXNzYWdlOiAn6K+36L6T5YWl5pi156ewJywgdHJpZ2dlcjogJ2JsdXInfQogICAgICAgIF0sCiAgICAgICAgZ2VuZGVyOiBbCiAgICAgICAgICB7cmVxdWlyZWQ6IHRydWUsIG1lc3NhZ2U6ICfor7fpgInmi6nmgKfliKsnLCB0cmlnZ2VyOiAnYmx1cid9CiAgICAgICAgXSwKICAgICAgICBtb2JpbGU6IFsKICAgICAgICAgIHtyZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ+ivt+i+k+WFpeiBlOezu+aWueW8jycsIHRyaWdnZXI6ICdibHVyJ30KICAgICAgICBdLAogICAgICAgIGVtYWlsOiBbCiAgICAgICAgICB7cmVxdWlyZWQ6IHRydWUsIG1lc3NhZ2U6ICfor7fovpPlhaXnlLXlrZDpgq7nrrEnLCB0cmlnZ2VyOiAnYmx1cid9CiAgICAgICAgXQogICAgICB9LAogICAgICBsb2FkaW5nOiBmYWxzZSwgIC8vIOS/neWtmOaMiemSrmxvYWRpbmcKICAgICAgc2hvd0Nyb3BwZXI6IGZhbHNlICAvLyDmmK/lkKbmmL7npLroo4HliarlvLnnqpcKICAgIH0KICB9LAogIG1vdW50ZWQoKSB7CiAgICB0aGlzLmdldFVzZXJJbmZvKCk7CiAgfSwKICBtZXRob2RzOiB7CiAgICAvKioKICAgICAqIOiOt+WPlueUqOaIt+S/oeaBrwogICAgICovCiAgICBnZXRVc2VySW5mbygpIHsKICAgICAgaWYgKHRoaXMuJHNldHRpbmcudXNlclVybCkgewogICAgICAgIHRoaXMuJGh0dHAuZ2V0KHRoaXMuJHNldHRpbmcudXNlclVybCkudGhlbihyZXMgPT4gewogICAgICAgICAgaWYgKHJlcy5kYXRhLmNvZGUgPT09IDApIHsKICAgICAgICAgICAgaWYgKHRoaXMuJHNldHRpbmcucGFyc2VVc2VyKSB7CiAgICAgICAgICAgICAgcmVzLmRhdGEgPSB0aGlzLiRzZXR0aW5nLnBhcnNlVXNlcihyZXMuZGF0YSk7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgdGhpcy5mb3JtID0gSlNPTi5wYXJzZShKU09OLnN0cmluZ2lmeShyZXMuZGF0YS5kYXRhKSkKICAgICAgICAgICAgbGV0IHVzZXIgPSByZXMuZGF0YS5kYXRhOwogICAgICAgICAgICB0aGlzLiRzdG9yZS5kaXNwYXRjaCgndXNlci9zZXRVc2VyJywgdXNlcik7CiAgICAgICAgICAgIHRoaXMuJHN0b3JlLmRpc3BhdGNoKCd1c2VyL3NldFJvbGVzJywgdXNlciA/IHVzZXIucm9sZXMgOiBudWxsKTsKICAgICAgICAgICAgdGhpcy4kc3RvcmUuZGlzcGF0Y2goJ3VzZXIvc2V0QXV0aG9yaXRpZXMnLCB1c2VyID8gdXNlci5hdXRob3JpdGllcyA6IG51bGwpOwogICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihyZXMuZGF0YS5tc2cpOwogICAgICAgICAgfQogICAgICAgIH0pLmNhdGNoKGUgPT4gewogICAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihlLm1lc3NhZ2UpOwogICAgICAgIH0pOwogICAgICB9CiAgICB9LAogICAgLyog5L+d5a2Y5pu05pS5ICovCiAgICBzYXZlKCkgewogICAgICB0aGlzLiRyZWZzWydpbmZvRm9ybSddLnZhbGlkYXRlKCh2YWxpZCkgPT4gewogICAgICAgIGlmICh2YWxpZCkgewogICAgICAgICAgdGhpcy5sb2FkaW5nID0gdHJ1ZTsKICAgICAgICAgIHRoaXMuJGh0dHAucG9zdCgnL2luZGV4L3VwZGF0ZVVzZXJJbmZvJywgdGhpcy5mb3JtKS50aGVuKHJlcyA9PiB7CiAgICAgICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlOwogICAgICAgICAgICBpZiAocmVzLmRhdGEuY29kZSA9PT0gMCkgewogICAgICAgICAgICAgIHRoaXMuJG1lc3NhZ2Uoe3R5cGU6ICdzdWNjZXNzJywgbWVzc2FnZTogJ+S/neWtmOaIkOWKnyd9KTsKICAgICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgICB0aGlzLiRtZXNzYWdlLmVycm9yKHJlcy5kYXRhLm1zZyk7CiAgICAgICAgICAgIH0KICAgICAgICAgIH0pLmNhdGNoKGUgPT4gewogICAgICAgICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZTsKICAgICAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihlLm1lc3NhZ2UpOwogICAgICAgICAgfSk7CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHJldHVybiBmYWxzZTsKICAgICAgICB9CiAgICAgIH0pOwogICAgfSwKICAgIC8qIOWktOWDj+ijgeWJquWujOaIkOWbnuiwgyAqLwogICAgb25Dcm9wKHJlcykgewogICAgICB0aGlzLmZvcm0uYXZhdGFyID0gcmVzOwogICAgICB0aGlzLnNob3dDcm9wcGVyID0gZmFsc2U7CiAgICB9CiAgfQp9Cg=="},{"version":3,"sources":["info.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2IA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"info.vue","sourceRoot":"src/views/user","sourcesContent":["<template>\n <div class=\"ele-body\">\n <el-row :gutter=\"15\">\n <el-col :md=\"6\" :sm=\"8\">\n <el-card shadow=\"never\" body-style=\"padding: 25px;\">\n <div class=\"user-info-card\">\n <div class=\"user-info-avatar-group\" @click=\"showCropper=true\">\n <img class=\"user-info-avatar\" :src=\"form.avatar\" alt=\"\"/>\n <i class=\"el-icon-upload2\"></i>\n </div>\n <h2 class=\"user-info-name\">相约在冬季</h2>\n <div class=\"user-info-desc\">为梦想而创作，海纳百川，有容乃大!</div>\n </div>\n <div class=\"user-info-list\">\n <div class=\"user-info-item\">\n <i class=\"el-icon-user\"></i><span>资深PHP架构师</span>\n </div>\n <div class=\"user-info-item\">\n <i class=\"el-icon-office-building\"></i><span>RXThinkCMF研发中心 - 架构设计部 - 资深架构师</span>\n </div>\n <div class=\"user-info-item\">\n <i class=\"el-icon-location-information\"></i><span>中国 • 江苏省 • 南京市</span>\n </div>\n <div class=\"user-info-item\">\n <i class=\"el-icon-_school\"></i><span>Laravel8、JWT、Vue、ElementUI</span>\n </div>\n </div>\n <div style=\"margin: 30px 0 20px 0;\">\n <el-divider class=\"ele-divider-dashed ele-divider-base\"/>\n </div>\n <h6 class=\"ele-text\" style=\"margin-bottom: 8px;\">标签</h6>\n <div class=\"user-info-tags\">\n <el-tag size=\"mini\" type=\"info\">中国硅谷</el-tag>\n <el-tag size=\"mini\" type=\"info\">创业者</el-tag>\n <el-tag size=\"mini\" type=\"info\">厚德载物</el-tag>\n <el-tag size=\"mini\" type=\"info\">坚持</el-tag>\n <el-tag size=\"mini\" type=\"info\">毅力</el-tag>\n <el-tag size=\"mini\" type=\"info\">王者归来</el-tag>\n </div>\n </el-card>\n </el-col>\n <el-col :md=\"18\" :sm=\"16\">\n <el-card shadow=\"never\" body-style=\"padding-top: 5px;\">\n <el-tabs v-model=\"active\" class=\"user-info-tabs\">\n <el-tab-pane label=\"基本信息\" name=\"info\">\n <el-form ref=\"infoForm\" :model=\"form\" :rules=\"rules\" label-width=\"90px\"\n style=\"max-width: 450px;padding-top: 40px;\" @keyup.enter.native=\"save\"\n @submit.native.prevent>\n <el-form-item label=\"真实姓名:\" prop=\"realname\">\n <el-input v-model=\"form.realname\" placeholder=\"请输入真实姓名\" clearable/>\n </el-form-item>\n <el-form-item label=\"昵称:\" prop=\"nickname\">\n <el-input v-model=\"form.nickname\" placeholder=\"请输入昵称\" clearable/>\n </el-form-item>\n <el-form-item label=\"性别:\" prop=\"gender\">\n <el-select v-model=\"form.gender\" placeholder=\"请选择性别\" class=\"ele-fluid\" clearable>\n <el-option label=\"男\" :value=\"1\"/>\n <el-option label=\"女\" :value=\"2\"/>\n <el-option label=\"保密\" :value=\"3\"/>\n </el-select>\n </el-form-item>\n <el-form-item label=\"联系方式:\" prop=\"mobile\">\n <el-input v-model=\"form.mobile\" placeholder=\"请输入联系方式\" clearable/>\n </el-form-item>\n <el-form-item label=\"电子邮箱:\" prop=\"email\">\n <el-input v-model=\"form.email\" placeholder=\"请输入电子邮箱\" clearable/>\n </el-form-item>\n <el-form-item label=\"个人简介:\">\n <el-input v-model=\"form.intro\" placeholder=\"请输入个人简介\" :rows=\"4\" type=\"textarea\"/>\n </el-form-item>\n <el-form-item>\n <el-button type=\"primary\" @click=\"save\" :loading=\"loading\">保存更改</el-button>\n </el-form-item>\n </el-form>\n </el-tab-pane>\n <el-tab-pane label=\"账号绑定\" name=\"account\">\n <div class=\"user-account-list\">\n <div class=\"user-account-item ele-cell\">\n <div class=\"ele-cell-content\">\n <div>密保手机</div>\n <div class=\"ele-text-secondary\">已绑定手机：152****4151</div>\n </div>\n <el-link type=\"primary\" :underline=\"false\">去修改</el-link>\n </div>\n <el-divider/>\n <div class=\"user-account-item ele-cell\">\n <div class=\"ele-cell-content\">\n <div>密保邮箱</div>\n <div class=\"ele-text-secondary\">已绑定邮箱：laravel.qq.com</div>\n </div>\n <el-link type=\"primary\" :underline=\"false\">去修改</el-link>\n </div>\n <el-divider/>\n <div class=\"user-account-item ele-cell\">\n <div class=\"ele-cell-content\">\n <div>密保问题</div>\n <div class=\"ele-text-secondary\">未设置密保问题</div>\n </div>\n <el-link type=\"primary\" :underline=\"false\">去设置</el-link>\n </div>\n <el-divider/>\n <div class=\"user-account-item ele-cell\">\n <i class=\"user-account-icon el-icon-_qq\"></i>\n <div class=\"ele-cell-content\">\n <div>绑定QQ</div>\n <div class=\"ele-text-secondary\">当前未绑定QQ账号</div>\n </div>\n <el-link type=\"primary\" :underline=\"false\">去绑定</el-link>\n </div>\n <el-divider/>\n <div class=\"user-account-item ele-cell\">\n <i class=\"user-account-icon el-icon-_wechat\"></i>\n <div class=\"ele-cell-content\">\n <div>绑定微信</div>\n <div class=\"ele-text-secondary\">当前未绑定绑定微信账号</div>\n </div>\n <el-link type=\"primary\" :underline=\"false\">去绑定</el-link>\n </div>\n <el-divider/>\n <div class=\"user-account-item ele-cell\">\n <i class=\"user-account-icon el-icon-_alipay\"></i>\n <div class=\"ele-cell-content\">\n <div>绑定支付宝</div>\n <div class=\"ele-text-secondary\">当前未绑定绑定支付宝账号</div>\n </div>\n <el-link type=\"primary\" :underline=\"false\">去绑定</el-link>\n </div>\n </div>\n </el-tab-pane>\n </el-tabs>\n </el-card>\n </el-col>\n </el-row>\n <!-- 头像裁剪弹窗 -->\n <ele-cropper-dialog :show.sync=\"showCropper\" @crop=\"onCrop\" :src=\"form.avatar\" :lock-scroll=\"false\"/>\n </div>\n</template>\n\n<script>\nimport EleCropperDialog from '@/components/EleCropperDialog' // 图片裁剪\n\nexport default {\n name: \"UserInfo\",\n components: {EleCropperDialog},\n data() {\n return {\n active: 'info', // tab页选中\n form: {}, // 表单数据\n rules: { // 表单验证规则\n realname: [\n {required: true, message: '请输入真实姓名', trigger: 'blur'}\n ],\n nickname: [\n {required: true, message: '请输入昵称', trigger: 'blur'}\n ],\n gender: [\n {required: true, message: '请选择性别', trigger: 'blur'}\n ],\n mobile: [\n {required: true, message: '请输入联系方式', trigger: 'blur'}\n ],\n email: [\n {required: true, message: '请输入电子邮箱', trigger: 'blur'}\n ]\n },\n loading: false, // 保存按钮loading\n showCropper: false // 是否显示裁剪弹窗\n }\n },\n mounted() {\n this.getUserInfo();\n },\n methods: {\n /**\n * 获取用户信息\n */\n getUserInfo() {\n if (this.$setting.userUrl) {\n this.$http.get(this.$setting.userUrl).then(res => {\n if (res.data.code === 0) {\n if (this.$setting.parseUser) {\n res.data = this.$setting.parseUser(res.data);\n }\n this.form = JSON.parse(JSON.stringify(res.data.data))\n let user = res.data.data;\n this.$store.dispatch('user/setUser', user);\n this.$store.dispatch('user/setRoles', user ? user.roles : null);\n this.$store.dispatch('user/setAuthorities', user ? user.authorities : null);\n } else {\n this.$message.error(res.data.msg);\n }\n }).catch(e => {\n this.$message.error(e.message);\n });\n }\n },\n /* 保存更改 */\n save() {\n this.$refs['infoForm'].validate((valid) => {\n if (valid) {\n this.loading = true;\n this.$http.post('/index/updateUserInfo', this.form).then(res => {\n this.loading = false;\n if (res.data.code === 0) {\n this.$message({type: 'success', message: '保存成功'});\n } else {\n this.$message.error(res.data.msg);\n }\n }).catch(e => {\n this.loading = false;\n this.$message.error(e.message);\n });\n } else {\n return false;\n }\n });\n },\n /* 头像裁剪完成回调 */\n onCrop(res) {\n this.form.avatar = res;\n this.showCropper = false;\n }\n }\n}\n</script>\n\n<style scoped>\n.ele-body {\n padding-bottom: 0;\n}\n\n.el-card {\n margin-bottom: 15px;\n}\n\n/* 用户资料卡片 */\n.user-info-card {\n padding-top: 8px;\n text-align: center;\n}\n\n.user-info-card .user-info-avatar-group {\n position: relative;\n cursor: pointer;\n margin: 0 auto;\n width: 110px;\n height: 110px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.user-info-card .user-info-avatar {\n width: 110px;\n height: 110px;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.user-info-card .user-info-avatar-group > i {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #FFF;\n font-size: 30px;\n display: none;\n z-index: 2;\n}\n\n.user-info-card .user-info-avatar-group:hover > i {\n display: block;\n}\n\n.user-info-card .user-info-avatar-group:hover:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, .3);\n}\n\n.user-info-card .user-info-name {\n font-size: 24px;\n margin-top: 20px;\n}\n\n.user-info-card .user-info-desc {\n margin-top: 8px;\n}\n\n/* 用户信息列表 */\n.user-info-list {\n margin-top: 30px;\n}\n\n.user-info-list .user-info-item {\n margin-bottom: 10px;\n display: flex;\n align-items: baseline;\n}\n\n.user-info-item > i {\n margin-right: 10px;\n font-size: 16px;\n}\n\n.user-info-item > span {\n flex: 1;\n display: block;\n}\n\n/* 用户标签 */\n.user-info-tags .el-tag {\n margin: 10px 10px 0 0;\n}\n\n/* 用户账号绑定列表 */\n.user-account-list {\n margin-top: 10px;\n}\n\n.user-account-list .user-account-item {\n padding: 15px;\n}\n\n.user-account-list .user-account-item .ele-text-secondary {\n margin-top: 6px;\n}\n\n.user-account-list .user-account-item .user-account-icon {\n width: 42px;\n height: 42px;\n line-height: 42px;\n text-align: center;\n color: #FFF;\n font-size: 26px;\n border-radius: 50%;\n background-color: #3492ED;\n box-sizing: border-box;\n}\n\n.user-account-list .user-account-item .user-account-icon.el-icon-_wechat {\n background-color: #4DAF29;\n font-size: 28px;\n}\n\n.user-account-list .user-account-item .user-account-icon.el-icon-_alipay {\n background-color: #1476FE;\n padding-left: 5px;\n font-size: 32px;\n}\n\n/* tab页签 */\n.user-info-tabs >>> .el-tabs__nav-wrap {\n padding-left: 20px;\n}\n</style>\n"]}]}
|
