bug

src/project/tianfuxing/AppMy/AppMy.vue

@@ -2,10 +2,14 @@
   <div class="my">
     <div class="user">
       <image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
-      <div class="right">
+      <div class="right" v-if="isLogin">
         <h2>张三</h2>
         <p>文明天府星市民 Lv.1</p>
       </div>
+      <div class="right" v-else @click="toLogin">
+        <h2>登录</h2>
+        <p>点击进行登录</p>
+      </div>
     </div>
     <div class="info">
       <div class="info-item">
@@ -37,14 +41,190 @@
 </template>
 
 <script>
+  import { mapActions, mapState } from 'vuex'
   export default {
     appName: '我的',
-    name: 'AppMy'
+    name: 'AppMy',
+
+    data () {
+      return {
+
+      }
+    },
+
+    computed: {
+      ...mapState(['user', 'token']),
+
+      isLogin () {
+        return !!this.user.id
+      }
+    },
+
+    onLoad () {
+      console.log(this.user)
+      console.log(this.token)
+    },
+
+    methods: {
+      ...mapActions(['autoLogin', 'getUserInfo', 'getToken', 'getCode']),
+
+      login () {
+        return new Promise(function (resolve, reject) {
+          uni.login({
+            success: function (res) {
+              if (res.code) {
+                resolve(res)
+              } else {
+                reject(res)
+              }
+            },
+            fail: function () {
+              reject(false)
+            }
+          })
+        })
+      },
+
+      toLogin () {
+        wx.getUserProfile({
+          desc: '用于完善会员资料',
+          lang: 'zh_CN',
+          success: data => {
+            this.$loading()
+            this.getCode().then(res => {
+              this.getToken({
+                ...data.userInfo,
+                code: res
+              }).then(e => {
+                console.log(e)
+
+                this.$hideLoading()
+              }).catch(() => {
+                this.$hideLoading()
+              })
+            })
+          }
+        })
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
   .my {
+    padding-top: 32px;
+    padding-bottom: 30px;
 
+    .user, .info {
+      display: flex;
+      align-items: center;
+      padding: 0 48px;
+    }
+
+    .user {
+      line-height: 1;
+      margin-bottom: 48px;
+
+      image {
+        width: 112px;
+        height: 112px;
+        margin-right: 32px;
+        border-radius: 50%;
+        border: 4px solid #FFFFFF;
+      }
+
+      p {
+        color: #8891A1;
+        font-size: 26px;
+      }
+
+      h2 {
+        margin-bottom: 18px;
+        font-weight: 600;
+        font-size: 34px;
+        color: #1D2229;
+      }
+    }
+
+    .my-list {
+      padding: 0 32px;
+
+      & > h2 {
+        margin-bottom: 42px;
+        font-weight: 600;
+        font-size: 34px;
+        color: #333333;
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 24px;
+        padding: 24px;
+        background: #FFFFFF;
+        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+        border-radius: 16px;
+
+        .right {
+          display: flex;
+          align-items: baseline;
+          line-height: 1;
+
+          i {
+            color: #FFB94C;
+            font-size: 32px;
+          }
+
+          span {
+            color: #FFB94C;
+            font-size: 40px;
+          }
+
+          em {
+            font-size: 26px;
+            color: #999999;
+          }
+        }
+
+        .left {
+          flex: 1;
+          margin-right: 20px;
+
+          h2 {
+            line-height: 1.3;
+            margin-bottom: 10px;
+            font-size: 34px;
+            color: #333333;
+          }
+
+          p {
+            font-size: 26px;
+            color: #999999;
+          }
+        }
+      }
+    }
+
+    .info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 58px;
+
+      .info-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 28px;
+        width: 192px;
+        height: 112px;
+        color: #4D5596;
+
+        div:last-child {
+          color: #316568;
+        }
+      }
+    }
   }
 </style>