dev/dcp-web-gate/src_old/components/ballotTopBannerEN.vue

<template>
	 
	<div>
		<div class="box-bon">
			<div class="top-btm-box" v-if="changePassword"></div>
		</div>
		<div class="tal-top">
			<span class="tal-first">Welcome to the General Meeting!</span>
			<span class="tal-second" @click="goOut">
				<img src="@/assets/ballot/退出.png" alt="" />
				Log out</span
			>
			<span class="tal-third">|</span>
			<span class="tal-fourc" @click="openChange">
				<img src="@/assets/ballot/修改密码.png" alt="" />
				Change Password</span
			>
		</div>
		 
		<div class="box-big" v-if="changePassword">
			<div class="change-top">
				<!-- <div class="change-box">
                    <el-select v-model="language.value" class="change-change">
                        <el-option v-for="item in optionsInfoList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
				<div></div>
				<div class="change-text">Change Password</div>
				<div class="change-pic" @click="closeList">
					<img src="@/assets/ballot/close-l.png" alt="" />
				</div>
			</div>
			<div class="change-user-info">
				<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
						@blur="getInp"
					>
					</el-input>
				</div>
				<div class="change-user-yzm">
					<div class="change-title-info">Confirm your new 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;Between 8 and 20 characters</div>
				<div class="user-style">
					2.&nbsp;&nbsp;Must contain at least three categories among the
					following: uppercase letters, lowercase letters, digits, special
					characters. And your password must meet security requirements.
				</div>

				<div class="user-change-pic" @click="sureChange" v-if="getDisabled">
					Save
				</div>
				<div class="user-change-pic" @click="sureToChange" v-else>Save</div>
			</div>
			<div class="change-btm-pic">
				<img src="@/assets/ballot/未标题-2.png" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
import { BallotChanges } from '@/api/ballot/ballot'
export default {
	name: 'ballotLogin',
	data() {
		return {
			getDisabled: false,
			changePassword: false,
			optionsInfoList: [
				{
					value: 'CN',
					label: '中文',
				},
				{
					value: 'EN',
					label: 'English',
				},
				{
					value: 'FR',
					label: 'Français',
				},
				{
					value: 'RU',
					label: 'Русский',
				},
			],
			language: {
				value: 'EN',
			},
			changeList: {
				id: undefined,
				oldPassword: undefined,
				password: undefined,
				newPassword: undefined,
			},
		}
	},
	mounted() {
		let language = sessionStorage.getItem('language')
		this.language.value = language
	},
	methods: {
		getInp() {
			let value = this.changeList.password
			console.log(value)
			if (value == '' || value == undefined || value == null) {
				this.$message.error(
					'Please enter a password between 8 and 20 characters, and it must containat least three categories among the following: uppercase letters, lowercase letters , digits, special characters.'
				)
			} else {
				const reg =
					/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*_+\?<>:"\{\}\|\\';/\.,`=-])[^\u4E00-\u9FA5][A-Za-z\d~!@#$%^&*_+\?<>:"\{\}\|\\';/\.,`=-]{7,19}$/
				console.log(reg.test(value))
				if (!reg.test(value)) {
					this.$message.error(
						'Please enter a password between 8 and 20 characters, and it must containat least three categories among the following: uppercase letters, lowercase letters, digits, special characters.'
					)
				} else {
					this.$message.success('Password format correct!')
					this.getDisabled = true
				}
			}
		},
		goOut() {
			sessionStorage.removeItem('language')
			sessionStorage.removeItem('mettingUser')
			sessionStorage.removeItem('item')
			sessionStorage.removeItem('lastList')
			localStorage.removeItem('language')
			localStorage.removeItem('mettingUser')
			localStorage.removeItem('item')
			localStorage.removeItem('lastList')
			this.$message.success('Exiting, please hold on...')
			setTimeout(() => {
				this.$router.push({ path: 'home' })
			}, 1500)
		},
		openChange() {
			this.changePassword = true
		},
		closeList() {
			this.changeList.oldPassword = ''
			this.changeList.password = ''
			this.changeList.newPassword = ''
			this.changePassword = false
		},
		sureToChange() {
			this.$message.error(
				'Please enter a password between 8 and 20 characters, and it must containat least three categories among the following: uppercase letters, lowercase letters, digits, special characters.'
			)
		},
		sureChange() {
			if (this.changeList.password != this.changeList.newPassword) {
				this.$message.error(
					'The two passwords are not the same, please re-enter!'
				)
			} else {
				let id = JSON.parse(sessionStorage.getItem('mettingUser')).userId
				let params = {
					id: id,
					oldPassword: this.changeList.oldPassword,
					password: this.changeList.password,
				}
				console.log(params)
				BallotChanges(params)
					.then((res) => {
						console.log(res)
						this.$message.success(
							'If the modification is successful, log in again'
						)
						let params = JSON.stringify(params)
						sessionStorage.setItem('userPassword', [params])
						setTimeout(() => {
							this.goOut()
						}, 1500)
					})
					.catch((error) => {
						this.$message.error(
							'The old password is incorrect. Please enter it again'
						)
					})
			}
		},
	},
}
</script>

