开发ing

src/views/login/index.vue

@@ -1,15 +1,27 @@
 <script>
 import Vue from 'vue'
-
+import countryCode from '@/lib/countryCode.json'
+import { sendSmsCode, sentEmailCode, register, confirmEmail } from '@/api/user'
 export default Vue.extend({
   name: 'Index',
   data() {
     return {
+      countryCode,
       username: '',
       password: '',
+      confirmPassword: '',
+      confirmCode: '',
       savePassword: false,
       loading: false,
       isLogin: true,
+      isPhone: true,
+      phone: '',
+      country_code: '86',
+      email: '',
+      code: '',
+      timer: null,
+      count: 0,
+      pre_register_key: '',
       env: process.env.NODE_ENV
     }
   },
@@ -17,6 +29,118 @@ export default Vue.extend({
     this.getSavedAccount()
   },
   methods: {
+    sentSMSCode() {
+      if (this.loading || this.timer) {
+        return
+      }
+      this.loading = true
+      sendSmsCode(this.phone, this.country_code).then(res => {
+        this.$notify({
+          title: '发送成功',
+          message: '短信验证码已发送，请注意查收',
+          type: 'success'
+        })
+        this.count = 60
+        this.timer = setInterval(() => {
+          if (this.count > 0) {
+            this.count--
+          } else {
+            clearInterval(this.timer)
+            this.timer = null
+          }
+        }, 1000)
+        this.loading = false
+      }).catch(err => {
+        this.loading = false
+      })
+    },
+    sentMailCode() {
+      if (this.loading || this.timer) {
+        return
+      }
+      this.loading = true
+      sentEmailCode(this.email).then(res => {
+        this.$notify({
+          title: '发送成功',
+          message: '邮件已发送，请注意查收',
+          type: 'success'
+        })
+        this.count = 60
+        this.timer = setInterval(() => {
+          if (this.count > 0) {
+            this.count--
+          } else {
+            clearInterval(this.timer)
+            this.timer = null
+          }
+        }, 1000)
+        this.loading = false
+      }).catch(err => {
+        this.loading = false
+      })
+    },
+    emailRegister() {
+      if (this.loading) {
+        return
+      }
+      if (this.email === '' || this.code === '' || this.password === '' || this.confirmPassword === '') {
+        this.$notify({
+          title: '提示',
+          message: '请填写邮箱和验证码！',
+          type: 'warning'
+        })
+      }
+      if (this.password !== this.confirmPassword) {
+        this.$notify({
+          title: '提示',
+          message: '密码不一致！',
+          type: 'warning'
+        })
+      }
+      this.loading = true
+      register(this.email, '', this.code, 1, 0).then(res =>{
+        this.pre_register_key = res.data.pre_register_key
+        confirmEmail(this.pre_register_key,this.password,this.confirmPassword).then(res => {
+          this.isLogin = true
+          this.$notify({
+            title: '注册成功',
+            message: '即将跳转至登录页。',
+            type: 'success'
+          })
+        }).catch(err => {
+          this.loading = false
+        })
+      }).catch(err => {
+        this.loading = false
+      })
+    },
+    phoneRegister() {
+      if (this.loading) {
+        return
+      }
+      if (this.phone === '' || this.code === '') {
+        this.$notify({
+          title: '提示',
+          message: '请填写电话号码和验证码！',
+          type: 'warning'
+        })
+        return
+      }
+      register(this.phone, this.country_code, this.code, 0, 0).then(res => {
+        this.isLogin = true
+        this.$notify({
+          title: '注册成功',
+          message: '即将跳转至登录页。',
+          type: 'success'
+        })
+      }).catch(err => {
+        this.$notify({
+          title: '注册失败',
+          message: '注册失败，请稍后重试。',
+          type: 'error'
+        })
+      })
+    },
     getSavedAccount() {
       const account = localStorage.getItem('savedAccount')
       if (account) {
@@ -65,16 +189,47 @@ export default Vue.extend({
       </div>
       <div class="cont-right">
         <div class="title">
-          <div @click="isLogin=true" :class="['item',isLogin?'active':'']">登录</div>
-          <div @click="isLogin=false" :class="['item',isLogin?'':'active']">注册</div>
+          <div :class="['item',isLogin?'active':'']" @click="isLogin=true">登录</div>
+          <div :class="['item',isLogin?'':'active']" @click="isLogin=false">注册</div>
         </div>
-        <el-input v-model="username" prefix-icon="el-icon-user" placeholder="请输入用户名" class="input" />
-        <el-input v-model="password" prefix-icon="el-icon-unlock" placeholder="请输入密码" show-password class="input" />
-        <el-checkbox v-model="savePassword">记住密码</el-checkbox>
-        <el-button type="primary" class="button" @click="login">
-          <span>登录</span>
-          <span class="el-icon-loading" v-if="loading"></span>
-        </el-button>
+        <template v-if="isLogin">
+          <el-input v-model="username" prefix-icon="el-icon-user" placeholder="请输入用户名" class="input" />
+          <el-input v-model="password" prefix-icon="el-icon-unlock" placeholder="请输入密码" show-password class="input" />
+          <el-checkbox v-model="savePassword">记住密码</el-checkbox>
+          <el-button type="primary" class="button" @click="login">
+            <span>登录</span>
+            <span v-if="loading" class="el-icon-loading" />
+          </el-button>
+        </template>
+        <template v-else>
+          <template v-if="isPhone">
+            <el-select v-model="country_code" placeholder="请选择国家">
+              <el-option v-for="(item,index) in countryCode" :key="item.country_code+index" :label="'+'+item.phone_code+'('+item.chinese_name+')'" :value="item.phone_code" />
+            </el-select>
+            <el-input v-model="phone" prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号码" class="input" />
+            <el-input v-model="code" prefix-icon="el-icon-key" placeholder="请输入验证码" class="input">
+              <el-button slot="append" :disabled="!!timer" :loading="loading" @click="sentSMSCode()">{{ timer?count+'s':'发送验证码' }}</el-button>
+            </el-input>
+            <div class="change-way" @click="isPhone=false">使用邮箱注册</div>
+            <el-button type="primary" class="button" @click="phoneRegister()">
+              <span>注册</span>
+              <span v-if="loading" class="el-icon-loading" />
+            </el-button>
+          </template>
+          <template v-else>
+            <el-input v-model="email" prefix-icon="el-icon-message" placeholder="请输入电子邮箱地址" class="input" />
+            <el-input v-model="code" prefix-icon="el-icon-key" placeholder="请输入验证码" class="input">
+              <el-button slot="append" :disabled="!!timer" :loading="loading" @click="sentMailCode()">{{ timer?count+'s':'发送验证码' }}</el-button>
+            </el-input>
+            <el-input v-model="password" prefix-icon="el-icon-unlock" placeholder="请输入密码" show-password class="input" />
+            <el-input v-model="confirmPassword" prefix-icon="el-icon-unlock" placeholder="请再次输入密码" show-password class="input" />
+            <div class="change-way" @click="isPhone=true">使用手机注册</div>
+            <el-button @click="emailRegister()" type="primary" class="button">
+              <span>注册</span>
+              <span v-if="loading" class="el-icon-loading" />
+            </el-button>
+          </template>
+        </template>
       </div>
     </div>
   </div>
@@ -168,6 +323,14 @@ export default Vue.extend({
           font-size: 16px;
           width: 400px;
         }
+        .change-way {
+          font-weight: 500;
+          line-height: 19px;
+          font-size: 15px;
+          color: #409EFF;
+          cursor: pointer;
+          width: fit-content;
+        }
       }
     }
   }