🎨 用户卡片UI优化

components/common/user/list.vue

@@ -1,18 +1,29 @@
 <template>
   <div class="wrapper">
-    <el-row>
+    <el-row :gutter="20">
-      <el-col :span="12" v-for="user in users.users" :key="user.idUser" style="margin-bottom: 1rem;">
+      <el-col :span="8" v-for="user in users.users" :key="user.idUser" style="margin-bottom: 1rem;">
-        <el-col :span="3">
+        <el-card shadow="always" :body-style="{textAlign: 'center', paddingBottom: '20'}">
-          <el-avatar size="medium" :src="user.avatarUrl"></el-avatar>
+          <el-col :span="24">
-        </el-col>
+            <el-link target="_blank" :href="'/user/' + user.account" class="text-default" :underline="false">
-        <el-col :span="21">
+              <el-avatar :src="user.avatarUrl" style="width: 50px;height: 50px;"></el-avatar>
-          <div>
-            <el-link rel="nofollow" @click="onRouter(user.account)" :underline="false" class="text-default">
-              <span v-html="user.nickname"></span>
             </el-link>
-            <small class="d-block text-muted" v-html="user.signature"></small>
+          </el-col>
-          </div>
+          <el-col :span="24">
-        </el-col>
+              <el-link target="_blank" :href="'/user/' + user.account" class="text-default">
+                <span style="font-size: 20px;font-weight: bold;">{{ user.nickname }}</span>
+              </el-link>
+          </el-col>
+          <el-col :span="24" style="padding: 1rem 0;">
+            <small class="d-block text-muted" v-if="user.signature" v-html="user.signature"></small>
+            <small class="d-block text-muted" v-else>还没有介绍自己</small>
+          </el-col>
+          <el-col :span="24" style="padding: 2rem 0;">
+            <template v-if="userInfo.idUser !== user.idUser">
+              <el-button v-if="isFollower(user.idUser)" size="medium" round @click="cancelFollowUser2(user.idUser)">取消关注</el-button>
+              <el-button v-else size="medium" round @click="followUser2(user.idUser)">关注</el-button>
+            </template>
+          </el-col>
+        </el-card>
       </el-col>
       <el-col v-show="!users" class="text-center">
         这里什么都没有!
@@ -32,8 +43,14 @@
 </template>
 
 <script>
+import {mapState} from 'vuex';
 export default {
   name: "UserList",
+  computed: {
+    ...mapState({
+      userInfo: state => state.oauth
+    })
+  },
   props: {
     users: Object
   },
@@ -45,6 +62,15 @@ export default {
     },
     currentChange(page) {
       this.$emit('currentChange', page);
+    },
+    followUser2(idUser) {
+      this.$emit('followUser', idUser);
+    },
+    cancelFollowUser2(idUser) {
+      this.$emit('cancelFollowUser', idUser);
+    },
+    isFollower(idUser) {
+      return this.$store.getters["follow/isFollower"](idUser)
     }
   }
 }