fix: 修改排行榜中的问题

slimkit · May 7, 2018 · 451f767 · 451f767
1 parent fb5e064
commit 451f767
Show file tree

Hide file tree

Showing 16 changed files with 290 additions and 260 deletions.
diff --git a/src/components/style/diySelect.less b/src/components/style/diySelect.less
@@ -1,75 +1,43 @@
 @diySelect-prefix: diy-select;
-.@{diySelect-prefix}{
+.@{diySelect-prefix} {
   display: inline-block;
   width: 280px;
   background: #fff;
   height: 90px;
   position: relative;
-  &--label{
+  &--label {
     padding: 20px;
     height: 100%;
     line-height: 90-40px;
     position: relative;
-    &:after{
-      content: '▼';
+    &:after {
+      content: "▼";
       position: absolute;
       right: 20px;
-      transition: all .3s ease;
+      transition: all 0.3s ease;
       transform-origin: center;
+      transform: scale(0.6);
     }
   }
 
-  &--options{
+  &--options {
     background-color: #fff;
     position: absolute;
     left: 0;
     right: 0;
     box-shadow: -1px 0 3px #ededed;
   }
 
-  &--option{
+  &--option {
     padding: 0 20px;
     height: 90px;
     border-top: 1px solid #ededed; /*no*/
     line-height: 90px;
   }
 
-  .open &--label{
-    &::after{
-      transform: rotate(180deg);
+  .open &--label {
+    &::after {
+      transform: scale(0.6) rotate(180deg);
     }
   }
 }
-
-
-
-// &-select{
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-//   right: 0;
-//   bottom: 0;
-//   margin: auto;
-//   &--label{
-//     margin: 0;
-//     text-align: center;
-//     &::after{
-//       content: "▼"
-//     }
-//   }
-//   &--options{
-//     position: fixed;
-//     top: 90px;
-//     left: 0;
-//     right: 0;
-//     bottom: 0;
-//     background-color: rgba(0, 0, 0, .3);
-//   }
-//   &--option{
-//     width: 100%;
-//     height: 90px;
-//     text-align: center;
-//     background-color: #fff;
-//     border-bottom: 1px solid #ededed;
-//   }
-// }
diff --git a/src/page/message/children/notification.vue b/src/page/message/children/notification.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="`${prefixCls}`">
-        <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main">
+        <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
             <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
                 <svg class='m-style-svg m-svg-def' @click='goBack'>
                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
@@ -20,9 +20,9 @@
                 ref='loadmore'
                 :class="`${prefixCls}-loadmore`"
         >
-            <section :class="`${prefixCls}-item`" v-for="notification in notifications" :key="notification.id">
-                <h5>{{ notification.data.content }}</h5>
-                <p>{{ notification.created_at | time2tips }}</p>
+            <section class="m-box m-aln-st m-main m-bb1 notification-item" v-for="notification in notifications" :key="notification.id">
+                <h5 class="m-flex-grow1 m-flex-shrink1">{{ notification.data.content }}</h5>
+                <p class="m-flex-grow0 m-flex-shrink0">{{ notification.created_at | time2tips }}</p>
             </section>
         </load-more>
     </div>
@@ -77,4 +77,17 @@ export default {
 };
 </script>
 <style lang="less">
+.notification-item {
+  padding: 30px;
+  h5 {
+    color: #333;
+    font-size: 30px;
+    font-weight: 400;
+  }
+  p {
+    margin-left: 30px;
+    color: #999;
+    font-size: 24px;
+  }
+}
 </style>
diff --git a/src/page/message/list/audits.vue b/src/page/message/list/audits.vue
@@ -1,9 +1,17 @@
 <template>
   <div :class="`${prefixCls}`">
-    <head-top :go-back='goBack'>
-      <diy-select slot='nav' v-model='currentType' :options='options' placeholder='动态评论置顶'></diy-select>
-    </head-top>
-    <div :class="`${prefixCls}-container`">
+    <header class="m-box m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-aln-center m-flex-grow1 m-flex-base0">
+        <svg class="m-style-svg m-svg-def" @click="goBack">
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
+      </div>
+      <div class="m-box m-aln-center m-flex-grow2 m-flex-base2 m-justify-center">
+        <diy-select slot='nav' v-model='currentType' :options='options' placeholder='动态评论置顶'></diy-select>
+      </div>
+      <div class="m-box m-aln-center m-flex-grow1 m-flex-base0 m-justify-end"></div>
+    </header>
+    <div :class="`${prefixCls}-container`" style="padding-top: 0.9rem">
       <router-view></router-view>
     </div>
   </div>

diff --git a/src/page/message/style.less b/src/page/message/style.less
@@ -1,26 +1,6 @@
 @message-prefix: message;
 @msg-prefix: msg;
 @msgList-prefix: msgList;
-@notification-prefix: notification;
-/**** 通知页面 ****/
-.@{notification-prefix} {
-    &-item {
-        padding: 20px;
-        background-color: #fff;
-        border-bottom: 1px solid #f6f6f6;
-        h5 {
-            font-size: 30px;
-            margin: 0;
-            color: #333;
-            font-weight: 400;
-        }
-        p {
-            font-size: 24px;
-            color: #999;
-            margin: 20px 0 0;
-        }
-    }
-}
 
 /**** message页面 ****/
 .@{message-prefix} {

diff --git a/src/page/rank/lists/balanceList.vue b/src/page/rank/lists/balanceList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='财富达人排行榜'>
-      <div slot='append'>
-
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>财富达人排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -15,7 +23,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+            <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+            </svg>
         </template>
       </div>
     </div>
@@ -24,13 +34,14 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
+
 const prefixCls = "rankItem";
 export default {
   components: {
     HeadTop
   },
   name: "balanceList",
-  props: {},
   data() {
     return {
       prefixCls,
@@ -45,12 +56,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -61,18 +73,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {
@@ -83,9 +89,7 @@ export default {
           this.loading = false;
         });
     }
-  },
-
-  created() {}
+  }
 };
 </script>
 

diff --git a/src/page/rank/lists/checkinList.vue b/src/page/rank/lists/checkinList.vue
@@ -1,10 +1,18 @@
 <template>
   <div :class="prefixCls">
-    <head-top :go-back='cancel' append='true' title='社区签到排行榜'>
-      <div slot='append'>
-
+    <header slot="head" class="m-box m-justify-bet m-aln-center m-head-top m-pos-f m-main m-bb1">
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
+        <svg class='m-style-svg m-svg-def' @click='cancel'>
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+        </svg>
       </div>
-    </head-top>
+      <div class="m-box-model m-flex-grow1 m-aln-center m-flex-base0 m-head-top-title">
+        <span>社区签到排行榜</span>
+      </div>
+      <div class="m-box m-flex-grow1 m-aln-center m-flex-base0 m-justify-end">
+
+      </div>
+    </header>
     <div :class="`${prefixCls}-list`">
       <div :class="`${prefixCls}-list-item`" v-for="(user, index) in users" :key="user.id">
         <span :class="{ top: index < 3 }" class="rank">{{ index + 1 }}</span>
@@ -16,7 +24,9 @@
           </div>
         </div>
         <template>
-            <v-icon :type='`base-${isFollow(user.id)}`' class='find-item-follow-icon' @click.native='followUser(user.id)'></v-icon>
+          <svg class="m-style-svg m-svg-big" @click.stop="followUser(user, isFollow(user))">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#base-${isFollow(user)}`"></use>
+          </svg>
         </template>
       </div>
     </div>
@@ -25,6 +35,7 @@
 
 <script>
 import HeadTop from "../../../components/HeadTop";
+import { followUserByStatus } from "@/api/user.js";
 const prefixCls = "rankItem";
 export default {
   components: {
@@ -46,12 +57,13 @@ export default {
   },
 
   methods: {
-    isFollow(id) {
-      let user = this.$store.getters.getUserById(id);
+    isFollow(user) {
       const { follower = false, following = false } = user;
       return follower && following
         ? "eachFollow"
-        : follower ? "follow" : "unFollow";
+        : follower
+          ? "follow"
+          : "unFollow";
     },
     cancel() {
       this.to("/rank/users");
@@ -62,18 +74,12 @@ export default {
         this.$router.push(path);
       }
     },
-    followUser(id) {
+    followUser(user, status) {
       if (this.loading) return;
       this.loading = true;
-      let user = this.$store.getters.getUserById(id);
-      this.$store
-        .dispatch("FOLLOW_USER", {
-          id,
-          status: this.isFollow(id)
-        })
-        .then(({ follower }) => {
-          user.follower = follower;
-          this.$store.commit("SAVE_USER", user);
+      followUserByStatus({ status, id: user.id })
+        .then(state => {
+          user.follower = state;
           this.loading = false;
         })
         .catch(err => {