feat[litemall-vue]: 支持品牌商列表页面和品牌商详情页面

litemall-vue/src/api/api.js

@@ -118,7 +118,21 @@ export function goodsDetail(query) {
 const GoodsRelated='wx/goods/related'; //商品详情页的关联商品（大家都在看）
 
 const BrandList='wx/brand/list'; //品牌列表
+export function brandList(query) {
+  return request({
+    url: BrandList,
+    method: 'get',
+    params: query
+  })
+}
 const BrandDetail='wx/brand/detail'; //品牌详情
+export function brandDetail(query) {
+  return request({
+    url: BrandDetail,
+    method: 'get',
+    params: query
+  })
+}
 
 const CartList='wx/cart/index'; //获取购物车的数据
 export function cartList(query) {

litemall-vue/src/router/items.js

@@ -49,5 +49,17 @@ export default [
     name: 'groupon',
     component: () => import('@/views/items/groupon'),
     props: route => route.query
+  },
+  {
+    path: '/items/brand/:brandId',
+    name: 'brand',
+    props: true,
+    component: () => import('@/views/items/brand')
+  },
+  {
+    path: '/items/brand-list',
+    name: 'brandList',
+    component: () => import('@/views/items/brand-list'),
+    props: route => route.query
   }
 ];

litemall-vue/src/views/home/tabbar-home.vue

@@ -82,6 +82,29 @@
       </div>
     </van-panel>
 
+    <van-panel>
+      <van-grid clickable
+                :column-num="2">
+        <van-grid-item v-for="(brand ,index) in shopInfos.brandList"
+                       :key="index"
+                       :text="brand.name"
+                       :url="goBrand(brand.id)">
+          <img :src="brand.picUrl"
+               style="width: 80%;" />
+          <div style="size:10px;"> {{ brand.name }}</div>
+        </van-grid-item>
+      </van-grid>
+      <div slot='header'>
+        <van-cell-group>
+          <van-cell title="品牌商直供"
+                    isLink>
+            <router-link to="/items/brand-list"
+                         class="text-desc">更多品牌商</router-link>
+          </van-cell>
+        </van-cell-group>
+      </div>
+    </van-panel>
+
     <van-panel>
       <van-row gutter>
         <van-col span="12"
@@ -126,7 +149,7 @@
                          class="text-desc">更多人气推荐</router-link>
           </van-cell>
         </van-cell-group>
-      </div>      
+      </div>
     </van-panel>
 
   </div>
@@ -149,6 +172,8 @@ import {
   CouponList,
   Toast,
   Card,
+  Grid,
+  GridItem,
   Row,
   Col,
   Tag
@@ -172,6 +197,9 @@ export default {
     goDetail(id) {
       return `#/items/detail/${id}`;
     },
+    goBrand(id) {
+      return `#/items/brand/${id}`;
+    },
     getCoupon(id) {
       couponReceive({ couponId: id }).then(res => {
         Toast.success('领取成功');
@@ -207,7 +235,9 @@ export default {
     [SwipeItem.name]: SwipeItem,
     [Tabbar.name]: Tabbar,
     [TabbarItem.name]: TabbarItem,
-    [Tag.name]: Tag
+    [Tag.name]: Tag,
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem
   }
 };
 </script>
@@ -217,7 +247,9 @@ export default {
 .interval_bot {
   margin-bottom: 10px;
 }
-
+.van-panel {
+  margin-top: 20px;
+}
 .goods-channel {
   background: #fff;
   display: flex;

litemall-vue/src/views/items/brand-list/index.vue

+<template>
+  <div class="goods_brand_list">
+    <van-list v-model="loading"
+              :finished="finished"
+              :immediate-check="false"
+              finished-text="没有更多了"
+              @load="getBrandList">
+      <div class="brand-info"
+           v-for="(brand, index) in list"
+           :key="index"
+           @click="itemClick(brand.id)">
+        <div class="name">
+          <img class="img"
+               :src="brand.picUrl"
+               background-size="cover" />
+          <div class="info-box">
+            <div class="txt">{{brand.name}}</div>
+            <div class="line"></div>
+            <div class="price">{{brand.floorPrice}}元起</div>
+          </div>
+        </div>
+        <div class="desc">
+          {{brand.desc}}
+        </div>
+      </div>
+    </van-list>
+
+  </div>
+</template>
+
+<script>
+import { brandList } from '@/api/api';
+import { List } from 'vant';
+
+export default {
+  data() {
+    return {
+      list: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false
+    };
+  },
+
+  created() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      this.page = 0;
+      this.list = [];
+      this.getBrandList();
+    },
+    getBrandList() {
+      this.page++;
+      brandList({
+        isNew: true,
+        page: this.page,
+        limit: this.limit
+      }).then(res => {
+        this.list.push(...res.data.data.list);
+        this.loading = false;
+        this.finished = res.data.data.page >= res.data.data.pages;
+      });
+    },
+    itemClick(id) {
+      this.$router.push(`/items/brand/${id}`);
+    }
+  },
+
+  components: {
+    [List.name]: List
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.goods_brand_list {
+  .brand-info {
+    .name {
+      width: 100%;
+      height: 180px;
+      position: relative;
+
+      .img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 180px;
+      }
+
+      .info-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 180px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        display: block;
+
+        .txt {
+          margin-top: 60px;
+          height: 25px;
+          font-size: 25px;
+          color: #fff;
+        }
+
+        .line {
+          margin: 0 auto;
+          margin-top: 16px;
+          display: block;
+          height: 2px;
+          width: 300px;
+          background: #fff;
+        }
+        .price{
+          height: 25px;
+          font-size: 25px;
+          color: #fff;
+        }
+      }
+    }
+    .desc {
+      background: #fff;
+      width: 100%;
+      height: auto;
+      overflow: hidden;
+      padding: 25px 20px;
+      font-size: 20px;
+      color: #666;
+      line-height: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>
\ No newline at end of file

litemall-vue/src/views/items/brand/index.vue

+<template>
+  <div class="goods_brand">
+    <div class="brand-info">
+      <div class="name">
+        <img class="img"
+             :src="brand.picUrl"
+             background-size="cover" />
+        <div class="info-box">
+          <div class="txt">{{brand.name}}</div>
+          <div class="line"></div>
+        </div>
+      </div>
+      <div class="desc">
+        {{brand.desc}}
+      </div>
+    </div>
+
+    <van-card v-for="(item, i) in brand.list"
+              :key="i"
+              :desc="item.brief"
+              :title="item.name"
+              :thumb="item.picUrl"
+              :price="item.retailPrice"
+              :origin-price="item.counterPrice"
+              @click="itemClick(item.id)">
+    </van-card>
+
+  </div>
+</template>
+
+<script>
+import { brandDetail } from '@/api/api';
+import { Card } from 'vant';
+
+export default {
+  props: {
+    brandId: [String, Number]
+  },
+  data() {
+    return {
+      brand: {}
+    };
+  },
+
+  created() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      brandDetail({
+        id: this.brandId
+      }).then(res => {
+        this.brand = res.data.data;
+      });
+    },
+    itemClick(id) {
+      this.$router.push(`/items/detail/${id}`);
+    }
+  },
+
+  components: {
+    [Card.name]: Card
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.goods_brand {
+  .brand-info {
+    .name {
+      width: 100%;
+      height: 180px;
+      position: relative;
+
+      .img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 180px;
+      }
+
+      .info-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 180px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        display: block;
+
+        .txt {
+          display: block;
+          margin-top: 60px;
+          height: 35px;
+          font-size: 35px;
+          color: #fff;
+        }
+
+        .line {
+          margin: 0 auto;
+          margin-top: 16px;
+          display: block;
+          height: 2px;
+          width: 145px;
+          background: #fff;
+        }
+      }
+    }
+    .desc {
+      background: #fff;
+      width: 100%;
+      height: auto;
+      overflow: hidden;
+      padding: 25px 20px;
+      font-size: 20px;
+      color: #666;
+      line-height: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>
\ No newline at end of file