dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterSecuritySetting.vue

<template>
	<div style="width: 100%;background: #fff;min-height: 700px;">
		<div
			style="height: 80px;line-height: 80px;margin-top: 20px;margin: 0 20px; color: #666;font-size: 15px; border-bottom: 1px solid #bcbcbc;">
			{{ $t('common.Your Current Account Number:') }} {{ this.account }}
		</div>
		<div style="height: 60px;padding: 40px 50px;">
            <span style="width: 80px;height: 100%;float: left;"><i class="el-icon-lock"
                                                                   style="font-size: 65px;color: #3688ff;margin-top: 32px;vertical-align:middle;"></i></span>
			<span style="float: left;width: 600px;;padding-top: 36px;">
                <div style="font-size: 18px;color: #666;font-weight: 700;">{{ $t('common.Login Password') }}</div>
                <div
	                style="margin-top: 16px;font-size: 15px;color: #999;">{{
		                $t('common.It is recommended that you change your password')
	                }}</div>
            </span>
			<span style="float: left;width: 200px;;padding-top: 36px;">
                <el-button type="primary" plain style="margin-top: 12px;"
                           @click="dialogVisibles()">{{ $t('common.Modify') }}</el-button>
            </span>
		</div>
		<div style="height: 60px;padding: 40px 50px;">
            <span style="width: 80px;height: 100%;float: left;"><i class="el-icon-mobile-phone"
                                                                   style="font-size: 65px;color: #3688ff;margin-top: 32px;vertical-align:middle;"></i></span>
			<span style="float: left;width: 600px;;padding-top: 36px;">
                <div style="font-size: 18px;color: #666;font-weight: 700;">{{ $t('common.Secure Mobile Phone') }}</div>
                <div
	                style="margin-top: 16px;font-size: 15px;color: #999;">{{
		                $t('common.Secure mobile phone can')
	                }}</div>
            </span>
			<!--  <span style="float: left;width: 200px;;padding-top: 36px;">
				  <el-button type="primary" plain style="margin-top: 12px;" @click="toView('securitySettingChangePhone','')">更换手机号</el-button>
			  </span>-->
			<span style="float: left;width: 200px;;padding-top: 36px;">
                <el-button type="primary" plain style="margin-top: 12px;"
                           @click="toView('securitySettingChangePhone','')">{{ this.mobileButtonStr }}</el-button>
            </span>
		</div>
		<div style="height: 60px;padding: 40px 50px;">
            <span style="width: 80px;height: 100%;float: left;"><i class="el-icon-message"
                                                                   style="font-size: 65px;color: #3688ff;margin-top: 32px;vertical-align:middle;"></i></span>
			<span style="float: left;width: 600px;;padding-top: 36px;">
                <div style="font-size: 18px;color: #666;font-weight: 700;">{{ $t('common.Verify Mailbox') }}</div>
                <div style="margin-top: 16px;font-size: 15px;color: #999;">{{ this.emailButtonStr }}</div>
            </span>
			<span style="float: left;width: 200px;;padding-top: 36px;">
                <el-button type="primary" plain style="margin-top: 12px;"
                           @click="toView2('securitySettingChangeMail','')">{{
		                $t('common.Verify Mailbox')
	                }}</el-button>
            </span>
		</div>
		<div style="height: 60px;padding: 40px 50px;">
			<span style="width: 80px;height: 100%;float: left;">
				<i class="el-icon-message"
				   style="font-size: 65px;color: #3688ff;margin-top: 32px;vertical-align:middle;"></i></span>
			<span style="float: left;width: 600px;;padding-top: 36px;">
                <div style="font-size: 18px;color: #666;font-weight: 700;">{{ $t('common.settingLanguage') }}</div>
                <div style="margin-top: 16px;font-size: 15px;color: #999;">{{ this.mainLanguage }}</div>
            </span>
			<span style="float: left;width: 200px;;padding-top: 36px;">
                <el-button type="primary" plain style="margin-top: 12px;"
                           @click="handleClose">{{ $t('common.switchLanguage') }}</el-button>
            </span>
		</div>
		<!--        修改密码弹框-->
		<el-dialog
			:title="$t('common.Change Password')"
			:visible.sync="dialogVisible"
			width="30%"
			height='40%'
			:before-close="PassworldHandleClose">
			<div style="height: 200px;position: relative;width: 100%;">
				<el-form ref="form" :model="form" :label-width="$i18n.locale=='zh'?'20%':'35%'"
				         style="position: absolute;left: 56%;top: 55%;transform: translate(-55%,-50%);width: 400px;">
					<el-form-item :label="$t('common.Original Password:')">
						<el-input v-model="passWord.passWord1" show-password maxlength="20" show-word-limit></el-input>
					</el-form-item>
					<el-form-item :label="$t('common.New Password:')">
						<el-input v-model="passWord.passWord2" show-password maxlength="20" show-word-limit></el-input>
					</el-form-item>
					<el-form-item :label="$t('common.Confirm Password:')">
						<el-input v-model="passWord.passWord3" show-password maxlength="20" show-word-limit></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
                <el-button @click="PassworldHandleClose">{{ $t('common.Cancel') }}</el-button>
                <el-button type="primary" @click="pwdSetting(form)">{{ $t('common.Determine') }}</el-button>
            </span>
		</el-dialog>
	</div>
