css focus cate

@@ -170,8 +170,9 @@ const getCateListData = params => {
 
 
                 // 有子分类的，首先添加一级分类
                 // 有子分类的，首先添加一级分类
                 item.sub.push({
                 item.sub.push({
+                    id: item.id,
                     name: '全部' + item.name,
                     name: '全部' + item.name,
-                    id: item.sort,
+                    sort: item.sort,
                     url: helpers.urlFormat('/', {
                     url: helpers.urlFormat('/', {
                         sort: item.sort,
                         sort: item.sort,
                         sort_name: item.name,
                         sort_name: item.name,

 <template>
 <template>
-<div class="cate-page" id='cate-page'>
-    <div class="cate-nav clearfix" v-on:click='cateNavTopFun'>
-        <ul>
-            <li v-for="cate in brandCate">
-                <span>{{cate.name}}</span>
-            </li>
-        </ul>
-    </div>
-    <div class="cate-container clearfix">
-        <div class="content hide" style="height: 522px;"  v-for="cate in brandCate">
-            <ul class="primary-level">
-                <li v-for="ca in cate.ca" class="p-level-item {{#if index}} focus {{/if}}" v-on:click='cateNavLeftFun'>
-                    <a href="{{ca.url}}">{{ca.name}}</a>
+    <div class="cate-page" id='cate-page'>
+        <div class="cate-nav clearfix">
+            <ul>
+                <li v-for="(index, cate) in brandCate" v-on:click='cateNavTopFun(index)' v-bind:class="{focus: index === topcurrent}" >
+                    <span>{{cate.name}}</span>
                 </li>
                 </li>
             </ul>
             </ul>
-            <div class="sub-level-container">
-                <ul class="sub-level hide" v-for="ca in cate.ca">
-                    <li v-for="sub in ca.sub">
-                        <a href="{{sub.url}}">{{sub.name}}</a>
+        </div>
+        <div class="cate-container clearfix">
+            <div class="content" style="height: 522px;">
+                <ul class="primary-level">
+                    <li v-for="(index, ca) in cateNavLeftData" v-bind:class="{focus: index === leftcurrent}" class="p-level-item" v-on:click='cateNavLeftFun(index)'>
+                        <a href="{{ca.url}}">{{ca.name}}</a>
                     </li>
                     </li>
                 </ul>
                 </ul>
+                <div class="sub-level-container">
+                    <ul class="sub-level">
+                        <li v-for="sub in cateNavRightData">
+                            <a href="{{sub.url}}">{{sub.name}}</a>
+                        </li>
+                    </ul>
+                </div>
             </div>
             </div>
-        </div>
-    </div><!--/end cate-container-->
-</div>
+        </div><!--/end cate-container-->
+    </div>
 </template>
 </template>
-
 <style>
 <style>
 .cate-page {
 .cate-page {
     font-size: 36px;
     font-size: 36px;
@@ -202,12 +201,13 @@
         props: [],
         props: [],
         data() {
         data() {
             return {
             return {
-                brandCate: []
+                brandCate: [],
+                cateNavLeftData: [],
+                cateNavRightData: [],
+                topcurrent: 0,
+                leftcurrent: 0
             };
             };
         },
         },
-        watch: {
- 
-        },
         methods: {
         methods: {
             getCateList() {
             getCateList() {
                 let data = {
                 let data = {
@@ -219,50 +219,20 @@
                     data: data
                     data: data
                 }).then(result => {
                 }).then(result => {
                     this.brandCate = result;
                     this.brandCate = result;
-                    console.log(result, '====');
+                    this.cateNavLeftData = this.brandCate[0].ca;
+                    this.cateNavRightData = this.cateNavLeftData[0].sub;
                 }).fail(() => {
                 }).fail(() => {
                     tip('网络错误');
                     tip('网络错误');
                 });
                 });
             },
             },
-            cateNavTopFun(e) {
-                var $this = $(e.target).closest('li'),
-                    $nav = $('.cate-nav'),
-                    $cateContainer = $('.cate-container'),
-                    $contents = $cateContainer.children('.content'),
-                    $curContent = $contents.not('.hide'),
-                    index = $this.index();
-
-                    if ($this.hasClass('focus')) {
-                        return;
-                    }
-
-                    $nav.find('li.focus').removeClass('focus');
-                    $this.addClass('focus');
-
-                    $curContent.addClass('hide');
-                    $curContent = $contents.eq(index).removeClass('hide');
+            cateNavTopFun(index) {
+                this.topcurrent = index;
+                this.cateNavLeftData = this.brandCate[index].ca;
+                this.cateNavRightData = this.cateNavLeftData[0].sub;
             },
             },
-            cateNavLeftFun(e) {
-                var $this = $(e.target),
-                    $subLevel,
-                    $cur, index;
-
-                $cur = $this.closest('.p-level-item');
-console.log($cur.html(), '222');
-                if ($cur.length > 0) {
-                    index = $cur.index();
-                    $subLevel = $this.closest('.content').find('.sub-level');
-
-                    if ($this.hasClass('focus')) {
-                        return;
-                    }
-
-                    $this.closest('.primary-level').children('.focus').removeClass('focus');
-                    $this.addClass('focus');
-
-                    $subLevel.not('.hide').addClass('hide');
-                    $subLevel.eq(index).removeClass('hide');
-                }
+            cateNavLeftFun(index) {
+                this.leftcurrent = index;
+                this.cateNavRightData = this.cateNavLeftData[index].sub;
             }
             }
         },
         },
         created() {
         created() {