优化分类样式 -- review by 鲍思思

@@ -23,21 +23,23 @@
                     <div v-for="(itemSub, index) in categorySubList" :key="index">
                       <CategoryTitle>{{itemSub.name}}</CategoryTitle>
                         <div class="category-sub-root">
-                            <div class="item-div"
+                            <div 
                                  v-for="(item, index) in itemSub.sub"
                                  :key="index"
                                  :data-id="item.id"
+                                 :class="item.className"
                             >
-                                <div class="item-imge-div" @click="goProductList(item)">
-                                    <ImgSize
-                                      class="item-imge"
-                                      :src="item.image"
-                                      :width="60"
-                                      :height="60"
-                                    />
-                                    <p class="item-title">{{item.name}}</p>
-                                </div>
-                                <LayoutLink v-if="item.isShow" class="item-a-div" :href="item.link"></LayoutLink>
+                              <LayoutLink :href="item.url">
+                                  <div :class="item.type ? 'item-imge-div-brand' : 'item-imge-div'" @click="goProductList(item,index, itemSub)">
+                                      <ImgSize
+                                        class="item-imge"
+                                        :src="item.image"
+                                        :width="144"
+                                        :height="144"
+                                      />
+                                      <p v-if="!item.type" class="item-title">{{item.name}}</p>
+                                  </div>
+                                </LayoutLink>
                             </div>
                         </div>
                     </div>
