dev/dcp-web-gate/src_old/views/AddFeatures/ballot/changePws.vue

<template>
	 
	<div class="box">
		<div class="change-top">
			<div class="change-box">
				<el-select v-model="language.value" class="change-change">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</div>
			<div></div>
			<div class="change-text" v-if="language.value == 'ZH'">修改密码</div>
			<div class="change-text" v-if="language.value == 'EN'">
				Change Password
			</div>
			<div class="change-text" v-if="language.value == 'FR'">
				Changer le mot de passe
			</div>
			<div class="change-text" v-if="language.value == 'RU'">
				Изменить пароль
			</div>
			<div class="change-pic">
				<img src="@/assets/ballot/close-l.png" alt="" />
			</div>
		</div>
		<div class="change-user-info" v-if="language.value == 'ZH'">
			<div class="change-item-id">
				<div class="change-title">ID:</div>
				<el-input v-model="changeList.id" placeholder="请输入ID"></el-input>
			</div>
			<div class="change-user-id">
				<div class="change-title">原密码:</div>
				<el-input
					v-model="changeList.oldPassword"
					placeholder="请输入原密码"
					show-password
				></el-input>
			</div>
			<div class="change-user-pws">
				<div class="change-title">新密码:</div>
				<el-input
					placeholder="请输入新密码"
					v-model="changeList.password"
					show-password
				></el-input>
			</div>
			<div class="change-user-yzm">
				<div class="change-title">新密码:</div>
				<el-input
					placeholder="请再次输入新密码"
					v-model="changeList.newPassword"
					show-password
				></el-input>
			</div>
			<div class="user-change">密码规则:</div>
			<div class="user-long">1.&nbsp;&nbsp;密码长度：8-20位</div>
			<div class="user-style">
				2.&nbsp;&nbsp;密码格式：大小写英文字母、数字、符合至少三项混合，并且符合安全规定。
			</div>
			<div class="user-change-pic" @click="sureChange">保 存</div>
		</div>
		<div class="change-user-info" v-if="language.value == 'EN'">
			<div class="change-item-id">
				<div class="change-title-info">ID:</div>
				<el-input
					v-model="changeList.id"
					placeholder="Please enter your login ID"
				></el-input>
			</div>
			<div class="change-user-id">
				<div class="change-title-info">Old password:</div>
				<el-input
					v-model="changeList.oldPassword"
					placeholder="Please enter your old password"
					show-password
				>
				</el-input>
			</div>
			<div class="change-user-pws">
				<div class="change-title-info">New password:</div>
				<el-input
					placeholder="Please enter your new password"
					v-model="changeList.password"
					show-password
				>
				</el-input>
			</div>
			<div class="change-user-yzm">
				<div class="change-title-info">Confirm password:</div>
				<el-input
					placeholder="Please confirm your new password"
					v-model="changeList.newPassword"
					show-password
				>
				</el-input>
			</div>
			<div class="user-change">Password requirements:</div>
			<div class="user-long">
				1.&nbsp;&nbsp;Password length：Between 8 and 20 characters
			</div>
			<div class="user-style">
				2.&nbsp;&nbsp;Password format：uppercase letters, lowercase letters,
				digits, special characters. And your password must meet security
				requirements.
			</div>

			<div class="user-change-pic" @click="sureChange">Save</div>
		</div>
		<div class="change-user-info" v-if="language.value == 'FR'">
			<div class="change-item-id">
				<div class="change-title">ID:</div>
				<el-input
					v-model="changeList.id"
					placeholder="Veuillez saisir votre identifiant de connexion"
				>
				</el-input>
			</div>
			<div class="change-user-id">
				<div class="change-title">Ancien mot de passe:</div>
				<el-input
					v-model="changeList.oldPassword"
					placeholder="Veuillez saisir votre ancien mot de passe"
					show-password
				></el-input>
			</div>
			<div class="change-user-pws">
				<div class="change-title">Nouveau mot de passe:</div>
				<el-input
					placeholder="Veuillez saisir votre nouveau mot de passe"
					v-model="changeList.password"
					show-password
				></el-input>
			</div>
			<div class="change-user-yzm">
				<div class="change-title">Confirmer le mot de passe:</div>
				<el-input
					placeholder="Veuillez confirmer votre nouveau mot de passe"
					v-model="changeList.newPassword"
					show-password
				></el-input>
			</div>
			<div class="user-change">Mot de passe requis :</div>
			<div class="user-long">
				1.&nbsp;&nbsp;Longueur du mot：entre 8 et 20 caractères
			</div>
			<div class="user-style">
				2.&nbsp;&nbsp;Format du mot de passe： lettres majuscules, lettres
				minuscules, chiffres, caractères spéciaux. Et votre mot de passe doit
				répondre aux exigences de sécurité.
			</div>
			<div class="user-change-pic" @click="sureChange">保 存</div>
		</div>
		<div class="change-user-info" v-if="language.value == 'RU'">
			<div class="change-item-id">
				<div class="change-title">ID:</div>
				<el-input
					v-model="changeList.id"
					placeholder="Введите ваш логин"
				></el-input>
			</div>
			<div class="change-user-id">
				<div class="change-title">Старый пароль:</div>
				<el-input
					v-model="changeList.oldPassword"
					placeholder="Введите старый пароль"
					show-password
				></el-input>
			</div>
			<div class="change-user-pws">
				<div class="change-title">Новый пароль:</div>
				<el-input
					placeholder="Введите новый пароль"
					v-model="changeList.password"
					show-password
				></el-input>
			</div>
			<div class="change-user-yzm">
				<div class="change-title">Подтвердить:</div>
				<el-input
					placeholder="Подтвердить ваш новый пароль"
					v-model="changeList.newPassword"
					show-password
				>
				</el-input>
			</div>
			<div class="user-change">Требования к паролям:</div>
			<div class="user-long">
				1.&nbsp;&nbsp;Длина пароля：от 8 до 20 символов
			</div>
			<div class="user-style">
				2.&nbsp;&nbsp;Формат шифрования：заглавные и строчные буквы, цифры и
				специальные символы. Ваш пароль должен соответствовать требованиям к
				безопасности
			</div>
			<div class="user-change-pic" @click="sureChange">Сохранить</div>
		</div>
		<div class="change-btm-pic">
			<img src="@/assets/ballot/未标题-2.png" alt="" />
		</div>
	</div>
