品牌详情、器件详情页面

components/product/brand/BrandComponent.vue

@@ -16,14 +16,14 @@
         </tr>
       </thead>
       <tbody>
-        <!--<tr class="text-center">-->
-          <!--<td><a href=""><span>xxx</span></a></td>-->
-          <!--<td><a href=""><button class="btn btn-default">Datasheet手册</button></a></td>-->
-          <!--<td>-->
-            <!--<button class="btn btn-default disabledbtn">申请样片</button>-->
-          <!--</td>-->
-        <!--</tr>-->
-        <tr>
+        <tr class="text-center" v-for="item in list.content">
+          <td><a :href="'product/component/'+item.uuid"><span>{{item.code}}</span></a></td>
+          <td><a :href="item.attach"><button class="btn btn-default"  :disabled="!item.attach" :class="{'disabledbtn':!item.attach}">Datasheet手册</button></a></td>
+          <td>
+            <button class="btn btn-default disabledbtn" :disabled="true">申请样片</button>
+          </td>
+        </tr>
+        <tr v-if="!list.content || list.content.length === 0">
           <td colspan="10" class="text-center">
             <div class="empty">
               <div class="empty-img">
@@ -38,11 +38,33 @@
         </tr>
       </tbody>
     </table>
+    <div style="float: right;">
+      <!--<page :total="totalCount" :page-size="pageSize" :current="nowPage"
+            v-on:childEvent="listenPage"></page>-->
+    </div>
   </div>
 </template>
 <script>
+  // import Page from '~components/common/page/pageComponent.vue'
   export default {
-    name: 'BrandComponent'
+    name: 'BrandComponent',
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1
+      }
+    },
+    computed: {
+      lists () {
+        let components = this.$store.state.brandComponent.component
+        console.log(components)
+        return this.$store.state.brandComponent.component
+      },
+      list () {
+        console.log(this.lists.data)
+        return this.lists.data
+      }
+    }
   }
 </script>
 <style scoped>
@@ -111,6 +133,7 @@
     background: #f7f7f7;
     border-bottom: none !important;
     font-size: 14px;
+    text-align: center;
   }
   .component-list .empty{
     overflow: hidden;

components/product/brand/BrandDetail.vue

@@ -2,7 +2,7 @@
   <div class="brandDetail container">
     <div class="menu-com row">
       <div class="menu-title col-md-12">
-        <a href="product/brandList">品牌中心</a> > <span>{{list.nameEn}}</span></div>
+        <a href="/product/brand/brandList/ABC">品牌中心</a> > <span>{{list.nameEn}}</span></div>
     </div>
     <div id="brand">
       <div class="brand-logo">

components/product/brand/CategoriesList.vue

@@ -2,30 +2,12 @@
   <div class="categories-list container">
     <div class="categories-list-header">产品分类</div>
     <div class="categories-list-body" id="kinds">
-      <!--<ul class="list-unstyled">-->
-        <!--<li>-->
-          <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
-          <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
-          <!--<a>器件详情</a>-->
-          <!--<ul class="list-unstyled" style="margin-left: 10px;">-->
-            <!--<li>-->
-              <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
-              <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
-              <!--<a>sad</a>-->
-              <!--<ul class="list-unstyled" style="margin-left: 15px;">-->
-                <!--<li>-->
-                  <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
-                  <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
-                  <!--<a>萨达速度向</a>-->
-                <!--</li>-->
-              <!--</ul>-->
-            <!--</li>-->
-          <!--</ul>-->
+      <el-tree :data="list" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode"></el-tree>
+      <!--<ul>-->
+        <!--<li v-for="kind in list[0]">-->
+          <!--{{kind.nameCn}}-->
         <!--</li>-->
       <!--</ul>-->
-      <div class="no-record">
-        暂无类目信息
-      </div>
     </div>
   </div>
 </template>
@@ -33,15 +15,82 @@
 <script>
   export default {
     name: 'CategoriesList',
-    date: {
-
-    },
     computed: {
-      lists () {
-        return this.$store.state.brandCategories.categories
-      },
       list () {
-        return this.lists.data
+        let brands = this.$store.state.brandCategories.categories.data
+        if (!brands || brands.length === 0) {
+          return []
+        }
+
+        // 处理第1层
+        if ((brands[0] && brands[0].length > 0) && (brands[1] && brands[1].length > 0)) {
+          for (let i = 0; i < brands[1].length; i++) {
+            for (let j = 0; j < brands[0].length; j++) {
+              if (brands[0][j].id === brands[1][i].parentid) {
+                console.log('SELECED', brands[1][i].id, brands[1][i].parentid)
+                if (!brands[0][j].children) {
+                  brands[0][j].children = []
+                }
+                brands[0][j].children.push(brands[1][i])
+                break
+              }
+            }
+          }
+        }
+
+        // 处理第2层
+        if ((brands[1] && brands[1].length > 0) && (brands[2] && brands[2].length > 0)) {
+          for (let i = 0; i < brands[2].length; i++) {
+            for (let j = 0; j < brands[1].length; j++) {
+              if (brands[1][j].id === brands[2][i].parentid) {
+                console.log('SELECED', brands[2][i].id, brands[2][i].parentid)
+                if (!brands[1][j].children) {
+                  brands[1][j].children = []
+                }
+                brands[1][j].children.push(brands[2][i])
+                break
+              }
+            }
+          }
+        }
+
+        // 处理第3层
+        if ((brands[2] && brands[2].length > 0) && (brands[3] && brands[3].length > 0)) {
+          for (let i = 0; i < brands[3].length; i++) {
+            for (let j = 0; j < brands[2].length; j++) {
+              if (brands[2][j].id === brands[3][i].parentid) {
+                if (!brands[2][j].children) {
+                  brands[2][j].children = []
+                }
+                brands[2][j].children.push(brands[3][i])
+                break
+              }
+            }
+          }
+        }
+        return brands[0] || []
+      }
+    },
+    data () {
+      return {
+        defaultProps: {
+          children: 'children',
+          label: 'nameCn'
+        }
+      }
+    },
+    methods: {
+      handlerCurrentNode (data, node) {
+//        if (this.parentId === data.id) {
+//          this.parentId = 0
+//          this.ids = null
+//          console.log('取消选中状态')
+//        } else {
+//          if (data.level === 1) {
+//            this.parentId = data.id
+//          }
+//        }
+        console.log('data', data.id + '-' + data.nameCn)
       }
     }
   }

components/product/component/ComponentDetail.vue

@@ -61,11 +61,6 @@
         return this.lists.data
       }
     },
