修改

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

@@ -1,99 +1,175 @@
 <template>
     <div class="container">
-        <div class="top"></div>
-        <!-- <img class="top" :src="userInfo.avatar" alt="" /> -->
-        <div class="top1">
-            <div class="title">
-                <div class="text">
-                    <div
-                        class="text2"
-                        @click="tab(item)"
-                        v-for="(item, index) in tabs"
-                        :key="index"
-                        :class="{ active: active === item }"
-                    >
-                        <div v-if="item === '粉丝'" class="text3">{{ userInfo.followers }}</div>
-                        <div v-if="item === '关注'" class="text3">{{ userInfo.follows }}</div>
-                        {{ item }}
+        <div class="border"></div>
+        <div class="content">
+            <el-empty v-if="empty" description="还没有粉丝哦～"></el-empty>
+            <div class="box" v-else>
+                <router-link :to="{ path: '/castingDetail?id=' + info.id }">
+                    <div class="text">
+                        <img class="text1" :src="info.avatar" alt="" />
+                        <div class="box2">
+                            <div class="name">
+                                <div class="name1">{{ info.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>{{ info.follows }}</span>
+                                    </div>
+                                    <div class="text4">
+                                        已售 <span>{{ info.sales }}</span>
+                                    </div>
+                                </div>
+                                <div class="follow" :class="{ followed: info.follow }" @click.prevent="like(info)">
+                                    {{ info.follow ? '已关注' : '关注' }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="imgBox">
+                            <img class="imgBox1" :src="info.bg" alt="" />
+                        </div>
                     </div>
-                </div>
+                </router-link>
             </div>
-            <img class="img2" :src="userInfo.avatar" alt="" />
         </div>
     </div>
 </template>
 <script>
-import { mapState } from 'vuex';
+import user from '../mixins/user';
 export default {
+    mixins: [user],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
     data() {
-        return {
-            tabs: ['粉丝', '关注'],
-            active: ''
-        };
+        return {};
     },
-    methods: {
-        tab(e) {
-            this.active = e;
-            if (e === '关注') {
-                this.$router.push('/fans');
-                this.$emit('init');
-                this.$forceUpdate();
+    computed: {
+        empty() {
+            if (this.info.length > 0) {
+                return true;
             } else {
-                this.$router.push('/fans');
-                this.$emit('init2');
-                this.$forceUpdate();
+                return false;
             }
         }
     },
-    computed: {
-        ...mapState(['userInfo'])
-    }
+    mounted() {
+        console.log(this.info);
+    },
+    methods: {}
 };
 </script>
 <style lang="less" scoped>
 .container {
-    .top {
-        height: 146px;
-        width: 100%;
-        background: @prim;
+    .border {
+        height: 1px;
+        background: #494a4d;
+        border-radius: 1px;
+        margin: 17px 10px 20px;
     }
-    .top1 {
-        display: flex;
-        justify-content: center;
-        position: relative;
-        .title {
-            text-align: center;
-            cursor: pointer;
-            .text3 {
-                font-size: 22px;
-                font-weight: normal;
-                color: #ffffff;
-                line-height: 24px;
-            }
+    /deep/ .el-empty {
+        width: 100px;
+        height: 110px;
+        padding-top: 200px;
+        margin: 0 auto;
+    }
+    /deep/ .el-empty__description {
+        color: #ccc;
+        margin: 10px 0 0 2px;
+    }
+    .followed {
+        border-color: #939599;
+        color: #939599 !important;
+    }
+    .content {
+        padding: 0 16px;
+        .box {
+            .flex();
+            justify-content: space-between;
             .text {
-                display: flex;
-                .text2 {
-                    font-size: 14px;
-                    font-weight: 400;
-                    padding: 0 100px;
-                    color: #939599;
-                    line-height: 24px;
-                    margin-top: 6px;
-                    &.active {
-                        color: @prim;
+                .flex();
+                justify-content: space-between;
+                .text1 {
+                    width: 78px;
+                    height: 78px;
+                    border-radius: 50%;
+                    background: red;
+                    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-infos: 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;
+                            }
+                        }
+                        .follow {
+                            width: 70px;
+                            height: 26px;
+                            color: @prim;
+                            font-size: 14px;
+                            border-radius: 16px;
+                            border: 1px solid;
+                            text-align: center;
+                            line-height: 26px;
+                        }
+                    }
+                }
+                .imgBox {
+                    .flex();
+                    .imgBox1 {
+                        width: 140px;
+                        height: 100px;
+                        border-radius: 8px;
+                        margin-left: 30px;
                     }
                 }
             }
         }
-        .img2 {
-            position: absolute;
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            padding: 4px;
-            background: #ffffff;
-            top: -50px;
-        }
     }
 }
 </style>

src/main/pc-space/src/router/index.js

@@ -96,14 +96,6 @@ const routes = [
                             title: '资料账号'
                         }
                     },
-                    {
-                        path: '/fans',
-                        name: 'fans',
-                        component: () => import('../views/user/Fans.vue'),
-                        meta: {
-                            title: '粉丝'
-                        }
-                    },
                     {
                         path: '/address',
                         name: 'address',

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

@@ -1,7 +1,31 @@
 <template>
     <div class="container">
-        <fans-info></fans-info>
-        <div class="content">
+        <div class="top"></div>
+        <!-- <img class="top" :src="userInfo.avatar" alt="" /> -->
+        <div class="top1">
+            <div class="title">
+                <div class="text">
+                    <div
+                        class="text2"
+                        @click="tab(item)"
+                        v-for="(item, index) in tabs"
+                        :key="index"
+                        :class="{ active: active === item }"
+                    >
+                        <div v-if="item === '粉丝'" class="text3">{{ userInfo.followers }}</div>
+                        <div v-if="item === '关注'" class="text3">{{ userInfo.follows }}</div>
+                        {{ item }}
+                    </div>
+                </div>
+            </div>
+            <img class="img2" :src="userInfo.avatar" alt="" />
+        </div>
+        <div v-if="active === '关注' || active === '粉丝'">
+            <div v-for="item in list" :key="item.id">
+                <fans-info :info="item"></fans-info>
+            </div>
+        </div>
+        <div class="content" v-else>
             <div class="name">基本信息</div>
             <div class="box">
                 <div class="text">
@@ -98,7 +122,11 @@ import FansInfo from '../../components/FansInfo.vue';
 export default {
     components: { FansInfo },
     data() {
-        return {};
+        return {
+            tabs: ['粉丝', '关注'],
+            active: '',
+            list: []
+        };
     },
     computed: {
         ...mapState(['userInfo']),
@@ -123,6 +151,20 @@ export default {
         }
     },
     methods: {
+        tab(e) {
+            this.active = e;
+            if (e === '关注') {
+                this.$http.get('/user/myFollows').then(res => {
+                    this.list = res;
+                    console.log(res);
+                });
+            } else {
+                this.$http.get('/user/myFollowers').then(res => {
+                    this.list = res;
+                    console.log(res);
+                });
+            }
+        },
         Auths() {
             if (this.type) {
                 if (this.type.name == 'ROLE_INSTITUTION') {
@@ -149,6 +191,49 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
+    .top {
+        height: 146px;
+        width: 100%;
+        background: @prim;
+    }
+    .top1 {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        .title {
+            text-align: center;
+            cursor: pointer;
+            .text3 {
+                font-size: 22px;
+                font-weight: normal;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .text {
+                display: flex;
+                .text2 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    padding: 0 100px;
+                    color: #939599;
+                    line-height: 24px;
+                    margin-top: 6px;
+                    &.active {
+                        color: @prim;
+                    }
+                }
+            }
+        }
+        .img2 {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            padding: 4px;
+            background: #ffffff;
+            top: -50px;
+        }
+    }
     .content {
         padding: 0 16px;
         .name {

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

@@ -1,189 +0,0 @@
-<template>
-    <div class="container">
-        <fans-info @init="init" @init2="init2"></fans-info>
-        <div class="border"></div>
-        <div class="content">
-            <el-empty v-if="empty" description="还没有粉丝哦～"></el-empty>
-            <div class="box" v-if="!empty">
-                <router-link :to="{ path: '/castingDetail?id=' + item.id }" v-for="item in list" :key="item.id">
-                    <div class="text">
-                        <img class="text1" :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>
-                                <div class="follow" :class="{ followed: item.follow }" @click.prevent="like(item)">
-                                    {{ item.follow ? '已关注' : '关注' }}
-                                </div>
-                            </div>
-                        </div>
-                        <div class="imgBox">
-                            <img class="imgBox1" :src="item.bg" alt="" />
-                        </div>
-                    </div>
-                </router-link>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import FansInfo from '../../components/FansInfo.vue';
-import user from '../../mixins/user';
-import { mapState } from 'vuex';
-export default {
-    components: { FansInfo },
-    mixins: [user],
-    data() {
-        return {
-            empty: true
-        };
-    },
-    computed: {
-        ...mapState(['userInfo'])
-    },
-    methods: {
-        init() {
-            this.$http.get('/user/myFollows').then(res => {
-                this.list = res;
-                this.$nextTick(() => {
-                    if (this.list.length === 0) {
-                        this.empty = true;
-                    } else {
-                        this.empty = false;
-                    }
-                });
-            });
-        },
-        init2() {
-            this.$http.get('/user/myFollowers').then(res => {
-                this.list = res;
-                this.$nextTick(() => {
-                    if (this.list.length === 0) {
-                        this.empty = true;
-                    } else {
-                        this.empty = false;
-                    }
-                });
-            });
-        }
-    }
-};
-</script>
-<style lang="less" scoped>
-.container {
-    .border {
-        height: 1px;
-        background: #494a4d;
-        border-radius: 1px;
-        margin: 17px 10px 20px;
-    }
-    /deep/ .el-empty {
-        width: 100px;
-        height: 110px;
-        padding-top: 200px;
-        margin: 0 auto;
-    }
-    /deep/ .el-empty__description {
-        color: #ccc;
-        margin: 10px 0 0 2px;
-    }
-    .followed {
-        border-color: #939599;
-        color: #939599 !important;
-    }
-    .content {
-        padding: 0 16px;
-        .box {
-            .flex();
-            justify-content: space-between;
-            .text {
-                .flex();
-                justify-content: space-between;
-                .text1 {
-                    width: 78px;
-                    height: 78px;
-                    border-radius: 50%;
-                    background: red;
-                    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-items: 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;
-                            }
-                        }
-                        .follow {
-                            width: 70px;
-                            height: 26px;
-                            color: @prim;
-                            font-size: 14px;
-                            border-radius: 16px;
-                            border: 1px solid;
-                            text-align: center;
-                            line-height: 26px;
-                        }
-                    }
-                }
-                .imgBox {
-                    .flex();
-                    .imgBox1 {
-                        width: 140px;
-                        height: 100px;
-                        border-radius: 8px;
-                        margin-left: 30px;
-                    }
-                }
-            }
-        }
-    }
-}
-</style>

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

@@ -64,11 +64,11 @@ export default {
             background: #1c1e26 !important;
             color: #ffffff !important;
             font-size: 18px !important;
-            padding-left: 24px !important;
+            margin-left: 24px !important;
         }
         .el-menu-item {
             background: #1c1e26 !important;
-            margin-left: 18px !important;
+            padding-left: 78px !important;
             span {
                 color: #ffffff !important;
                 font-size: 18px !important;