登录页

src/components/AppBar.vue

@@ -43,7 +43,7 @@ export default {
                 { text: '库房', icon: require('@assets/tabbar_icon_03bai.png'), value: '/store' },
                 { text: '我的', icon: require('@assets/tabbar_icon_04bai.png'), value: '/mine' }
             ],
-            tabColor: '#15152D'
+            tabColor: '#191D27'
         };
     },
     computed: {
@@ -128,6 +128,6 @@ export default {
     padding-right: 12px;
 }
 .dark {
-    background-color: #15152d;
+    background-color: #191D27;
 }
 </style>

src/styles/app.less

@@ -2,7 +2,7 @@
     --van-primary-color: @prim;
     --van-tabbar-item-active-background-color: transparent;
     --van-tabbar-background-color: @bg;
-    --van-nav-bar-background-color: #15152d;
+    --van-nav-bar-background-color: #191D27;
     --van-cell-background-color: @bg;
     --van-text-color: @text0;
     --van-gray-6: @text3;

src/styles/common/theme.less

@@ -1,5 +1,5 @@
 @divider: #f2f4f5;
-@prim: #28B6FF;
+@prim: #F9DDB3;
 @success: #67c23a;
 @danger: #f56c6c;
 @warn: #28B6FF;
@@ -13,7 +13,7 @@
 @border2: #f2f3f5;
 @border3: #dfe1e6;
 @border4: #f2f6fc;
-@bg: #ffffff;
+@bg: #191D27;
 @bg2: #ffffff;
 @bg3: #f5f7fa;
 @bgProductDetail: #0f0f0f;

src/views/account/Login.vue

@@ -1,135 +1,13 @@
 <template>
-    <!-- <div
-        class="login"
-        :class="{ loginHeight: bar.value && bar.value.show }"
-        :style="{ backgroundImage: `url(${require('../../assets/login.jpg')})` }"
-    >
-        <img class="logo" v-if="active === 'phone'" src="../../assets/lvzhopu-logo.png" alt="" />
-        <img class="logo" v-else src="../../assets/lvzhopu-logo2.png" alt="" />
-        <div class="tabs">
-            <div class="tab" :class="{ active: active === 'phone' }" @click="active = 'phone'">账号密码登陆</div>
-            <div class="tab" :class="{ active: active === 'code' }" @click="active = 'code'">验证码登陆</div>
-        </div>
-
-        <van-form @submit="submit" ref="form" v-if="active === 'phone'">
-            <div class="field-box">
-                <van-field
-                    type="tel"
-                    name="用户名"
-                    placeholder="Account"
-                    v-model="form.phone"
-                    :rules="[
-                        { required: true, message: '请输入手机号码' },
-                        {
-                            pattern: phonePattern,
-                            message: '手机号码格式错误'
-                        }
-                    ]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                    </template>
-                </van-field>
-                <van-field
-                    type="password"
-                    name="密码"
-                    placeholder="Password"
-                    v-model="form.password"
-                    :rules="[{ required: true, message: '请填写密码' }]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
-                    </template>
-                </van-field>
-            </div>
-
-            <div class="button"> -->
-    <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
-          忘记密码？
-        </van-button> -->
-    <!-- 
-                <van-button block native-type="submit" color="#26F50D" class="sure">现在出发！</van-button>
-                <van-button class="del" block plain @click="$router.replace('/register')"
-                    >暂无古藏站登陆许可 立即申领</van-button
-                >
-            </div>
-        </van-form>
-
-        <van-form @submit="submit" ref="code" v-else>
-            <div class="field-box">
-                <van-field
-                    type="tel"
-                    name="手机号码"
-                    placeholder="Account"
-                    v-model="form.phone"
-                    :rules="[
-                        { required: true, message: '请输入手机号码' },
-                        {
-                            pattern: phonePattern,
-                            message: '手机号码格式错误'
-                        }
-                    ]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
-                    </template>
-                </van-field>
-
-                <van-field
-                    type="code"
-                    name="验证码"
-                    placeholder="Verify"
-                    v-model="form.code"
-                    :rules="[{ required: true, message: '请输入验证码' }]"
-                >
-                    <template #left-icon>
-                        <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
-                    </template>
-                    <template #button>
-                        <van-button
-                            class="sub-code"
-                            size="small"
-                            plain
-                            color="#26F50D"
-                            @click="sendPhone"
-                            :disabled="isSend"
-                        >
-                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-                        </van-button>
-                    </template>
-                </van-field>
-            </div>
-            <div class="button"> -->
-    <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
-          忘记密码？
-        </van-button> -->
-    <!-- 
-                <van-button block native-type="submit" color="#26F50D" class="sure">现在出发！</van-button>
-                <van-button class="del" block plain @click="$router.replace('/register')"
-                    >暂无古藏站登陆许可 立即申领</van-button
-                >
-            </div>
-        </van-form>
-
-        <div class="xieyi">
-            <van-checkbox v-model="checked">
-                已阅读并同意
-                <span @click.stop="$router.push('/agreement?page=service')"> 《用户服务协议》 </span>
-                和
-                <span @click.stop="$router.push('/agreement')"> 《平台隐私协议》 </span>
-            </van-checkbox>
-        </div>
-    </div> -->
     <div class="content">
         <!-- 登录 -->
         <div v-if="loginRegistrationSwitch == true">
             <!-- 密码登录 -->
             <div v-if="verificationCode == false">
