| 1 |
- {"remainingRequest":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/views/personalCenter/userAvatar.vue?vue&type=script&lang=js","dependencies":[{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/views/personalCenter/userAvatar.vue","mtime":1708395041888},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/babel-loader/lib/index.js","mtime":1708395147257},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js","mtime":1708395147382}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBzdG9yZSBmcm9tICJAL3N0b3JlIjsKLy8gaW1wb3J0IHsgVnVlQ3JvcHBlciB9IGZyb20gInZ1ZS1jcm9wcGVyIjsKLy8gaW1wb3J0IHsgdXBsb2FkQXZhdGFyIH0gZnJvbSAiQC9hcGkvc3lzdGVtL3VzZXIiOwppbXBvcnQgeyBkZWJvdW5jZSB9IGZyb20gJ0AvdXRpbHMnCgpleHBvcnQgZGVmYXVsdCB7CiAgY29tcG9uZW50czogeyBWdWVDcm9wcGVyIH0sCiAgcHJvcHM6IHsKICAgIHVzZXI6IHsKICAgICAgdHlwZTogT2JqZWN0CiAgICB9CiAgfSwKICBkYXRhKCkgewogICAgcmV0dXJuIHsKICAgICAgLy8g5piv5ZCm5pi+56S65by55Ye65bGCCiAgICAgIG9wZW46IGZhbHNlLAogICAgICAvLyDmmK/lkKbmmL7npLpjcm9wcGVyCiAgICAgIHZpc2libGU6IGZhbHNlLAogICAgICAvLyDlvLnlh7rlsYLmoIfpopgKICAgICAgdGl0bGU6ICLkv67mlLnlpLTlg48iLAogICAgICBvcHRpb25zOiB7CiAgICAgICAgaW1nOiBzdG9yZS5nZXR0ZXJzLmF2YXRhciwgLy/oo4Hliarlm77niYfnmoTlnLDlnYAKICAgICAgICBhdXRvQ3JvcDogdHJ1ZSwgLy8g5piv5ZCm6buY6K6k55Sf5oiQ5oiq5Zu+5qGGCiAgICAgICAgYXV0b0Nyb3BXaWR0aDogMjAwLCAvLyDpu5jorqTnlJ/miJDmiKrlm77moYblrr3luqYKICAgICAgICBhdXRvQ3JvcEhlaWdodDogMjAwLCAvLyDpu5jorqTnlJ/miJDmiKrlm77moYbpq5jluqYKICAgICAgICBmaXhlZEJveDogdHJ1ZSwgLy8g5Zu65a6a5oiq5Zu+5qGG5aSn5bCPIOS4jeWFgeiuuOaUueWPmAogICAgICAgIG91dHB1dFR5cGU6InBuZyIgLy8g6buY6K6k55Sf5oiQ5oiq5Zu+5Li6UE5H5qC85byPCiAgICAgIH0sCiAgICAgIHByZXZpZXdzOiB7fSwKICAgICAgcmVzaXplSGFuZGxlcjogbnVsbAogICAgfTsKICB9LAogIG1ldGhvZHM6IHsKICAgIC8vIOe8lui+keWktOWDjwogICAgZWRpdENyb3BwZXIoKSB7CiAgICAgIHRoaXMub3BlbiA9IHRydWU7CiAgICB9LAogICAgLy8g5omT5byA5by55Ye65bGC57uT5p2f5pe255qE5Zue6LCDCiAgICBtb2RhbE9wZW5lZCgpIHsKICAgICAgdGhpcy52aXNpYmxlID0gdHJ1ZTsKICAgICAgaWYgKCF0aGlzLnJlc2l6ZUhhbmRsZXIpIHsKICAgICAgICB0aGlzLnJlc2l6ZUhhbmRsZXIgPSBkZWJvdW5jZSgoKSA9PiB7CiAgICAgICAgICB0aGlzLnJlZnJlc2goKQogICAgICAgIH0sIDEwMCkKICAgICAgfQogICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigicmVzaXplIiwgdGhpcy5yZXNpemVIYW5kbGVyKQogICAgfSwKICAgIC8vIOWIt+aWsOe7hOS7tgogICAgcmVmcmVzaCgpIHsKICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLnJlZnJlc2goKTsKICAgIH0sCiAgICAvLyDopobnm5bpu5jorqTnmoTkuIrkvKDooYzkuLoKICAgIHJlcXVlc3RVcGxvYWQoKSB7CiAgICB9LAogICAgLy8g5ZCR5bem5peL6L2sCiAgICByb3RhdGVMZWZ0KCkgewogICAgICB0aGlzLiRyZWZzLmNyb3BwZXIucm90YXRlTGVmdCgpOwogICAgfSwKICAgIC8vIOWQkeWPs+aXi+i9rAogICAgcm90YXRlUmlnaHQoKSB7CiAgICAgIHRoaXMuJHJlZnMuY3JvcHBlci5yb3RhdGVSaWdodCgpOwogICAgfSwKICAgIC8vIOWbvueJh+e8qeaUvgogICAgY2hhbmdlU2NhbGUobnVtKSB7CiAgICAgIG51bSA9IG51bSB8fCAxOwogICAgICB0aGlzLiRyZWZzLmNyb3BwZXIuY2hhbmdlU2NhbGUobnVtKTsKICAgIH0sCiAgICAvLyDkuIrkvKDpooTlpITnkIYKICAgIGJlZm9yZVVwbG9hZChmaWxlKSB7CiAgICAgIGlmIChmaWxlLnR5cGUuaW5kZXhPZigiaW1hZ2UvIikgPT0gLTEpIHsKICAgICAgICB0aGlzLiRtb2RhbC5tc2dFcnJvcigi5paH5Lu25qC85byP6ZSZ6K+v77yM6K+35LiK5Lyg5Zu+54mH57G75Z6LLOWmgu+8mkpQR++8jFBOR+WQjue8gOeahOaWh+S7tuOAgiIpOwogICAgICB9IGVsc2UgewogICAgICAgIGNvbnN0IHJlYWRlciA9IG5ldyBGaWxlUmVhZGVyKCk7CiAgICAgICAgcmVhZGVyLnJlYWRBc0RhdGFVUkwoZmlsZSk7CiAgICAgICAgcmVhZGVyLm9ubG9hZCA9ICgpID0+IHsKICAgICAgICAgIHRoaXMub3B0aW9ucy5pbWcgPSByZWFkZXIucmVzdWx0OwogICAgICAgIH07CiAgICAgIH0KICAgIH0sCiAgICAvLyDkuIrkvKDlm77niYcKICAgIHVwbG9hZEltZygpIHsKICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLmdldENyb3BCbG9iKGRhdGEgPT4gewogICAgICAgIGxldCBmb3JtRGF0YSA9IG5ldyBGb3JtRGF0YSgpOwogICAgICAgIGZvcm1EYXRhLmFwcGVuZCgiYXZhdGFyZmlsZSIsIGRhdGEpOwogICAgICAgIHVwbG9hZEF2YXRhcihmb3JtRGF0YSkudGhlbihyZXNwb25zZSA9PiB7CiAgICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTsKICAgICAgICAgIHRoaXMub3B0aW9ucy5pbWcgPSBwcm9jZXNzLmVudi5WVUVfQVBQX0JBU0VfQVBJICsgcmVzcG9uc2UuaW1nVXJsOwogICAgICAgICAgc3RvcmUuY29tbWl0KCdTRVRfQVZBVEFSJywgdGhpcy5vcHRpb25zLmltZyk7CiAgICAgICAgICB0aGlzLiRtb2RhbC5tc2dTdWNjZXNzKCLkv67mlLnmiJDlip8iKTsKICAgICAgICAgIHRoaXMudmlzaWJsZSA9IGZhbHNlOwogICAgICAgIH0pOwogICAgICB9KTsKICAgIH0sCiAgICAvLyDlrp7ml7bpooTop4gKICAgIHJlYWxUaW1lKGRhdGEpIHsKICAgICAgdGhpcy5wcmV2aWV3cyA9IGRhdGE7CiAgICB9LAogICAgLy8g5YWz6Zet56qX5Y+jCiAgICBjbG9zZURpYWxvZygpIHsKICAgICAgdGhpcy5vcHRpb25zLmltZyA9IHN0b3JlLmdldHRlcnMuYXZhdGFyCiAgICAgIHRoaXMudmlzaWJsZSA9IGZhbHNlOwogICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigicmVzaXplIiwgdGhpcy5yZXNpemVIYW5kbGVyKQogICAgfQogIH0KfTsK"},{"version":3,"sources":["userAvatar.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA;AACA;AACA;AACA;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"userAvatar.vue","sourceRoot":"src/views/personalCenter","sourcesContent":["<template>\n <div>\n <div class=\"user-info-head\" @click=\"editCropper()\"><img v-bind:src=\"options.img\" title=\"点击上传头像\" class=\"img-circle img-lg\" /></div>\n <el-dialog :title=\"title\" :visible.sync=\"open\" width=\"800px\" append-to-body @opened=\"modalOpened\" @close=\"closeDialog\">\n <el-row>\n <el-col :xs=\"24\" :md=\"12\" :style=\"{height: '350px'}\">\n <vue-cropper\n ref=\"cropper\"\n :img=\"options.img\"\n :info=\"true\"\n :autoCrop=\"options.autoCrop\"\n :autoCropWidth=\"options.autoCropWidth\"\n :autoCropHeight=\"options.autoCropHeight\"\n :fixedBox=\"options.fixedBox\"\n :outputType=\"options.outputType\"\n @realTime=\"realTime\"\n v-if=\"visible\"\n />\n </el-col>\n <el-col :xs=\"24\" :md=\"12\" :style=\"{height: '350px'}\">\n <div class=\"avatar-upload-preview\">\n <img :src=\"previews.url\" :style=\"previews.img\" />\n </div>\n </el-col>\n </el-row>\n <br />\n <el-row>\n <el-col :lg=\"2\" :sm=\"3\" :xs=\"3\">\n <el-upload action=\"#\" :http-request=\"requestUpload\" :show-file-list=\"false\" :before-upload=\"beforeUpload\">\n <el-button size=\"small\">\n 选择\n <i class=\"el-icon-upload el-icon--right\"></i>\n </el-button>\n </el-upload>\n </el-col>\n <el-col :lg=\"{span: 1, offset: 2}\" :sm=\"2\" :xs=\"2\">\n <el-button icon=\"el-icon-plus\" size=\"small\" @click=\"changeScale(1)\"></el-button>\n </el-col>\n <el-col :lg=\"{span: 1, offset: 1}\" :sm=\"2\" :xs=\"2\">\n <el-button icon=\"el-icon-minus\" size=\"small\" @click=\"changeScale(-1)\"></el-button>\n </el-col>\n <el-col :lg=\"{span: 1, offset: 1}\" :sm=\"2\" :xs=\"2\">\n <el-button icon=\"el-icon-refresh-left\" size=\"small\" @click=\"rotateLeft()\"></el-button>\n </el-col>\n <el-col :lg=\"{span: 1, offset: 1}\" :sm=\"2\" :xs=\"2\">\n <el-button icon=\"el-icon-refresh-right\" size=\"small\" @click=\"rotateRight()\"></el-button>\n </el-col>\n <el-col :lg=\"{span: 2, offset: 6}\" :sm=\"2\" :xs=\"2\">\n <el-button type=\"primary\" size=\"small\" @click=\"uploadImg()\">提 交</el-button>\n </el-col>\n </el-row>\n </el-dialog>\n </div>\n</template>\n\n<script>\nimport store from \"@/store\";\n// import { VueCropper } from \"vue-cropper\";\n// import { uploadAvatar } from \"@/api/system/user\";\nimport { debounce } from '@/utils'\n\nexport default {\n components: { VueCropper },\n props: {\n user: {\n type: Object\n }\n },\n data() {\n return {\n // 是否显示弹出层\n open: false,\n // 是否显示cropper\n visible: false,\n // 弹出层标题\n title: \"修改头像\",\n options: {\n img: store.getters.avatar, //裁剪图片的地址\n autoCrop: true, // 是否默认生成截图框\n autoCropWidth: 200, // 默认生成截图框宽度\n autoCropHeight: 200, // 默认生成截图框高度\n fixedBox: true, // 固定截图框大小 不允许改变\n outputType:\"png\" // 默认生成截图为PNG格式\n },\n previews: {},\n resizeHandler: null\n };\n },\n methods: {\n // 编辑头像\n editCropper() {\n this.open = true;\n },\n // 打开弹出层结束时的回调\n modalOpened() {\n this.visible = true;\n if (!this.resizeHandler) {\n this.resizeHandler = debounce(() => {\n this.refresh()\n }, 100)\n }\n window.addEventListener(\"resize\", this.resizeHandler)\n },\n // 刷新组件\n refresh() {\n this.$refs.cropper.refresh();\n },\n // 覆盖默认的上传行为\n requestUpload() {\n },\n // 向左旋转\n rotateLeft() {\n this.$refs.cropper.rotateLeft();\n },\n // 向右旋转\n rotateRight() {\n this.$refs.cropper.rotateRight();\n },\n // 图片缩放\n changeScale(num) {\n num = num || 1;\n this.$refs.cropper.changeScale(num);\n },\n // 上传预处理\n beforeUpload(file) {\n if (file.type.indexOf(\"image/\") == -1) {\n this.$modal.msgError(\"文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。\");\n } else {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => {\n this.options.img = reader.result;\n };\n }\n },\n // 上传图片\n uploadImg() {\n this.$refs.cropper.getCropBlob(data => {\n let formData = new FormData();\n formData.append(\"avatarfile\", data);\n uploadAvatar(formData).then(response => {\n this.open = false;\n this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;\n store.commit('SET_AVATAR', this.options.img);\n this.$modal.msgSuccess(\"修改成功\");\n this.visible = false;\n });\n });\n },\n // 实时预览\n realTime(data) {\n this.previews = data;\n },\n // 关闭窗口\n closeDialog() {\n this.options.img = store.getters.avatar\n this.visible = false;\n window.removeEventListener(\"resize\", this.resizeHandler)\n }\n }\n};\n</script>\n<style scoped lang=\"scss\">\n.user-info-head {\n position: relative;\n display: inline-block;\n height: 120px;\n}\n\n.user-info-head:hover:after {\n content: '+';\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n color: #eee;\n background: rgba(0, 0, 0, 0.5);\n font-size: 24px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n cursor: pointer;\n line-height: 110px;\n border-radius: 50%;\n}\n</style>\n"]}]}
|
