dev/dcp-web-gate/src_old/views/Login.vue

<template>
	<div class="wrap" style="background: #fff">
		<div
				class="header"
				style="
        position: relative;
        overflow: hidden;
        max-width: 1200px;
        margin: 0 auto;
        height: 75px;
        cursor: pointer;
      "
		>
			<img
					@click="toView('home')"
					src="@/assets/img/login/logosvg.svg"
					style="display: block; height: 65px; margin: 5px"
			/>
			<div @click="toView('home')" class="text">
				{{ $i18n.locale == "en" ? "Welcome " : "欢迎您" }}
			</div>
		</div>
		<div class="loginImg">
			<div class="login">
				<div class="option-btns">
					<el-button type="text" @click="locale('zh')">{{
							$t("common.CN")
						}}
					</el-button>
					<span> / </span>
					<el-button type="text" @click="locale('en')">EN</el-button>
					<el-button type="primary" @click="toView('home')">{{
							$t("common.BackToHome")
						}}
					</el-button>
				</div>
				<div class="loginChange">
          <span
		          :class="index == 1 ? 'span1' : 'span2'"
		          class="cursor"
		          @click="loginChanges(1)"
          >{{ $t("common.PasswordLogin") }}</span
          >
					<span
							:class="index == 2 ? 'span1' : 'span2'"
							class="cursor"
							@click="loginChanges(2)"
					>{{ $t("common.FreeKeyLogin") }}</span
					>
				</div>
				<!--手机-账户登陆-->
				<el-form
						ref="form"
						:model="form"
						label-width="0px"
						style="margin: 20px auto; width: 310px"
						v-if="index == 1 && !isUserPassLogin"
						class="login2"
				>
					<el-form-item
							v-if="index == 1 && !isUserPassLogin"
							style="margin-bottom: 10px"
					>
						<GlobalRoaming
								ref="GlobalRoaming"
								:size="{ width: '300px' }"
								v-model="form.phoneUser"
								:language="language"
								@getAreaCode="getPassAreaCode"
						></GlobalRoaming>
					</el-form-item>
					<el-form-item style="margin-bottom: 10px">
						<el-input
								:placeholder="$t('common.EnterPassword')"
								id="phonePassWord"
								@keyup.enter="passwordInputfocus(2)"
								show-password
								style="font-size: 12px"
								v-model="form.phonePassWord"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
            <span
		            type="text"
		            class="cursor"
		            @click="isUserPassLogin = !isUserPassLogin"
		            style="font-size: 12px; color: rgba(80, 141, 231, 1)"
            >
              {{ $t("common.EmailOrUserLogin") }}</span
            >
					</el-form-item>
					<!-- 图片验证 -->
					<el-form-item style="margin-bottom: 0">
						<Captcha
								ref="captcha"
								@getResult="getResult"
								@getValidate="getValidate"
								@getCaptchaToken="getCaptchaToken"
						></Captcha>
					</el-form-item>
					<el-form-item style="margin: 0">
            <span
		            type="text"
		            style="font-size: 12px; color: #333; margin: 0"
		            class="cursor"
            >{{ $t("common.LoginMeans") }}
              <span
		              style="color: #508de7; margin: 0"
		              class="cursor"
		              @click="getAboutMenu('用户协议')"
              >《{{
		              $i18n.locale == "en"
				              ? "Platform User Agreement"
				              : "平台用户协议"
	              }}》</span
              >
              {{ $t("common.and") }}
              <span
		              style="color: #508de7; margin: 0"
		              class="cursor"
		              @click="getAboutMenu('隐私政策')"
              >《{{
		              $i18n.locale == "en" ? "Privacy Policy" : "隐私政策"
	              }}》</span
              >
            </span>
					</el-form-item>
					<el-form-item style="margin-bottom: 0px">
						<el-button
								type="primary"
								@click="login"
								style="width: 100%; font-size: 14px; padding-top: 0"
						>{{ $t("common.login") }}
						</el-button
						>
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
            <span
		            style="font-size: 12px; color: rgba(80, 141, 231, 1)"
		            class="cursor"
		            @click="toView('Register', '')"
            >{{ $t("common.NewUserRegistration") }}</span
            >
						<span
								style="
                font-size: 12px;
                color: rgba(80, 141, 231, 1);
                float: right;
              "
								class="cursor"
								@click="toView('PasswordReset', '')"
						>{{ $t("common.ForgetPassword") }}</span
						>
					</el-form-item>
				</el-form>
				<el-form
						ref="form"
						v-show="loginType == 1"
						:model="form"
						label-width="0"
						style="margin: 20px auto; width: 310px"
						v-if="index == 1 && isUserPassLogin"
						class="login1"
				>
					<!--邮箱-账户名登陆-->
					<el-form-item style="margin-bottom: 10px">
						<el-input
								type="loginId"
								id="userInput"
								@keyup.enter="passwordInputfocus(1)"
								v-model="form.account"
								:placeholder="$t('common.EnterMorE')"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-bottom: 0px">
						<el-input
								:placeholder="$t('common.EnterPassword')"
								id="passWordInput"
								@keyup.enter="passwordInputfocus(2)"
								v-model="form.password"
								show-password
						></el-input>
					</el-form-item>
					<el-form-item style="margin-bottom: 10px">
            <span
		            type="text"
		            style="font-size: 12px; color: rgba(80, 141, 231, 1)"
		            class="cursor"
		            @click="isUserPassLogin = !isUserPassLogin"
            >
              {{ $t("common.PhoneNumberLogin") }}</span
            >
					</el-form-item>
					<el-form-item style="margin-bottom: 10px">
						<Captcha
								ref="captcha"
								@getResult="getResult"
								@getValidate="getValidate"
								@getCaptchaToken="getCaptchaToken"
						></Captcha>
					</el-form-item>
					<el-form-item style="margin-bottom: 10px">
						<div
								type="text"
								style="font-size: 12px; color: #333"
								class="cursor"
						>
							{{ $t("common.LoginMeans") }}
							<span
									style="color: #508de7; margin: 0"
									class="cursor"
									@click="getAboutMenu('用户协议')"
							>《{{
									$i18n.locale == "en"
											? "Platform User Agreement"
											: "平台用户协议"
								}}》</span
							>
							{{ $t("common.and") }}
							<span
									style="color: #508de7; margin: 0"
									class="cursor"
									@click="getAboutMenu('隐私政策')"
							>《{{
									$i18n.locale == "en" ? "Privacy Policy" : "隐私政策"
								}}》</span
							>
						</div>
					</el-form-item>
					<el-form-item style="margin-bottom: 10px">
						<el-button
								type="primary"
								@click="login"
								style="width: 100%; font-size: 14px; padding-top: 0"
						>{{ $t("common.login") }}
						</el-button
						>
					</el-form-item>
					<el-form-item style="margin-bottom: 10px">
            <span
		            style="font-size: 12px; color: rgba(80, 141, 231, 1)"
		            class="cursor"
		            @click="toView('Register', '')"
            >{{ $t("common.NewUserRegistration") }}</span
            >
						<span
								style="
                font-size: 12px;
                color: rgba(80, 141, 231, 1);
                float: right;
              "
								class="cursor"
								@click="toView('PasswordReset', '')"
						>{{ $t("common.ForgetPassword") }}</span
						>
					</el-form-item>
				</el-form>
				<!-- 手机-验证码登录 -->
				<el-form
						ref="form2"
						:model="form2"
						label-width="0px"
						style="margin: 20px auto; width: 310px"
						v-if="index == 2 && isTelLogin"
						class="login2"
				>
					<el-form-item>
						<GlobalRoaming
								ref="GlobalRoaming"
								:size="{ width: '300px' }"
								v-model="form2.mobile"
								:language="language"
								@getAreaCode="getPassAreaCode"
						></GlobalRoaming>
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
						<el-input
								:placeholder="$t('common.EnterVerification')"
								v-model="form2.checkCode"
								style="width: 160px"
						></el-input>
						<el-button
								v-show="show"
								@click="sendCode(form2)"
								type="primary"
								class="getCode cursor"
								plain
								style="margin-left: 12px; font-size: 14px; border-radius: 4px"
						>{{ $t("common.GetVerification") }}
						</el-button
						>
						<span
								v-show="!show"
								class="count"
								style="margin-left: 10px; color: #999"
						>{{ count }}{{ $t("common.resend") }}</span
						>
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
            <span
		            type="text"
		            style="font-size: 12px; color: rgba(80, 141, 231, 1)"
		            class="cursor"
		            @click="isTelLogin = !isTelLogin"
            >{{ $t("common.EmailLogin") }}</span
            >
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
            <span
		            type="text"
		            style="font-size: 12px; color: #333; line-height: 25px"
		            class="cursor"
            >
              {{ $t("common.LoginMeans") }}
              <span
		              style="color: #508de7; margin: 0"
		              class="cursor"
		              @click="getAboutMenu('用户协议')"
              >《{{
		              $i18n.locale == "en"
				              ? "Platform User Agreement"
				              : "平台用户协议"
	              }}》</span
              >
              {{ $t("common.and") }}
              <span
		              style="color: #508de7; margin: 0"
		              class="cursor"
		              @click="getAboutMenu('隐私政策')"
              >《{{
		              $i18n.locale == "en" ? "Privacy Policy" : "隐私政策"
	              }}》</span
              >
            </span>
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
						<el-button
								type="primary"
								@click="onSubmit"
								style="width: 100%; font-size: 14px; padding-top: 0"
						>{{ $t("common.login") }}
						</el-button
						>
					</el-form-item>
					<el-form-item style="margin-bottom: 0px">
            <span
		            style="font-size: 14px; color: rgba(80, 141, 231, 1)"
		            class="cursor"
		            @click="toView('Register', '')"
            >{{ $t("common.NewUserRegistration") }}</span
            >
					</el-form-item>
				</el-form>
				<!-- 邮箱-验证码登录 -->
				<el-form
						ref="form2"
						:model="form2"
						label-width="0px"
						style="margin: 20px auto; width: 310px"
						v-if="index == 2 && !isTelLogin"
						class="login2"
				>
					<el-form-item class="email-login" style="margin-bottom: 10px">
						<el-input
								:placeholder="$t('common.EnterEmail')"
								v-model="form2.email"
								class="input-with-select login2_item"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-bottom: 10px">
						<el-input
								:placeholder="$t('common.EnterVerification')"
								v-model="form2.checkCode"
								style="width: 150px"
						></el-input>
						<el-button
								v-if="show"
								@click="sendCode(form2)"
								type="primary"
								plain
								style="margin-left: 12px; font-size: 14px; border-radius: 4px"
								class="getCode cursor"
						>
							{{ $t("common.GetVerification") }}
						</el-button>
						<span
								v-if="!show"
								class="count"
								style="margin-left: 20px; color: #999"
						>{{ count }}{{ $t("common.resend") }}</span
						>
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
            <span
		            type="text"
		            style="font-size: 12px; color: rgba(80, 141, 231, 1)"
		            class="cursor"
		            @click="isTelLogin = !isTelLogin"
            >{{ $t("common.PhoneNumberLogin") }}</span
            >
					</el-form-item>
					<el-form-item style="margin-bottom: 0px">
            <span style="font-size: 12px; color: #333" class="cursor"
            >{{ $t("common.LoginMeans") }}
              <span
		              style="color: #508de7; margin: 0"
		              class="cursor"
		              @click="getAboutMenu('用户协议')"
              >《{{
		              $i18n.locale == "en"
				              ? "Platform User Agreement"
				              : "平台用户协议"
	              }}》</span
              >
              {{ $t("common.and") }}
              <span
		              style="color: #508de7; margin: 0"
		              class="cursor"
		              @click="getAboutMenu('隐私政策')"
              >《{{
		              $i18n.locale == "en" ? "Privacy Policy" : "隐私政策"
	              }}》</span
              ></span
            >
					</el-form-item>
					<el-form-item style="margin-bottom: 0">
						<el-button
								type="primary"
								@click="onSubmit"
								style="width: 100%; font-size: 14px; padding-top: 0"
						>{{ $t("common.login") }}
						</el-button
						>
					</el-form-item>
					<el-form-item style="margin-bottom: 0px">
            <span
		            style="font-size: 12px; color: rgba(80, 141, 231, 1)"
		            class="cursor"
		            @click="toView('Register', '')"
            >{{ $t("common.NewUserRegistration") }}</span
            >
					</el-form-item>
				</el-form>
				<!-- 用户协议 -->
				<div>
					<el-dialog
							width="60%"
							:title="
              $i18n.locale == 'en'
                ? '《User Agreement of Global Energy Interconnection Development and Cooperation Platform》'
                : '《全球能源互联网发展合作平台用户协议》'
            "
							:visible.sync="innerVisible1"
							append-to-body
					>
						<!-- <PlatformRegistered ></PlatformRegistered> -->
						<iframe
								v-if="$i18n.locale == 'zh'"
								width="100%"
								id="embed"
								name="main"
								ref="embed1"
								height="600px"
								:src="srcPdf3"
								frameborder="0"
						></iframe>
						<iframe
								v-if="$i18n.locale == 'en'"
								width="100%"
								id="embed"
								name="main"
								ref="embed1"
								height="600px"
								:src="srcPdf4"
								frameborder="0"
						></iframe>
					</el-dialog>
					<el-dialog
							width="60%"
							:title="
              $i18n.locale == 'en'
                ? '《Privacy Policy of Global Energy Interconnection Development and Cooperation Platform》'
                : '《全球能源互联网发展合作平台隐私政策》'
            "
							:visible.sync="innerVisible2"
							append-to-body
					>
						<!-- <LegalNotices></LegalNotices> -->
						<iframe
								v-if="$i18n.locale == 'zh'"
								width="100%"
								id="embed"
								name="main"
								ref="embed2"
								height="600px"
								:src="srcPdf"
								frameborder="0"
						></iframe>
						<iframe
								v-if="$i18n.locale == 'en'"
								width="100%"
								id="embed"
								name="main"
								ref="embed2"
								height="600px"
								:src="srcPdf2"
								frameborder="0"
						></iframe>
						<!-- <div>asdasdasdasd</div> -->
					</el-dialog>
				</div>
			</div>
		</div>
		<div class="footer">
			<footers></footers>
			<!-- <div class="qcode">
			<div class="text">{{$i18n.locale=='en'?"Hosts":"主办单位"}}</div>
			<img src="@/assets/logo.gif" style="display:block;height:30px"/>
			<div class="titleinfo">
				<div class="eng">Global Energy Interconnection</div>
				<div class="eng">Development and Cooperation Organization</div>
				<div class="chi">全球能源互联网发展合作组织</div>
			</div>
		</div>
		<div class="title">
			<span>{{$i18n.locale=='en'?'User Agreement':'用户协议'}}</span>
			<span> | </span>
			<span>{{$i18n.locale=='en'?'Privacy Policy':'隐私政策'}}</span>
			<span> | </span>
			<span @click="goPage">{{$i18n.locale=='en'?'Help':'帮助中心'}}</span>
		</div>
		<div class="footerline"></div>
		<div class="crop">{{$i18n.locale=='en'?"2020 GEIDCO All rights reserved. Beijing ICP license No.19029734-3. E-mail: service@geidco.org":
																					 "2020 GEIDCO All rights reserved. 京ICP备19029734号-3. E-mail: service@geidco.org"}}</div> -->
		</div>
	</div>
