epp/frontend/src/views/user.vue

<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="clearfix">
							<span>基础信息</span>
						</div>
					</template>
					<div class="info">
						<div class="info-image" @click="showDialog">
							<el-avatar :size="100" :src="avatarImg" />
							<span class="info-edit">
								<i class="el-icon-lx-camerafill"></i>
							</span>
						</div>
						<div class="info-name">{{ name }}</div>
						<!-- <div class="info-desc">不可能！我的代码怎么可能会有bug！</div> -->
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="clearfix">
							<span>账户编辑</span>
						</div>
					</template>
					<el-form label-width="90px">
						<el-form-item label="用户名："> {{ name }} </el-form-item>
						<el-form-item label="旧密码：">
							<el-input type="password" v-model="form.old"></el-input>
						</el-form-item>
						<el-form-item label="新密码：">
							<el-input type="password" v-model="form.new"></el-input>
						</el-form-item>
						<el-form-item label="确认密码：">
							<el-input type="password" v-model="form.new1"></el-input>
						</el-form-item>
						<!-- <el-form-item label="个人简介：">
							<el-input v-model="form.desc"></el-input>
						</el-form-item> -->
						<el-form-item>
							<el-button type="primary" @click="onSubmit">保存</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
			<vue-cropper ref="cropper" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage"
				style="width: 100%; height: 400px"></vue-cropper>

			<template #footer>
				<span class="dialog-footer">
					<el-button class="crop-demo-btn" type="primary">选择图片
						<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
					</el-button>
					<el-button type="primary" @click="saveAvatar">上传并保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="user">
import { reactive, ref } from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import avatar from '../assets/img/img.jpg';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import send_request from '../utils/send_request';

const name = localStorage.getItem('ms_username');
const user_id = localStorage.getItem('ms_user_id');
const form = reactive({
	user_id: user_id,
	old: '',
	new: '',
	new1: '',
	desc: ''
});
const onSubmit = async () => {
	if (form.old == '' || form.new == '' || form.new1 == '') {
		// 弹窗
		ElMessageBox.confirm('输入为空，请检查', '提示', {
			type: 'warning'
		})
		return
	} else if (form.new != form.new1) {
		// 弹窗
		ElMessageBox.confirm('新密码2次输入的不相同', '提示', {
			type: 'warning'
		})
		return
	} else if (form.new == form.old) {
		// 弹窗
		ElMessageBox.confirm('新、旧密码相同', '提示', {
			type: 'warning'
		})
		return
	}

	ElMessageBox.confirm('确认要修改密码吗？', '提示', {
		type: 'warning'
	})
		.then(async () => {
			console.log("send_request v1/user/alterPSW")

			const loading = ElLoading.service({
				lock: true,
				text: '请稍候',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			await send_request('v1/user/alterPSW', "POST", {
				"userId": form.user_id,
				"oldPSW": form.old,
				"newPSW": form.new
			}, (data: any) => {
				console.log(data);
				ElMessage.success('删除成功');
				// tableData.value.splice(index, 1);
			})
			loading.close();

		})
		.catch(() => {
			ElMessage.success('删除失败');
		});
	return;

};

const avatarImg = ref(avatar);
const imgSrc = ref('');
const cropImg = ref('');
const dialogVisible = ref(false);
const cropper: any = ref();

const showDialog = () => {
	dialogVisible.value = true;
	imgSrc.value = avatarImg.value;
};

const setImage = (e: any) => {
	const file = e.target.files[0];
	if (!file.type.includes('image/')) {
		return;
	}
	const reader = new FileReader();
	reader.onload = (event: any) => {
		dialogVisible.value = true;
		imgSrc.value = event.target.result;
		cropper.value && cropper.value.replace(event.target.result);
	};
	reader.readAsDataURL(file);
};

const cropImage = () => {
	cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
};

const saveAvatar = () => {
	avatarImg.value = cropImg.value;
	dialogVisible.value = false;
};
</script>

<style scoped>
.info {
	text-align: center;
	padding: 35px 0;
}

.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}

.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.info-edit i {
	color: #eee;
	font-size: 25px;
}

.info-image:hover .info-edit {
	opacity: 1;
}

.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #262626;
}

.crop-demo-btn {
	position: relative;
}

.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
</style>