aida_front/src/component/Account/accountEdit.vue

<template>
    <div class="accountEdit_page">
		<div class="accountEdit_page_head">
			<div class="upload_item">
				<div class="upload_file_item">
					<a-upload
						:capture="null"
						list-type="picture-card"
						:before-upload="beforeUpload"
						v-model:file-list="fileList"
						:customRequest="function(){}"
						:maxCount="1"
						accept=".jpg,.png,.jpeg,.bmp"
						@change="fileUploadChange"
						>
						<div
							class="upload_tip_block"
						>
							<!-- <i class="fi fi-br-upload"></i> -->
							<img :src="uploadUrl" alt="">
						</div>
					</a-upload>
				</div>
			</div>
		</div>
		<div class="accountEdit_page_body">
			<div class="accountEdit_page_body_item">
				<div class="accountEdit_page_body_item_name">{{$t('account.userName')}}:</div>
				<div class="accountEdit_page_body_item_inut">
					<input type="text" disabled :value="cookieUserInfo.userName">
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="accountEdit_page_body_item_name">{{$t('account.email')}}:</div>
				<div class="accountEdit_page_body_item_inut">
					<input type="text" disabled :value="cookieUserInfo.email">
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="started_btn" @click="setSubmit">
					{{$t('account.Submit')}}
				</div>
			</div>
		</div>
		<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import Cropper from '@/component/HomePage/Cropper.vue'
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		Cropper,
    },
    setup() {
        const store = useStore();
		let userInfo:any= computed(()=>{
			return store.state.UserHabit.userInfo
		})
		let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
		let accountHomeData:any = reactive({
            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
            uploadUrl:userInfo.value?.avatar,
			uploadFile:undefined,
			token:'',
			fileList:[]
		})
		let Cropper = ref()
		// provide('exhibitionList',exhibitionList)
		let handleCropperSuccess = (event:any)=>{
            let {file, fileData,base64} =event
			accountHomeData.fileList[0].status = 'done'
			accountHomeData.uploadUrl = base64
			accountHomeData.uploadFile = file
            Cropper.value.closeCropper()
		}
		let beforeUpload=(file:any,fileList:any)=>{
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.info(useI18n().t('PrintboardUpload.jsContent1'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(useI18n().t('PrintboardUpload.jsContent2'));
            }
            if(isJpgOrPng && isLt2M){
            // }else{
            //     return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
            }
            
        }
		let  fileUploadChange = (data:any)=>{
            let file = data.file
			// file.id = res.data.id?res.data.id:""
			var reader = new FileReader();
			reader.onload = (e:any) => {
				let data_new;
				if (typeof e.target.result === 'object') {
				// 把Array Buffer转化为blob 如果是base64不需要
				data_new = window.URL.createObjectURL(new Blob([e.target.result]));
				} else {
				data_new = e.target.result;
				}
				Cropper.value.getOptionImg(data_new)
				
				
			};
			// 转化为base64
			// reader.readAsDataURL(file)
			// 转化为blob
			reader.readAsArrayBuffer(file.originFileObj);
			Cropper.value.changeShowModal(true)
        }
		let deletUploadFile = () => {
			accountHomeData.fileList = []
            // let index = -1
            // this.fileList.forEach((ele:any,index1:any) => {
            //     if(this.cropperFileData.uid === ele.uid){
            //         index = index1
            //     }
            // });
            // if(index > -1){
            //     this.fileList.splice(index, 1)
            // }
        }
		let setSubmit = ()=>{
			if(!accountHomeData.uploadFile)return
			let param = new FormData(); 
			param.append('file',accountHomeData.uploadFile);
			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
			Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
			.then((rv)=>{
				let data = {
					avatar : rv
				}
				store.commit("setUserInfo", data)
				message.success('提交成功')
			})

		}
        return{
           ...toRefs(accountHomeData),
		   userInfo,
		   cookieUserInfo,
		   Cropper,
		   handleCropperSuccess,
		   beforeUpload,
		   fileUploadChange,
		   deletUploadFile,
		   setSubmit,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.accountEdit_page{
	padding: 8rem 5rem;	
	.accountEdit_page_head{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20rem;
		margin: 0 auto;
		position: relative;
		img{
			width: 15rem;
			object-fit: contain;
			height: 15rem;
			border-radius: 50%;
			background: #fff;
		}
		.accountEdit_page_head_upload{
			width: auto;
		}
		.upload_item{
			:deep(.ant-upload-list-picture-card-container){
				display: none !important;
			}
		}
		
		margin-bottom: 5rem;
	}
	.accountEdit_page_body{
		.accountEdit_page_body_item{
			display: flex;
			margin-bottom: 5rem;
			width: 100%;
			.started_btn{
				text-align: center;
			}
			input,textarea{
				padding-left: 2rem;
				border-radius: 4px;
				border: 1px solid #dcdfe6;
				width: 100%;
			}
			.accountEdit_page_body_item_name{
				color: #606266;
				width: 14rem;
				text-align: right;
			}
			.accountEdit_page_body_item_inut{
				margin-left: 2rem;
				flex: 1;
			}
		}
		.accountEdit_page_body_item:last-child{
			justify-content: center;
		}
	}
}
</style>