| | |
| | | <Col class="content"> |
| | | <div> |
| | | <Header /> |
| | | <div v-if="!socialLogining"> |
| | | <Tabs v-model="tabName"> |
| | | <TabPane |
| | | :label="$t('usernameLogin')" |
| | | name="username" |
| | | icon="md-person" |
| | | > |
| | | <div v-if="!socialLogining" style="margin-top: 150px"> |
| | | <Form |
| | | ref="usernameLoginForm" |
| | | :model="form" |
| | |
| | | class="form" |
| | | v-if="tabName == 'username'" |
| | | > |
| | | <FormItem> |
| | | <h1 style="margin-left: 40%;">登 陆</h1> |
| | | </FormItem> |
| | | <FormItem prop="username"> |
| | | <Input |
| | | v-model="form.username" |
| | | prefix="ios-contact" |
| | | size="large" |
| | | clearable |
| | | placeholder="账号/邮箱/手机号" |
| | | placeholder="账号" |
| | | autocomplete="off" |
| | | /> |
| | | </FormItem> |
| | |
| | | </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> |
| | | <!--<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" |
| | |
| | | <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" |
| | | > |
| | | <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> |
| | | </div> |
| | | <router-link to="/regist"> |
| | | <a class="forget-pass">{{ $t("regist") }}</a> |
| | | </router-link> |
| | | </Row> |
| | | </div> |
| | | <div v-if="socialLogining"> |
| | | <RectLoading /> |
| | | </div> |
| | | </div> |
| | | <Footer /> |
| | | <!--<Footer />--> |
| | | </Col> |
| | | <LangSwitch /> |
| | | </Row> |
| | |
| | | |
| | | <!--</div>--> |
| | | |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | login, |
| | | userInfo, |
| | | githubLogin, |
| | | qqLogin, |
| | | weiboLogin, |
| | | wechatLogin, |
| | | dingdingLogin, |
| | | workwechatLogin, |
| | | getJWT, |
| | | sendLoginSms, |
| | | smsLogin, |
| | |
| | | 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"; |
| | |
| | | RectLoading, |
| | | LangSwitch, |
| | | Header, |
| | | Footer, |
| | | VueFurcateTree |
| | | }, |
| | | data() { |
| | |
| | | } |
| | | ], |
| | | showMore: false, |
| | | code:"", |
| | | captchaId: "", |
| | | captchaImg: "", |
| | | loadingCaptcha: true, |
| | |
| | | sending: false, |
| | | errorCode: "", |
| | | form: { |
| | | username: "test或test2 可注册 支持第三方账号登录", |
| | | 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: { |
| | |
| | | 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; |
| | | } |
| | | }); |
| | |
| | | util.initRouter(this); |
| | | // window.location.reload(); |
| | | this.$router.push({ |
| | | name: "home_index", |
| | | name: "home2", |
| | | }); |
| | | } else { |
| | | this.loading = false; |
| | |
| | | }, |
| | | 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, |
| | |
| | | }); |
| | | }, |
| | | test() { |
| | | this.$Notice.info({ |
| | | title: "测试体验账号", |
| | | desc: "账号:test或test2<br>密码:123456", |
| | | }); |
| | | // this.$Notice.info({ |
| | | // title: "测试体验账号", |
| | | // desc: "账号:test或test2<br>密码:123456", |
| | | // }); |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.showNotice(); |
| | | //this.showNotice(); |
| | | this.relatedLogin(); |
| | | this.getCaptchaImg(); |
| | | }, |