From a6ed23b018343a68f9fd276647cc4af817398d1b Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期四, 01 二月 2024 15:21:26 +0800 Subject: [PATCH] feat:修改部分问题 --- src/views/login.vue | 300 ++++++++++++++++++++--------------------------------------- 1 files changed, 102 insertions(+), 198 deletions(-) diff --git a/src/views/login.vue b/src/views/login.vue index 73c3014..7d02bb2 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -10,13 +10,12 @@ <Col class="content"> <div> <Header /> - <div v-if="!socialLogining"> - <Tabs v-model="tabName"> - <TabPane - :label="$t('usernameLogin')" - name="username" - icon="md-person" - > + <div class="login-main-box" v-if="!socialLogining"> + <div class="login-img"> + <img src="../assets/img/login-mmain-left-bj.jpg" alt=""> + </div> + <div class="login-form"> + <div class="login-form-inside"> <Form ref="usernameLoginForm" :model="form" @@ -24,13 +23,17 @@ class="form" v-if="tabName == 'username'" > + <FormItem> + <!--<h1 style="margin-left: 40%;">鐧� 褰�</h1>--> + <h1>瀹夊叏閰嶉�佺鐞嗙郴缁�</h1> + </FormItem> <FormItem prop="username"> <Input v-model="form.username" prefix="ios-contact" size="large" clearable - placeholder="璐﹀彿/閭/鎵嬫満鍙�" + placeholder="璐﹀彿" autocomplete="off" /> </FormItem> @@ -74,142 +77,47 @@ </Row> </FormItem> </Form> - </TabPane> - <TabPane - :label="$t('mobileLogin')" - name="mobile" - icon="ios-phone-portrait" - > - <Form - ref="mobileLoginForm" - :model="form" - :rules="rules" - class="form" - v-if="tabName == 'mobile'" - > - <FormItem prop="mobile"> - <Input - v-model="form.mobile" - prefix="ios-phone-portrait" - size="large" - clearable - placeholder="璇疯緭鍏ユ墜鏈哄彿" - /> - </FormItem> - <FormItem prop="code" :error="errorCode"> - <Row type="flex" justify="space-between"> - <Input - v-model="form.code" - prefix="ios-mail-outline" - size="large" - clearable - placeholder="璇疯緭鍏ョ煭淇¢獙璇佺爜" - :maxlength="6" - class="input-verify" - /> - <CountDownButton - ref="countDown" - @on-click="sendSmsCode" - :autoCountDown="false" - size="large" - :loading="sending" - :text="getSms" - /> - </Row> - </FormItem> - </Form> - </TabPane> - </Tabs> - <Row justify="space-between" align="middle"> - <Checkbox v-model="saveLogin" size="large">{{ - $t("autoLogin") - }}</Checkbox> - <Dropdown trigger="click" @on-click="handleDropDown"> - <a class="forget-pass">{{ $t("forgetPass") }}</a> - <DropdownMenu slot="list"> - <DropdownItem name="test">浣撻獙娴嬭瘯璐﹀彿</DropdownItem> - <DropdownItem name="resetByMobile" - >浣跨敤鎵嬫満鍙烽噸缃瘑鐮�(浠樿垂)</DropdownItem - > - <DropdownItem name="resetByEmail" - >浣跨敤閭閲嶇疆瀵嗙爜(浠樿垂)</DropdownItem - > - </DropdownMenu> - </Dropdown> - </Row> - <Button - class="login-btn" - type="primary" - size="large" - :loading="loading" - @click="submitLogin" - long - > - <span v-if="!loading">{{ $t("login") }}</span> - <span v-else>{{ $t("logining") }}</span> - </Button> - <Row type="flex" justify="space-between" class="other-login"> - <div class="other-way icons"> - {{ $t("otherLogin") }} - <div class="other-icon" @click="toGithubLogin"> - <Icon - custom="iconfont icon-github" - size="20" - class="other-icon" - @click="toGithubLogin" - /> - </div> - <div class="other-icon" @click="toQQLogin"> - <Icon custom="iconfont icon-qq" size="22" /> - </div> - <div class="other-icon" @click="toWeixinLogin"> - <Icon custom="iconfont icon-weixin" size="23" /> - </div> - <Icon - v-show="!showMore" - type="ios-arrow-down" - class="other-icon" - size="16" - @click="showMore = true" - ></Icon> - <div class="other-icon" v-show="showMore" @click="toWeiboLogin"> - <Icon custom="iconfont icon-weibo" size="23" /> - </div> - <div - class="other-icon" - v-show="showMore" - @click="toDingdingLogin" + <!--<Row justify="space-between" align="middle">--> + <!--<Checkbox v-model="saveLogin" size="large">{{--> + <!--$t("autoLogin")--> + <!--}}</Checkbox>--> + <!--<Dropdown trigger="click" @on-click="handleDropDown">--> + <!--<a class="forget-pass">{{ $t("forgetPass") }}</a>--> + <!--<DropdownMenu slot="list">--> + <!--<DropdownItem name="test">浣撻獙娴嬭瘯璐﹀彿</DropdownItem>--> + <!--<DropdownItem name="resetByMobile"--> + <!-->浣跨敤鎵嬫満鍙烽噸缃瘑鐮�(浠樿垂)</DropdownItem--> + <!-->--> + <!--<DropdownItem name="resetByEmail"--> + <!-->浣跨敤閭閲嶇疆瀵嗙爜(浠樿垂)</DropdownItem--> + <!-->--> + <!--</DropdownMenu>--> + <!--</Dropdown>--> + <!--</Row>--> + <Button + class="login-btn" + type="primary" + size="large" + :loading="loading" + @click="submitLogin" + long > - <Icon custom="iconfont icon-dingding" size="20" /> - </div> - <div - class="other-icon" - v-show="showMore" - @click="toWorkwechatLogin" - > - <Icon custom="iconfont icon-qiyeweixin" size="20" /> - </div> - <Icon - v-show="showMore" - type="ios-arrow-up" - class="other-icon" - size="16" - @click="showMore = false" - ></Icon> + <span v-if="!loading">{{ $t("login") }}</span> + <span v-else>{{ $t("logining") }}</span> + </Button> </div> - <router-link to="/regist"> - <a class="forget-pass">{{ $t("regist") }}</a> - </router-link> - </Row> + + </div> </div> + <div v-if="socialLogining"> <RectLoading /> </div> </div> - <Footer /> + <!--<Footer />--> </Col> - <LangSwitch /> + <!--<LangSwitch />--> </Row> </div> <!--<div>--> @@ -227,18 +135,13 @@ <!--</div>--> + </template> <script> import { login, userInfo, - githubLogin, - qqLogin, - weiboLogin, - wechatLogin, - dingdingLogin, - workwechatLogin, getJWT, sendLoginSms, smsLogin, @@ -250,7 +153,7 @@ import { validateMobile } from "@/libs/validate"; import Cookies from "js-cookie"; import Header from "@/views/main-components/header"; - import Footer from "@/views/main-components/footer"; + //import Footer from "@/views/main-components/footer"; import LangSwitch from "@/views/main-components/lang-switch"; import RectLoading from "@/views/my-components/xboot/rect-loading"; import CountDownButton from "@/views/my-components/xboot/count-down-button"; @@ -263,7 +166,6 @@ RectLoading, LangSwitch, Header, - Footer, VueFurcateTree }, data() { @@ -302,7 +204,9 @@ ] } ], + sessionStorage: null, showMore: false, + code:"", captchaId: "", captchaImg: "", loadingCaptcha: true, @@ -315,45 +219,11 @@ sending: false, errorCode: "", form: { - username: "test鎴杢est2 鍙敞鍐� 鏀寔绗笁鏂硅处鍙风櫥褰�", - password: "123456", - mobile: "闃块噷浜戠煭淇�0.045/鏉� 鑻ヤ綑棰濅笉瓒宠仈绯讳綔鑰呭厖鍊�", + username: "", + password: "", code: "", }, - rules: { - username: [ - { - required: true, - message: "璐﹀彿涓嶈兘涓虹┖", - trigger: "change", - }, - ], - password: [ - { - required: true, - message: "瀵嗙爜涓嶈兘涓虹┖", - trigger: "change", - }, - ], - imgCode: [ - { - required: true, - message: "楠岃瘉鐮佷笉鑳戒负绌�", - trigger: "change", - }, - ], - mobile: [ - { - required: true, - message: "鎵嬫満鍙蜂笉鑳戒负绌�", - trigger: "change", - }, - { - validator: validateMobile, - trigger: "change", - }, - ], - }, + showChangePass: false, }; }, methods: { @@ -362,7 +232,8 @@ initCaptcha().then((res) => { this.loadingCaptcha = false; if (res.success) { - this.captchaId = res.result; + this.code = res.result.code; + this.captchaId = res.result.captchaId; this.captchaImg = drawCodeImage + this.captchaId; } }); @@ -386,14 +257,15 @@ }, afterLogin(res) { let accessToken = res.result; - this.setStore("accessToken", accessToken); + console.log("login_afterLogin()",accessToken) + this.setSessionStore("accessToken", accessToken); getOtherSet().then((res) => { if (res.result) { let domain = res.result.ssoDomain; - Cookies.set("accessToken", accessToken, { - domain: domain, - expires: 7, - }); + // Cookies.set("accessToken", accessToken, { + // domain: domain, + // expires: 7, + // }); } }); // 鑾峰彇鐢ㄦ埛淇℃伅 @@ -422,7 +294,7 @@ util.initRouter(this); // window.location.reload(); this.$router.push({ - name: "home_index", + name: "home2", }); } else { this.loading = false; @@ -431,10 +303,15 @@ }, submitLogin() { if (this.tabName == "username") { + if(this.code.toUpperCase()!=this.form.imgCode.toUpperCase()){ + this.$Message.error("楠岃瘉鐮侀敊璇�"); + this.getCaptchaImg(); + return + } this.loading = true; login({ username: this.form.username, - password: this.form.password, + password: btoa(this.form.password), code: this.form.imgCode, captchaId: this.captchaId, saveLogin: this.saveLogin, @@ -541,14 +418,14 @@ if (res.success) { this.socialLogining = true; let accessToken = res.result; - this.setStore("accessToken", accessToken); + this.setSessionStore("accessToken", accessToken); getOtherSet().then((res) => { if (res.result) { let domain = res.result.ssoDomain; - Cookies.set("accessToken", accessToken, { - domain: domain, - expires: 7, - }); + // Cookies.set("accessToken", accessToken, { + // domain: domain, + // expires: 7, + // }); } }); // 鑾峰彇鐢ㄦ埛淇℃伅 @@ -625,20 +502,47 @@ }); }, test() { - this.$Notice.info({ - title: "娴嬭瘯浣撻獙璐﹀彿", - desc: "璐﹀彿锛歵est鎴杢est2<br>瀵嗙爜锛�123456", - }); + // this.$Notice.info({ + // title: "娴嬭瘯浣撻獙璐﹀彿", + // desc: "璐﹀彿锛歵est鎴杢est2<br>瀵嗙爜锛�123456", + // }); }, }, mounted() { - this.showNotice(); + //this.showNotice(); this.relatedLogin(); this.getCaptchaImg(); + }, }; </script> <style lang="less"> + .login-main-box{ + .ivu-form-item{ + margin-bottom: 2vw; + &:first-child{ + margin-bottom: 4vw; + } + } + .ivu-form-item-content{ + h1{ + font-size: 1.5vw; + text-align: center; + } + } + .ivu-input-large{ + height: 2vw; + } + .ivu-input-wrapper-large .ivu-input-prefix i, .ivu-input-wrapper-large .ivu-input-suffix i{ + line-height: 2vw; + } + .ivu-input{ + border: 1px solid #aaaaaa; + } + } + +</style> +<style lang="less"> @import "./login.less"; </style> -- Gitblit v1.9.1