|
@@ -1,170 +1,170 @@
|
|
-import { defineComponent } from "vue";
|
|
|
|
-import { CellGroup, Field, Button, CountDown, Row, Col, Toast } from "vant";
|
|
|
|
-import ImgCode from "@/components/col-img-code";
|
|
|
|
-import { checkPhone } from "@/helpers/validate";
|
|
|
|
-import request from "@/helpers/request";
|
|
|
|
-import { setLogin, state } from "@/state";
|
|
|
|
-import { removeAuth, setAuth } from "@/helpers/utils";
|
|
|
|
-import styles from "./login.module.less";
|
|
|
|
-
|
|
|
|
-type loginType = 'PWD' | 'SMS';
|
|
|
|
-export default defineComponent({
|
|
|
|
- name: 'login',
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- loginType: 'SMS' as loginType,
|
|
|
|
- username: '',
|
|
|
|
- password: '',
|
|
|
|
- smsCode: '',
|
|
|
|
- countDownStatus: true, // 是否发送验证码
|
|
|
|
- countDownTime: 1000 * 120, // 倒计时时间
|
|
|
|
- countDownRef: null as any, // 倒计时实例
|
|
|
|
- imgCodeStatus: false,
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- codeDisable() {
|
|
|
|
- let status = true;
|
|
|
|
- if (this.loginType === 'PWD') {
|
|
|
|
- this.username && this.password && (status = false);
|
|
|
|
- } else {
|
|
|
|
- this.username && this.smsCode && (status = false);
|
|
|
|
- }
|
|
|
|
- return status;
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- removeAuth();
|
|
|
|
- this.directNext();
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- directNext() {
|
|
|
|
- if (state.user.status === "login" || state.user.status === "error") {
|
|
|
|
- const { returnUrl, isRegister, ...rest } = this.$route.query;
|
|
|
|
- this.$router.replace({
|
|
|
|
- path: returnUrl as any,
|
|
|
|
- query: {
|
|
|
|
- ...rest,
|
|
|
|
- },
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- async onLogin() {
|
|
|
|
- try {
|
|
|
|
- let res: any;
|
|
|
|
- if (this.loginType === 'PWD') {
|
|
|
|
- res = await request.post('/api-auth/usernameLogin', {
|
|
|
|
- data: {
|
|
|
|
- username: this.username,
|
|
|
|
- password: this.password,
|
|
|
|
- clientId: 'student',
|
|
|
|
- clientSecret: 'student'
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- } else {
|
|
|
|
- res = await request.post('/api-auth/smsLogin', {
|
|
|
|
- data: {
|
|
|
|
- clientId: 'student',
|
|
|
|
- clientSecret: 'student',
|
|
|
|
- phone: this.username,
|
|
|
|
- smsCode: this.smsCode,
|
|
|
|
- channel: 'H5'
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- const { authentication } = res.data;
|
|
|
|
- setAuth(authentication.token_type + " " + authentication.access_token);
|
|
|
|
-
|
|
|
|
- let userCash = await request.get('/api-student/userCashAccount/get', {
|
|
|
|
- initRequest: true // 初始化接口
|
|
|
|
- })
|
|
|
|
- setLogin(userCash.data)
|
|
|
|
-
|
|
|
|
- this.directNext();
|
|
|
|
- } catch {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- async onSendCode() { // 发送验证码
|
|
|
|
- if(!checkPhone(this.username)) {
|
|
|
|
- return Toast('请输入正确的手机号码');
|
|
|
|
- }
|
|
|
|
- this.imgCodeStatus = true
|
|
|
|
- },
|
|
|
|
- onCodeSend() {
|
|
|
|
- this.countDownStatus = false;
|
|
|
|
- this.countDownRef.start();
|
|
|
|
- },
|
|
|
|
- onFinished() {
|
|
|
|
- this.countDownStatus = true;
|
|
|
|
- this.countDownRef.reset();
|
|
|
|
- },
|
|
|
|
- onChange() {
|
|
|
|
- if (this.loginType === 'PWD') {
|
|
|
|
- this.loginType = 'SMS'
|
|
|
|
- } else if (this.loginType === 'SMS') {
|
|
|
|
- this.loginType = 'PWD'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- render() {
|
|
|
|
- return (
|
|
|
|
- <div class={styles.login}>
|
|
|
|
- <div class={styles.loginTitle}>您好,<br /> 欢迎使用酷乐秀</div>
|
|
|
|
- <CellGroup class={styles.margin34} border={false}>
|
|
|
|
- <Row style={{ marginBottom: '16px' }}>
|
|
|
|
- <Col span={24} class={styles.formTitle}>手机号</Col>
|
|
|
|
- <Col span={24} class="van-hairline--bottom">
|
|
|
|
- <Field
|
|
|
|
- v-model={this.username}
|
|
|
|
- name="手机号"
|
|
|
|
- placeholder="请输入您的手机号"
|
|
|
|
- type="tel"
|
|
|
|
- maxlength={11}
|
|
|
|
- />
|
|
|
|
- </Col>
|
|
|
|
- </Row>
|
|
|
|
-
|
|
|
|
- {this.loginType === 'PWD' ? <Row>
|
|
|
|
- <Col span={24} class={styles.formTitle}>密码</Col>
|
|
|
|
- <Col span={24} class="van-hairline--bottom">
|
|
|
|
- <Field
|
|
|
|
- v-model={this.password}
|
|
|
|
- type="password"
|
|
|
|
- name="密码"
|
|
|
|
- placeholder="请输入密码"
|
|
|
|
- />
|
|
|
|
- </Col>
|
|
|
|
- </Row> : <Row>
|
|
|
|
- <Col span={24} class={styles.formTitle}>密码</Col>
|
|
|
|
- <Col span={24} class="van-hairline--bottom">
|
|
|
|
- <Field
|
|
|
|
- v-model={this.smsCode}
|
|
|
|
- name="验证码"
|
|
|
|
- placeholder="请输入验证码"
|
|
|
|
- type="tel"
|
|
|
|
- maxlength={6}
|
|
|
|
- // @ts-ignore
|
|
|
|
- vSlots={{
|
|
|
|
- button: () => (
|
|
|
|
- this.countDownStatus ? <span class={styles.codeText} onClick={this.onSendCode}>获取验证码</span> : <CountDown ref={this.countDownRef} auto-start={false} time={this.countDownTime} onFinish={this.onFinished} format="ss秒" />
|
|
|
|
- )
|
|
|
|
- }}
|
|
|
|
- />
|
|
|
|
- </Col>
|
|
|
|
- </Row>}
|
|
|
|
-
|
|
|
|
- </CellGroup>
|
|
|
|
- <div class={styles.margin34}>
|
|
|
|
- <Button round block type="primary" disabled={this.codeDisable} onClick={this.onLogin}>
|
|
|
|
- 提交
|
|
|
|
- </Button>
|
|
|
|
- <Button block round color="#F5F7FB" onClick={this.onChange}>{this.loginType === 'PWD' ? '验证码登录' : '密码登录'}</Button>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- {this.imgCodeStatus ? <ImgCode v-model:value={this.imgCodeStatus} phone={this.username} onClose={() => { this.imgCodeStatus = false }} onSendCode={this.onCodeSend} /> : null}
|
|
|
|
- </div>
|
|
|
|
- )
|
|
|
|
- }
|
|
|
|
-})
|
|
|
|
|
|
+import { defineComponent } from "vue";
|
|
|
|
+import { CellGroup, Field, Button, CountDown, Row, Col, Toast } from "vant";
|
|
|
|
+import ImgCode from "@/components/col-img-code";
|
|
|
|
+import { checkPhone } from "@/helpers/validate";
|
|
|
|
+import request from "@/helpers/request";
|
|
|
|
+import { setLogin, state } from "@/state";
|
|
|
|
+import { removeAuth, setAuth } from "@/helpers/utils";
|
|
|
|
+import styles from "./login.module.less";
|
|
|
|
+
|
|
|
|
+type loginType = 'PWD' | 'SMS';
|
|
|
|
+export default defineComponent({
|
|
|
|
+ name: 'login',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ loginType: 'SMS' as loginType,
|
|
|
|
+ username: '',
|
|
|
|
+ password: '',
|
|
|
|
+ smsCode: '',
|
|
|
|
+ countDownStatus: true, // 是否发送验证码
|
|
|
|
+ countDownTime: 1000 * 120, // 倒计时时间
|
|
|
|
+ countDownRef: null as any, // 倒计时实例
|
|
|
|
+ imgCodeStatus: false,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ codeDisable() {
|
|
|
|
+ let status = true;
|
|
|
|
+ if (this.loginType === 'PWD') {
|
|
|
|
+ this.username && this.password && (status = false);
|
|
|
|
+ } else {
|
|
|
|
+ this.username && this.smsCode && (status = false);
|
|
|
|
+ }
|
|
|
|
+ return status;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ removeAuth();
|
|
|
|
+ this.directNext();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ directNext() {
|
|
|
|
+ if (state.user.status === "login" || state.user.status === "error") {
|
|
|
|
+ const { returnUrl, isRegister, ...rest } = this.$route.query;
|
|
|
|
+ this.$router.replace({
|
|
|
|
+ path: returnUrl as any,
|
|
|
|
+ query: {
|
|
|
|
+ ...rest,
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ async onLogin() {
|
|
|
|
+ try {
|
|
|
|
+ let res: any;
|
|
|
|
+ if (this.loginType === 'PWD') {
|
|
|
|
+ res = await request.post('/api-auth/usernameLogin', {
|
|
|
|
+ data: {
|
|
|
|
+ username: this.username,
|
|
|
|
+ password: this.password,
|
|
|
|
+ clientId: 'student',
|
|
|
|
+ clientSecret: 'student'
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ res = await request.post('/api-auth/smsLogin', {
|
|
|
|
+ data: {
|
|
|
|
+ clientId: 'student',
|
|
|
|
+ clientSecret: 'student',
|
|
|
|
+ phone: this.username,
|
|
|
|
+ smsCode: this.smsCode,
|
|
|
|
+ channel: 'H5'
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const { authentication } = res.data;
|
|
|
|
+ setAuth(authentication.token_type + " " + authentication.access_token);
|
|
|
|
+
|
|
|
|
+ let userCash = await request.get('/api-student/userCashAccount/get', {
|
|
|
|
+ initRequest: true // 初始化接口
|
|
|
|
+ })
|
|
|
|
+ setLogin(userCash.data)
|
|
|
|
+
|
|
|
|
+ this.directNext();
|
|
|
|
+ } catch {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ async onSendCode() { // 发送验证码
|
|
|
|
+ if(!checkPhone(this.username)) {
|
|
|
|
+ return Toast('请输入正确的手机号码');
|
|
|
|
+ }
|
|
|
|
+ this.imgCodeStatus = true
|
|
|
|
+ },
|
|
|
|
+ onCodeSend() {
|
|
|
|
+ this.countDownStatus = false;
|
|
|
|
+ this.countDownRef.start();
|
|
|
|
+ },
|
|
|
|
+ onFinished() {
|
|
|
|
+ this.countDownStatus = true;
|
|
|
|
+ this.countDownRef.reset();
|
|
|
|
+ },
|
|
|
|
+ onChange() {
|
|
|
|
+ if (this.loginType === 'PWD') {
|
|
|
|
+ this.loginType = 'SMS'
|
|
|
|
+ } else if (this.loginType === 'SMS') {
|
|
|
|
+ this.loginType = 'PWD'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ render() {
|
|
|
|
+ return (
|
|
|
|
+ <div class={styles.login}>
|
|
|
|
+ <div class={styles.loginTitle}>您好,<br /> 欢迎使用酷乐秀</div>
|
|
|
|
+ <CellGroup class={styles.margin34} border={false}>
|
|
|
|
+ <Row style={{ marginBottom: '16px' }}>
|
|
|
|
+ <Col span={24} class={styles.formTitle}>手机号</Col>
|
|
|
|
+ <Col span={24} class="van-hairline--bottom">
|
|
|
|
+ <Field
|
|
|
|
+ v-model={this.username}
|
|
|
|
+ name="手机号"
|
|
|
|
+ placeholder="请输入您的手机号"
|
|
|
|
+ type="tel"
|
|
|
|
+ maxlength={11}
|
|
|
|
+ />
|
|
|
|
+ </Col>
|
|
|
|
+ </Row>
|
|
|
|
+
|
|
|
|
+ {this.loginType === 'PWD' ? <Row>
|
|
|
|
+ <Col span={24} class={styles.formTitle}>密码</Col>
|
|
|
|
+ <Col span={24} class="van-hairline--bottom">
|
|
|
|
+ <Field
|
|
|
|
+ v-model={this.password}
|
|
|
|
+ type="password"
|
|
|
|
+ name="密码"
|
|
|
|
+ placeholder="请输入密码"
|
|
|
|
+ />
|
|
|
|
+ </Col>
|
|
|
|
+ </Row> : <Row>
|
|
|
|
+ <Col span={24} class={styles.formTitle}>密码</Col>
|
|
|
|
+ <Col span={24} class="van-hairline--bottom">
|
|
|
|
+ <Field
|
|
|
|
+ v-model={this.smsCode}
|
|
|
|
+ name="验证码"
|
|
|
|
+ placeholder="请输入验证码"
|
|
|
|
+ type="tel"
|
|
|
|
+ maxlength={6}
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ vSlots={{
|
|
|
|
+ button: () => (
|
|
|
|
+ this.countDownStatus ? <span class={styles.codeText} onClick={this.onSendCode}>获取验证码</span> : <CountDown ref={this.countDownRef} auto-start={false} time={this.countDownTime} onFinish={this.onFinished} format="ss秒" />
|
|
|
|
+ )
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ </Col>
|
|
|
|
+ </Row>}
|
|
|
|
+
|
|
|
|
+ </CellGroup>
|
|
|
|
+ <div class={styles.margin34}>
|
|
|
|
+ <Button round block type="primary" disabled={this.codeDisable} onClick={this.onLogin}>
|
|
|
|
+ 提交
|
|
|
|
+ </Button>
|
|
|
|
+ <Button block round color="#F5F7FB" onClick={this.onChange}>{this.loginType === 'PWD' ? '验证码登录' : '密码登录'}</Button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {this.imgCodeStatus ? <ImgCode v-model:value={this.imgCodeStatus} phone={this.username} onClose={() => { this.imgCodeStatus = false }} onSendCode={this.onCodeSend} /> : null}
|
|
|
|
+ </div>
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+})
|