| | |
| | | <template> |
| | | <div> |
| | | <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" /> |
| | | <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> |
| | | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"> |
| | | <el-row> |
| | | <el-col :xs="24" :md="12" :style="{height: '350px'}"> |
| | |
| | | let formData = new FormData(); |
| | | formData.append("avatarfile", data); |
| | | uploadAvatar(formData).then(response => { |
| | | if (response.code === 200) { |
| | | this.open = false; |
| | | this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl; |
| | | store.commit('SET_AVATAR', this.options.img); |
| | | this.msgSuccess("修改成功"); |
| | | } |
| | | this.open = false; |
| | | this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl; |
| | | store.commit('SET_AVATAR', this.options.img); |
| | | this.msgSuccess("修改成功"); |
| | | this.visible = false; |
| | | }); |
| | | }); |
| | |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .user-info-head { |
| | | position: relative; |
| | | display: inline-block; |
| | | height: 120px; |
| | | } |
| | | |
| | | .user-info-head:hover:after { |
| | | content: '+'; |
| | | position: absolute; |
| | | left: 0; |
| | | right: 0; |
| | | top: 0; |
| | | bottom: 0; |
| | | color: #eee; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | font-size: 24px; |
| | | font-style: normal; |
| | | -webkit-font-smoothing: antialiased; |
| | | -moz-osx-font-smoothing: grayscale; |
| | | cursor: pointer; |
| | | line-height: 110px; |
| | | border-radius: 50%; |
| | | } |
| | | </style> |