调整分类页

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

@@ -4,7 +4,7 @@
                        @down="downCallback" :up="upOption" @up="upCallback">
             <!-- 页面头部 -->
             <view class="header">
-				<search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
+                <search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch"/>
                 <!-- 切换列表显示方式 -->
                 <view class="show-view" @click="handleShowView">
                     <text class="iconfont icon-view-tile" v-if="showView"></text>
@@ -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,32 +144,30 @@
             </view>
         </mescroll-body>
 
-
-
-	
     </view>
 
 
 </template>
 
 <script>
-	  import Shortcut from '@/components/shortcut'
-	import {
+import Shortcut from '@/components/shortcut'
+import {
     inArray
-	} from '@/utils/util'
-	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
-	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
-	import * as GoodsApi from '@/api/goods'
-	import {
+} from '@/utils/util'
+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
-	} from '@/core/app'
-	import Search from '@/components/search'
+} from '@/core/app'
+import Search from '@/components/search'
 
-	const pageSize = 15
-	const showViewKey = 'GoodsList-ShowView';
+const pageSize = 15
+const showViewKey = 'GoodsList-ShowView';
 
-	export default {
+export default {
     components: {
         MescrollBody,
         Search,
@@ -165,7 +177,7 @@
     data() {
         return {
             newIds: [],
-				hotIds:[],
+            hotIds: [],
             inArray,
             showView: false, // 列表显示方式 (true列表、false平铺)
             sortType: 'all', // 排序类型
@@ -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
@@ -353,12 +385,12 @@
         }
     }
 
-	}
+}
 </script>
 
 <style lang="scss" scoped>
-	// 页面头部
-	.header {
+// 页面头部
+.header {
     display: flex;
     align-items: center;
     background-color: #fff;
@@ -377,10 +409,10 @@
         display: flex;
         align-items: center;
     }
-	}
+}
 
-	// 排序组件
-	.store-sort {
+// 排序组件
+.store-sort {
     position: sticky;
     top: var(--window-top);
     display: flex;
@@ -424,16 +456,16 @@
 
     }
 
-	}
+}
 
-	// 商品列表
-	.goods-list {
+// 商品列表
+.goods-list {
     padding: 4rpx;
     box-sizing: border-box;
-	}
+}
 
-	// 单列显示
-	.goods-list.column-1 {
+// 单列显示
+.goods-list.column-1 {
     .goods-item {
         width: 100%;
         height: 280rpx;
@@ -503,16 +535,16 @@
             text-decoration: line-through;
         }
     }
-	}
+}
 
-	// 平铺显示
-	.goods-list.column-2 {
+// 平铺显示
+.goods-list.column-2 {
     .goods-item {
         width: 50%;
     }
-	}
+}
 
-	.goods-item {
+.goods-item {
     float: left;
     box-sizing: border-box;
     padding: 6rpx;
@@ -565,5 +597,17 @@
             }
         }
     }
+}
+
+.cate-filter {
+    padding: 20rpx 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    * {
+        margin-right: 10rpx;
+        flex-shrink: 0;
     }
+}
 </style>