前端 mobile ：商品列表

mobile-web/src/api/product.js

@@ -8,4 +8,16 @@ export function getProductCategoryList(pid) {
       pid
     }
   });
+}
+
+export function getProductSpuPage(cid, pageNo, pageSize) {
+  return request({
+    url: 'product-api/users/spu/page',
+    method: 'get',
+    params: {
+      cid,
+      pageNo: pageNo || 1,
+      pageSize: pageSize || 10,
+    }
+  });
 }
\ No newline at end of file

mobile-web/src/components/common/productcard.vue

 <template>
-    <van-cell-group class="additional">
-        <van-card
-        :title="product.title"
-        :desc="product.desc"
-        :num="(iscard?null:product.quantity)"
-        style="background:#fff"
-        >
-            <template slot="thumb">
-                <img :src="product.imageURL" />
-                <p v-if="product.imageTag!=null&&product.imageTag!=''" class="image_tag">{{product.imageTag}}</p>
-            </template>
-            <template slot="tags">
-                <p class="price" v-if="product.price!=null&&product.price!=''" >
-                    ￥<span>{{product.price}}</span>
-                    <van-tag v-if="product.tags!=null" v-for="tag in product.tags" :key="tag" plain type="danger">{{tag}}</van-tag>
-                </p>
-                <van-stepper v-if="iscard" v-model="product.quantity" :max="product.max"  :min="product.min" />
-            </template>
-        </van-card>
-        <van-cell  v-for="(gift,j) in product.gift" :key="j"  :value="'x'+gift.quantity" >
-            <template slot="title">
-                <van-tag type="danger" v-if="j==0" >赠品</van-tag>
-                <span class="van-cell-text" :style="(j>0?'margin-left: 35px;':'')" >{{gift.title}}</span>
-            </template>
-        </van-cell>
-        <slot />
-    </van-cell-group>
+    <router-link :to="'/product/' + product.id">
+        <van-cell-group class="additional">
+            <van-card
+                    :title="product.name"
+                    :desc="product.sellPoint"
+                    :num="(iscard?null:product.quantity)"
+                    style="background:#fff"
+            >
+                <template slot="thumb">
+                    <img :src="product.picUrls[0]"/>
+                    <p v-if="product.imageTag!=null&&product.imageTag!=''" class="image_tag">{{product.imageTag}}</p>
+                </template>
+                <template slot="tags">
+                    <p class="price" v-if="product.price!=null&&product.price!=''">
+                        ￥<span>{{product.price}}</span>
+                        <van-tag v-if="product.tags!=null" v-for="tag in product.tags" :key="tag" plain type="danger">
+                            {{tag}}
+                        </van-tag>
+                    </p>
+                    <van-stepper v-if="iscard" v-model="product.quantity" :max="product.max" :min="product.min"/>
+                </template>
+            </van-card>
+            <!-- TODO 芋艿，暂时去掉赠品 -->
+            <!--<van-cell  v-for="(gift,j) in product.gift" :key="j"  :value="'x'+gift.quantity" >-->
+            <!--<template slot="title">-->
+            <!--<van-tag type="danger" v-if="j==0" >赠品</van-tag>-->
+            <!--<span class="van-cell-text" :style="(j>0?'margin-left: 35px;':'')" >{{gift.title}}</span>-->
+            <!--</template>-->
+            <!--</van-cell>-->
+            <slot/>
+        </van-cell-group>
+    </router-link>
 </template>
 
 <script>