</template>
<script>
import {setPwd, getUserInfoById, settingLanguage} from '@/api/user';
import {getToken} from '@/api/token.js';

var jsSHA = require("jssha");
export default {
	name: 'userCenterSecuritySetting',
	data() {
		return {
			informationsClass: '1',
			dialogVisible: this.$route.query.dialogVisible ? true : false,
			ifDiaslog: '',
			account: '',
			salfPhone: '',
			mobileButtonStr: '',
			emailButtonStr: '',
			isMobilePass: true,
			isEmailPass: true,
			title: '',
			mainLanguage: '',
			llanguage: '',
			form: {
				name: '1233@163.com',
				region: '普通用户',
				date1: '2018-05-19',
				date3: '2018-05-19',
				date2: '2020-05-25  11：20：23',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			},
			passWord: {
				passWord1: '',
				passWord2: '',
				passWord3: '',
			},
			Emal: {
				newEmal: '',
				VerificationCode: ''
			},
			mobileStatus: {
				0: true,
				1: false
			},
			emailStatus: {
				0: true,
				1: false
			},
			show: true,
			count: '',
			timer: null,
		}
	},
	watch: {
		"$i18n.locale"() {
			this.initData();
		},
	},
	mounted() {
		this.initData();
	},
	methods: {
		getData() {
			getUserInfoStatus().then((result) => {
				var data = result.data;
				if (data.language) {
					this.mainLanguage = data.language;
				}

			});
		},
		PassworldHandleClose(done) {
			if (this.$route.query.dialogVisible) {
				this.$confirm(this.$t('common.PasswordExpire') + "！", this.$t('common.Tips'), {
					confirmButtonText: this.$t('common.submit'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}).then(() => {
					this.$store
						.dispatch("user/LOGOUT")
						.then(() => {
							// location.href = "/";
							this.$router.go(-1);
						})
						.catch((error) => {
							location.href = "/";
						});
				}).catch(() => {

				});
			} else {
				this.dialogVisible = false;
			}
		},
		// 切换语言
		handleClose(done) {
			const that = this;
			//language需要从数据库中查询
			let language = this.$i18n.locale;
			let sessionLanguage = window.sessionStorage.getItem("locale");
			let Hint;
			if (language == 'zh') {
				if (sessionLanguage == 'zh') {
					Hint = language ? '是否设置为英语?' : 'Set to Chinese?';
				} else {
					Hint = language ? '是否设置为中文?' : 'Set to English?';
				}
			} else {
				if (sessionLanguage == 'zh') {
					Hint = language ? 'Set to English?' : '是否设置为中文?';
				} else {
					Hint = language ? 'Set to Chinese?' : '是否设置为英语?';

				}
			}
			this.$confirm(Hint, {
				confirmButtonText: this.$t('common.OK'),
				cancelButtonText: this.$t('common.cancel'),
			})
				.then(_ => {
					// that.$i18n.locale=that.$i18n.locale=='zh'?'en':'zh';
					let sessionLocale = window.sessionStorage.getItem("locale");
					if (sessionLocale) {
						that.$i18n.locale = sessionLocale == 'zh' ? 'en' : 'zh';
					} else {
						that.$i18n.locale = that.$i18n.locale == 'zh' ? 'en' : 'zh';
					}
					//保存语言设置
					settingLanguage(that.$i18n.locale).then(result => {
						let locale = window.localStorage.getItem("locale");
						if (locale && sessionLocale) {
							window.localStorage.setItem("locale", that.$i18n.locale);
							window.sessionStorage.setItem("locale", that.$i18n.locale);
						} else {
							window.localStorage["locale"] = lang;
							window.sessionStorage["locale"] = lang;
						}
						if (that.$i18n.locale == 'zh') {
							this.mainLanguage = '中文';
						} else {
							this.mainLanguage = 'EN';
						}
						// done();
					}).catch((error) => {
						this.$message({
							message: this.$t('common.errorMessage'),
							type: 'error'
						});
					})
				})
				.catch(_ => {
				});
		},
		initData() {
			getUserInfoById().then(result => {
				if (result) {
					var phone = result.data.userPreferredMobile;
					if (phone) {
						this.salfPhone = phone.substr(0, 3) + '****' + phone.substr(7);
					}
					this.account = result.data.userUid;
					console.log(result.data.userMobileStatus);
					this.isMobilePass = this.mobileStatus[result.data.userMobileStatus];
					this.isEmailPass = this.emailStatus[result.data.userEmailStatus];
					console.log(this.isMobilePass);
					if (this.isMobilePass) {
						this.mobileButtonStr = this.$t('common.Change Mobile Phone Number');
					} else {
						this.mobileButtonStr = this.$t('common.BindPhone');
					}
					if (this.isEmailPass) {
						this.emailButtonStr = this.$t('common.EmailVerifications');
					} else {
						this.emailButtonStr = this.$t('common.EmailVerificationNo');
					}
					let language = result.data.languageSettingDict;
					if (language) {
						this.llanguage = language;
						if (language == 'zh') {
							if (this.$i18n.locale == 'en') {
								this.mainLanguage = 'ZH';
							} else {
								this.mainLanguage = '中文';
							}
						} else {
							this.mainLanguage = 'EN';
						}
					}
				}
			}).catch((error) => {
			})
		},
		getInformation(num) {
			this.informationsClass = num
		},
		toView(router, json) {
			if (this.isMobilePass) {
				//修改手机
				this.$router.push({name: router, params: json})
			} else {
				//绑定手机
				this.$router.push({name: "securitySettingBindPhone", params: json})

			}
		},
		toView2(router, json) {
			this.$router.push({name: router, params: json})
		},
		// handleClose(done) {
		//     this.$confirm('确认关闭？')
		//     .then(_ => {
		//         done();
		//     })
		//     .catch(_ => {});
		// },
		dialogVisibles() {
			this.passWord.passWord1 = '';
			this.passWord.passWord2 = "";
			this.passWord.passWord3 = "";
			this.dialogVisible = true;
		},
		getCode() {
			const TIME_COUNT = 60;
			if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000)
			}
		},
		pwdSetting() {
			if (this.passWord.passWord1 == "" || this.passWord.passWord1 == null) {
				this.$message.warning(this.$t('common.Oldpasswordcannotbeempty'));
				return;
			}
			if (this.passWord.passWord2 == "" || this.passWord.passWord2 == null) {
				this.$message.warning(this.$t('common.Newpasswordcannotbeempty'));
				return;
			}
			if (this.passWord.passWord3 == "" || this.passWord.passWord3 == null) {
				this.$message.warning(this.$t('common.Confirmpasswordcannotbeempty'));
				return;
			}
			//判断两次密码是否一致
			if (this.passWord.passWord2 != this.passWord.passWord3) {
				this.$message.warning(this.$t('common.Thetwopasswordsarenotthesame'));
				return;
			}

			//校验密码格式
			var msg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/.test(
				this.passWord.passWord3) ? "" : this.$i18n.locale == 'en' ? 'Please input 8 to 20 digits password, at least 3 items of upper and lower case letters, numbers and special symbols' : '请输入8到20位密码，大小写字母，数字，特殊符号至少三项';
			if (msg != "") {
				return this.$message({
					message: msg,
					type: 'warning'
				})
			}
			let token = getToken();
			let param = {};
			param.id = JSON.parse(this.$Cookies.get('userInfo')).userId;
			param.password = this.passWord.passWord3;
			param.OriginalPassword = this.passWord.passWord1;
			setPwd(JSON.stringify(param), token).then(result => {
				if (result.status == 200) {
					this.$message({
						message: this.$t("common.Passwordchangedsuccessfully") + "！",
						type: 'success'
					})
					this.dialogVisible = false;
				} else {
					return this.$message({
						message: this.$t("common.ThesystemisbusyPleasetryagainlater") + "！",
						type: 'warning'
					})
				}
			})
		}
	}
}
</script>
<style scoped>
.el-button {
	width: 150px;
	height: 45px;
}
</style>