<style scoped>
@media screen and (min-width: 1080px) {
	.tal-top {
		width: 100%;
		height: 40px;
		background-color: #155199;
	}

	.box-bon {
		position: relative;
	}
	.top-btm-box {
		width: 100%;
		height: 1298px;
		background-color: #000;
		opacity: 0.5;
		z-index: 998;
		position: absolute;
		top: -100%;
	}

	.tal-first {
		display: inline-block;
		/* width: 140px; */
		height: 40px;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		margin-left: 48.5%;
		margin-right: 3%;
	}

	.tal-second {
		display: inline-block;
		height: 40px;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		cursor: pointer;
		font-weight: 600;
	}

	.tal-second > img {
		width: 16px;
		height: 16px;
		transform: translateY(3px);
	}

	.tal-third {
		display: inline-block;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		margin-left: 1%;
		margin-right: 1%;
	}

	.tal-fourc {
		display: inline-block;
		height: 40px;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		cursor: pointer;
		font-weight: 600;
	}

	.tal-fourc > img {
		width: 20px;
		height: 20px;
		transform: translateY(5px);
	}

	.box-big {
		margin: 50px 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;
		z-index: 999;
		position: absolute;
		top: 50px;
		left: 50%;
		transform: translateX(-50%);
	}

	.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: 30px;
		position: relative;
	}

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

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

	.change-title {
		height: 39px;
		line-height: 39px;
		z-index: 997;
		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: 997;
		width: 200px;
		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: 100%;
		position: absolute;
		top: 535px;
	}

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

	/deep/.change-user-info .el-input__inner {
		padding-left: 210px;
		background-color: #f5f5f5;
	}
}
@media screen and (max-width: 1079px) {
	.tal-top {
		width: 100%;
		height: 40px;
		background-color: #155199;
	}

	.box-bon {
		position: relative;
	}
	.top-btm-box {
		width: 100%;
		height: 1298px;
		background-color: #000;
		opacity: 0.5;
		z-index: 998;
		position: absolute;
		top: -100%;
	}

	.tal-first {
		display: inline-block;
		/* width: 140px; */
		height: 40px;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		margin-left: 48.5%;
		margin-right: 3%;
	}

	.tal-second {
		display: inline-block;
		height: 40px;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		cursor: pointer;
		font-weight: 600;
	}

	.tal-second > img {
		width: 16px;
		height: 16px;
		transform: translateY(3px);
	}

	.tal-third {
		display: inline-block;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		margin-left: 1%;
		margin-right: 1%;
	}

	.tal-fourc {
		display: inline-block;
		height: 40px;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		cursor: pointer;
		font-weight: 600;
	}

	.tal-fourc > img {
		width: 20px;
		height: 20px;
		transform: translateY(5px);
	}

	.box-big {
		margin: 50px 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;
		z-index: 999;
		position: absolute;
		top: 50px;
		left: 200px;
	}

	.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: 30px;
		position: relative;
	}

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

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

	.change-title {
		height: 39px;
		line-height: 39px;
		z-index: 997;
		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: 997;
		width: 200px;
		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: 100%;
		position: absolute;
		top: 535px;
	}

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

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