From 59b7fe402c12f9443446a349c3a12021f102a5b8 Mon Sep 17 00:00:00 2001
From: Dear Ma <15080929435@163.com>
Date: Wed, 5 May 2021 16:28:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Elogo/banner=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=EF=BC=8C=E6=9B=B4=E6=94=B9=E7=9B=B8=E5=85=B3=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/account/login2.vue        | 521 ++++++++++++++++++++++++++++
 src/views/official/index.vue        |  10 +-
 src/views/official/introduction.vue |   2 +-
 3 files changed, 529 insertions(+), 4 deletions(-)
 create mode 100644 src/views/account/login2.vue

diff --git a/src/views/account/login2.vue b/src/views/account/login2.vue
new file mode 100644
index 0000000..e83934c
--- /dev/null
+++ b/src/views/account/login2.vue
@@ -0,0 +1,521 @@
+<template>
+    <div class="login-container" style=" border-top: 0 solid #205bb5;">
+        <el-row class="login-body">
+            <el-col :span="5" :offset="4">
+                <img class="login-img" src="@/assets/images/5b968a75b5e42.png">
+            </el-col>
+            <el-col :offset="3" :span="12">
+                <el-tabs v-if="formType=='login'" v-model="loginType" class="login-form-tab" style="width: 320px;"
+                         @tab-click="loginTypeHandleClick"
+                >
+                    <el-tab-pane label="微信扫码登录2" name="wx">
+                        <div class="wx-login">
+                            <div style="text-align: center;">
+                                <el-image
+                                    v-loading="wxQrCodeLoading"
+                                    class="wx-login-qrcode"
+                                    :src="wxLoginQrCode"
+                                    fit="fill"
+                                    @load="(e)=>{
+                                        this.wxQrCodeLoading=false
+                                    }"
+                                />
+                            </div>
+                            <div style="text-align: center;">
+                                <el-link icon="el-icon-refresh-left"
+                                         :underline="false"
+                                         @click="getLoginWxQrCode"
+                                >
+                                    刷新二维码
+                                </el-link>
+                            </div>
+                            <el-divider style="width: 100px;" />
+                            <el-row>
+                                <el-col :span="6">
+                                    <el-link class="login-tip" @click="toForgetPwdHandle">忘记密码</el-link>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-link class="login-tip">
+                                        <el-link class="login-tip" @click="()=>{this.formType='reg'}">立即注册</el-link>
+                                    </el-link>
+                                </el-col>
+                                <el-col :span="9" :offset="3">
+                                    <div class="other-login">
+                                        <span @click="redirectUrl(qqLoginAuthorizeUrl)">
+                                            <svg-icon name="loginQQ" class="other-login-icon" />
+                                        </span>
+                                        <!--                                        <svg-icon name="loginWx" class="other-login-icon" />-->
+                                    </div>
+                                </el-col>
+                            </el-row>
+                            <el-divider style="width: 100px;" />
+                            <p class="login-tip">关于TDuckApp登录</p>
+                            <p class="login-tip">
+                                若微信扫码失败，请打开 微信授权页面 登录
+                                若QQ登录填鸭云异常，可查阅 帮助文档
+                                若因微信、QQ、公众号冻结或账号密码找回失败等无法登录，可 自助申请 登录账号
+                            </p>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="账号密码登录" name="account">
+                        <el-form ref="accountLoginForm" label-position="top" size="small" :model="accountForm"
+                                 :rules="accountLoginRules"
+                                 status-icon
+                                 hide-required-asterisk
+                                 class="account-login-form"
+                                 @keyup.enter="loginHandle"
+                        >
+                            <el-form-item label="手机号/邮箱登录" prop="account">
+                                <el-input v-model="accountForm.account" placeholder="请输入手机号/邮箱" autocomplete="off" />
+                            </el-form-item>
+                            <el-form-item label="密码" prop="password">
+                                <el-input v-model="accountForm.password" placeholder="请输入密码" autocomplete="off"
+                                          show-password
+                                />
+                            </el-form-item>
+                            <el-form-item label="">
+                                <el-row type="flex" align="middle">
+                                    <el-col :span="3">
+                                        <el-radio v-model="agreeProtocol" label="" />
+                                    </el-col>
+                                    <el-col :span="4">
+                                        <span class="protocol-tip">我已同意</span>
+                                    </el-col>
+                                    <el-col :span="10">
+                                        <el-link :underline="false" type="primary" class="protocol-tip">
+                                            《TDuck用户服务协议》
+                                        </el-link>
+                                    </el-col>
+                                    <el-col :span="6" :offset="1">
+                                        <el-link :underline="false" type="primary" class="protocol-tip"
+                                                 @click="toForgetPwdHandle"
+                                        >
+                                            忘记密码？
+                                        </el-link>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button style="width: 100%;" type="primary" @click="loginHandle">登录</el-button>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-row type="flex" align="middle">
+                                    <el-col :span="8" :offset="6">
+                                        <span class="protocol-tip">使用第三方登录 或 </span>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-link :underline="false" type="primary" class="protocol-tip"
+                                                 @click="()=>{this.formType='reg'}"
+                                        >
+                                            立即注册
+                                        </el-link>
+                                    </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :offset="8">
+                                        <div class="other-login">
+                                            <span @click="redirectUrl(qqLoginAuthorizeUrl)">
+                                                <svg-icon name="loginQQ" class="other-login-icon" />
+                                            </span>
+                                            <svg-icon name="loginWx"
+                                                      class="other-login-icon"
+                                                      @click="()=>{
+                                                          this.formType='login',
+                                                          this.loginType='wx'
+                                                      }"
+                                            />
+                                        </div>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                </el-tabs>
+                <el-tabs
+                    v-if="formType==='reg'" v-model="regType" class="login-form" style="width: 300px;"
+                    @tab-click="registerHandleClick"
+                >
+                    <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" placeholder="请输入手机号" autocomplete="off" />
+                            </el-form-item>
+                            <el-form-item label="" prop="password">
+                                <el-input v-model="accountForm.password" show-password placeholder="请输入密码"
+                                          autocomplete="off"
+                                />
+                            </el-form-item>
+                            <el-form-item label="" prop="code">
+                                <el-input v-model="accountForm.code" style="width: 150px;" placeholder="请输入验证码"
+                                          autocomplete="off"
+                                />
+                                <el-button style="margin-left: 20px;" :disabled="phoneValidateCodeBtn" type="primary"
+                                           @click="sendPhoneCodeHandle"
+                                >
+                                    {{ phoneValidateCodeBtnText }}
+                                </el-button>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button type="primary" style="width: 100%;" @click="phoneRegHandle">确定</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                    <el-tab-pane label="邮箱注册" name="regEmail">
+                        <el-form ref="emailRegForm" status-icon :rules="emailRegRules" :model="accountForm"
+                                 label-width="0px"
+                        >
+                            <el-form-item label="" prop="email">
+                                <el-input v-model="accountForm.email" placeholder="请输入邮箱" autocomplete="off" />
+                            </el-form-item>
+                            <el-form-item label="" prop="password">
+                                <el-input v-model="accountForm.password" show-password placeholder="请输入密码"
+                                          autocomplete="off"
+                                />
+                            </el-form-item>
+                            <el-form-item label="" prop="code">
+                                <el-input v-model="accountForm.code" oninput="value=value.replace(/[^\d]/g,'')"
+                                          style="width: 150px;" maxlength="4" placeholder="请输入验证码"
+                                          autocomplete="off"
+                                />
+                                <el-button style="margin-left: 20px;" :disabled="emailValidateCodeBtn" type="primary"
+                                           @click="sendEmailCodeHandle"
+                                >
+                                    {{ emailValidateCodeBtnText }}
+                                </el-button>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button type="primary" style="width: 100%;" @click="emailRegHandle">确定</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                    <div style="display: flex; flex-direction: row;">
+                        <el-link style="margin-left: 20px;" @click="toForgetPwdHandle">忘记密码</el-link>
+                        <el-link style="margin-left: 20px;" @click="registerHandleClick">立即注册</el-link>
+                        <div class="other-login">
+                            <span @click="redirectUrl(qqLoginAuthorizeUrl)">
+                                <svg-icon name="loginQQ" class="other-login-icon" />
+                            </span>
+                            <svg-icon name="loginWx"
+                                      class="other-login-icon"
+                                      @click="()=>{
+                                          this.formType='login',
+                                          this.loginType='wx'
+                                      }"
+                            />
+                        </div>
+                    </div>
+                </el-tabs>
+            </el-col>
+        </el-row>
+        <Verify
+            ref="verify"
+            :mode="'pop'"
+            :captcha-type="'blockPuzzle'"
+            :img-size="{ width: '330px', height: '155px' }"
+            @success="verifySuccessHandle"
+        />
+    </div>
+</template>
+<script>
+
+import {getCurrentDomain} from '@/utils'
+// 引入组件
+import Verify from '@/components/verifition/Verify'
+import constants from '@/utils/constants'
+
+export default {
+    name: 'Login',
+    components: {
+        Verify
+    },
+    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}$/
+            const reg2 = /^(?:0|86|\+86)?1[3456789]\d{9}$/
+            if (reg1.test(value) || reg2.test(value)) {
+                callback()
+            } else {
+                callback(new Error('请输入正确的账号'))
+            }
+        }
+        return {
+            loginType: 'wx',
+            emailValidateCodeBtn: false,
+            emailValidateCodeBtnText: '发送验证码',
+            phoneValidateCodeBtn: false,
+            phoneValidateCodeBtnText: '发送验证码',
+            formType: 'login',
+            regType: 'regPhone',
+            agreeProtocol: '',
+            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: '请输入验证码'}
+            },
+            accountLoginRules: {
+                account: [
+                    {required: true, trigger: 'blur', message: '请输入账号'}, {trigger: 'blur', validator: validateAccount}],
+                password: [
+                    {required: true, trigger: 'blur', message: '请输入新密码'},
+                    {
+                        pattern: constants.passwordReg,
+                        message: constants.passwordRegDesc
+                    }
+                ]
+            },
+            accountForm: {
+                email: '',
+                phoneNumber: '',
+                password: ''
+            },
+            wxQrCodeLoading: true,
+            wxLoginQrCode: '',
+            wxLoginId: '',
+            refreshWxQrcodeTimer: null,
+            wxQrcodeResultTimer: null,
+            qqLoginAuthorizeUrl: ''
+        }
+    },
+    watch: {},
+    created() {
+        this.getLoginWxQrCode()
+        this.refreshWxQrcodeTimer = setInterval(() => {
+            this.getLoginWxQrCode()
+        }, 5 * 60 * 1000)
+        this.wxQrcodeResultTimer = setInterval(() => {
+            this.getLoginWxQrCodeResult()
+        }, 5 * 1000)
+        this.getQQLoginAuthorizeUrl()
+    },
+    destroyed() {
+        clearInterval(this.refreshWxQrcodeTimer)
+        clearInterval(this.wxQrcodeResultTimer)
+    },
+    methods: {
+        loginTypeHandleClick() {
+        },
+        registerHandleClick() {
+        },
+        verifySuccessHandle(params) {
+            let slideCode = params.captchaVerification
+            this.$api.request({
+                url: '/login/account',
+                method: 'post',
+                params: {slideCode},
+                data: this.accountForm
+            }).then(res => {
+                this.loginSuccessHandle(res.data)
+            })
+        },
+        // 获取微信登录二维码
+        getLoginWxQrCode() {
+            this.wxQrCodeLoading = true
+            this.$api.get('/login/wx/qrcode').then(res => {
+                this.wxLoginQrCode = res.data.qrCodeUrl
+                this.wxLoginId = res.data.loginId
+            })
+        },
+        // 忘记密码
+        toForgetPwdHandle() {
+            this.$router.push({path: '/forget/password'})
+        },
+        // qq登录授权地址
+        getQQLoginAuthorizeUrl() {
+            let reUrl = getCurrentDomain() + '/redirect/qqlogin'
+            this.$api.get('/login/qq/authorize/url', {params: {redirectUri: reUrl}}).then(res => {
+                this.qqLoginAuthorizeUrl = res.data
+            })
+        },
+        redirectUrl(url) {
+            console.log(url)
+            location.href = url
+        },
+        getLoginWxQrCodeResult() {
+            this.$api.get('/login/wx/qrcode/result', {params: {loginId: this.wxLoginId}}).then(res => {
+                if (res.data) {
+                    this.loginSuccessHandle(res.data)
+                }
+            })
+        },
+        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.formType = 'login'
+                this.loginType = 'account'
+            }, 1000)
+        },
+        loginSuccessHandle(data) {
+            this.msgSuccess('登录成功')
+            this.$store.dispatch('user/login', data).then(() => {
+                // 重置状态
+                this.$store.dispatch('global/loginExpired', false).then(() => {
+                })
+                // 登录成功后路由跳回
+                if (this.$route.query.redirect) {
+                    this.$router.replace({
+                        path: this.$route.query.redirect
+                    })
+                } else {
+                    if (window.history.length <= 1) {
+                        this.$router.push({path: '/home'})
+                    } else {
+                        this.$router.push({path: '/home'})
+                    }
+                }
+            })
+        },
+        loginHandle() {
+            this.$refs['accountLoginForm'].validate(valid => {
+                if (valid) {
+                    this.$refs.verify.show()
+                } else {
+                    return false
+                }
+            })
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+
+.login-body {
+    font-familyly: "Helvetica Neue", helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", arial, sans-serif;
+    margin: 90px 0 0 0;
+}
+.login-img {
+    position: relative;
+    left: 100px;
+    width: 559px;
+    height: 447px;
+}
+.login-form-tab {
+    margin-left: 100px;
+    height: 500px;
+    width: 520px;
+}
+.wx-login-qrcode {
+    width: 194px;
+    height: 194px;
+}
+.other-login .other-login-icon {
+    margin-left: 10px;
+    cursor: pointer;
+}
+.login-tip {
+    color: rgba(16, 16, 16, 1);
+    font-size: 13px;
+    font-weight: 400;
+    text-align: left;
+    line-height: 20px;
+}
+.account-login-form .el-form-item--small.el-form-item {
+    margin-bottom: 8px;
+}
+.account-login-form .el-radio {
+    margin-right: 0;
+}
+.wx-login .el-divider--horizontal {
+    margin: 10px 0;
+}
+.account-login-form .protocol-tip {
+    font-size: 12px;
+    line-height: 40px;
+}
+.el-form-item--small .el-form-item__content,
+.el-form-item--small .el-form-item__label {
+    line-height: 40px;
+}
+</style>
diff --git a/src/views/official/index.vue b/src/views/official/index.vue
index dee07f3..0c1bed0 100644
--- a/src/views/official/index.vue
+++ b/src/views/official/index.vue
@@ -26,7 +26,7 @@
                 <el-col class="header-col" :span="3">
                     <el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button>
                     <el-button v-if="!isLogin&&this.$route.path!='/login' " class="header-btn"
-                               @click="$router.push({path:'/login'})"
+                               @click="$router.push({path:'/login   '})"
                     >
                         登 录
                     </el-button>
@@ -110,14 +110,18 @@ export default {
 }
 .header-logo {
     cursor: pointer;
-    height: 60px;
+    height: 40px;
     float: left;
+    position: relative;
+    left: 230px;
 }
 .menu-item {
     line-height: 90px;
     height: 90px;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 900;
+    position: relative;
+    left: 200px;
 }
 .header-btn {
     margin: 35px 0 35px 20px;
diff --git a/src/views/official/introduction.vue b/src/views/official/introduction.vue
index bcbee05..7823e2c 100644
--- a/src/views/official/introduction.vue
+++ b/src/views/official/introduction.vue
@@ -13,7 +13,7 @@
                                 <p class="body-detail">简单易用，灵活的反馈数据筛选；统计图表一目了然</p>
                                 <div>
                                     <el-button class="body-btn primary" type="primary"
-                                               @click="$router.push({path:'/login'})"
+                                               @click="$router.push({path:'/login2'})"
                                     >
                                         免费使用
                                     </el-button>