From cad1275cc3b92de8f03cc8fa66f703b9a13c1398 Mon Sep 17 00:00:00 2001
From: wangqing <250543222@qq.com>
Date: Sat, 12 Jun 2021 22:57:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/account.js        |   3 -
 src/theme/breadcrumb-item.css        |   0
 src/views/account/ForgetPwd.vue      |  22 ++-
 src/views/account/login.vue          |   9 +-
 src/views/account/login/index.vue    |  58 ++++++-
 src/views/account/register/index.vue | 220 +++++++++++++++++++++++++++
 vue.config.js                        |  37 -----
 7 files changed, 295 insertions(+), 54 deletions(-)
 delete mode 100644 src/router/modules/account.js
 delete mode 100644 src/theme/breadcrumb-item.css
 create mode 100644 src/views/account/register/index.vue

diff --git a/src/router/modules/account.js b/src/router/modules/account.js
deleted file mode 100644
index 556c82e..0000000
--- a/src/router/modules/account.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default [
-
-]
diff --git a/src/theme/breadcrumb-item.css b/src/theme/breadcrumb-item.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/account/ForgetPwd.vue b/src/views/account/ForgetPwd.vue
index 2863a1a..a136654 100644
--- a/src/views/account/ForgetPwd.vue
+++ b/src/views/account/ForgetPwd.vue
@@ -2,6 +2,9 @@
     <div class="app-container">
         <div v-if="retrieveStep===1" class="pwd-container">
             <div>
+                <img class="header-logo-img" src="@/assets/images/indexLogo.png"
+                     @click="$router.push({path:'/'})"
+                >
                 <h4 class="title">找回密码</h4>
                 <el-tabs
                     v-model="retrieveType"
@@ -56,6 +59,9 @@
             </div>
         </div>
         <div v-if="retrieveStep===2" class="reset-pwd-view">
+            <img class="header-logo-img" src="@/assets/images/indexLogo.png"
+                 @click="$router.push({path:'/'})"
+            >
             <div>
                 <h4 class="title">重置密码</h4>
                 <div class="rest-pwd-user-view">
@@ -262,8 +268,16 @@ export default {
   display: flex;
   justify-content: center;
   align-content: center;
+  align-items: center;
 }
 