-export default {
-    name:'product-card',
-    props:{
-        product:Object,
-        iscard: {
-            type: Boolean,
-            default: false
-        },
+  export default {
+    name: 'product-card',
+    props: {
+      product: Object,
+      iscard: {
+        type: Boolean,
+        default: false
+      },
     }
-}
+  }
 </script>
 
 <style lang="less">
-.additional {
-    .van-cell {
-        padding: 0 15px;
-        font-size: 12px;
-    }
-    .van-cell:not(:last-child)::after{
-        border:0;
-    }
-    .van-card__title{
-        font-size: 14px;
-    }
-    .van-cell__title {
-        flex: 10;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-    .van-tag {
-        line-height: 12px;
-        margin-right: 5px;
-    }
-    .price {
-      color: #e93b3d;
-      font-size: 10px;
-        overflow: hidden;
-        height: 18px;
-      span {
-        font-size: 16px;
+    .additional {
+        .van-cell {
+            padding: 0 15px;
+            font-size: 12px;
+        }
+
+        .van-cell:not(:last-child)::after {
+            border: 0;
+        }
+
+        .van-card__title {
+            font-size: 14px;
+        }
+
+        .van-cell__title {
+            flex: 10;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .van-tag {
+            line-height: 12px;
             margin-right: 5px;
-      }
-      .van-tag{
-        font-size: 12px;
-      }
-    }
-    .van-stepper{
-        position: absolute;
-        bottom: 5px;
-        right: 5px;
-        &__plus{
-            width: 30px;
         }
-        &__minus{
-            width: 30px;
+
+        .price {
+            color: #e93b3d;
+            font-size: 10px;
+            overflow: hidden;
+            height: 18px;
+
+            span {
+                font-size: 16px;
+                margin-right: 5px;
+            }
+
+            .van-tag {
+                font-size: 12px;
+            }
+        }
+
+        .van-stepper {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+
+            &__plus {
+                width: 30px;
+            }
+
+            &__minus {
+                width: 30px;
+            }
+        }
+
+        .image_tag {
+            position: absolute;
+            bottom: 0;
+            width: 90px;
+            height: 20px;
+            line-height: 20px;
+            font-size: 10px;
+            color: #fff;
+            text-align: center;
+            background-color: rgba(0, 0, 0, .7);
         }
     }
-    .image_tag{
-        position: absolute;
-        bottom: 0;
-        width: 90px;
-        height: 20px;
-        line-height: 20px;
-        font-size: 10px;
-        color: #fff;
-        text-align: center;
-        background-color: rgba(0,0,0,.7);
-    }
-}
-.additional::after{
-    border-color: #f7f7f7;
 
-}
+    .additional::after {
+        border-color: #f7f7f7;
+
+    }
 </style>

mobile-web/src/config/router.js

@@ -151,7 +151,14 @@ const routes = [
     }
   },
   {
-    path: '/search',
+    path: '/product/search',
+    component: () => import('../page/product/search'),
+    meta: {
+      title: '商品搜索'
+    }
+  },
+  {
+    path: '/products/list',
     component: () => import('../page/product/list'),
     meta: {
       title: '商品列表'

mobile-web/src/page/category/index.vue

@@ -66,10 +66,10 @@
                     <!--<li><a ><img src="//img12.360buyimg.com/focus/s140x140_jfs/t1/345/33/944/5582/5b9236d2E62d8da2e/99f72d51b8f195ed.jpg"><span>电话手表</span></a></li>-->
                     <!--<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t1/1446/14/631/8500/5b9237e5E0d1f9e16/b1a627b92323b5ed.png"><span>华为</span></a></li>-->
                     <li v-for="category in childCategories">
-                        <a >
+                        <router-link :to="'/products/list?title=' + activeCategory.name + '&cidFirst=' + activeCategory.id + '&cidSecond=' + category.id">
                             <img :src="category.picUrl" />
                             <span>{{ category.name }}</span>
-                        </a>
+                        </router-link>
                     </li>
                     <div style="clear:both">
                     </div>
@@ -96,6 +96,7 @@ export default {
       rootCategories: [],
       childCategories: [],
       activeKey: 0,
+      activeCategory: {}, // 选中的分类
       fullHeight: document.documentElement.clientHeight - 93,
       fullWidth: document.documentElement.clientWidth - 99
     };
@@ -113,7 +114,8 @@ export default {
       this.activeKey = key;
       // 读取子节点的分类
       if (this.rootCategories.length > key) {
-        let response = getProductCategoryList(this.rootCategories[key].id);
+        this.activeCategory = this.rootCategories[key];
+        let response = getProductCategoryList(this.activeCategory.id);
         response.then(data => {
           this.childCategories = data;
         });
@@ -129,6 +131,7 @@ export default {
       this.rootCategories = data;
       // 获得首个根节点的分类
       if (data && data.length > 0) {
+        this.activeCategory = data[0];
         let response = getProductCategoryList(data[0].id);
         response.then(data => {
           this.childCategories = data;

product/product-application/src/main/java/cn/iocoder/mall/product/application/vo/users/UsersProductSpuVO.java

@@ -28,6 +28,12 @@ public class UsersProductSpuVO {
      * 目前的计算方式是，以 Sku 最小价格为准
      */
     private Integer price;
+    /**
+     * 库存数量
+     *
+     * 目前的计算方式是，以 Sku 库存累加为准
+     */
+    private Integer quantity;
 
     public Integer getId() {
         return id;
@@ -82,4 +88,13 @@ public class UsersProductSpuVO {
         this.price = price;
         return this;
     }
+
+    public Integer getQuantity() {
+        return quantity;
+    }
+
+    public UsersProductSpuVO setQuantity(Integer quantity) {
+        this.quantity = quantity;
+        return this;
+    }
 }
\ No newline at end of file

product/product-service-impl/src/main/java/cn/iocoder/mall/product/service/ProductSpuServiceImpl.java

@@ -202,7 +202,7 @@ public class ProductSpuServiceImpl implements ProductSpuService {
     public CommonResult<ProductSpuPageBO> getProductSpuPage(ProductSpuPageDTO productSpuPageDTO) {
         ProductSpuPageBO productSpuPage = new ProductSpuPageBO();
         // 查询分页数据
-        int offset = productSpuPageDTO.getPageNo() * productSpuPageDTO.getPageSize();
+        int offset = (productSpuPageDTO.getPageNo() - 1) * productSpuPageDTO.getPageSize();
         productSpuPage.setSpus(ProductSpuConvert.INSTANCE.convert(productSpuMapper.selectListByNameLikeOrderBySortAsc(
                 productSpuPageDTO.getName(), productSpuPageDTO.getCid(), productSpuPageDTO.getVisible(),
             offset, productSpuPageDTO.getPageSize())));