-                <div class="login_title_one">Hi,</div>
-                <div class="login_title_two">欢迎来到古藏站</div>
+                <div class="login_title_one">欢迎来到拉索</div>
+                <div class="login_title_two">看发现更多数字藏品</div>
                 <van-form @submit="submitLogin" ref="loginForm">
                     <div class="login_information">
-                        <img :src="require('@assets/login_icon_zhanghao.png')" alt="" class="login_information_img" />
                         <van-field
                             v-model="loginForm.phone"
                             type="tel"
@@ -146,45 +24,59 @@
                     </div>
                     <van-divider class="login_divider" />
                     <div class="login_information">
-                        <img :src="require('@assets/login_icon_mima.png')" alt="" class="login_information_img" />
                         <van-field
-                            v-model="loginForm.password"
-                            type="password"
-                            placeholder="请输入密码"
-                            :rules="[{ required: true, message: '请输入密码' }]"
+                            v-model="loginForm.code"
+                            type="tel"
+                            placeholder="请输入验证码"
+                            :rules="[{ required: true, message: '请输入验证码' }]"
                             class="login_information_con"
-                        />
+                        >
+                            <template #button>
+                                <div v-if="verifyDisplay == true" class="login_information_verification">
+                                    <van-count-down
+                                        :time="timeOne"
+                                        format="ss"
+                                        :auto-start="countDownOne"
+                                        @finish="onFinish"
+                                    />
+                                    <div>S后重新发送</div>
+                                </div>
+                                <van-button size="small" class="send_verification" @click="sendPhone" v-else
+                                    >获取验证码</van-button
+                                >
+                            </template>
+                        </van-field>
                     </div>
                     <van-divider class="login_divider" />
-                    <div class="login_verification">
-                        <div @click="$router.replace('/forget')">忘记密码？</div>
-                        <div
-                            class="login_verification_con"
-                            @click="(verificationCode = true), (verification = true), (active = 'code')"
-                        >
-                            验证码登录
-                        </div>
+
+                    <div class="login_tip">
+                        <van-checkbox v-model="isReader">
+                            已阅读并同意
+                            <span class="login_tip_con" @click.stop="$router.push('/agreement?page=service')"
+                                >用户协议</span
+                            >
+                            和
+                            <span class="login_tip_con" @click.stop="$router.push('/agreement')">隐私协议</span>
+                        </van-checkbox>
                     </div>
                     <div class="login">