+.header-logo-img {
+  width: 120px;
+  height: 35px;
+  float: left;
+  margin-left: 25px;
+  cursor: pointer;
+}
 .title {
   color: rgba(16, 16, 16, 100);
   font-size: 28px;
@@ -271,10 +285,11 @@ export default {
 }
 
 .pwd-container {
-  width: 20%;
+  width: 25%;
   height: 50%;
   align-content: center;
-
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 50px;
   div {
     width: 350px;
   }
@@ -283,7 +298,8 @@ export default {
 .reset-pwd-view {
   div {
     width: 350px;
-
+    padding: 50px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     .rest-pwd-user-view {
       line-height: 80px;
       height: 100px;
diff --git a/src/views/account/login.vue b/src/views/account/login.vue
index 726e55f..420783a 100644
--- a/src/views/account/login.vue
+++ b/src/views/account/login.vue
@@ -188,8 +188,8 @@
                         </el-form>
                     </el-tab-pane>
                     <div class="flex-row">
-                        <el-link class="ml-20" @click="toForgetPwdHandle">忘记密码</el-link>
-                        <el-link class="ml-20" @click="registerHandleClick">立即注册</el-link>
+                        <el-link class="ml-20 link-btn" @click="toForgetPwdHandle">忘记密码</el-link>
+                        <el-link class="ml-20 link-btn" @click="registerHandleClick">立即注册</el-link>
                         <div class="other-login">
                             <span @click="redirectUrl(qqLoginAuthorizeUrl)">
                                 <svg-icon class="other-login-icon" name="loginQQ" />
@@ -488,10 +488,13 @@ export default {
     width: 300px;
 }
 .code-input {
-    width: 150px;
+    width: 180px;
 }
 .account-login-form {
     text-align: left;
+}other-login-icon
+.link-btn{
+  font-size: 12px!important;
 }
 .account-login-form .el-form-item--small.el-form-item {
     margin-bottom: 8px;
diff --git a/src/views/account/login/index.vue b/src/views/account/login/index.vue
index bcd9f12..27b62c1 100644
--- a/src/views/account/login/index.vue
+++ b/src/views/account/login/index.vue
@@ -6,7 +6,7 @@
         <div class="logo-content">
             <span class="hello">Hello ，</span>
             <span class="tips">欢迎使用Tduck！</span>
-            <el-tabs v-model="loginType" class="login-form-tab">
+            <el-tabs v-if="formType=='login'" v-model="loginType" class="login-form-tab">
                 <el-tab-pane v-if="enableWx" label="微信扫码登录" name="wx">
                     <div class="wx-login">
                         <div class="flex-center">
@@ -51,10 +51,18 @@
                         </el-form-item>
                         <el-form-item>
                             <el-button type="primary" @click="loginHandle">登录</el-button>
+                            <el-link class="ml-20 link-btn" @click="toForgetPwdHandle">忘记密码</el-link>
+                            <el-link class="ml-20 link-btn" @click="formType='reg'">立即注册</el-link>
                         </el-form-item>
+                        <div class="other-login">
+                            <span @click="redirectUrl(qqLoginAuthorizeUrl)">
+                                <svg-icon class="other-login-icon" name="loginQQ" />
+                            </span>
+                        </div>
                     </el-form>
                 </el-tab-pane>
             </el-tabs>
+            <register v-else @success="registerSuccessHandle" />
             <p class="desc">
                 关于TDuckApp登录
             </p>
@@ -71,9 +79,13 @@
 import {getCurrentDomain} from '@/utils'
 // 引入组件
 import constants from '@/utils/constants'
+import Register from '../register/index.vue'
 
 export default {
     name: 'Login',
+    components: {
+        Register
+    },
     data() {
         const validateAccount = (rule, value, callback) => {
             const reg1 = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
@@ -85,6 +97,7 @@ export default {
             }
         }
         return {
+            formType: 'login',
             loginType: 'account',
             agreeProtocol: '',
             accountLoginRules: {
@@ -185,14 +198,26 @@ export default {
                 }
             })
         },
+        registerSuccessHandle() {
+            this.formType = 'login'
+            this.loginType = 'account'
+        },
         loginHandle() {
-            this.$api.request({
-                url: '/login/account',
-                method: 'post',
-                data: this.accountForm
-            }).then(res => {
-                this.loginSuccessHandle(res.data)
+            this.$refs['accountLoginForm'].validate(valid => {
+                if (valid) {
+                    this.$api.request({
+                        url: '/login/account',
+                        method: 'post',
+                        data: this.accountForm
+                    }).then(res => {
+                        this.loginSuccessHandle(res.data)
+                    })
+                } else {
+                    console.log('error submit!!')
+                    return false
+                }
             })
+
         }
     }
 }
@@ -250,6 +275,11 @@ export default {
   }
 }
 
+.other-login-icon {
+  font-size: 25px;
+  cursor: pointer;
+}
+
 .logo-content ::v-deep.el-tabs__nav-wrap::after {
   position: static !important;
 }
@@ -268,11 +298,23 @@ export default {
 
 ::v-deep .el-input {
   height: 39px !important;
+  line-height: 39px !important;
+}
+
+.link-btn {
+  font-size: 12px !important;
 }
 
 ::v-deep .el-input__inner {
   height: 39px !important;
-  background: transparent;
+  line-height: 39px !important;
+  background: #F2F2F2 !important;
+  border: none;
 }
 
+::v-deep .el-button {
+  background: #408EFC;
+  border-radius: 10px;
+  width: 145px;
+}
 </style>
diff --git a/src/views/account/register/index.vue b/src/views/account/register/index.vue
new file mode 100644
index 0000000..edf36b7
--- /dev/null
+++ b/src/views/account/register/index.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="register-container">
+        <p class="tips">注册成为Tduck体验用户~</p>
+        <el-tabs v-model="regType" class="register-form">
+            <el-tab-pane label="手机号注册" name="regPhone">
+                <el-form ref="phoneRegForm" :model="accountForm" :rules="phoneRegRules" label-width="0px">
+                    <el-form-item label="" prop="phoneNumber">
+                        <el-input v-model="accountForm.phoneNumber" prefix-icon="el-icon-user-solid" autocomplete="off" placeholder="请输入手机号" />
+                    </el-form-item>
+                    <el-form-item label="" prop="password">
+                        <el-input v-model="accountForm.password" autocomplete="off" placeholder="请输入密码"
+                                  show-password
+                                  prefix-icon="el-icon-lock"
+                        />
+                    </el-form-item>
+                    <el-form-item label="" prop="code">
+                        <el-input v-model="accountForm.code" autocomplete="off" class="code-input"
+                                  placeholder="请输入验证码"
+                        >
+                            <font-icon
+                                slot="prefix"
+                                class=" el-input__icon fa fa-shield"
+                            />
+                        </el-input>
+                        <el-button :disabled="phoneValidateCodeBtn" class="ml-20" type="primary"
+                                   @click="sendPhoneCodeHandle"
+                        >
+                            {{ phoneValidateCodeBtnText }}
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button class="width-full" type="primary" @click="phoneRegHandle">确定</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="邮箱注册" name="regEmail">
+                <el-form ref="emailRegForm" :model="accountForm" :rules="emailRegRules" label-width="0px"
+                         status-icon
+                >
+                    <el-form-item label="" prop="email">
+                        <el-input v-model="accountForm.email" prefix-icon="el-icon-user-solid" autocomplete="off" placeholder="请输入邮箱" />
+                    </el-form-item>
+                    <el-form-item label="" prop="password">
+                        <el-input v-model="accountForm.password" autocomplete="off" placeholder="请输入密码"
+                                  prefix-icon="el-icon-lock"
+                                  show-password
+                        />
+                    </el-form-item>
+                    <el-form-item label="" prop="code">
+                        <el-input v-model="accountForm.code" autocomplete="off"
+                                  class="code-input" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
+                                  placeholder="请输入验证码"
+                        >
+                            <font-icon
+                                slot="prefix"
+                                class=" el-input__icon fa fa-shield"
+                            />
+                        </el-input>
+                        <el-button :disabled="emailValidateCodeBtn" class="ml-20" type="primary"
+                                   @click="sendEmailCodeHandle"
+                        >
+                            {{ emailValidateCodeBtnText }}
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button class="width-full" type="primary" @click="emailRegHandle">确定</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script>
+
+// 引入组件
+import constants from '@/utils/constants'
+
+export default {
+    name: 'Register',
+    data() {
+        return {
+            regType: 'regPhone',
+            accountForm: {
+                email: '',
+                phoneNumber: '',
+                password: ''
+            },
+            emailValidateCodeBtn: false,
+            emailValidateCodeBtnText: '发送验证码',
+            phoneValidateCodeBtn: false,
+            phoneValidateCodeBtnText: '发送验证码',
+            phoneRegRules: {
+                phoneNumber: [
+                    {required: true, trigger: 'blur', message: '请输入手机号'},
+                    {
+                        pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
+                        message: '请输入正确的手机号'
+                    }
+                ],
+                password: [
+                    {required: true, trigger: 'blur', message: '请输入新密码'},
+                    {
+                        pattern: constants.passwordReg,
+                        message: constants.passwordRegDesc
+                    }
+                ],
+                code: {required: true, trigger: 'blur', message: '请输入验证码'}
+            },
+            emailRegRules: {
+                email: [
+                    {required: true, trigger: 'blur', message: '请输入邮箱'},
+                    {
+                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
+                        message: '请输入正确的邮箱'
+                    }
+                ],
+                password: [
+                    {required: true, trigger: 'blur', message: '请输入新密码'},
+                    {
+                        pattern: constants.passwordReg,
+                        message: constants.passwordRegDesc
+                    }
+                ],
+                code: {required: true, trigger: 'blur', message: '请输入验证码'}
+            }
+        }
+    },
+    created() {
+    },
+    destroyed() {
+    },
+    methods: {
+        sendEmailCodeHandle() {
+            this.$refs['emailRegForm'].validateField('email', err => {
+                if (!err) {
+                    this.emailValidateCodeBtn = true
+                    this.$api.get(`/register/email/code?email=${this.accountForm.email}`).then(() => {
+                        this.msgSuccess('验证码发送成功，5分钟内有效')
+                        this.emailValidateCodeBtn = true
+                        let count = 60
+                        let timer = setInterval(() => {
+                            count--
+                            this.emailValidateCodeBtnText = count + 's后重新发送'
+                            if (count == 0) {
+                                this.emailValidateCodeBtnText = '发送验证码'
+                                this.emailValidateCodeBtn = false
+                                clearInterval(timer)
+                            }
+                        }, 1000)
+                    })
+                }
+            })
+        },
+        sendPhoneCodeHandle() {
+            this.$refs['phoneRegForm'].validateField('phoneNumber', err => {
+                if (!err) {
+                    this.phoneValidateCodeBtn = true
+                    this.$api.get(`/register/phone/code?phoneNumber=${this.accountForm.phoneNumber}`).then(() => {
+                        this.msgSuccess('验证码发送成功，5分钟内有效')
+                        this.phoneValidateCodeBtn = true
+                        let count = 60
+                        let timer = setInterval(() => {
+                            count--
+                            this.phoneValidateCodeBtnText = count + 's后重新发送'
+                            if (count == 0) {
+                                this.phoneValidateCodeBtnText = '发送验证码'
+                                this.phoneValidateCodeBtn = false
+                                clearInterval(timer)
+                            }
+                        }, 1000)
+                    })
+                }
+            })
+        },
+        phoneRegHandle() {
+            this.$refs['phoneRegForm'].validate(valid => {
+                if (valid) {
+                    this.$api.post('/register/phone', this.accountForm).then(() => {
+                        this.registerSuccessHandle()
+                    })
+                } else {
+                    return false
+                }
+            })
+        },
+        emailRegHandle() {
+            this.$refs['emailRegForm'].validate(valid => {
+                if (valid) {
+                    this.$api.post('/register/email', this.accountForm).then(() => {
+                        this.registerSuccessHandle()
+                    })
+                } else {
+                    return false
+                }
+            })
+        },
+        registerSuccessHandle() {
+            this.msgSuccess('注册成功，快去登录吧')
+            setTimeout(() => {
+                this.$emit('success')
+            }, 1000)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.register-container{
+  .tips{
+    height: 15px;
+    font-size: 15px;
+    font-weight: 300;
+    color: #10141C;
+    line-height: 20px;
+  }
+}
+.code-input {
+  width: 180px;
+}
+
+</style>
diff --git a/vue.config.js b/vue.config.js
index ac85087..c043ce0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -72,42 +72,5 @@ module.exports = {
             })
             .end()
 
-      config
-        .when(process.env.NODE_ENV !== 'development',
-          config => {
-            config
-              .plugin('ScriptExtHtmlWebpackPlugin')
-              .after('html')
-              .use('script-ext-html-webpack-plugin', [{
-                // `runtime` must same as runtimeChunk name. default is `runtime`
-                inline: /runtime\..*\.js$/
-              }])
-              .end()
-            config
-              .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          }
-        )
     }
 }