|
|
@@ -2,8 +2,11 @@
|
|
|
<div class="full-width flex">
|
|
|
<div class="flex flex-col flex-justify-around flex-center full-height">
|
|
|
<div class="bold font-16" style="margin-top: -10px">我的信息</div>
|
|
|
- <div class="mt-10 ml-20">
|
|
|
+ <div class="mt-10 ml-20" @click="show = true">
|
|
|
<el-avatar :src="user.info.avatarUrl" :size="100"></el-avatar>
|
|
|
+ <el-icon :size="25" style="margin-left: -30px">
|
|
|
+ <EditPen />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
<div class="mt-10" style="margin-left: 33px">
|
|
|
{{ user.info.nickName }}
|
|
|
@@ -23,26 +26,108 @@
|
|
|
<div
|
|
|
class="flex flex-center flex-justify-between mt-10 padding-left padding-right"
|
|
|
>
|
|
|
- <img
|
|
|
+ <el-tooltip
|
|
|
v-for="icon in icons"
|
|
|
:key="icon.value"
|
|
|
- :src="icon.icon"
|
|
|
- class="icon-task"
|
|
|
- @click="changeWorkStatus(icon)"
|
|
|
- />
|
|
|
+ :content="icon.tips"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="icon.icon"
|
|
|
+ class="icon-task pointer"
|
|
|
+ @click="changeWorkStatus(icon)"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-dialog title="修改头像" v-model="show" width="780px">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="full-width text-left flex flex-justify-start padding-top padding-bottom"
|
|
|
+ >
|
|
|
+ 新头像不允许涉及政治敏感与色情;<br />
|
|
|
+ 图片格式必须为：png,jpeg,jpg；不可大于2M；<br />
|
|
|
+ 建议使用png格式图片，以保持最佳效果；建议图片尺寸为144px*144px
|
|
|
+ </span>
|
|
|
+ <div class="flex flex-justify-start padding-bottom">
|
|
|
+ <upload-office
|
|
|
+ accept=".jpg,.png,.jpeg"
|
|
|
+ :max="1"
|
|
|
+ :show-progress="false"
|
|
|
+ @upload="upload"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <div class="flex flex-justify-start">
|
|
|
+ <div class="ml-20 flex flex-justify-start flex-col">
|
|
|
+ <div class="bold text-left">头像裁剪</div>
|
|
|
+ <div class="mt-20 upload flex flex-center">
|
|
|
+ <cropper
|
|
|
+ ref="cropper"
|
|
|
+ class="cropper"
|
|
|
+ :src="img"
|
|
|
+ :stencil-props="{
|
|
|
+ aspectRatio: 1 / 1,
|
|
|
+ resizable: false
|
|
|
+ }"
|
|
|
+ @change="changeAvatar"
|
|
|
+ ></cropper>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ml-20 flex flex-justify-start flex-col">
|
|
|
+ <div class="bold text-left">头像预览</div>
|
|
|
+ <div class="mt-20 preview flex flex-center">
|
|
|
+ <el-avatar
|
|
|
+ v-if="previewImg"
|
|
|
+ :size="114"
|
|
|
+ fit="fill"
|
|
|
+ :src="previewImg"
|
|
|
+ ></el-avatar>
|
|
|
+
|
|
|
+ <el-avatar
|
|
|
+ v-if="previewImg"
|
|
|
+ :size="114"
|
|
|
+ shape="square"
|
|
|
+ fit="fill"
|
|
|
+ class="ml-20"
|
|
|
+ :src="previewImg"
|
|
|
+ ></el-avatar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-20 full-width flex flex-justify-end">
|
|
|
+ <el-button type="primary" plain @click="show = false"
|
|
|
+ >取 消</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="uploadImage">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { useStore } from '@/store/user.js'
|
|
|
+import { Cropper } from 'vue-advanced-cropper'
|
|
|
+import 'vue-advanced-cropper/dist/style.css'
|
|
|
+import api from '@/api/index.js'
|
|
|
+import website from '@/config/website.js'
|
|
|
+import { getToken } from '@/utils/auth.js'
|
|
|
+import { Base64 } from 'js-base64'
|
|
|
+import uploadOffice from '@/components/upload-office/index.vue'
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ Cropper,
|
|
|
+ uploadOffice
|
|
|
+ },
|
|
|
setup() {
|
|
|
const user = useStore()
|
|
|
return { user }
|
|
|
},
|
|
|
+
|
|
|
watch: {
|
|
|
status: {
|
|
|
handler(val) {
|
|
|
@@ -57,9 +142,18 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ show: false,
|
|
|
status: '',
|
|
|
+ img: '',
|
|
|
+ previewImg: '',
|
|
|
placeholder: '请填写状态（最长6个字符）',
|
|
|
id: '',
|
|
|
+ headers: {
|
|
|
+ Authorization: `Basic ${Base64.encode(
|
|
|
+ `${website.clientId}:${website.clientSecret}`
|
|
|
+ )}`,
|
|
|
+ 'Blade-Auth': 'bearer ' + getToken()
|
|
|
+ },
|
|
|
icons: [
|
|
|
{
|
|
|
icon: new URL('../../../assets/svg/task/work.svg', import.meta.url)
|
|
|
@@ -120,18 +214,60 @@ export default {
|
|
|
},
|
|
|
changeWorkStatus(res) {
|
|
|
this.status = res.tips
|
|
|
+ },
|
|
|
+ upload(list) {
|
|
|
+ this.previewImg = list[0].filePath
|
|
|
+ this.img = list[0].filePath
|
|
|
+ },
|
|
|
+ changeAvatar({ coordinates, image, canvas }) {
|
|
|
+ this.previewImg = canvas.toDataURL()
|
|
|
+ },
|
|
|
+ uploadImage() {
|
|
|
+ const { canvas } = this.$refs.cropper.getResult()
|
|
|
+ if (canvas) {
|
|
|
+ const form = new FormData()
|
|
|
+ canvas.toBlob(blob => {
|
|
|
+ form.append('file', blob)
|
|
|
+ // You can use axios, superagent and other libraries instead here
|
|
|
+ fetch(api.uploadPath, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: this.headers,
|
|
|
+ body: form
|
|
|
+ })
|
|
|
+ // Perhaps you should add the setting appropriate file format here
|
|
|
+ }, 'image/jpeg')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.preview {
|
|
|
+ background-color: #eeeeee;
|
|
|
+ height: 240px;
|
|
|
+ width: 360px;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload {
|
|
|
+ background-color: #eeeeee;
|
|
|
+ height: 240px;
|
|
|
+ width: 320px;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
.icon-task {
|
|
|
width: 38px;
|
|
|
height: 45px;
|
|
|
object-fit: fill;
|
|
|
}
|
|
|
|
|
|
+.cropper {
|
|
|
+ width: 280px;
|
|
|
+ height: 280px;
|
|
|
+}
|
|
|
+
|
|
|
.input {
|
|
|
height: 100px;
|
|
|
|
scorpio