Bladeren bron

登录样式修改,注释部分无依赖的模块

wolyshaw 3 jaren geleden
bovenliggende
commit
38356c80a6
3 gewijzigde bestanden met toevoegingen van 188 en 176 verwijderingen
  1. 15 14
      src/student/layout/login.module.less
  2. 166 156
      src/student/layout/login.tsx
  3. 7 6
      src/teacher/App.vue

+ 15 - 14
src/student/layout/login.module.less

@@ -1,14 +1,15 @@
-.login {
-  min-height: 100vh;
-  background: url('./images/top_bg.png') no-repeat top center, url('./images/bottom_bg.png') no-repeat bottom center;
-  background-color: #fff;
-
-  .loginTitle {
-    padding-top: 100px;
-    font-size: 26px;
-    padding-left: 35px;
-    padding-bottom: 70px;
-    line-height: 37px;
-    font-weight: 500;
-  }
-}
+.login {
+  min-height: 100vh;
+  background: url('./images/top_bg.png') no-repeat top center, url('./images/bottom_bg.png') no-repeat bottom center;
+  background-color: #fff;
+  background-size: contain;
+
+  .loginTitle {
+    padding-top: 100px;
+    font-size: 26px;
+    padding-left: 35px;
+    padding-bottom: 70px;
+    line-height: 37px;
+    font-weight: 500;
+  }
+}

+ 166 - 156
src/student/layout/login.tsx

@@ -1,156 +1,166 @@
-import { defineComponent } from "vue";
-import { CellGroup, Field, Button, CountDown } from "vant";
-import ImgCode from "@/components/imgCode";
-import request from "@/helpers/request";
-import { setLogin, state } from "@/student/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.phoneNumber)) {
-      //     return
-      // }
-      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 inset>
-          <Field
-            v-model={this.username}
-            name="手机号"
-            label="手机号"
-            placeholder="手机号"
-            type="tel"
-            maxlength={11}
-          />
-          { this.loginType === 'PWD' ? <Field
-            v-model={this.password}
-            type="password"
-            name="密码"
-            label="密码"
-            placeholder="密码"
-          /> : <Field
-            v-model={this.smsCode}
-            name="验证码"
-            label="验证码"
-            placeholder="验证码"
-            type="tel"
-            maxlength={6}
-            // @ts-ignore
-            vSlots={{
-              button: () => (
-                this.countDownStatus ? <Button size="small" round type="primary" onClick={this.onSendCode}>发送验证码</Button> :  <CountDown ref={this.countDownRef} auto-start="false" time={this.countDownTime} onFinish={this.onFinished} format="ss秒" />
-              )
-            }}
-          /> }
-
-        </CellGroup>
-        <div style="margin: 16px;">
-          <Button round block type="primary" disabled={this.codeDisable} onClick={this.onLogin}>
-            提交
-          </Button>
-          <Button plain 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 } from "vant";
+import ImgCode from "@/components/imgCode";
+import request from "@/helpers/request";
+import { setLogin, state } from "@/student/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.phoneNumber)) {
+      //     return
+      // }
+      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 inset>
+          <Field
+            v-model={this.username}
+            name="手机号"
+            label="手机号"
+            placeholder="手机号"
+            type="tel"
+            maxlength={11}
+          />
+          { this.loginType === 'PWD' ? <Field
+            v-model={this.password}
+            type="password"
+            name="密码"
+            label="密码"
+            placeholder="密码"
+          /> : <Field
+            v-model={this.smsCode}
+            name="验证码"
+            label="验证码"
+            placeholder="验证码"
+            type="tel"
+            maxlength={6}
+            // @ts-ignore
+            vSlots={{
+              button: () => (
+                this.countDownStatus ? (
+                  <Button
+                    size="small"
+                    round type="primary"
+                    onClick={this.onSendCode}
+                  >发送验证码</Button>
+                ) : (
+                  <CountDown ref={this.countDownRef} auto-start="false" time={this.countDownTime} onFinish={this.onFinished} format="ss秒" />
+                )
+              )
+            }}
+          /> }
+
+        </CellGroup>
+        <div style="margin: 16px;">
+          <Button round block type="primary" disabled={this.codeDisable} onClick={this.onLogin}>
+            提交
+          </Button>
+          <Button plain onClick={this.onChange}>{ this.loginType === 'PWD' ? '验证码登录' : '密码登录' }</Button>
+        </div>
+
+        { this.imgCodeStatus ? (
+          <ImgCode value={this.imgCodeStatus} phone={this.username} onClose={() => { this.imgCodeStatus = false }} onSendCode={this.onCodeSend} />
+        ) : null }
+      </div>
+    )
+  }
+})

+ 7 - 6
src/teacher/App.vue

@@ -1,16 +1,17 @@
 <template>
   <!-- <img alt="Vue logo" src="./common/assets/logo.png" /> -->
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
+  <div>12321</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import HelloWorld from '@components/HelloWorld.vue';
+// import HelloWorld from '@components/HelloWorld.vue';
 
 export default defineComponent({
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+  name: 'App'
+  // components: {
+  //   HelloWorld
+  // }
 });
 </script>