</template>

<script>
import footers from "@/components/footersNewBlack";
import Cookies from "js-cookie"; //引入cookie操作依赖
import Base from "@/views/base/Base";
import UpdatePwd from "@/views/UpdatePwd";
import {getHelpColumnTree} from "@/api/operation/help/helpCenterEntity";

var jsSHA = require("jssha");
import Forget from "@/views/Forget";
import {sendTelCode} from "@/api/user";
import {registerByTel} from "@/api/user";
import {getToken} from "@/api/token.js";
import headers from "@/components/loginHeader";
import {getMobileSmsCode, getCaptcha} from "@/api/user";
// import JcRange from "@/components/JcRange";
// import JcRangeImg from "@/components/JcRangeImg";
import JcRangeImg2 from "@/components/JcRangeImg2";
import GlobalRoaming from "@/components/GlobalRoaming";
import Captcha from "@/components/Captcha";
import {
	getUserInfoByTel,
	sendPhoneCode,
	mobileOrEmailCodeLogin,
	judgeLogin,
} from "@/api/login";

var bgSuffix = window.bgSuffix;

// import { addGrowth } from "@/utils/toCompleteTask";
export default {
	name: "Login",
	components: {headers, footers, JcRangeImg2, GlobalRoaming, Captcha},
	extends: Base,
	data() {
		return {
			crop: "2020 GEIDCO All rights reserved. 京ICP备19029734号-3. E-mail: service@geidco.org",
			links: "友情链接",
			titleInfo: "全球能源互联网发展合作组织",
			welcome: "欢迎您！",
			language: "",
			result: true,
			validate: "",
			captchaToken: "",
			loginType: 1,
			success: false,
			codeFromTel: "",
			index: "1",
			isTelLogin: true,
			isUserPassLogin: false,
			isSendCode: false,
			ifSelect: false,
			show: true,
			count: "",
			timer: null,
			select: "0086",
			service: "",
			phoneNum: "",
			phoneUserNum: "",
			backUserData: "",
			userName: "",
			srcPdf: null,
			srcPdf2: null,
			srcPdf3: null,
			srcPdf4: null,
			innerVisible1: false,
			innerVisible2: false,
			form: {
				account: "",
				region: "",
				password: "",
				phoneUser: "",
				phonePassWord: "",
				date2: "",
				delivery: false,
				type: [],
				resource: "",
				desc: "",
			},
			form2: {
				mobile: "",
				email: "",
				checkCode: "",
			},
			aboutMenu: [],
			fromPath: "",
		};
	},
	watch: {
		select(val) {
			/* var selects =this.$refs.GlobalRoaming.select;
			if(selects == ""){
				this.$message.warning("请选择国家区号！");
				return;
			}
			this.select = selects.split(' ').length==2 ? selects.split(' ')[1] : selects;*/
		},
		"form.phoneUser"(val) {
			this.form2.mobile = val;
		},
		"form2.mobile"(val) {
			this.form.phoneUser = val;
		},
		"form2.phoneNumber"(val) {
			if (
					this.form2.phoneNumber.length >= 3 &&
					!isNaN(this.form2.phoneNumber)
			) {
				if (this.form2.phoneNumber.indexOf("@") != -1) {
					this.ifSelect = false;
				} else {
					this.ifSelect = true;
				}
			} else {
				this.ifSelect = false;
			}
		},
		success() {
			this.getJcRange();
		},
		"$i18n.locale"() {
			if (this.$i18n.locale == "en" && this.$Cookies.get("token")) {
				this.i = 3;
			} else if (
					this.$i18n.locale == "zh" &&
					window.sessionStorage.getItem("token")
			) {
				this.i = 2;
			} else {
				this.i = 1;
			}
		},
	},
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			// 通过 `vm` 访问组件实例,将值传入fromPath
			vm.fromPath = from.path;
		});
	},
	mounted() {
		let locale = window.localStorage.getItem("locale");
		if (!locale) {
			window.localStorage.setItem("locale", "en");
		}
		this.getAboutId();
		document.title = this.$t("common.GEIDcpTitleSeptember");
		let locales = window.localStorage.getItem("locale");
		this.$i18n.locale = locales;
		this.language = locales;
		this.srcPdf = "/api/file/pub/def/PrivacyPolicy_CN.pdf";
		this.srcPdf2 = "/api/file/pub/def/PrivacyPolicy_EN.pdf";
		this.srcPdf3 = "/api/file/pub/def/UserAgreement_CN.pdf";
		this.srcPdf4 = "/api/file/pub/def/UserAgreement_EN.pdf";
		console.log(
				window.localStorage.getItem("locale"),
				window.localStorage.getItem("userLogin")
		);
		//if (window.localStorage.getItem('userLogin')) {
		if (this.$Cookies.get("token") && this.$i18n.locale == "zh") {
			return (this.i = 2);
		} else if (this.$i18n.locale == "en" && this.$Cookies.get("token")) {
			return (this.i = 3);
		} else {
			return (this.i = 1);
		}
	},
	methods: {
		locale(lang) {
			this.$i18n.locale = lang;
			let locale = window.localStorage.getItem("locale");
			if (locale) {
				window.localStorage.setItem("locale", lang);
			} else {
				window.localStorage["locale"] = lang;
			}
			this.language = window.localStorage.getItem("locale");
			// this.$bus.emit('setLang', window.localStorage.getItem("locale"))
			console.log(window.localStorage.getItem("locale"));
		},
		getPassAreaCode(code) {
			this.select = code;
			console.log("select=" + this.select);
		},
		getResult(r) {
			this.result = r;
		},
		getValidate(v) {
			this.validate = v;
		},
		getCaptchaToken(t) {
			this.captchaToken = t;
		},
		JcRangeImg2Success(val) {
			this.success = val;
		},
		goPage() {
			this.$router.push({
				path: "/helpCenter",
			});
		},
		toView(router, json) {
			this.$router.push({name: router, params: json});
			if (router == "userCenterView") {
				let i = {
					label: "用户中心",
					value: "userCenterView",
				};
				if (this.$Cookies.get("token")) {
					return (this.i = 2);
				} else if (this.$i18n.locale == "en") {
					return (this.i = 3);
				} else {
					return (this.i = 1);
				}
				this.$nextTick(() => {
					Bus.$emit("title", i);
				});

				//  this.BusChange(i)
			}
		},
		mobileLogin() {
			if (!this.form.mobile) {
				this.$message.warning(this.$t("common.Mobilephonenumbercannotbeempty")); // 手机号不能为空
				return;
			}
			if (!this.form.code) {
				this.$message.warning(this.$t("common.Verificationcodecannotbeempty")); //验证码不能为空
				return;
			}
			this.$store
					.dispatch("user/MOBILE_LOGIN", {mobile: this.mobile, code: this.code})
					.then(() => {
						this.$router.push({
							name: "Home",
							params: {},
						});
					});
		},

		async accountPasswordLogin() {
			var password = "";
			var isPhonePass = "";
			if (this.isUserPassLogin) {
				if (!this.form.account) {
					this.$message.warning(this.$t("common.Accountnumbercannotbeempty")); // 帐号不能为空
					return;
				}
				if (!this.form.password) {
					this.$message.warning(this.$t("common.Passwordcannotbeempty")); //密码不能为空
					return;
				}
				password = this.form.password;
				isPhonePass = this.form.password;
				this.phoneUserNum = this.form.account;
			} else {
				if (!this.form.phoneUser) {
					this.$message.warning(
							this.$t("common.Mobilephonenumbercannotbeempty")
					); //手机号不能为空
					return;
				}
				if (!this.form.phonePassWord) {
					this.$message.warning(this.$t("common.Passwordcannotbeempty")); //密码不能为空
					return;
				}
				password = this.form.phonePassWord;
				isPhonePass = this.form.phonePassWord;
				this.phoneUserNum = this.select.concat(this.form.phoneUser);
			}
			try {
				if (this.result) {
					let that = this;
					this.submitHandler((token) => {
						var salt = token;
						console.log(password);

						var shaObj = new jsSHA("SHA-1", "TEXT");
						shaObj.update(password);
						password = shaObj.getHash("B64");
						password = "{SHA}" + password + salt;
						var shaObj2 = new jsSHA("SHA-1", "TEXT");
						shaObj2.update(password);
						password = "{SHA}" + shaObj2.getHash("B64");
						let language = window.localStorage.getItem("locale");
						this.$store
								.dispatch("user/LOGIN", {
									account: this.phoneUserNum,
									password: password,
									token: salt,
									validate: this.validate,
									captchaToken: this.captchaToken,
									language: language,
								})
								.then((res) => {
									var msg =
											this.form.password == "123" || this.form.password == "123456"
													? this.$t("common.Theinitialpasswordmustbechanged") //初始密码必须修改
													: "";
									if (msg == "") {
										// msg = /((?=.*\d)(?=.*\D)(?=.*[a-z])(?=.*[A-Z]))(?!^.*[\u4E00-\u9FA5].*$)^\S{8,20}$/.test(isPhonePass)
										//   ? "" : this.$t('common.Yourpasswordstrengthistoolow');//您的密码强度过低，请及时修改密码
										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(
														isPhonePass
												)
														? ""
														: this.$t("common.Yourpasswordstrengthistoolow"); //您的密码强度过低，请及时修改密码

										console.log("msg:", msg);
									}
									if (msg != "") {
										this.$message.success(
												this.$t("common.Loginsuccessful") + msg + "！"
										); //登录成功
										// addGrowth("point_task_sign")
										window.sessionStorage.setItem("token", "res.data.token");
									} else {
										console.log("成功");
										window.sessionStorage.setItem("token", "res.data.token");
										if (sessionStorage.getItem("pathReminder")) {
											this.$router.push(
													JSON.parse(sessionStorage.getItem("pathReminder"))
											);
										} else {
											const userInfo = JSON.parse(this.$Cookies.get("userInfo"));
											if (userInfo.umsUser.userStatusDict == "5") {
												this.$alert(
														this.$t("common.plaseChangePassworld") + "！",
														this.$t("common.Tips"),
														{
															confirmButtonText: this.$t("common.submit"),
															callback: (action) => {
																this.$message({
																	message:
																			this.$t("common.plaseChangePassworld") + "！",
																	type: "warning",
																	duration: 5000,
																});
																this.$store.commit("modify", "securitySetting");
																window.localStorage.setItem(
																		"router",
																		"securitySetting"
																);
																this.$router.push({
																	name: "securitySetting",
																	query: {
																		key: "/securitySetting",
																		dialogVisible: "true",
																	},
																});
															},
														}
												);
											} else {
												this.$message.success(
														this.$t("common.Loginsuccessful") + "！"
												);
												let RouterConfig = this.getRouterConfig();
												//如果存在路由则返回之前的路由页面，如果不存在路由则直接返回首页
												if (RouterConfig) {
													this.$router.go(-1);
												} else {
													this.$router.push({
														name: "home",
														params: {},
													});
												}
											}
										}
									}
								})
								.catch((error) => {
									if (error.data >= 2) {
										console.log(1);
										this.$refs.captcha.captchaInit();
										this.result = false;
									}
									// msg(error.msg)
									let msg;
									let msgs = new Array();
									if (error.msg && error.msg.indexOf(";") != -1) {
										msgs = error.msg.split(";");
										if (language == "zh") {
											msg = msgs[0];
										} else {
											msg = msgs[1];
										}
									} else if (error.msg && error.msg.indexOf(";") == -1) {
										msg = error.msg;
									} else {
										msg =
												this.$t("common.ThesystemisbusyPleasetryagainlater") + "！";
									}
									return this.$message({
										message: msg,
										type: "error",
									});
									this.resetToken();
								});
					}, false);
				} else {
					if ($i18n.locale == "zh") {
						alert("请滑动验证码");
					} else {
						alert("Please slide the captcha.");
					}
				}
			} catch (err) {
				console.log(err);
				this.resetToken();
			}
		},
		login: function () {
			//增加登陆鉴权，如果存在token说明是已经登录的用户，将不会在进行登录请求直接跳转
			let token = this.$Cookies.get("token");
			if (token) {
				this.$router.push({
					name: "home",
					params: {},
				});
			} else {
				if (this.loginType == 1) {
					console.log(1);
					this.accountPasswordLogin();
				} else {
					console.log(2);
					this.mobileLogin();
				}
			}
		},
		//zzy  免密码登录
		onSubmit() {
			if (this.isTelLogin) {
				var tel = this.verificationTel(this.form2.mobile);
				if (!tel) {
					return;
				}
				if (!this.form2.checkCode) {
					this.$message.warning(this.$t("common.Verificationcodeerror")); //验证码不能为空
					return;
				}
				if (this.phoneNum == "") {
					this.phoneNum = this.select.concat(this.form2.mobile);
				}
			} else {
				var tel = this.verificationTel(this.form2.email);
				if (!tel) {
					return;
				}
				if (!this.form2.checkCode) {
					this.$message.warning(this.$t("common.Verificationcodeerror")); //验证码不能为空
					return;
				}
				this.phoneNum = this.form2.email;
			}
			let locale = window.localStorage.getItem("locale");
			let myList = new Array(this.phoneNum, locale);
			let names = myList.join(",");
			try {
				this.submitHandler((token) => {
					this.$store
							.dispatch("user/MOBILE_LOGIN", {
								mobile: names,
								checkCode: this.form2.checkCode,
								service: this.service,
								token: token,
								language: locale,
							})
							.then(() => {
								if (sessionStorage.getItem("pathReminder")) {
									this.$router.push(
											JSON.parse(sessionStorage.getItem("pathReminder"))
									);
								} else {
									const userInfo = JSON.parse(this.$Cookies.get("userInfo"));
									if (userInfo.umsUser.userStatusDict == "5") {
										this.$alert(
												this.$t("common.plaseChangePassworld") + "！",
												this.$t("common.Tips"),
												{
													confirmButtonText: this.$t("common.submit"),
													callback: (action) => {
														this.$message({
															message:
																	this.$t("common.plaseChangePassworld") + "！",
															type: "warning",
															duration: 5000,
														});
														// this.$router.push({
														//   name: "securitySetting",
														//   query: {dialogVisible:'true'},
														// });
														this.$store.commit("modify", "securitySetting");
														window.localStorage.setItem(
																"router",
																"securitySetting"
														);
														this.$router.push({
															name: "securitySetting",
															query: {
																key: "/securitySetting",
																dialogVisible: "true",
															},
														});
													},
												}
										);
									} else {
										this.$message.success(
												this.$t("common.Loginsuccessful") + "！"
										);
										let RouterConfig = this.getRouterConfig();
										if (RouterConfig) {
											this.$router.go(-1);
										} else {
											this.$router.push({
												name: "home",
												params: {},
											});
										}
									}
								}
							})
							.catch((error) => {
								if (error.msg) {
									this.$message.error(error.msg);
								} else {
									this.$message.error(this.$t("common.loginfailed") + "！");
								}
								this.resetToken();
							});
				}, false);
			} catch (err) {
				console.log(err);
				this.resetToken();
			}
		},
		// 判断页面上一级，添加白名单,添加白名单
		getRouterConfig() {
			let config = ["/Register", "/PasswordReset", "/helpCenter", "/"];
			return config.indexOf(this.fromPath) == -1;
		},
		// 免密码登录（手机号验证码）
		loginChanges(num) {
			console.log("num:", num);
			this.index = num;
		},

		async sendCode() {
			var loginMethod = this.isTelLogin ? this.form2.mobile : this.form2.email;
			var bool = this.verificationTel(loginMethod);
			if (!bool) {
				return;
			}
			this.getJcRange();
			/*this.success=true;
				this.getJcRange();*/
			// this.ifJcRangeImg2 = true;
		},
		verificationTel: function (name) {
			//验证手机、邮箱合法性
			if (this.isTelLogin) {
				this.service = "TX";
				if (!this.form2.mobile) {
					this.$message.warning(
							this.$t("common.Mobilephonenumbercannotbeempty")
					); //手机号不能为空
					return;
				}
				const regPhone = /^([0-9]*)$/;
				if (regPhone.test(name)) {
					return true;
				} else {
					this.$message.warning(
							this.$t("common.Pleaseenteravalidmobilephonenumber") + "！"
					); //请输入合法的手机号
					return false;
				}
			} else {
				this.service = "YJ";
				if (!this.form2.email) {
					this.$message.warning(this.$t("common.Themailboxcannotbeempty")); //邮箱不能为空
					return;
				}
				const regEmail =
						/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
				if (regEmail.test(name)) {
					return true;
				} else {
					this.$message.warning(this.$t("common.Pleaseenterlegalemail") + "！"); //请输入合法邮箱
					return false;
				}
			}
		},
		async getJcRange() {
			// if (this.success) {
			if (this.isTelLogin) {
				this.phoneNum = this.select.concat(this.form2.mobile);
			} else {
				this.phoneNum = this.form2.email;
			}
			//获取当前登录手机号的用户信息
			// this.isSendCode = false;
			// await getUserInfoByTel(this.phoneNum, this.$i18n.locale)
			//   .then((result) => {
			//     console.log(result);
			//     if (result) {
			//       this.isSendCode = true;
			//       // this.userInfo = result.data;
			//     }
			//   })
			//   .catch((error) => {});
			//短信：service：“TX"   邮件：service：“YJ
			let locale = window.localStorage.getItem("locale");
			await sendPhoneCode(this.phoneNum, this.service, locale)
					.then((result) => {
						// this.msg(
						// 		this.$t("common.Verificationcodehasbeensent") + "！",
						// 		"success"
						// );
						//验证码已发送，请查收
						this.msg(result.msg, "success");
					})
					.catch((error) => {
						this.msg(error.msg, "error");
						// this.msg(this.$t("common.userdoesnotexist") + "！", "error");
					});
			// if (this.isSendCode) {
			//
			// }
			// else {
			//   this.msg(this.$t("common.userdoesnotexist") + "！", "error"); //用户不存在
			//   return;
			// }

			this.ifJcRangeImg2 = false;
			this.success = false;
			//倒计时
			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);
			}
			// }
		},
		msg: function (msg, type) {
			if (msg == "error") {
				msg = this.$t("common.ThesystemisbusyPleasetryagainlater") + "！"; //系统繁忙，请稍后再试
			}
			return this.$message({
				message: msg,
				type: type,
			});
		},
		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);
			}
		},
		handleClose(done) {
			this.dialogVisible = false;
		},
		//用户注册、隐私协议数据连接处理
		getAboutMenu(type) {
			this.aboutMenu.forEach((item) => {
				if (item.name == type) {
					this.toViewAbout("helpCenter", item.id);
				}
			});
		},
		//获取用户注册、隐私协议id信息
		getAboutId() {
			var language = "ZH";
			getHelpColumnTree(language).then((result) => {
				this.aboutMenu = [];
				let menuHelp = result.data;
				for (let i = 0; i <= menuHelp.length - 1; i++) {
					if (
							menuHelp[i].name == "关于我们" ||
							menuHelp[i].name == "About Us"
					) {
						this.aboutMenu = menuHelp[i].children;
					}
				}
			});
		},
		//跳转帮助中心
		toViewAbout(router, id) {
			this.$store.commit("modify", router);
			window.localStorage.setItem("router", router);
			const {href} = this.$router.resolve({
				name: router,
				query: {
					key: id,
				},
			});
			window.open(href, "_blank");
		},
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body,
html {
	height: 100%;
}

