关注

src/main/pc-space/src/components/FansInfo.vue

@@ -61,6 +61,7 @@ export default {
     methods: {
         fans(list) {
             this.like(list);
+            if(list.follws)
             this.$emit('getDetail');
         }
     }

src/main/pc-space/src/views/user/AccountData.vue

@@ -20,23 +20,54 @@
                     </div>
                 </div>
             </div>
-
             <el-upload :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload">
                 <img v-if="userInfo.avatar" class="img2" :src="userInfo.avatar" alt="" />
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
         </div>
-        <div v-if="active === '关注' || active === '粉丝'">
+        <div class="userContent" v-if="active === '关注' || active === '粉丝'">
+            <div class="border"></div>
+            <el-empty v-if="empty" description="还没有哦～"></el-empty>
             <div v-for="item in list" :key="item.id">
-                <fans-info :list="item" @getDetail="tab"></fans-info>
+                <div class="box">
+                    <router-link :to="{ path: '/castingDetail?id=' + item.id }">
+                        <div class="text">
+                            <img class="img4" :src="item.avatar" alt="" />
+                            <div class="box2">
+                                <div class="name">
+                                    <div class="name1">{{ item.nickname }}</div>
+                                    <img class="name2" src="../../assets/img/renzheng_icon@3x.png" alt="" />
+                                </div>
+                                <div class="text2">暂无</div>
+                                <div class="box3">
+                                    <div class="box4">
+                                        <div class="text4">
+                                            粉丝 <span>{{ item.follows }}</span>
+                                        </div>
+                                        <div class="text4">
+                                            已售 <span>{{ item.sales }}</span>
+                                        </div>
+                                    </div>
+                                    <el-button
+                                        plain
+                                        round
+                                        :class="{ prim: !item.follow }"
+                                        size="mini"
+                                        @click.prevent="like(item)"
+                                    >
+                                        {{ item.follow ? '已关注' : '关注' }}
+                                    </el-button>
+                                </div>
+                            </div>
+                            <div class="imgBox" v-if="item.bg">
+                                <img class="imgBox1" :src="item.bg" alt="" />
+                            </div>
+                        </div>
+                    </router-link>
+                </div>
             </div>
         </div>
-        <div v-if="empty">
-            <div class="border2"></div>
-            <el-empty description="还没有哦～"></el-empty>
-        </div>
-
-        <div class="content" v-if="!empty && active !== '关注' && active !== '粉丝'">
+        <div class="content" v-if="active !== '关注' && active !== '粉丝'">
             <div class="name">基本信息</div>
             <div class="box">
                 <div class="text">
@@ -128,13 +159,15 @@
 <script>
 import { mapState } from 'vuex';
 import resolveUrl from 'resolve-url';
+import user from '../../mixins/user';
 import Clipboard from 'clipboard';
-import FansInfo from '../../components/FansInfo.vue';
+// import FansInfo from '../../components/FansInfo.vue';
 export default {
     created() {
         this.uploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
     },
-    components: { FansInfo },
+    // components: { FansInfo },
+    mixins: [user],
     data() {
         return {
             tabs: ['粉丝', '关注'],
@@ -329,13 +362,6 @@ export default {
         color: #ccc;
         margin: 10px 0 0 17px;
     }
-    // /deep/ .el-message-box {
-    //     /deep/ .el-message-box__btns {
-    //         /deep/ .el-button {
-    //             background: red !important;
-    //         }
-    //     }
-    // }
     .top {
         height: 146px;
         width: 970px;
@@ -380,6 +406,95 @@ export default {
             left: 431px;
         }
     }
+    .userContent {
+        padding: 0 16px;
+
+        .box {
+            .flex();
+            justify-content: space-between;
+            margin-bottom: 20px;
+            .text {
+                .flex();
+                justify-content: space-between;
+                .img4 {
+                    width: 78px;
+                    height: 78px;
+                    border-radius: 50%;
+                    margin-right: 12px;
+                }
+                .box2 {
+                    width: 288px;
+                    margin-right: 50px;
+                    .name {
+                        .flex();
+                        margin-top: 5px;
+                        .name1 {
+                            font-size: 16px;
+                            font-weight: bold;
+                            color: #ffffff;
+                            line-height: 24px;
+                            margin-right: 6px;
+                        }
+                        .name2 {
+                            width: 18px;
+                            height: 18px;
+                        }
+                    }
+                    .text2 {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #939599;
+                        line-height: 24px;
+                        margin-bottom: 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    .box3 {
+                        display: flex;
+                        align-content: center;
+                        justify-content: space-between;
+                        .box4 {
+                            display: flex;
+                            .text4 {
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #939599;
+                                line-height: 24px;
+                                margin-right: 20px;
+                            }
+                            span {
+                                color: #fff;
+                            }
+                        }
+                        .el-button {
+                            background-color: transparent;
+                            min-width: 76px;
+                            height: 28px;
+
+                            &.prim {
+                                .line(@radius:28px);
+                                text-align: center;
+                                /deep/span {
+                                    color: @prim;
+                                    position: relative;
+                                    z-index: 1;
+                                }
+                            }
+                        }
+                    }
+                }
+                .imgBox {
+                    .flex();
+                    .imgBox1 {
+                        width: 140px;
+                        height: 100px;
+                        border-radius: 8px;
+                        margin-left: 30px;
+                    }
+                }
+            }
+        }
+    }
     .content {
         padding: 0 16px;
         .name {