add: profile page

xichi · Feb 28, 2020 · 6e95c0b · 6e95c0b
1 parent 1065c0c
commit 6e95c0b
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 6 deletions.
diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
@@ -58,7 +58,7 @@
         </li>
         <!-- <li class="contact-us"><router-link to="">联系我们</router-link></li> -->
         <li class="sign-up">
-          <router-link to="/login"
+          <router-link :to="this.userLogin? '/profile': '/login'"
             >{{ userInfo.username || "Sign In" }}
           </router-link>
           <font-awesome-icon

diff --git a/src/pages/login.vue b/src/pages/login.vue
@@ -235,6 +235,7 @@ export default {
       if (loginData.status === 1) {
         const { data: userData } = await getUserInfo();
         this.USER_SIGNIN(userData.data);
+        this.$router.push('/profile');
       } else {
         this.$message.error(loginData.message);
       }
@@ -296,6 +297,7 @@ export default {
       if (registerData.status === 1) {
         const { data: userData } = await getUserInfo();
         this.USER_SIGNIN(userData.data);
+        this.$router.push('/profile');
       } else {
         this.$message.error(registerData.message);
       }

diff --git a/src/pages/profile.vue b/src/pages/profile.vue
@@ -1,15 +1,142 @@
 <template>
   <div>
-    profile
+    <my-header></my-header>
+    <div class="profile-wrap">
+      <div class="banner-wrap">
+        <div
+          class="banner"
+          :style="'background-image:url(' + imageUrl + ');'"
+        ></div>
+        <div class="userinfo">
+          <div
+            class="avatar"
+            :style="'background-image:url(' + avatar + ');'"
+          ></div>
+          <ul class="infoList">
+            <li>
+              <p class="title">用户名：</p>
+              <p>{{ userInfo.username }}</p>
+            </li>
+            <li>
+              <p class="title">邮箱：</p>
+              <p>{{ userInfo.email }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="user-wrap">
+      <div>
+        <div class="title"><font-awesome-icon :icon="['fas', 'edit']" /><span>我发表的影评</span></div>
+        <div calss="main">
+          <p>暂无</p>
+        </div>
+      </div>
+      <div>
+        <div class="title"><font-awesome-icon :icon="['fas', 'book-open']" /><span>我推荐的电影</span></div>
+        <div calss="main">
+          <p>暂无</p>
+        </div>
+      </div>
+      <div>
+        <div class="title"><font-awesome-icon :icon="['fas', 'chart-bar']" /><span>我参与的投票</span></div>
+        <div calss="main">
+          <p>暂无</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import myHeader from "_c/common/Header";
+import { mapState } from "vuex";
 export default {
-
-}
+  components: {
+    myHeader
+  },
+  data() {
+    return {
+      imageUrl: "http://njupt.xichi.xyz/th.jpg",
+      avatar: "http://njupt.xichi.xyz/movies/avatar.jpg"
+    };
+  },
+  computed: {
+    ...mapState(["userLogin", "userInfo"])
+  },
+  methods: {},
+  mounted() {}
+};
 </script>
 
-<style>
+<style lang="stylus" scoped>
+.profile-wrap
+  width 100vw
+  height 100%
+  .banner-wrap
+    position relative
+    height 450px
+    width 100%
+    .banner
+      height 100%
+      width 100%
+      background-position center center
+      background-size cover
+    .userinfo
+      position absolute
+      bottom -200px
+      left 4rem
+      width 200px
+      height 400px
+      background-color #fff
+      border-radius 10px
+      box-shadow 0 0 10px 0 rgba(#3085a3,0.5)
+      .avatar
+        width 190px
+        height 190px
+        margin 5px
+        border-radius 10px
+        background-position center center
+        background-size cover
+      .infoList
+        font-size 13px
+        text-align left
+        .title
+          font-size 15px
+          font-weight bold
+.user-wrap
+  padding-left 400px
+  font-size 16px
+  > div
+    margin 1rem 2rem 1rem 1rem
+    height 300px
+    border-radius 20px
+    box-shadow 0 0 10px 0 rgba(#3085a3,0.4)
+    .title
+      font-size 18px
+      line-height 50px
+      color #999
+      text-align left
+      padding-left 20px
+      > span 
+        padding-left 5px
+
+
+@media screen and (max-width: 1024px)
+  .userinfo
+    left 2rem !important
+  .user-wrap
+    padding-left calc(2rem + 200px)
+    > div
+      margin .5rem
 
-</style>
+@media screen and (max-width: 767px)
+  .userinfo
+    left 50% !important
+    transform translateX(-50%)
+  .user-wrap
+    padding-top 220px
+    padding-left 0
+    > div
+      margin 30px
+</style>
diff --git a/src/router.js b/src/router.js
@@ -4,6 +4,7 @@ const index = r => require.ensure([], () => r(require('@/pages/index.vue')), 'in
 const movieReview = r => require.ensure([], () => r(require('@/pages/movieReview/list.vue')), 'movieReview')
 const weeklyMovie = r => require.ensure([], () => r(require('@/pages/weeklyMovie/list.vue')), 'weeklyMovie')
 const login = r => require.ensure([], () => r(require('@/pages/login.vue')), 'login')
+const profile = r => require.ensure([], () => r(require('@/pages/profile.vue')), 'profile')
 const MR_write = r => require.ensure([], () => r(require('@/pages/movieReview/write.vue')), 'MR_write')
 const MR_details = r => require.ensure([], () => r(require('@/pages/movieReview/details.vue')), 'MR_details')
 const WM_details = r => require.ensure([], () => r(require('@/pages/weeklyMovie/details.vue')), 'WM_details')
@@ -15,6 +16,7 @@ var router = new VueRouter({
         { path: '/', redirect: '/index' },
         { path: '/index', component: index },
         { path: '/login', component: login },
+        { path: '/profile', component: profile },
         { path: '/movieReview', component: movieReview},
         { path: '/movieReview/write', component: MR_write },
         { path: '/movieReview/details/:id', component: MR_details },