-    fetch ({ store }) {
-      return Promise.all([
-        store.dispatch('loadComponentMenu', {id: store.state.componentDetail.detail.data.kind.level})
-      ])
-    },
     components: {
       ComponentMenu
     }

components/product/component/StoreInfo.vue

@@ -105,11 +105,18 @@
     name: 'StoreInfo',
     computed: {
       stores () {
-        return this.$store.state.componentStore.Store
+        return this.$store.state.componentStore.store
       },
       store () {
         console.log(this.stores.data)
         return this.stores.data
+      },
+      storeLists () {
+        return this.$store.state.componentInformation.information
+      },
+      storeList () {
+        console.log(this.storeLists.data)
+        return this.storeLists.data
       }
     }
   }

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://www.usoftmall.com/' : 'http://192.168.253.60:9090/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://www.usoftmall.com/' : 'http://192.168.253.31:8080/platform-b2c/')
 const webpack = require('webpack')
 
 module.exports = {

pages/product/brand/_code.vue

@@ -18,10 +18,9 @@
       CategoriesList,
       BrandComponent
     },
-    fetch ({ store, route }) {
+    fetch ({ store, params }) {
       return Promise.all([
-        store.dispatch('loadBrandDetail', {id: route.params.code}),
-        store.dispatch('loadBrandCategories', {id: route.params.code.id})
+        store.dispatch('loadBrandDetail', {id: params.code})
       ])
     }
   }

pages/product/component/_uuid.vue

@@ -17,8 +17,8 @@
     fetch ({ store, route }) {
       console.log(route.params.uuid)
       return Promise.all([
-        store.dispatch('loadComponentDetail', {id: route.params.uuid})
-//        store.dispatch('loadComponentMenu', {id: store.state.componentDetail.detail.data.kind.level.id})
+        store.dispatch('loadComponentDetail', {id: route.params.uuid}),
+        store.dispatch('loadComponentInformation', {count: 10, filter: { uuid: route.params.uuid.uuid, ignoreUMall: route.params.uuid.ignoreUMall, ignoreStore: route.params.uuid.ignoreStore, storeIds: route.params.uuid.storeIds }, page: 1, sorting: {minPriceRMB: route.params.uuid.minPriceRMB}})
       ])
     },
     created () {

store/brandComponent.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  component: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_COMPONENT (state) {
+    state.component.fetching = true
+  },
+  GET_COMPONENT_FAILURE (state) {
+    state.component.fetching = false
+  },
+  GET_COMPONENT_SUCCESS (state, result) {
+    state.component.fetching = false
+    state.component.data = result
+  }
+}

store/componentInformation.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  information: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_INFORMATION (state) {
+    state.information.fetching = true
+  },
+  GET_INFORMATION_FAILURE (state) {
+    state.information.fetching = false
+  },
+  GET_INFORMATION_SUCCESS (state, result) {
+    state.information.fetching = false
+    state.information.data = result
+  }
+}

store/componentMenu.js