</template>

<script>
import { BallotChanges } from '@/api/ballot/ballot'
export default {
	name: 'ballotLogin',
	data() {
		return {
			options: [
				{
					value: 'ZH',
					label: '中文',
				},
				{
					value: 'EN',
					label: 'English',
				},
				{
					value: 'FR',
					label: 'Français',
				},
				{
					value: 'RU',
					label: 'Русский',
				},
			],
			language: {
				value: 'ZH',
			},
			changeList: {
				id: undefined,
				oldPassword: undefined,
				password: undefined,
				newPassword: undefined,
			},
		}
	},
	mounted() {},
	methods: {
		sureChange() {
			if (this.changeList.password != this.changeList.newPassword) {
				if (this.language.value == 'ZH') {
					this.$message.warning('两次密码不一致，请重新输入！')
				}
				if (this.language.value == 'EN') {
					this.$message.warning(
						'The two passwords are not the same, please re-enter!'
					)
				}
				if (this.language.value == 'FR') {
					this.$message.warning(
						'Les deux mots de passe ne correspondent pas, veuillez les saisir à nouveau!'
					)
				} else {
					this.$message.warning(
						'Два неверных пароля, пожалуйста, введите снова!'
					)
				}
			} else {
				let params = {
					id: this.changeList.id,
					oldPassword: this.changeList.oldPassword,
					password: this.changeList.password,
				}
				console.log(params)
				BallotChanges(params).then((res) => {
					console.log(res)
					if (this.language.value == 'ZH') {
						this.$message.success('修改成功,请重新登录')
					}
					if (this.language.value == 'EN') {
						this.$message.success(
							'If the modification is successful, log in again'
						)
					}
					if (this.language.value == 'FR') {
						this.$message.success(
							'Modification réussie, veuillez vous reconnecter'
						)
					} else {
						this.$message.success('Удачная модификация')
					}
				})
			}
		},
	},
}
</script>

<style scoped>
.box {
	margin: 20px auto;
	width: 650px;
	height: 570px;
	background: linear-gradient(0deg, #00b4ff 0%, #094fc0 100%);
	box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.change-top {
	width: 650px;
	height: 81px;
	background: #f5f5f5;
	border-radius: 4px 4px 0px 0px;
	position: relative;
}

.change-change {
	width: 120px;
	height: 41px;
	line-height: 41px;
	font-size: 14px;
	transform: translateX(30px) translateY(20px);
}

.change-text {
	width: 260px;
	height: 20px;
	text-align: center;
	font-size: 20px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #262626;
	line-height: 20px;
	position: absolute;
	top: 32px;
	left: 191px;
}

.change-pic {
	width: 25px;
	height: 24px;
	text-align: center;
	overflow: hidden;
	border-radius: 20px;
	cursor: pointer;
	position: absolute;
	top: 32px;
	right: 21px;
}

.change-pic > img {
	width: 100%;
	height: 100%;
}

.change-user-info {
	width: 650px;
	height: 508px;
	padding: 0 40px;
}

.change-item-id {
	width: 570px;
	height: 51px;
	margin-top: 10px;
	position: relative;
}

.change-user-id {
	width: 570px;
	height: 51px;
	margin-top: 10px;
	position: relative;
}

.change-user-id {
	width: 570px;
	height: 51px;
	margin-top: 10px;
	position: relative;
}

.change-user-pws {
	width: 570px;
	height: 51px;
	margin-top: 10px;
	position: relative;
}

.change-user-yzm {
	width: 570px;
	height: 51px;
	margin-top: 10px;
	position: relative;
}

.change-title {
	height: 39px;
	line-height: 39px;
	z-index: 999;
	width: 170px;
	font-size: 13px;
	text-align: left;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 8px;
}

.change-title-info {
	height: 39px;
	line-height: 39px;
	z-index: 999;
	width: 130px;
	text-align: left;
	border-radius: 10px;
	font-size: 14px;
	position: absolute;
	top: 0;
	left: 8px;
}

.user-change-pic {
	width: 570px;
	height: 59px;
	text-align: center;
	line-height: 59px;
	cursor: pointer;
	font-size: 24px;
	color: #fff;
	margin-top: 50px;
	background: linear-gradient(177deg, #84e2ff 0%, #30ade8 100%);
	box-shadow: 0px 2px 4px 0px #097fb0,
		inset 0px 3px 3px 0px rgba(194, 235, 255, 0.63);
	border-radius: 8px;
}

.user-change {
	width: 570px;
	height: 16px;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 16px;
	margin-left: 10px;
}

.user-style {
	width: 570px;
	height: 24px;
	font-size: 16px;
	margin-top: 10px;
	margin-left: 10px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 24px;
}

.user-long {
	width: 570px;
	height: 20px;
	font-size: 16px;
	margin-top: 10px;
	margin-left: 10px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 20px;
}

.change-btm-pic {
	width: 570px;
	position: absolute;
	top: 535px;
}

.change-btm-pic > img {
	width: 100%;
}

/deep/.change-user-info .el-input__inner {
	padding-left: 180px;
	background-color: #f5f5f5;
	color: #000;
}
</style>