-                        <van-button native-type="submitLogin" color="#28B6FF" class="login_now_con">登录</van-button>
+                        <van-button size="large" native-type="submitLogin" type="primary" class="login_now_con"
+                            >登录</van-button
+                        >
                     </div>
                 </van-form>
                 <div class="register">
-                    <van-button @click="registerNowConLogin" class="register_con">注册</van-button>
+                    <!-- <div class="register_now_login" @click="registerNowConLogin">新用户注册</div> -->
+                    <!-- <van-button size="large" @click="registerNowConLogin" class="register_con">注册</van-button> -->
                 </div>
             </div>
             <!-- 验证码登录 -->
             <div v-if="verificationCode == true">
                 <div v-if="verification == true">
-                    <div class="login_title_one">Hi,</div>
-                    <div class="login_title_two">欢迎来到古藏站</div>
+                    <div class="login_title_one">欢迎来到拉索</div>
+                    <div class="login_title_two">看发现更多数字藏品</div>
                     <van-form @submit="submitLoginCode" ref="loginFormCode">
                         <div class="login_information">
-                            <img
-                                :src="require('@assets/login_icon_zhanghao.png')"
-                                alt=""
-                                class="login_information_img"
-                            />
                             <van-field
                                 v-model="loginForm.phone"
                                 type="tel"
@@ -201,10 +93,7 @@
                         </div>
                         <van-divider class="login_divider" />
                         <div class="verification_code_login">
-                            <van-button
-                                native-type="submitLoginCode"
-                                color="#28B6FF"
-                                class="verification_code_login_con"
+                            <van-button native-type="submitLoginCode" type="primary" class="verification_code_login_con"
                                 >发送验证码</van-button
                             >
                         </div>
@@ -243,9 +132,7 @@
                         />
                     </div>
                     <div class="verification_code_login_register">
-                        <van-button @click="submitLogin" color="#28B6FF" class="register_now_con_login"
-                            >登录</van-button
-                        >
+                        <van-button @click="submitLogin" type="primary" class="register_now_con_login">登录</van-button>
                     </div>
                 </div>
                 <div>
@@ -260,7 +147,6 @@
             <div class="user_registration">用户注册</div>
             <van-form @submit="submit" ref="form">
                 <div class="login_information">
-                    <img :src="require('@assets/login_icon_zhanghao.png')" alt="" class="login_information_img" />
                     <van-field
                         v-model="form.phone"
                         :maxlength="11"
@@ -278,7 +164,6 @@
                 </div>
                 <van-divider class="login_divider" />
                 <div class="login_information">
-                    <img :src="require('@assets/verification_code.png')" alt="" class="login_information_img login_information_img_con" />
                     <van-field
                         v-model="form.code"
                         type="tel"
@@ -304,7 +189,6 @@
                 </div>
                 <van-divider class="login_divider" />
                 <div class="login_information">
-                    <img :src="require('@assets/login_icon_mima.png')" alt="" class="login_information_img" />
                     <van-field
                         v-model="form.password"
                         type="password"
@@ -314,8 +198,18 @@
                     />
                 </div>
                 <van-divider class="login_divider" />
+                <div class="login_tip">
+                    <van-checkbox v-model="isReader">
+                        已阅读并同意
+                        <span class="login_tip_con" @click.stop="$router.push('/agreement?page=service')"
+                            >用户协议</span
+                        >
+                        和
+                        <span class="login_tip_con" @click.stop="$router.push('/agreement')">隐私协议</span>
+                    </van-checkbox>
+                </div>
                 <div class="register_now">
-                    <van-button native-type="submit" color="#28B6FF" class="register_now_con">立即注册</van-button>
+                    <van-button native-type="submit" color="@prim" class="register_now_con">立即注册</van-button>
                     <!-- <div class="register_now_con" @click="registerNow">立即注册</div> -->
                 </div>
             </van-form>
@@ -323,11 +217,6 @@
                 账户密码登录
             </div>
         </div>
