调整分类页

api/category/index.js

@@ -7,8 +7,8 @@ const api = {
 }
 
 // 页面数据
-export function list() {
-  return request.get(api.list)
+export function list(param) {
+  return request.get(api.list, param)
 }
 
 

pages/goods/list.vue

@@ -16,9 +16,6 @@
                 <view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
                     <text>综合</text>
                 </view>
-				<view class="sort-item" :class="{ active: sortType === 'category' }" @click="changeCategory">
-					<text>{{ categoryText }}</text>
-				</view>
                 <view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')">
                     <text>销量</text>
                 </view>
@@ -35,6 +32,21 @@
                     </view>
                 </view>
             </view>
+            <scroll-view scroll-x>
+                <view class="cate-filter">
+                    <u-tag text="全部分类" shape="circle"
+                           @click="changeCategory('all')"
+                           :bgColor="selectedCategoryList.length === childCategoryList.length ? '#9e1a91' : 'transparent'"
+                           :color="selectedCategoryList.length === childCategoryList.length ? 'white' : '#9e1a91'"
+                           borderColor="#9e1a91"/>
+                    <u-tag :text="item.name" shape="circle" plain v-for="(item, index) in childCategoryList"
+                           :key="index"
+                           @click="changeCategory(item.category_id)"
+                           :bgColor="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? '#9e1a91' : 'transparent'"
+                           :color="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? 'white' : '#9e1a91'"
+                           borderColor="#9e1a91"/>
+                </view>
+            </scroll-view>
             <!-- 商品列表 -->
             <view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
                 <view class="goods-item" v-for="(item, index) in list.data" :key="index"
@@ -68,7 +80,8 @@
                                 <view class="desc_footer">
                                     <text class="price_x">¥{{ item.goods_price_min }}</text>
                                     <text class="price_y col-9"
-										v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text>
+                                          v-if="item.line_price_min > 0">¥{{ item.line_price_min }}
+                                    </text>
                                 </view>
                             </view>
                         </view>
@@ -122,7 +135,8 @@
                             <view class="detail-price oneline-hide">
                                 <text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
                                 <text v-if="item.line_price_min > 0"
-									class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
+                                      class="line-price col-9 f-24">￥{{ item.line_price_min }}
+                                </text>
                             </view>
                         </view>
                     </view>
@@ -130,9 +144,6 @@
             </view>
         </mescroll-body>
 
-
-
-	
     </view>
 
 
@@ -146,6 +157,7 @@
 import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
 import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
 import * as GoodsApi from '@/api/goods'
+import * as CategoryApi from '@/api/category'
 import {
     getEmptyPaginateObj,
     getMoreListData
@@ -186,24 +198,39 @@
             },
             mainCategoryId: 0, // 主分类id
             categoryText: '全部分类',
-                childCategoryList: []
+            childCategoryList: [],
+            showPopup: false,
+            selectedCategoryList: []
         }
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
-		onLoad(options) {
+    async onLoad(options) {
         // 记录options
         this.options = options
+        await this.getChildCategory(options.categoryId)
         // 设置默认列表显示方式
         this.setShowView()
 
         this.getNews()
         this.getHots()
+        await this.getGoodsList(1)
     },
 
     methods: {
+        getChildCategory(parent_id) {
+            return new Promise(resolve => {
+                CategoryApi.list({
+                    parent_id,
+                }).then(res => {
+                    this.childCategoryList = res.data.list
+                    this.selectedCategoryList = this.childCategoryList.map(item => parseInt(item.category_id))
+                    resolve()
+                })
+            })
+        },
 
         /**
          * 上拉加载的回调 (页面初始化时也会执行一次)
@@ -230,8 +257,8 @@
         getNews() {
             const app = this
             const param = {
-					categoryId: app.options.categoryId || 0,
-
+                // categoryId: app.options.categoryId || 0,
+                categoryIds: this.selectedCategoryList.join(),
             }
             GoodsApi.newIds(param)
                 .then(result => {
@@ -244,8 +271,8 @@
         getHots() {
             const app = this
             const param = {
-					categoryId: app.options.categoryId || 0,
-			
+                // categoryId: app.options.categoryId || 0,
+                categoryIds: this.selectedCategoryList.join(),
             }
             GoodsApi.hotIds(param)
                 .then(result => {
@@ -262,10 +289,11 @@
          */
         getGoodsList(pageNo = 1) {
             const app = this
+            console.log(this.selectedCategoryList)
             const param = {
                 sortType: app.sortType,
                 sortPrice: Number(app.sortPrice),
-					categoryId: app.options.categoryId || 0,
+                categoryIds: this.selectedCategoryList.join(),
                 goodsName: app.options.search || '',
                 page: pageNo
             }
@@ -281,6 +309,14 @@
             })
         },
 
+        changeCategory(cateId) {
+            if (cateId === 'all') this.selectedCategoryList = this.childCategoryList.map(item => parseInt(item.category_id))
+            else this.selectedCategoryList = [parseInt(cateId)]
+            this.getNews()
+            this.getHots()
+            this.getGoodsList()
+        },
+
         // 切换排序方式
         handleSortType(newSortType) {
             const app = this
@@ -292,10 +328,6 @@
             app.mescroll.resetUpScroll()
         },
 
-            changeCategory(category){
-
-            },
-
         // 切换列表显示方式
         handleShowView() {
             const app = this
@@ -566,4 +598,16 @@
         }
     }
 }
+
+.cate-filter {
+    padding: 20rpx 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    * {
+        margin-right: 10rpx;
+        flex-shrink: 0;
+    }
+}
 </style>