728 lines
32 KiB
Vue
728 lines
32 KiB
Vue
<template>
|
||
<div class="login">
|
||
<!-- <div class="login-title">
|
||
<img src="../assets/image/logo.png" alt="" />
|
||
<span>嘉策服务平台</span>
|
||
</div> -->
|
||
<!-- <el-form
|
||
ref="loginForm"
|
||
:model="loginForm"
|
||
:rules="loginRules"
|
||
class="login-form"
|
||
>
|
||
<h3 class="col">嘉策服务平台</h3>
|
||
<h1 class="title">登录</h1>
|
||
<div class="login-info">
|
||
<el-form-item prop="username">
|
||
<el-input
|
||
v-model="loginForm.username"
|
||
type="text"
|
||
auto-complete="off"
|
||
placeholder="账号"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="user"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<el-input
|
||
v-model="loginForm.password"
|
||
type="password"
|
||
auto-complete="off"
|
||
placeholder="密码"
|
||
@keyup.enter.native="handleLogin"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="password"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-checkbox
|
||
v-model="loginForm.rememberMe"
|
||
style="margin: 0px 0px 25px 0px"
|
||
>记住密码</el-checkbox
|
||
>
|
||
<el-form-item style="width: 100%">
|
||
<el-button
|
||
:loading="loading"
|
||
size="medium"
|
||
type="primary"
|
||
style="width: 100%"
|
||
@click.native.prevent="handleLogin"
|
||
>
|
||
<span v-if="!loading">登 录</span>
|
||
<span v-else>登 录 中...</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form> -->
|
||
<!-- <div class="login-form-bg"></div> -->
|
||
<div class="my-box">
|
||
<div class="my-left">
|
||
<div class="bg-img">
|
||
<img src="@/assets/login.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="my-right">
|
||
<!-- 登录 -->
|
||
<div
|
||
style="min-width: 360px; max-width: 360px; padding-bottom: 55px"
|
||
v-show="status"
|
||
>
|
||
<div class="m-title">
|
||
<div>
|
||
欢迎登录<i class="el-icon-sort" @click="status = false"></i>
|
||
</div>
|
||
</div>
|
||
<el-form
|
||
ref="loginForm"
|
||
:model="loginForm"
|
||
:rules="loginRules"
|
||
class="login-form"
|
||
auto-complete="on"
|
||
label-position="left"
|
||
>
|
||
<el-form-item prop="username">
|
||
<el-input
|
||
v-model="loginForm.username"
|
||
type="text"
|
||
auto-complete="off"
|
||
placeholder="手机号"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="user"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="password" v-if="mode">
|
||
<el-input
|
||
v-model="loginForm.password"
|
||
type="password"
|
||
auto-complete="off"
|
||
placeholder="密码"
|
||
@keyup.enter.native="handleLogin"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="password"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="code" class="code-input" v-if="!mode">
|
||
<el-input
|
||
v-model="loginForm.password"
|
||
auto-complete="off"
|
||
placeholder="验证码"
|
||
style="width: 63%"
|
||
@keyup.enter.native="handleLogin"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="validCode"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
<div class="login-code">
|
||
<el-button @click="getCode" type="primary" :disabled="!show">
|
||
获取验证码
|
||
<span v-show="!show" class="count">({{ count }}s)</span>
|
||
</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
<div
|
||
class="check-box"
|
||
:class="mode ? '' : 'flex-end'"
|
||
style="padding: 0 0 15px"
|
||
>
|
||
<el-checkbox v-if="mode" v-model="loginForm.rememberMe"
|
||
>记住密码</el-checkbox
|
||
>
|
||
<el-button type="text" @click="changeMethod(false)" v-if="mode"
|
||
>验证码登录</el-button
|
||
>
|
||
<el-button type="text" @click="changeMethod(true)" v-else
|
||
>密码登录</el-button
|
||
>
|
||
</div>
|
||
<el-button
|
||
id="login_btn"
|
||
:loading="loading"
|
||
type="primary"
|
||
style="width: 100%"
|
||
@click.native.prevent="handleLogin"
|
||
>登录</el-button
|
||
>
|
||
</el-form>
|
||
<el-checkbox style="padding: 15px 0 0" v-model="loginForm.flag"
|
||
>我已阅读并同意<el-button type="text" @click="dialogVisible = true"
|
||
>《用户协议》</el-button
|
||
></el-checkbox
|
||
>
|
||
<div style="color: #666; font-size: 16px">
|
||
<!-- 新用户通过手机验证码登录自动注册账号 -->
|
||
</div>
|
||
</div>
|
||
<!-- 注册 -->
|
||
<div
|
||
style="min-width: 360px; max-width: 360px; padding-bottom: 55px"
|
||
v-show="!status"
|
||
>
|
||
<div class="m-title">
|
||
<div>
|
||
欢迎注册<i class="el-icon-sort" @click="status = true"></i>
|
||
</div>
|
||
</div>
|
||
<el-form
|
||
ref="registerForm"
|
||
:model="registerForm"
|
||
:rules="registerRules"
|
||
class="login-form"
|
||
auto-complete="on"
|
||
label-position="left"
|
||
>
|
||
<el-form-item prop="username">
|
||
<el-input
|
||
v-model="registerForm.username"
|
||
type="text"
|
||
auto-complete="off"
|
||
placeholder="手机号"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="user"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item class="code-input" v-if="!status">
|
||
<el-input
|
||
v-model="registerForm.password"
|
||
auto-complete="off"
|
||
placeholder="验证码"
|
||
style="width: 63%"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="validCode"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
<div class="login-code">
|
||
<el-button @click="getCode2" type="primary" :disabled="!show2">
|
||
获取验证码
|
||
<span v-show="!show2" class="count">({{ count2 }}s)</span>
|
||
</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item prop="newPassword" v-if="mode">
|
||
<el-input
|
||
v-model="registerForm.newPassword"
|
||
type="password"
|
||
auto-complete="off"
|
||
placeholder="请输入密码"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="password"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="mode">
|
||
<el-input
|
||
v-model="registerFormPassword"
|
||
type="password"
|
||
auto-complete="off"
|
||
placeholder="请确认密码"
|
||
>
|
||
<svg-icon
|
||
slot="prefix"
|
||
icon-class="password"
|
||
class="el-input__icon input-icon"
|
||
/>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-button
|
||
id="login_btn"
|
||
:loading="loading"
|
||
type="primary"
|
||
style="width: 100%"
|
||
@click.native.prevent="handleregister"
|
||
>注册</el-button
|
||
>
|
||
</el-form>
|
||
<el-checkbox style="padding: 15px 0 0" v-model="registerForm.flag"
|
||
>我已阅读并同意<el-button type="text" @click="dialogVisible = true"
|
||
>《用户协议》</el-button
|
||
></el-checkbox
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog title="用户协议" :visible.sync="dialogVisible" width="40%">
|
||
<div style="line-height: 30px">
|
||
<h3>
|
||
在此特别提醒您(用户)在注册成为嘉策科技创新服务平台用户之前,请认真阅读本《嘉策科技创新服务平台用户服务协议》（以下简称“协议”)，确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。您同意并点击确认本协议条款且完成注册程序后，才能成为嘉策科技创新服务平台的正式注册用户，并享受嘉策科技创新服务平台的各类服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。若您不同意本协议，或对本协议中的条款存在任何疑问，请您立即停止嘉策科技创新服务平台用户注册程序，并可以选择不使用本网站服务。
|
||
</h3>
|
||
<h3>
|
||
本协议约定嘉策科技创新服务平台与用户之间关于嘉策科技创新服务平台服务(以下简称“服务”)的权利义务。“用户”是指注册、登录、使用本服务的个人、单位。本协议可由嘉策科技创新服务平台随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本APP中查阅最新版协议条款。在修改协议条款后，如果用户不接受修改后的条款，请立即停止使用嘉策科技创新服务平台提供的服务，用户继续使用嘉策科技创新服务平台提供的服务将被视为接受修改后的协议。
|
||
</h3>
|
||
<h4>1、用户信息注册</h4>
|
||
<p>
|
||
当您在本网站/软件进行用户注册登记，使用本网站/软件的服务，以及参加本网站/软件的活动时，即为您同意本网站/软件将收集您的个人信息，并保存记录。在用户注册及使用本服务时,嘉策科技创新服务平台需要搜集能识别用户身份的个人信息以便平台可以在必要时联系用户,或为用户提供更好的使用体验。本网站/软件收集的个人信息包括但不限于：姓名、性别、生日、城市、身份证号码、电子邮箱地址、手机电话、血型，收货地址等。
|
||
</p>
|
||
<h4>2、用户信息的使用</h4>
|
||
<p>
|
||
用户承诺其为具有完全民事行为能力的民事主体,且具有达成交易履行其义务的能力。本网站/软件收集个人信息的基本目的是为了更好的了解我们的用户，以便向您提供特色服务和个性化服务。个人信息将主要用于以下几个目的：（1）完成您对特定服务或产品的要求。（2）在我们提供服务时,用于身份验证、客户服务、安全防范、诈骗监测、存档和备份用途,确保我们向您提供的产品和服务的安全性。（3）帮助我们设计新服务,改善我们现有服务。(4)使我们更加了解您如何接入和使用我们的服务,从而针对性地回应您的个性化需求,例如语言设定、位置设定、个性化的帮助服务和指示,或对您和其他用户作出其他方面的回应。(5)用于对本网站/软件用户数据的统计（如用户数量、构成、兴趣、表现等），以便我们向用户提供更好的服务和产品，或向第三方为了一定的合法目的披露该类统计数据。该类统计数据都是用户群整体的信息，而非个人的信息。(6)让您参与有关我们产品和服务的调查。为了让您有更好的体验、改善我们的服务或您同意的其他用途,在符合相关法律法规的前提下,我们可能将通过某一项服务所收集的信息,以汇集信息或者个性化的方式,用于我们的其他服务。例如,在您使用我们的一项服务时所收集的信息,可能在另一服务中用于向您提供特定内容,或向您展示与您相关的、非普遍推送的信息。如果我们在相关服务中提供了相应选项,您也可以授权我们将该服务所提供和储存的信息用于我们的其他服务。
|
||
</p>
|
||
<h4>3、用户信息的共享和披露</h4>
|
||
<p>
|
||
信息所收集您的个人信息，将仅用于我司您提供相关服务。一般情况下，在未得到您的同意之前，您的任何个人信息将不会被提供给无关的第三方。在下列情况下，我们可能会将您的个人信息提供给有关的第三方：(1)本网站/软件的某些服务需由一个合作伙伴(如代理公司、提供相关技术服务的公司、运输公司、邮寄公司、提供奖品的公司等)提供或共同提供。为了向您提供此类服务，本网站有必要与该合作伙伴分享您的个人信息。如果您不希望您的信息被分享，您可以不使用该具体服务从而拒绝您的个人信息被披露。(2)本网站/软件可能会与第三方共同进行推广活动。在推广活动中所收集的全部或部分个人信息可能会与该第三方分享。如果您不想让您的信息被分享，您可以通过不参加该推广活动而拒绝。(3)根据法律法规或政府的强制性规定，我们必须向有关司法或政府部门提供您的个人信息。(4)为了防止他人的合法权益或社会公共利益受到重大危害。(5)为了防止您的合法权益受到重大危害。(6)我们发现您的行为违反了本网站/软件的服务条款或关于特定服务或产品的任何使用指引，或对我司或者他人的信息的合法权益构成重大危害。
|
||
</p>
|
||
<h4>4、用户管理</h4>
|
||
<p>
|
||
您可以在任何时候通过使用您的本网站/软件的注册用户名和密码，查询，补充或更正您的本网站/软件帐户中的个人信息，或要求删除您的本网站/软件帐户中的个人信息。您在本网站/软件的帐户可以被删除，但这样会导致您不能够登录本网站/软件及使用本网站/软件的任何服务。若发现任何非法使用用户帐号或存在安全漏洞的情况,请立即通知本站并向公安机关报案。因用户未妥善保管其帐号名称及密码而导致第三人使用帐号而给用户造成的损失,由用户自行承担。用户在注册及使用时应承诺遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实性等七条底线,且用户对其发布的内容(包括但不限于文字、图片等)时,不得有以下情形：(1)违反宪法或法律法规规定的；(2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一的；(3)损害国家荣誉和利益的,损害公共利益的；(4)煽动民族仇恨、民族歧视,破坏民族团结的；(5)破坏国家宗教政策,宣扬邪教和封建迷信的；(6)散布谣言,扰乱社会秩序,破坏社会稳定的；(7)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；(8)侮辱或者诽谤他人,侵害他人合法权益的；(9)含有法律、行政法规禁止的其他内容或违反我司的其他规定的。用户盗用他人信息或以虚假信息骗取帐号名称注册,或其帐号头像、简介等注册信息存在违法和不良信息的,我司有权采取通知限期改正、暂停使用、注销登记等措施。如您盗用他人信息注册或使用我司网站/软件，给他人造成损失的，应向他人承担赔偿责任。如我司因此向他们承担了赔偿责任的，我司有权向您追偿。您申请的帐号仅限于用户本人使用,严禁将您的帐号允许第三人使用,否则用户应承担由此产生的全部责任,并与实际使用人承担连带责任。
|
||
</p>
|
||
<h4>5、信息安全</h4>
|
||
<p>
|
||
用户一旦注册成功,成为嘉策科技创新服务平台的用户,将得到一个用户名和密码,并有权利使用自己的用户名及密码随时进行登陆。用户对用户名和密码的安全负全部责任,同时对以其用户名进行的所有活动和事件负全责。用户不得以任何形式擅自转让或授权他人使用自己的嘉策科技创新服务平台用户名，本网站/软件也不会主动致电或主动发电子邮件给您来询问您的密码，如果您遇到此类情况请及时与客服联系确认。同时，请您在完成工作后，务必退出您的本网站/软件帐户并关闭您的浏览器窗口，以便当您与他人合用一台电脑，或正在公共场所使用电脑时，保证他人无法获取您的个人信息和往来通信。如果用户泄漏了密码,有可能导致不利的法律后果,因此不管任何原因导致用户的密码安全受到威胁,应该立即和嘉策科技创新服务平台客服人员取得联系，否则后果自负。
|
||
</p>
|
||
<h4>6、用户隐私制度</h4>
|
||
<p>
|
||
我们会在您自愿的前提下收集您的个人信息并将这些信息进行整合,包括但不限于注册帐号时的相关信息和活动报名信息等。尊重用户个人隐私是我司的一项基本政策。所以,我司不会公开或向任何第三方透露用户的注册资料以及用户因享受我司服务而提供的任何信息,但以下情形除外:何形式的、明示或默示的声明或担保(根据中华人民共和国法律另有规定的以外)。我们不担保本站所包含的或以其它方式通过本站提供给您的全部信息、内容、材料、产品(包括软件)和服务、其服务器或从本站发出的电子信件、信息没有病毒或其他有害成分。如因不可抗力或其它本站无法控制的原因使本站服务系统溃或无法正常使用导致服务不可用或网上交易无法完成或丢失有关的信息、记录等,我们会合理地尽力协助处理善后事宜。
|
||
</p>
|
||
<h4>7、免责声明</h4>
|
||
<p>
|
||
客户明确同意使用我司服务的风险由客户承担。我司在此明确表示不提供任何类型的担保，不论是明确的或隐含的。我司将尽力维护客户使用我司服务的合法权益，但不担保我司服务一定能满足客户的要求，也不担保服务的及时性、安全性、真实性、稳定性、正确性。对客户使用该等服务中出现的信息（包括但不限于客户发布的信息）删除或储存失败，我司亦不承担任何责任。客户理解并接受下载或通过相应产品服务取得的任何信息资料取决于客户自己，并自行承担系统受损、资料丢失以及其他任何风险。我司对客户在互联网上得到的任何商品购物服务、交易进程、招聘信息等，都不作担保。我司对直接、间接、偶然、特殊及继起的损害不负责任，这些损害来自：不正当使用我司服务及/或应用服务，在网上购买商品或类似服务，在网上进行交易，非法使用服务或客户传送的信息有所变动。我司对本项服务下涉及的境内外基础运营商的通信网络的故障、技术缺陷、覆盖范围限制、不可抗力、计算机病毒、黑客攻击、客户所在位置、客户关机或其他非我司技术能力范围内的事因等造成的服务中断、客户邮件内容丢失、出现乱码、错误接收、无法接收、迟延接收不承担责任。我司保留判定客户的行为是否符合本服务协议要求的权利，如果客户违背了本服务协议的规定，我司有权中止或终止相应服务。转户规定：如果客户将手机号码转让给他人，请用户提前自行删除账号内资料。否则，受让该号码的客户将有可能查看您的客户个人数据。我司不承担由此引发的客户数据丢失等责任及纠纷。
|
||
</p>
|
||
<h4>8、协议更新及用户关注义务</h4>
|
||
<p>
|
||
根据国家法律法规的更新及网站运营需要,我们有权对本条款不时地进行修改,修改后的服务条款一旦被张贴在本站上即生效力,并代替原来的服务条款。用户可随时登录查阅最新服务条款内容。如用户不同意更新后的服务条款,应立即停止接受本站提供的服务;如用户继续使用本站提供的服务,即视为同意更新后的用户协议。我们建议您在使用本站之前阅读本用户协议及本站的公告。如果本用户协议中任何一条被视为废止无效或因任何理由不可执行,该条应视为可分的且并不影响任何其余协议的有效性和可执行性。
|
||
</p>
|
||
<h4>9、法律管辖和适用</h4>
|
||
<p>
|
||
本用户协议的订立、执行和解释及争议的解决均应适用在中华人民共和国大陆地区现行之有效法律。如发生本服务条款的某些内容与适用之法律相抵触时,则这些条款将完全按法律规定重新解释,而其它有效条款继续有效。如缔约方就本条款內容或其执行发生任何争议,双方应尽力友好协商解决;协商不成时,任何一方均可向我司注册地的中华人民共和国大陆地区法院提起诉讼。
|
||
</p>
|
||
<h4>10、其他</h4>
|
||
<p>
|
||
我们尊重用户和消费者的合法权利,本用户协议及本站上发布的各类规则、政策、声明等其他内容,均是为了更好的、更加便利的为用户和消费者提供服务。我司欢迎用户和社会各界提出意见和建议,我们将虚心接受并适时修改本服务条款及相关政策、规则。您完成注册且成为我司的注册用户则意味着您完全接受本用户协议,在注册之前请您再次确认已知悉并完全理解本用户协议的全部内容。
|
||
</p>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="disagree">不同意</el-button>
|
||
<el-button type="primary" @click="agree">同意</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 底部 -->
|
||
<!-- <div class="el-login-footer">
|
||
<span>版权所有：嘉策</span>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Cookies from 'js-cookie';
|
||
import { encrypt, decrypt } from '@/utils/jsencrypt';
|
||
import { getAuthCode } from '@/api/login';
|
||
|
||
export default {
|
||
name: 'Login',
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
mode: true,
|
||
TIME_COUNT: 60,
|
||
show: true,
|
||
count: '', // 初始化次数
|
||
timer: null,
|
||
TIME_COUNT2: 60,
|
||
show2: true,
|
||
count2: '', // 初始化次数
|
||
timer2: null,
|
||
loginForm: {
|
||
username: '',
|
||
password: '',
|
||
rememberMe: false,
|
||
flag: true
|
||
},
|
||
registerFormPassword: '',
|
||
registerForm: {
|
||
username: '',
|
||
password: '',
|
||
newPassword: '',
|
||
flag: false
|
||
},
|
||
loginRules: {
|
||
username: [
|
||
{ required: true, trigger: 'blur', message: '用户名不能为空' }
|
||
],
|
||
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
|
||
},
|
||
registerRules: {
|
||
username: [
|
||
{ required: true, trigger: 'blur', message: '用户名不能为空' }
|
||
],
|
||
password: [
|
||
{ required: true, trigger: 'blur', message: '验证码不能为空' }
|
||
],
|
||
newPassword: [
|
||
{ required: true, trigger: 'blur', message: '密码不能为空' }
|
||
]
|
||
},
|
||
status: true,
|
||
loading: false,
|
||
redirect: undefined
|
||
};
|
||
},
|
||
watch: {
|
||
$route: {
|
||
handler: function(route) {
|
||
this.redirect = route.query && route.query.redirect;
|
||
},
|
||
immediate: true
|
||
},
|
||
status(newVal, oldVal) {
|
||
if (!newVal) this.dialogVisible = true;
|
||
}
|
||
},
|
||
created() {
|
||
this.getCookie();
|
||
},
|
||
methods: {
|
||
disagree() {
|
||
this.dialogVisible = false;
|
||
if (this.status) {
|
||
this.loginForm.flag = false;
|
||
} else {
|
||
this.registerForm.flag = false;
|
||
}
|
||
},
|
||
agree() {
|
||
this.dialogVisible = false;
|
||
if (this.status) {
|
||
this.loginForm.flag = true;
|
||
} else {
|
||
this.registerForm.flag = true;
|
||
}
|
||
},
|
||
changeMethod(flag) {
|
||
this.mode = flag;
|
||
this.loginForm.password = '';
|
||
},
|
||
getCookie() {
|
||
const username = Cookies.get('username');
|
||
const password = Cookies.get('password');
|
||
const rememberMe = Cookies.get('rememberMe');
|
||
this.loginForm = {
|
||
username: username === undefined ? this.loginForm.username : username,
|
||
password:
|
||
password === undefined ? this.loginForm.password : decrypt(password),
|
||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||
flag: true
|
||
};
|
||
},
|
||
getCode() {
|
||
this.$refs.loginForm.validate(valid => {
|
||
if (valid) {
|
||
if (!this.timer) {
|
||
this.count = this.TIME_COUNT;
|
||
this.show = false;
|
||
getAuthCode({ phone: this.loginForm.username }).then(res => {
|
||
console.log(res);
|
||
this.timer = setInterval(() => {
|
||
if (this.count > 0 && this.count <= this.TIME_COUNT) {
|
||
this.count--;
|
||
} else {
|
||
this.show = true;
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
}
|
||
}, 1000);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getCode2() {
|
||
if (!this.timer2) {
|
||
this.count2 = this.TIME_COUNT2;
|
||
this.show2 = false;
|
||
getAuthCode({ phone: this.registerForm.username }).then(res => {
|
||
this.timer2 = setInterval(() => {
|
||
if (this.count2 > 0 && this.count2 <= this.TIME_COUNT2) {
|
||
this.count2--;
|
||
} else {
|
||
this.show2 = true;
|
||
clearInterval(this.timer2); // 清除定时器
|
||
this.timer2 = null;
|
||
}
|
||
}, 1000);
|
||
});
|
||
}
|
||
},
|
||
handleLogin() {
|
||
if (!this.loginForm.flag)
|
||
return this.msgError('请您阅读并同意《用户协议》');
|
||
this.$refs.loginForm.validate(valid => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
if (this.loginForm.rememberMe) {
|
||
Cookies.set('username', this.loginForm.username, { expires: 30 });
|
||
Cookies.set('password', encrypt(this.loginForm.password), {
|
||
expires: 30
|
||
});
|
||
Cookies.set('rememberMe', this.loginForm.rememberMe, {
|
||
expires: 30
|
||
});
|
||
} else {
|
||
Cookies.remove('username');
|
||
Cookies.remove('password');
|
||
Cookies.remove('rememberMe');
|
||
}
|
||
if (this.mode) {
|
||
this.$store
|
||
.dispatch('Login', this.loginForm)
|
||
.then(() => {
|
||
// this.$router.go(-1);
|
||
this.$router.push({ path: this.redirect || '/' });
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
} else {
|
||
// 验证码登录
|
||
this.$store
|
||
.dispatch('Register', this.loginForm)
|
||
.then(() => {
|
||
this.$router.push({ path: this.redirect || '/' });
|
||
// this.$router.go(-1);
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handleregister() {
|
||
if (this.registerForm.newPassword !== this.registerFormPassword)
|
||
return this.msgError('2次密码输入不一致');
|
||
if (!this.registerForm.flag)
|
||
return this.msgError('请您阅读并同意《用户协议》');
|
||
this.$refs.registerForm.validate(valid => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
// 验证码登录
|
||
this.$store
|
||
.dispatch('Register', this.registerForm)
|
||
.then(() => {
|
||
this.$router.push({ path: this.redirect || '/' });
|
||
// this.$router.go(-1);
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
created() {
|
||
const { status } = this.$route.query;
|
||
this.status = status;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style rel="stylesheet/scss" lang="scss">
|
||
$loginHeight: 570px;
|
||
$loginForm: 383px;
|
||
.login {
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
height: 100%;
|
||
min-height: $loginHeight;
|
||
background-image: url('../assets/image/login-bg.png');
|
||
background-size: cover;
|
||
position: relative;
|
||
}
|
||
.title {
|
||
// margin: 0px auto 30px auto;
|
||
text-align: center;
|
||
color: #000000;
|
||
}
|
||
.login-title {
|
||
position: absolute;
|
||
top: 40px;
|
||
left: 40px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
color: #ffffff;
|
||
img {
|
||
width: 100px;
|
||
position: relative;
|
||
top: 5px;
|
||
}
|
||
span {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
padding-left: 15px;
|
||
}
|
||
}
|
||
.col {
|
||
color: #209cff;
|
||
}
|
||
// .login-form {
|
||
// border-radius: 10px;
|
||
// background: #ffffff;
|
||
// width: 520px;
|
||
// min-height: $loginForm;
|
||
// padding: 20px;
|
||
// padding-top: 10px;
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// left: 50%;
|
||
// transform: translate(-50%, -50%);
|
||
// z-index: 9;
|
||
// // bottom: 0;
|
||
// // margin: auto;
|
||
// .el-input {
|
||
// height: 38px;
|
||
// input {
|
||
// height: 38px;
|
||
// }
|
||
// }
|
||
// .input-icon {
|
||
// height: 39px;
|
||
// width: 14px;
|
||
// margin-left: 2px;
|
||
// }
|
||
// .login-info {
|
||
// padding: 0 100px;
|
||
// }
|
||
// }
|
||
.login-form-bg {
|
||
border-radius: 6px;
|
||
position: absolute;
|
||
right: calc(15% - 20px);
|
||
top: calc(20% - 20px);
|
||
background: #ffffff;
|
||
width: 400px;
|
||
min-height: $loginForm;
|
||
opacity: 0.3;
|
||
z-index: 1;
|
||
}
|
||
.login-tip {
|
||
font-size: 13px;
|
||
text-align: center;
|
||
color: #bfbfbf;
|
||
}
|
||
.login-code {
|
||
margin-left: 10px;
|
||
}
|
||
.el-login-footer {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-family: Arial;
|
||
font-size: 12px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.login-code-img {
|
||
height: 38px;
|
||
}
|
||
.my-box {
|
||
min-height: 454px;
|
||
display: flex;
|
||
border-radius: 10px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.04);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
.my-left {
|
||
min-width: 500px;
|
||
.bg-img {
|
||
height: 100%;
|
||
background-color: #3494ff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
img {
|
||
width: 405px;
|
||
height: 325px;
|
||
}
|
||
}
|
||
}
|
||
.my-right {
|
||
min-width: 550px;
|
||
display: flex;
|
||
justify-content: center;
|
||
.m-title {
|
||
color: #333;
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin: 55px auto 45px;
|
||
div {
|
||
position: relative;
|
||
i {
|
||
transform: rotate(90deg);
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.el-form {
|
||
.el-form-item {
|
||
.el-form-item__content {
|
||
display: flex;
|
||
}
|
||
}
|
||
.check-box {
|
||
padding: 0 5px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.flex-end {
|
||
justify-content: flex-end !important;
|
||
}
|
||
// .code-input {
|
||
// .el-form-item__content {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// }
|
||
// }
|
||
</style>
|
||
<style>
|
||
.el-input__prefix {
|
||
color: #209cff;
|
||
}
|
||
.el-dialog {
|
||
height: 700px;
|
||
overflow: auto;
|
||
}
|
||
</style>
|