.loginChange {
	padding: 0 10px;
}

.loginChange span {
	display: inline-block;
	width: 50%;
	height: 34px;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
}

.loginChange .span1 {
	color: rgba(80, 141, 231, 1);
	border-bottom: 2px solid #508de7;
}

.loginChange .span2 {
	color: rgba(80, 141, 231, 1);
	background: #fff;
}

.login1 >>> .el-input__inner {
	height: 34px;
	line-height: 34px;
	font-size: 14px;
}

.login1 >>> .el-button,
.login2 >>> .el-button {
	height: 34px;
	line-height: 34px;
}

.login2 >>> .el-input__inner {
	height: 34px;
	line-height: 34px;
	background: #fff;
	border: 1px solid #dcdfe6;
	font-size: 14px;
}

.login2 >>> .el-select {
	width: 130px;
	height: 34px;
	border-radius: 4px;
	background: linear-gradient(
			90deg,
			#dcdfe6 0%,
			#f3f3f3 15%,
			#f3f3f3 85%,
			#dcdfe6 100%
	);
}

.login2 >>> .el-input-group__prepend {
	border: none;
}

.login2 >>> .el-input-group {
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	overflow: hidden;
}

.login2 >>> .el-input-group .el-input__inner {
	border: none;
}

.loginImg {
	position: fixed;
	top: 75px;
	bottom: 120px;
	left: 0;
	width: 100%;
	background: url("../assets/img/login/loginbg1.png") no-repeat 20px 50%,
	linear-gradient(90deg, #1b54db 0%, #18d0f3 100%);
	display: flex;
	align-items: center;
}

.loginImg .login {
	position: relative;
	left: 85%;
	margin-left: -210px;
	background: #fff;
	z-index: 9999;
	font-family: HiraginoSansGB-W3, HiraginoSansGB;
	padding: 10px;
	border-radius: 5px;
	width: 330px;
	height: 420px;
}

.loginImg .option-btns {
	position: relative;
	margin: 10px;
	text-align: right;
}

.option-btns .el-button--primary {
	padding: 5px 20px;
}

.option-btns .el-button--text {
	color: #333;
}

.option-btns .el-button--text:hover {
	color: #999;
}

/deep/ .el-form-item {
	margin-bottom: 10px;
	font-size: 14px;
}

/deep/ .el-select {
	max-width: 120px !important;
	font-size: 14px;
}

/deep/ .el-button.getCode {
	padding-top: 0;
}

/deep/ .el-form-item__content {
	line-height: 20px;
	margin: 5px 0;
}

.email-login {
	border: 1px solid transparent;
}

.wrap .header {
	display: flex;
	align-items: center;
}

.wrap .header .text {
	padding: 10px 20px;
	border-left: 1px solid #ddd;
	margin-left: 10px;
}

.wrap .footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	margin: 0 auto;
	overflow: hidden;
}

.wrap .footer .qcode {
	display: inline-flex;
	align-items: center;
	color: #333;
	padding-bottom: 5px;
	margin-left: 23%;
	font-size: 14px;
}

.wrap .footer .qcode .titleinfo .eng {
	font-size: 12px;
}

.wrap .footer .qcode .titleinfo .chi {
	margin-top: 4px;
	font-size: 12px;
}

.wrap .footer .qcode img {
	margin: 0 10px;
}

.wrap .footer .info a {
	text-decoration: none;
	color: #333;
}

.wrap .footer .title {
	width: 80%;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	margin: 5px 0 10px 0;
	display: inline-flex;
	align-content: space-around;
	margin-left: 20.5%;
}

.wrap .footer .title span {
	padding: 0 20px;
	font-size: 14px;
}

.wrap .footer .footerline {
	height: 1px;
	width: 60%;
	margin: 0 auto;
	background: #ccc;
}

.wrap .footer .crop {
	height: 30px;
	line-height: 30px;
	flex: 1;
	align-self: flex-end;
	cursor: pointer;
	text-align: center;
	font-size: 12px;
}

.wrap .footer .footers2 {
	background: transparent;
	color: #333 !important;
}
</style>