@@ -65,38 +67,92 @@ export default {
     CategoryTitle
   },
   data() {
-    return {};
+    return {
+      sortItem:{
+        id:'-1',
+        name:'brand',
+      }
+    };
   },
   mounted() {
     this.fetchCategoryParentList();
-    this.fetchBrandList({});
+    let categorySubResult = this.fetchBrandList({});
+    // this.reportPaser(categorySubResult);
+    // console.log('categorySubList')
+    // console.log(...categorySubResult)
   },
   methods: {
     ...mapActions(['fetchCategoryParentList', 'selectCategoryParent', 'fetchBrandList', 'fetchCategorySubList']),
     onClick(item) {
       if (!item.isSelect) {
+        this.sortItem = item;
         let id = item.id;
+        let name = item.name;
+        // console.log('onClick==item')
+        // console.log(item)
 
+        this.$store.dispatch('reportYas', {
+          params: {
+            appop: 'XY_UFO_CATEGORY_TAB_LIST',
+            param: {
+              CATE_ID: id,
+              CATE_NM: item.name
+            }
+          }
+        });
+        let subList ;
         if (id === '-1') {
-          this.fetchBrandList({ id });
+          subList = this.fetchBrandList({ id });
         } else {
-          this.fetchCategorySubList({ id });
+          subList = this.fetchCategorySubList({ id, name });
         }
+        // this.reportPaser(subList);
       }
     },
-    goProductList(item) {
-      let query = {};
-      let key = item.linkType;
-      if(key){
-        query[key] = item.link;
-      }
-      query.title = item.name;
-        // console.log('===category=='+key);
-
-      this.$router.push({
-        name: 'List',
-        query,
+    goProductList(item, index, itemSub) {
+      this.$store.dispatch('reportYas', {
+        params: {
+          appop: 'XY_UFO_SORT_FLR_C',
+          param: {
+            CATE_ID: this.sortItem.id,
+            CATE_NM: this.sortItem.name,
+            CATE_INDEX: this.sortItem.index,
+            F_ID: itemSub.id,
+            F_NAME: itemSub.name,
+            F_INDEX: itemSub.index,
+            I_INDEX: index,
+            TO_TYPE: item.linkType,
+            TO_ID: item.link,
+          }
+        }
       });
+    },
+    reportPaser(subList) {
+      console.log('reportPaser')
+      console.log(...subList);
+      if(subList && subList.length > 0){
+        let reportSub = [];
+        subList.forEach((val, index) => {
+          val.su
+                
+            let reportItem = {
+              CATE_ID: this.sortItem.id || '',
+              CATE_NM: this.sortItem.name || '',
+              CATE_INDEX: this.sortItem.index || '',
+              F_ID: index,
+              F_NAME: val.name,
+              F_INDEX: index,
+              I_INDEX: index,
+              TO_TYPE: 'brand',
+              TO_ID: val.id,
+            }
+            
+            reportSub.push(subItem);
+
+            });
+      }
+      
+      
     }
   },
   computed: {
@@ -172,6 +228,8 @@ export default {
       flex-flow: row wrap;
       align-content: flex-start;
       padding-bottom: 20px;
+      margin-left: 5%;
+      margin-right: 5%;
     }
 
     .sub-title {
@@ -181,10 +239,41 @@ export default {
     }
 
     .item-div {
-      position: relative;
       display: flex;
       flex: 0 0 33%;
       height: 195px;
+      justify-content: center;
+    }
+
+    .item-div-brand {
+      display: flex;
+      flex: 0 0 33%;
+      height: 140px;
+      justify-content: center;
+    }
+
+    .item-div-brand-right {
+      display: flex;
+      flex: 0 0 33%;
+      height: 140px;
+      justify-content: center;
+      border-right: 1px solid  #EEEEEE;
+    }
+
+    .item-div-brand-bottom {
+      display: flex;
+      flex: 0 0 33%;
+      height: 140px;
+      justify-content: center;
+      border-bottom: 1px solid  #EEEEEE;
+    }
+    .item-div-brand-right-bottom {
+      display: flex;
+      flex: 0 0 33%;
+      height: 140px;
+      justify-content: center;
+      border-right: 1px solid  #EEEEEE;
+      border-bottom: 1px solid  #EEEEEE;
     }
 
     .item-imge-div {
@@ -193,14 +282,24 @@ export default {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      position: absolute;
-      z-index: 1;
-      padding-top: 20px;
-      padding-bottom: 20px;
+      align-items: center;
+      padding: 10px;
+    }
+
+    .item-imge-div-brand {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 10px;
+      padding-bottom: 10px;
     }
 
     .item-imge {
       object-fit: contain;
+      height: 80%;
+      width: 100%;
     }
 
     .item-title {

@@ -24,7 +24,7 @@ export default {
 .center {
   font-size: 28px;
   line-height: 40px;
-  color: #aaa;
+  color: #999999;
   position: relative;
 
   &:before,

@@ -15,12 +15,14 @@ export default function() {
             name: '品牌',
             image: '',
             linkType: '',
+            index: 0,
             isSelect: true,
         }
         state.categoryParent.push(brand);
         if (data && data.length) {
-            data.forEach(val => {
+            data.forEach((val, index) => {
                 val.isSelect = false;
+                val.index = index + 1;
                 state.categoryParent.push(val);
             });
         }
@@ -29,30 +31,63 @@ export default function() {
 
       addCategorySubList(state, {data}) {
         if(data && data.category){
-            let subList = [];
-            data.category.forEach(val => {
+
+            data.category.forEach((val, index) => {
                 if(val && val.sub){
+                    val.index = index;
                     val.sub.forEach(item => {
+                        item.className = 'item-div'
                         if(item.linkType === 'h5'){
                             item.isShow = true;
+                            item.url = item.link;
                         }else {
-                            item.isShow = false;
+                          let hostUrl ='http://m.yohobuy.com/';
+                          let params = new URLSearchParams();
+
+                          params.append('pagename', 'productList');
+                          params.append('title', item.linkType);
+                          params.append(`${item.linkType}`, item.link);
+
+                          item.isShow = false;
+                          let url = `${hostUrl}?${params}`
+                          item.url = url
                         }
+
                     })
                 }
-                
-                // console.log(val)
-                // subList.push(val);
             });
             state.categorySubList = data.category;
         }
       },
+      getUrl(item){
+        let hostUrl ='http://m.yohobuy.com/';
+        let params = new URLSearchParams();
+
+        params.append('pagename', 'productList');
+        params.append('title', item.linkType);
+        params.append(`${item.linkType}`, item.link);
+
+        return `${hostUrl}?${params}`
+      },
       addBrandList(state, {data}){
           if(data && data.brand_list){
             let sub = [];
-            
-            data.brand_list.forEach(val => {
+            let size = data.brand_list.length;
+
+            data.brand_list.forEach((val, index) => {
                 val.isSelect = false;
+                let hostUrl ='http://m.yohobuy.com/';
+                let params = new URLSearchParams();
+
+                params.append('pagename', 'productList');
+                params.append('title', val.brand_name);
+                params.append('brand', val.id);
+
+                let isShowBottomBordor = (size - index) > 3;
+                let url = `${hostUrl}?${params}`
+                let right = index % 3 !== 2 ? '-right' : '';
+                let bottom = isShowBottomBordor ? '-bottom' : '';
+                let className = 'item-div-brand' + right + bottom;
                 let subItem = {
                     id: val.id,
                     name: val.brand_name,
@@ -60,12 +95,16 @@ export default function() {
                     type: 1,//表示 品牌
                     linkType: 'brand',
                     link: val.id,
+                    url: url,
                     isShow: false,
+                    className,
                 }
+                
                 sub.push(subItem);
+
             });
             let category = [{
-                id:'',
+                id: '0',
                 image:'',
                 linkType:'brand',
                 name:'全部品牌',
@@ -112,7 +151,8 @@ export default function() {
 
         return result.data ? result.data.length : 0;
       },
-      async fetchCategorySubList({commit, state},{id}) {
+      async fetchCategorySubList({commit, state},{id, name}) {
+        console.log(id+"===="+name)
 
         commit('updateCategoryParentList', {id: id});
         const result = await this.$api.get('/api/ufo/category/saleCategoryDetail',{ id });