Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

src/main/pc-space/src/components/LoginInfo.vue

@@ -0,0 +1,284 @@
+<template>
+    <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose" @close="closeDialog">
+        <div class="content" v-if="!flag">
+            <el-form v-if="!phoneLogin" :model="form" ref="form" :rules="rules" label-width="0">
+                <el-form-item
+                    prop="username"
+                    :rules="{
+                        pattern: /^1[3-9]\d{9}$/,
+                        message: '请输入正确的手机号',
+                        trigger: 'blur'
+                    }"
+                >
+                    <span class="el-icon-mobile-phone"></span>
+                    <el-input style="width: 300px" v-model="form.username" placeholder="请输入手机号"></el-input>
+                </el-form-item>
+                <div @keyup.enter="Login">
+                    <el-form-item prop="password" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
+                        <span class="el-icon-unlock"></span>
+                        <el-input
+                            style="width: 300px"
+                            v-model="form.password"
+                            placeholder="请输入密码"
+                            type="password"
+                        ></el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+            <el-form v-if="phoneLogin" :model="form" ref="form" label-width="0">
+                <el-form-item
+                    prop="phone"
+                    :rules="{
+                        pattern: /^1[3-9]\d{9}$/,
+                        message: '请输入正确的手机号',
+                        trigger: 'blur'
+                    }"
+                >
+                    <span class="el-icon-mobile-phone"></span>
+                    <el-input v-model="form.phone" style="width: 300px" placeholder="请输入手机号"> </el-input>
+                </el-form-item>
+                <div @keyup.enter="loginPhone">
+                    <el-form-item prop="code" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
+                        <span class="el-icon-mobile-phone"></span>
+                        <el-input style="width: 300px" v-model="form.code" placeholder="请输入短信验证码">
+                            <span
+                                @click="send"
+                                style="color: #ff4f50; cursor: pointer; font-size: 13px"
+                                slot="suffix"
+                                >{{ time === 0 ? '发送验证码' : `重新发送${time}s` }}</span
+                            >
+                        </el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+            <div class="btn">
+                <el-link @click="phoneLogin = !phoneLogin">{{ phoneLogin ? '密码登录' : '短信验证码登录' }}</el-link>
+                <el-link type="danger" v-if="!phoneLogin" @click="passwordFn">忘记密码？</el-link>
+            </div>
+            <div class="sub-btn">
+                <div v-if="!phoneLogin" class="btn1">登录</div>
+                <div class="btn1" v-else @click="loginPhone">登录</div>
+                <el-button style="background: #f2f3f5; color: #292c33" type="info" class="btn-block" @click="Register"
+                    >还没有账号？立即注册</el-button
+                >
+            </div>
+        </div>
+        <div class="content" v-if="flag">
+            <div class="content">
+                <el-form :model="form" ref="form" :rules="rules" label-width="0">
+                    <el-form-item
+                        prop="phone"
+                        :rules="{
+                            pattern: /^1[3-9]\d{9}$/,
+                            message: '请输入正确的手机号',
+                            trigger: 'blur'
+                        }"
+                    >
+                        <span class="el-icon-mobile-phone"></span>
+                        <el-input style="width: 300px" v-model="form.phone" placeholder="请输入手机号"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="code">
+                        <el-form-item prop="code" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
+                            <span class="el-icon-mobile-phone"></span>
+                            <el-input style="width: 300px" v-model="form.code" placeholder="请输入短信验证码">
+                                <span
+                                    @click="send"
+                                    style="color: #ff4f50; cursor: pointer; font-size: 13px"
+                                    slot="suffix"
+                                    >{{ time === 0 ? '发送验证码' : `重新发送${time}s` }}</span
+                                >
+                            </el-input>
+                        </el-form-item>
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <span class="el-icon-unlock"></span>
+                        <el-input
+                            style="width: 300px"
+                            v-model="form.password"
+                            type="password"
+                            autocomplete="off"
+                            placeholder="请输入8-16位密码，建议数字、大小写字母组合"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="pass">
+                        <span class="el-icon-unlock"></span>
+                        <el-input
+                            style="width: 300px"
+                            v-model="form.pass"
+                            type="password"
+                            autocomplete="off"
+                            placeholder="请再次输入密码"
+                        ></el-input>
+                    </el-form-item>
+                </el-form>
+                <template>
+                    <el-checkbox v-model="checked" v-if="flag1">
+                        <el-link style="margin-bottom: 2px">点击同意注册协议</el-link>
+                    </el-checkbox>
+                </template>
+                <div class="sub-btn" style="width: 300px" v-if="flag1">
+                    <div class="btn1" @click="doRegister">立即注册</div>
+                    <el-button
+                        style="background: #f2f3f5; color: #292c33"
+                        type="info"
+                        class="btn-block"
+                        @click="flag = false"
+                        >已有账号，立即登录</el-button
+                    >
+                </div>
+                <div class="sub-btn" style="width: 300px" v-else>
+                    <el-button type="primary" class="btn-block" @click="password">确定</el-button>
+                    <el-button
+                        style="background: #f2f3f5; color: #292c33"
+                        type="info"
+                        class="btn-block"
+                        @click="flag = false"
+                        >想起密码，立即登录</el-button
+                    >
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+    props: {
+        dialogVisible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            show: false,
+            phoneLogin: false,
+            flag: false,
+            rules: {},
+            form: {},
+            time: 0,
+            checked: false
+        };
+    },
+    methods: {
+        Register() {
+            this.flag = true;
+            this.flag1 = true;
+        },
+        passwordFn() {
+            this.flag = true;
+            this.flag1 = false;
+        },
+        loginPhone() {},
+        doRegister() {},
+        send() {
+            this.sendCode();
+        },
+        closeDialog() {
+            this.$emit('close');
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then(_ => {
+                    done();
+                })
+                .catch(_ => {});
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .el-dialog {
+    width: 480px !important;
+    padding-bottom: 55px;
+    background: #ffffff;
+    border-radius: 8px;
+}
+/deep/ .el-dialog__body {
+    padding: 0;
+}
+/deep/ .el-checkbox {
+    margin-left: -127px;
+}
+/deep/ .el-checkbox__inner {
+    border-radius: 50%;
+}
+/deep/ .el-form-item__error {
+    left: 110px;
+}
+/deep/ .el-form-item__content {
+    display: flex;
+    justify-content: center;
+}
+.content {
+    .el-form {
+        /deep/ .el-input {
+            .el-input__inner {
+                border-width: 0px;
+                border-bottom: 1px solid #f2f3f5;
+                padding: 0 0 0;
+                height: 50px;
+                background: none;
+                line-height: 50px;
+                margin-left: 10px;
+            }
+            .el-input__prefix {
+                color: #292c33;
+                font-size: 18px;
+            }
+            .el-input-group__append {
+                background-color: transparent;
+                border-width: 0;
+            }
+        }
+    }
+    text-align: center;
+    .el-icon-mobile-phone {
+        color: #000;
+        font-size: 24px;
+        margin-top: 13px;
+    }
+    .el-icon-unlock {
+        color: #000;
+        font-size: 24px;
+        margin-top: 12px;
+    }
+    .icon {
+        color: #000;
+        img {
+            width: 28px;
+            height: 28px;
+            padding-top: 10px;
+        }
+    }
+    .btn {
+        display: flex;
+        align-items: center;
+        width: 330px;
+        justify-content: space-between;
+        margin-left: 80px;
+    }
+    .sub-btn {
+        padding-top: 62px;
+        text-align: center;
+        width: 300px;
+        margin-left: 78px;
+        .btn1 {
+            width: 330px;
+            height: 40px;
+            line-height: 40px;
+            background: linear-gradient(135deg, #00ffcb 0%, #006eff 100%);
+            border-radius: 4px;
+            font-size: 13px;
+            color: #fff;
+            text-align: center;
+        }
+        .el-button {
+            font-size: 12px;
+            line-height: 16px;
+            width: 330px;
+            border-width: 0px;
+            margin-top: 20px;
+        }
+    }
+}
+</style>

src/main/pc-space/src/components/PageHeader.vue

@@ -15,17 +15,17 @@
                         <div class="slip" :class="{ active: item === active }"></div>
                     </div>
                 </div>
-                <div class="login" @click="Login">[登录]</div>
+                <div class="login" @click="show = true">[登录]</div>
                 <div class="login login1">中文</div>
             </div>
         </div>
-        <!-- <login-info :dialogVisible="show"></login-info> -->
+        <login-info :dialogVisible="show" @close="show = false" ref="public"></login-info>
     </div>
 </template>
 <script>
-// import LoginInfo from '../components/LoginInfo.vue';
+import LoginInfo from '../components/LoginInfo.vue';
 export default {
-    // components: { LoginInfo },
+    components: { LoginInfo },
     data() {
         return {
             tabs: ['铸造者', '收藏探索', '数字盲盒', '我的NFT', '了解更多'],
@@ -45,10 +45,6 @@ export default {
             } else if (item === '我的NFT') {
                 this.$router.push('/my');
             }
-        },
-        Login() {
-            console.log(111);
-            this.show = true;
         }
     }
 };