粉丝&关注

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

@@ -69,6 +69,7 @@ export default {
                         liked: true,
                         likes: this.info.likes + 1
                     });
+                    this.$forceUpdate();
                     this.$message.success('收藏成功');
                 });
             } else {
@@ -78,6 +79,7 @@ export default {
                         liked: false,
                         likes: this.info.likes - 1
                     });
+                    this.$forceUpdate();
                     this.$message.success('取消收藏');
                 });
             }

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

@@ -3,13 +3,13 @@
         <div class="top"></div>
         <!-- <img class="top" :src="userInfo.avatar" alt="" /> -->
         <div class="top1">
-            <div class="title" @click="all('/fans')">
-                <div class="title1">{{ userInfo.follows }}</div>
-                <div class="title2" :class="{ active }">粉丝</div>
+            <div class="title" @click="followers">
+                <div class="title1">{{ userInfo.followers }}</div>
+                <div class="title2">粉丝</div>
             </div>
             <img class="img2" :src="userInfo.avatar" alt="" />
-            <div class="title">
-                <div class="title1">{{ userInfo.followers }}</div>
+            <div class="title" @click="follows">
+                <div class="title1">{{ userInfo.follows }}</div>
                 <div class="title2">关注</div>
             </div>
         </div>
@@ -20,11 +20,19 @@ import { mapState } from 'vuex';
 export default {
     data() {
         return {
-            tabs: ['粉丝', '关注'],
-            active: ''
+            tabs: ['粉丝', '关注']
         };
     },
-    methods: {},
+    methods: {
+        follows() {
+            this.$router.push('/fans');
+            this.$emit('init');
+        },
+        followers() {
+            this.$router.push('/fans');
+            this.$emit('init2');
+        }
+    },
     computed: {
         ...mapState(['userInfo'])
     }

src/main/pc-space/src/mixins/user.js

@@ -15,6 +15,7 @@ export default {
                             follow: true,
                             followers: info.followers + 1
                         });
+                        this.$forceUpdate();
                     });
                 } else {
                     this.$http.get(`/user/${info.id}/unfollow`).then(() => {
@@ -24,6 +25,7 @@ export default {
                             follow: false,
                             followers: info.followers - 1
                         });
+                        this.$forceUpdate();
                     });
                 }
             });

src/main/pc-space/src/views/Casting.vue

@@ -113,6 +113,7 @@ export default {
         },
         setList(list) {
             this.list = list;
+            console.log(this.list);
         }
     }
 };

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

@@ -70,7 +70,7 @@ export default {
             this.$forceUpdate();
         },
         init() {
-            this.$http.post('/userAddress/all', { body: 'json' }).then(res => {
+            this.$http.post('/userAddress/save', { pagequery: this.userInfo.id }, { body: 'json' }).then(res => {
                 // this.fetchingData = false;
                 // this.list = res;
                 console.log(res);

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

@@ -1,41 +1,82 @@
 <template>
     <div class="container">
-        <fans-info></fans-info>
+        <fans-info @init="init" @init2="init2"></fans-info>
         <div class="border"></div>
         <div class="content">
-            <div class="box">
-                <div class="text">
-                    <div class="text1"></div>
-                    <div class="box2">
-                        <div class="name">
-                            <div class="name1">创作者姓名</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>233</span></div>
-                                <div class="text4">已售 <span>233</span></div>
+            <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 class="btn">关注</div>
+                        </div>
+                        <div class="imgBox">
+                            <img class="imgBox1" :src="item.bg" alt="" />
                         </div>
                     </div>
-                </div>
-                <div class="imgBox">
-                    <div class="imgBox1"></div>
-                    <div class="imgBox1"></div>
-                    <div class="imgBox1"></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 {};
+        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>
@@ -47,6 +88,16 @@ export default {
         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;
+    }
     .content {
         padding: 0 16px;
         .box {
@@ -64,6 +115,7 @@ export default {
                 }
                 .box2 {
                     width: 288px;
+                    margin-right: 50px;
                     .name {
                         .flex();
                         margin-top: 5px;
@@ -105,28 +157,26 @@ export default {
                                 color: #fff;
                             }
                         }
-                        .btn {
+                        .follow {
                             width: 70px;
                             height: 26px;
+                            color: @prim;
+                            font-size: 14px;
                             border-radius: 16px;
                             border: 1px solid;
-                            // border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
-                            line-height: 26px;
                             text-align: center;
-                            font-size: 14px;
-                            color: @prim;
+                            line-height: 26px;
                         }
                     }
                 }
-            }
-            .imgBox {
-                .flex();
-                .imgBox1 {
-                    width: 140px;
-                    height: 100px;
-                    border-radius: 8px;
-                    background: red;
-                    margin-left: 30px;
+                .imgBox {
+                    .flex();
+                    .imgBox1 {
+                        width: 140px;
+                        height: 100px;
+                        border-radius: 8px;
+                        margin-left: 30px;
+                    }
                 }
             }
         }

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

@@ -23,9 +23,13 @@
         <div class="border" style="margin: 30px 0"></div>
 
         <div class="list" v-loading="fetchingData">
-            <collection-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></collection-info>
+            <collection-info
+                v-for="(item, index) in showList"
+                :key="item.id"
+                :info.sync="showList[index]"
+            ></collection-info>
 
-            <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
+            <el-empty v-if="Empty" description="还没有该类型的藏品哦～"></el-empty>
         </div>
 
         <div class="pagination-wrapper">
@@ -66,46 +70,52 @@ export default {
             list: [],
             search: '',
             type: '',
-            empty: false,
-            url: '/collection/myLikes'
+            empty: false
+            // url: '/collection/myLikes'
         };
     },
     mixins: [pageableTable],
-    watch: {
-        type() {
-            this.$router
-                .replace({
-                    query: {
-                        ...this.$route.query,
-                        type: this.type
-                    }
+    computed: {
+        showList() {
+            return [...this.list]
+                .map((item, index) => {
+                    return {
+                        search: this.search,
+                        ...item,
+                        index
+                    };
                 })
-                .catch(() => {});
-            this.getData();
+                .filter(item => {
+                    return !this.type || this.type === item.type;
+                });
+        },
+        Empty() {
+            return this.showList.length ? false : true;
         }
     },
+    // watch: {
+    //     showList() {
+    //         return [...this.list]
+    //             .map((item, index) => {
+    //                 return {
+    //                     ...item,
+    //                     index
+    //                 };
+    //             })
+    //             .filter(item => {
+    //                 return !this.type || this.type === item.type;
+    //             });
+    //     }
+    // },
     mounted() {
         this.init();
+        console.log(this.showList);
     },
     methods: {
-        beforeGetData() {
-            return {
-                search: this.search,
-                query: {
-                    type: this.type
-                }
-            };
-        },
-        setList(list) {
-            this.list = list;
-        },
         init() {
             this.$http.get('/collection/myLikes').then(res => {
                 this.fetchingData = false;
                 this.list = res;
-                if (this.list.length === 0) {
-                    this.empty = true;
-                }
             });
         }
     }

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

@@ -21,7 +21,7 @@
                     :rules="rules"
                 >
                     <el-form-item label="当前手机号" prop="phone">
-                        <!-- <div class="phone">{{ Phone }}</div> -->
+                        <div class="phone">{{ Phone }}</div>
                     </el-form-item>
                     <el-form-item label="验证码" prop="code">
                         <el-input style="width: 300px" v-model="ruleForm.code" placeholder="请输入4位验证码">