-        <div class="login_tip">
-            登录则代表同意
-            <span class="login_tip_con" @click.stop="$router.push('/agreement?page=service')">用户协议</span> 和
-            <span class="login_tip_con" @click.stop="$router.push('/agreement')">隐私协议</span>
-        </div>
     </div>
 </template>
 
@@ -368,8 +257,9 @@ export default {
             },
             loginForm: {
                 phone: '',
-                password: ''
-            }
+                code: ''
+            },
+            isReader: false
         };
     },
     beforeRouteEnter(to, from) {
@@ -395,11 +285,11 @@ export default {
         },
         // 发送手机号
         sendPhone() {
-            if (this.form.phone == '') {
+            if (this.loginForm.phone == '') {
                 Toast('手机号码格式错误');
             } else {
                 this.verifyDisplay = true;
-                this.sendMsg(this.form.phone);
+                this.sendMsg(this.loginForm.phone);
             }
         },
         // 注册
@@ -476,8 +366,6 @@ export default {
         // },
         // 验证码登录
         submitLoginCode() {
-            this.verification = false;
-            this.phone = this.loginForm.phone.substring(0, 3) + '****' + this.loginForm.phone.substring(7, 12);
             this.sendMsg(this.loginForm.phone);
         },
         // 重新获取
@@ -504,26 +392,21 @@ export default {
             });
         },
         check() {
-            if (this.active === 'phone') {
-                return this.loginByPhone(this.loginForm.phone, this.loginForm.password);
-            } else {
-                // console.log("123312221",this.loginForm.phone,this.value)
-                return this.$http
-                    .post('/auth/phoneLogin', {
-                        phone: this.loginForm.phone,
-                        code: this.value
-                    })
-                    .catch(e => {
-                        if (e) {
-                            this.$toast(e.error);
-                        }
-                        return Promise.reject();
-                    })
-                    .then(res => {
-                        localStorage.setItem('nineToken', res);
-                        return this.$store.dispatch('getUserInfo');
-                    });
-            }
+            return this.$http
+                .post('/auth/phoneLogin', {
+                    phone: this.loginForm.phone,
+                    code: this.loginForm.code
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                    return Promise.reject();
+                })
+                .then(res => {
+                    localStorage.setItem('nineToken', res);
+                    return this.$store.dispatch('getUserInfo');
+                });
         }
         // checkTwo() {
         //     return this.$http
@@ -621,7 +504,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.frist{
+.frist {
     height: 379px;
     background-color: #fff;
 }
@@ -646,10 +529,10 @@ export default {
     width: 100%;
     height: 100%;
     // position: absolute;
-    background: #0f0f27;
+    background: @bg;
     // margin-top: 44px;
     .login_information_verification {
-        color: #28b6ff;
+        color: @prim;
         display: flex;
         margin-right: -15px;
     }
@@ -674,67 +557,61 @@ export default {
         font-size: 14px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #28b6ff;
+        color: @prim;
     }
     .login_title_one {
-        padding-top: 60px;
-        box-sizing: border-box;
-        margin-left: 50px;
-        margin-bottom: 10px;
-        font-size: 28px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        padding: 10px 40px;
+        font-size: 32px;
+        font-family: bold;
         color: #ffffff;
     }
     .login_title_two {
-        margin-left: 50px;
-        margin-bottom: 60px;
-        font-size: 24px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-size: 16px;
         color: #ffffff;
+        line-height: 22px;
+        padding: 0 40px 30px;
     }
     .login_information {
         display: flex;
-        margin-left: 45px;
+        padding: 0 40px;
         .login_information_img {
             width: 24px;
             height: 24px;
             margin-right: 8px;
         }
-        .login_information_img_con{
-            padding-top: 5PX;
+        .login_information_img_con {
+            padding-top: 5px;
         }
         .van-cell {
             padding: 0;
         }
         .login_information_con {
-            width: 250px;
+            // width: 250px;
             // height: 24px;
-            background: #0f0f27;
+            background: @bg;
             overflow: visible;
         }
         .send_verification {
-            background-color: #0f0f27;
+            background-color: @bg;
             border: none;
             font-size: 12px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #28b6ff;
-            margin-right: -23px;
+            color: @prim;
+            // margin-right: -23px;
         }
     }
     .login_information:last-child {
         margin-top: 20px;
     }
     .login_divider {
-        padding: 10px 48px 10px 77px;
+        padding: 10px 48px 10px 40px;
         box-sizing: border-box;
         // background: #5F646F;
         // opacity: 0.2;
     }
     .login_verification {
-        padding: 0px 48px 0px 77px;
+        padding: 0px 40px;
         box-sizing: border-box;
         font-size: 12px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -743,29 +620,29 @@ export default {
         display: flex;
         justify-content: space-between;
         .login_verification_con {
-            color: #28b6ff;
+            color: @prim;
         }
     }
     .login {
         width: 100%;
-        margin-top: 75px;
-        padding: 0px 47px 0px 48px;
+        // margin-top:15px;
+        padding: 0px 40px;
         box-sizing: border-box;
         .login_now_con {
             width: 100%;
-            height: 40px;
-            background: #28b6ff;
+            height: 60px;
+            background: @prim;
             border-radius: 8px;
-            line-height: 40px;
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
+            line-height: 60px;
+            font-size: 18px;
+            font-weight: bold;
+            color: #282d3a;
+            line-height: 26px;
         }
         .login_con {
             width: 100%;
             height: 40px;
-            background: #28b6ff;
+            background: @prim;
             border-radius: 8px;
             font-size: 16px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -778,12 +655,12 @@ export default {
     .register {
         width: 100%;
         margin-top: 28px;
-        padding: 0px 47px 0px 48px;
+        padding: 0px 40px;
         box-sizing: border-box;
         margin-bottom: 153px;
         .register_con {
             width: 100%;
-            height: 40px;
+            height: 60px;
             border-radius: 8px;
             font-size: 16px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -795,12 +672,25 @@ export default {
     }
     .login_tip {
         font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
         color: #939599;
         text-align: center;
         .login_tip_con {
-            color: #28b6ff;
+            color: @prim;
+        }
+        padding: 40px 40px 15px;
+        /deep/.van-checkbox {
+            .flex();
+            .van-checkbox__icon {
+                height: 14px;
+            }
+            .van-checkbox__label {
+                color: #939599;
+                .flex();
+            }
+            .van-icon {
+                width: 14px;
+                height: 14px;
+            }
         }
     }
     .verification_code_login {
@@ -820,7 +710,7 @@ export default {
         font-size: 12px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #28b6ff;
+        color: @prim;
         text-align: center;
         margin-bottom: 167px;
         line-height: 24px;
@@ -846,10 +736,10 @@ export default {
             font-size: 14px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #28b6ff;
+            color: @prim;
             display: flex;
             .van-count-down {
-                color: #28b6ff;
+                color: @prim;
             }
         }
         .verification_code_input_three {
@@ -878,7 +768,7 @@ export default {
     }
     /deep/ .van-field__control {
         color: #ffffff;
-        background: #0f0f27;
+        background: @bg;
     }
     .user_registration {
         padding-top: 60px;
@@ -897,7 +787,7 @@ export default {
         .register_now_con {
             width: 100%;
             height: 40px;
-            background: #28b6ff;
+            background: @prim;
             border-radius: 8px;
             font-size: 16px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -906,7 +796,7 @@ export default {
         .register_now_con_login {
             width: 100%;
             height: 40px;
-            // background: #28b6ff;
+            // background: @prim;
             border-radius: 8px;
             font-size: 16px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -924,7 +814,7 @@ export default {
         font-size: 12px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #28b6ff;
+        color: @prim;
         text-align: center;
         margin-bottom: 167px;
         line-height: 24px;
@@ -932,7 +822,7 @@ export default {
 }
 // /deep/ .van-button:before{
 //     height: 40px;
-//     background: #28B6FF;
+//     background: @prim;
 //     border-radius: 8px;
 // }
 </style>