|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="../../assets/images/logo.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <div class="input-group">
|
|
|
+ <input type="number" @blur="codeBlur" placeholder="请输入手机号报名或查询进度" class="input" v-model="phoneNumber" pattern="[0-9]">
|
|
|
+ </div>
|
|
|
+ <div class="input-group">
|
|
|
+ <input type="text" @blur="codeBlur" placeholder="请输入验证码" class="input" v-model="code" >
|
|
|
+ <span class="code-text" v-show="countDownStatus" @click="onSendCode">{{ codeText }}</span>
|
|
|
+ <span class="code-text" v-show="!countDownStatus">
|
|
|
+ <van-count-down
|
|
|
+ ref="countdown"
|
|
|
+ :auto-start="false"
|
|
|
+ :time="countDownTime"
|
|
|
+ @finish="onFinished"
|
|
|
+ format="ss秒" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-button round size="large" @click="onCodeLogin" :disabled="codeDisable">登录</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {sendSms, smsLogin } from '@/api/app'
|
|
|
+export default {
|
|
|
+ name: 'login',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ groupId: this.$route.query.groupId,
|
|
|
+ codeDisable: true, // 验证码登录按钮状态
|
|
|
+ countDownStatus: true, // 到计时状态
|
|
|
+ phoneNumber: null,
|
|
|
+ code: null,
|
|
|
+ codeText: '获取验证码',
|
|
|
+ countDownTime: 1000 * 120 // 倒计时时间
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 登录时删除无用的token
|
|
|
+ localStorage.removeItem('userInfo')
|
|
|
+ localStorage.removeItem('Authorization')
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ phoneNumber(newValue) {
|
|
|
+ this.onKeyUp(newValue, this.code)
|
|
|
+ },
|
|
|
+ code(newValue) {
|
|
|
+ this.onKeyUp(this.phoneNumber, newValue)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ codeBlur() {
|
|
|
+ setTimeout(() => {
|
|
|
+ const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
|
+ window.scrollTo(0, Math.max(scrollHeight - 1, 0));
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+ onKeyUp(phoneNumber, code) {
|
|
|
+ if(!phoneNumber || !code) {
|
|
|
+ this.codeDisable = true
|
|
|
+ } else {
|
|
|
+ this.codeDisable = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSendCode() { // 发送验证码
|
|
|
+ if(!this.checkPhone(this.phoneNumber)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ sendSms({
|
|
|
+ mobile: this.phoneNumber
|
|
|
+ }).then(res => {
|
|
|
+ let result = res.data
|
|
|
+ if(result.code == 200) {
|
|
|
+ this.countDownStatus = false
|
|
|
+ this.$refs.countdown.start() // 倒计时开始
|
|
|
+ } else {
|
|
|
+ this.$toast(result.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCodeLogin() { // 短信登录
|
|
|
+ smsLogin({
|
|
|
+ clientId: 'student',
|
|
|
+ clientSecret: 'student',
|
|
|
+ phone: this.phoneNumber,
|
|
|
+ smsCode: this.code,
|
|
|
+ channel: 'H5',
|
|
|
+ isLessee: 'true'
|
|
|
+ }).then(sms => {
|
|
|
+ let s = sms.data
|
|
|
+ // 保存用户信息
|
|
|
+ if(s.code == 200) {
|
|
|
+ let auth = s.data.authentication
|
|
|
+ localStorage.setItem('userInfo', auth.token_type + ' ' + auth.access_token)
|
|
|
+
|
|
|
+ this.$router.push({
|
|
|
+ path: '/classDetail',
|
|
|
+ query: {
|
|
|
+ groupId: this.groupId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$toast(s.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onFinished() { // 倒计时结束
|
|
|
+ this.countDownStatus = true
|
|
|
+ this.$refs.countdown.reset()
|
|
|
+ },
|
|
|
+ checkPhone(phoneNumber) {
|
|
|
+ let result = true
|
|
|
+ if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNumber))){
|
|
|
+ this.$toast('手机号输入有误')
|
|
|
+ result = false
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+@import url("../../assets/commonLess/variable.less");
|
|
|
+
|
|
|
+.login {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: linear-gradient(to bottom, #15938B, #6dbeba);
|
|
|
+}
|
|
|
+.container {
|
|
|
+ padding: 0 .48rem;
|
|
|
+}
|
|
|
+.logo {
|
|
|
+ padding-top: 1rem;
|
|
|
+ padding-bottom: .9rem;
|
|
|
+ width: 1.6rem;
|
|
|
+ margin: 0 auto;
|
|
|
+ img {
|
|
|
+ width: inherit;
|
|
|
+ }
|
|
|
+}
|
|
|
+.input-group {
|
|
|
+ position: relative;
|
|
|
+ height: .44rem;
|
|
|
+ border-radius: .5rem;
|
|
|
+ border: .02rem solid @whiteColor;
|
|
|
+ margin-bottom: .2rem;
|
|
|
+ padding-left: .3rem;
|
|
|
+ padding-right: .3rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: @whiteColor;
|
|
|
+
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ &::placeholder {
|
|
|
+ color: @whiteColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code-text {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ flex: 1;
|
|
|
+ display: block;
|
|
|
+ width: .94rem;
|
|
|
+ text-align: center;
|
|
|
+ border-left: .02rem solid @whiteColor;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: @whiteColor;
|
|
|
+ line-height: .3rem;
|
|
|
+ height: .3rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.van-count-down {
|
|
|
+ font-size: .14rem;
|
|
|
+ color: @whiteColor;
|
|
|
+ line-height: .3rem;
|
|
|
+ height: .3rem;
|
|
|
+}
|
|
|
+/deep/.van-button--large {
|
|
|
+ height: .44rem;
|
|
|
+ line-height: .42rem;
|
|
|
+ color: @mColor;
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+/deep/.van-button:active::before {
|
|
|
+ opacity: 0.05;
|
|
|
+}
|
|
|
+/deep/.van-button--disabled {
|
|
|
+ opacity: 1;
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+}
|
|
|
+.login-change {
|
|
|
+ padding-top: .08rem;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: @whiteColor;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+</style>
|