登录页

src/pages/login/login.vue

@@ -1,23 +1,26 @@
 <template>
     <div class="container">
         <!-- <button @click="login">show</button> -->
-        <button class="btn-login" open-type="getUserInfo" @getuserinfo="onGetUserInfo">进入图途象电商
+        <img src="/static/images/logo.png" class="logo" alt />
+
+        <button class="btn-login" open-type="getUserInfo" @getuserinfo="onGetUserInfo">
+            立即登录
             <!-- <img class="btn-login-icon" src="/static/images/icon_btn_login.png" background-size="cover" /> -->
         </button>
     </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import time from '../../time';
+import { mapState } from "vuex";
+import time from "../../time";
 export default {
     data() {
         return {
-            sessionKey: '',
+            sessionKey: ""
         };
     },
     computed: {
-        ...mapState(['openInfo', 'miniId']),
+        ...mapState(["openInfo", "miniId"])
     },
     onShow() {
         this.login();
@@ -30,78 +33,78 @@ export default {
                     if (res.code) {
                         console.log(res.code);
                         ref.$http
-                            .post('auth/loginMiniApp', {
+                            .post("auth/loginMiniApp", {
                                 code: res.code,
                                 requireToken: true,
-                                miniId: ref.miniId,
+                                miniId: ref.miniId
                             })
                             .then(res => {
                                 if (res.success) {
                                     ref.sessionKey = res.data.sessionKey;
-                                    wx.setStorageSync('token', '' + res.token);
-                                    ref.$http.setToken('' + res.token);
+                                    wx.setStorageSync("token", "" + res.token);
+                                    ref.$http.setToken("" + res.token);
                                 }
                             })
                             .catch(e => {
                                 console.log(e);
                             });
                     } else {
-                        console.log('登录失败！' + res.errMsg);
+                        console.log("登录失败！" + res.errMsg);
                     }
-                },
+                }
             });
             // this.showCityPopup = true;
         },
         onGetUserInfo(e) {
             wx.showLoading({
-                title: '加载中',
-                mask: true,
+                title: "加载中",
+                mask: true
             });
             let detail = e.mp.detail;
             this.$http
-                .post('userInfo/getMiniAppUserInfo', {
+                .post("userInfo/getMiniAppUserInfo", {
                     sessionKey: this.sessionKey,
                     rawData: detail.rawData,
                     signature: detail.signature,
                     encryptedData: detail.encryptedData,
                     iv: detail.iv,
-                    miniId: this.miniId,
+                    miniId: this.miniId
                 })
                 .then(res => {
                     wx.hideLoading();
                     if (res.success) {
-                        this.$store.commit('updateUserInfo', res.data);
+                        this.$store.commit("updateUserInfo", res.data);
                         this.goPage();
                     } else {
                         wx.showToast({
-                            title: '请选择商品',
+                            title: "请选择商品",
                             icon: res.error,
-                            duration: 1500,
+                            duration: 1500
                         });
                     }
                 });
         },
         goPage() {
-            var url = '/pages/home/home';
+            var url = "/pages/home/home";
             if (this.openInfo.path) {
                 console.log(this.openInfo.query);
-                url = '/' + this.openInfo.path;
+                url = "/" + this.openInfo.path;
                 var info = this.openInfo.query;
-                var query = '';
+                var query = "";
                 for (var key in info) {
                     console.log(info[key]);
-                    query = query + key + '=' + info[key] + '&';
+                    query = query + key + "=" + info[key] + "&";
                 }
                 if (query) {
                     query = query.substr(0, query.length - 1);
-                    url = url + '?' + query;
+                    url = url + "?" + query;
                 }
             }
             wx.reLaunch({
-                url: url,
+                url: url
             });
-        },
-    },
+        }
+    }
 };
 </script>
 
@@ -109,31 +112,33 @@ export default {
 .container {
     width: 100%;
     height: 100%;
-    background: #f2f4f5;
+    background: #00c5f2;
+    padding: 100px 0 0;
+    box-sizing: border-box;
     .btn-login {
-        position: absolute;
-        left: 20px;
-        right: 20px;
-        bottom: 30px;
+        width: 260px;
         height: 56px;
-        background: #00c5f2;
-        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
-        border-radius: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 28px;
+        color: rgba(0, 197, 242, 1);
+        line-height: 56px;
         font-size: 16px;
         font-weight: bold;
-        color: #ffffff;
-        border: none;
-        outline: none;
         .btn-login-icon {
             width: 24px;
             height: 24px;
         }
         &::active {
-            background: black;
+            background: #f2f4f5;
         }
+        margin-top: 160px;
     }
 }
+
+.logo {
+    width: 214px;
+    height: 127px;
+    display: block;
+    margin: 0 auto 0;
+}
 </style>