达人列表添加toDetail事件绑定

王强
1 parent 821bd7de
Showing 3 changed files with 61 additions and 29 deletions
src/components/dresserList/dresserList.vue
src/pages/fansShopMessageList/fansShopMessageList.vue
src/pages/optimization/optimization.vue
 <template>
-  <div>
-  <div class="item_box">
-      <img class="head_portrait"  v-lazy="dresserList.user_img" src="static/img/1.png" alt="网家家"/>
-      <div class="user_info">
-          <div class="name">
-             {{dresserList.title}}
-          </div>
-          <div class="desc">
-              {{dresserList.user_title}}
-          </div>
-      </div>
-      <img class="arrow_right" src="static/img/icon_arrow_right.png" alt="网家家"/>
-  </div>
-  </div>
+    <div>
+        <div class="item_box" @click="toDetail(dresserList)">
+            <img class="head_portrait"  v-lazy="dresserList.user_img" />
+            <div class="user_info">
+                <div class="name">
+                    {{dresserList.title}}
+                </div>
+                <div class="desc">
+                    {{dresserList.user_title}}
+                </div>
+            </div>
+            <img class="arrow_right" src="static/img/icon_arrow_right.png" />
+        </div>
+    </div>
 </template>
-
 <script>
-  export default {
-    name: 'dresserList',
-    data () {
-      return {
+    export default {
+        name: 'dresserList',
+        data() {
+            return {
-      }
-    },
-      props: ["dresserList"],
-    created(){
+            }
+        },
+        props: ["dresserList"],
+        methods: {
-    },
-    methods: {
-    }
+            /**
+             * 点击事件
+             * @param {object} item [数据参数]
+             */
+            toDetail(item) {
+                this.$emit("toDetail", item);
+            }
+        }
   }
 </script>
@@ -15,8 +15,10 @@
                     v-infinite-scroll="loadMore"
                     infinite-scroll-disabled="loading"
                     :infinite-scroll-distance="list.length">
-                    <li v-for="(item, index) in list" :key="index" @click="$parent.toDetail(item)">
-                        <dresserList
+                    <li v-for="(item, index) in list" :key="index">
+
+                        <!-- 达人列表组件 -->
+                        <dresserList @toDetail="toDetail"
                             :dresserList="item">
                         </dresserList>
                     </li>
@@ -135,6 +137,18 @@
             },
             /**
+             * 通用跳转
+             * @param {object} item [数据对象]
+             */
+            toDetail(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+                    this.$parent.gotoDetail(item);
+                }
+            },
+
+            /**
              * 后退
              */
             back() {
@@ -14,7 +14,9 @@
             <!-- 已关注达人列表（4条） -->
             <div v-if="index < 4" v-for="(item, index) in dresserList" :key="index">
-                <dresserList
+
+                <!-- 达人列表组件 -->
+                <dresserList @toDetail="toDetail"
                     :dresserList="item">
                 </dresserList>
             </div>
@@ -297,6 +299,18 @@
                 if (typeof this.$parent.gotoDetail === "function") {
                     this.$parent.gotoDetail(item);
                 }
+            },
+
+            /**
+             * 通用跳转
+             * @param {object} item [数据对象]
+             */
+            toDetail(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+                    this.$parent.gotoDetail(item);
+                }
             }
         },
         head: {