@@ -5,13 +5,13 @@ export const state = () => ({
   }
 })
 export const mutations = {
-  REQUEST_Menu (state) {
+  REQUEST_MENU (state) {
     state.menu.fetching = true
   },
-  GET_Menu_FAILURE (state) {
+  GET_MENU_FAILURE (state) {
     state.menu.fetching = false
   },
-  GET_Menu_SUCCESS (state, result) {
+  GET_MENU_SUCCESS (state, result) {
     state.menu.fetching = false
     state.menu.data = result
   }

store/index.js

@@ -1,5 +1,28 @@
 import axios from '~plugins/axios'
 
+// 获取品牌详情产品分类信息
+function loadBrandCategories ({commit}, params = {}) {
+  let id = params.id
+  commit('brandCategories/REQUEST_CATEGORIES', params)
+  return axios.get(`/api/product/brand/${id}/kinds`)
+    .then(response => {
+      commit('brandCategories/GET_CATEGORIES_SUCCESS', response.data)
+    }, err => {
+      commit('brandCategories/GET_CATEGORIES_FAILURE', err)
+    })
+}
+
+// 获取品牌详情型号列表数据
+function loadBrandComponent ({commit}, params = {}) {
+  commit('brandComponent/REQUEST_COMPONENT', params)
+  return axios.get('/api/product/component/list', { params })
+    .then(response => {
+      commit('brandComponent/GET_COMPONENT_SUCCESS', response.data)
+    }, err => {
+      commit('brandComponent/GET_COMPONENT_FAILURE', err)
+    })
+}
+
 export const actions = {
   // 全局服务初始化
   nuxtServerInit (store, { params, route, isServer, req }) {
@@ -119,12 +142,22 @@ export const actions = {
   // 获得器件详情信息
   loadComponentDetail ({commit}, params = {}) {
     let id = params.id
-    console.log(id)
+    // console.log(id)
     commit('componentDetail/REQUEST_DETAIL', params)
     return axios.get(`/api/product/component/${id}`)
       .then(response => {
         console.log('response', response.data)
         commit('componentDetail/GET_DETAIL_SUCCESS', response.data)
+        if (response.data) {
+          commit('componentMenu/REQUEST_MENU', params)
+          return axios.get(`/api/product/kind/structing/${response.data.kindid}`)
+            .then(response => {
+              console.log('response', response.data)
+              commit('componentMenu/GET_MENU_SUCCESS', response.data)
+            }, err => {
+              commit('componentMenu/GET_MENU_FAILURE', err)
+            })
+        }
       }, err => {
         commit('componentDetail/GET_DETAIL_FAILURE', err)
       })
@@ -154,16 +187,31 @@ export const actions = {
         commit('componentStore/GET_STORE_FAILURE', err)
       })
   },
+  // 器件详情页商家信息列表
+  loadComponentInformation ({commit}, params = {}) {
+    commit('componentInformation/REQUEST_INFORMATION', params)
+    return axios.get('/api/commodity/goods/page', { params })
+      .then(response => {
+        console.log('loadComponentInformation', response.data)
+        commit('componentInformation/GET_INFORMATION_SUCCESS', response.data)
+      }, err => {
+        commit('componentInformation/GET_INFORMATION_FAILURE', err)
+      })
+  },
   // 品牌详情页面
   // 获得品牌详情信息
-  loadBrandDetail ({commit}, params = {}) {
+  loadBrandDetail ({commit, dispatch}, params = {}) {
     let id = params.id
-    console.log(id)
     commit('brandDetail/REQUEST_DETAIL', params)
     return axios.get(`/api/product/brand/${id}`)
       .then(response => {
-        console.log('response', response.data)
+        let brand = response.data || {}
+        console.log('loadBrandDetail', response.data !== null)
         commit('brandDetail/GET_DETAIL_SUCCESS', response.data)
+        return Promise.all([
+          loadBrandCategories({ commit }, {id: brand.id}),
+          loadBrandComponent({ commit }, {count: 10, filter: { brandid: brand.id }, page: 1})
+        ])
       }, err => {
         commit('brandDetail/GET_DETAIL_FAILURE', err)
       })
@@ -174,12 +222,21 @@ export const actions = {
     commit('brandCategories/REQUEST_CATEGORIES', params)
     return axios.get(`/api/product/brand/${id}/kinds`)
       .then(response => {
-        console.log('response', response.data)
         commit('brandCategories/GET_CATEGORIES_SUCCESS', response.data)
       }, err => {
         commit('brandCategories/GET_CATEGORIES_FAILURE', err)
       })
   },
+  // 获取品牌详情型号列表数据
+  loadBrandComponent ({commit}, params = {}) {
+    commit('brandComponent/REQUEST_COMPONENT', params)
+    return axios.get('/api/product/component/list', { params })
+      .then(response => {
+        commit('brandComponent/GET_COMPONENT_SUCCESS', response.data)
+      }, err => {
+        commit('brandComponent/GET_COMPONENT_FAILURE', err)
+      })
+  },
   // 获取帮助中心信息
   loadHelpSnapsho ({ commit }, params = {}) {
     commit('help/REQUEST_SNAPSHO')