分类商品列表更改

src/app.json

@@ -45,7 +45,8 @@
         "pages/myInvite/myInvite",
         "pages/share/share",
         "pages/paymentStatus/paymentStatus",
-        "pages/fun/fun"
+        "pages/fun/fun",
+        "pages/categoryPro/categoryPro"
       ]
     }
   ],

src/pages/category/category.wxml

@@ -16,7 +16,7 @@
         <view class="menu-list">
           <view wx:for="{{menuSec.children}}" wx:key="{{k}}" wx:for-index="k" wx:for-item="menuThr" class="menu-third" >
             <view data-id="{{menuThr.id}}" data-name="{{menuThr.label}}" bindtap="navPage">
-              <navigator hover-class="none" class="sec-menu-image" open-type="navigate" url="/subPackage/page/pages/fun/fun?id={{menuThr.id}}&name={{menuThr.label}}">
+              <navigator hover-class="none" class="sec-menu-image" open-type="navigate" url="/subPackage/page/pages/categoryPro/categoryPro?id={{menuThr.id}}&name={{menuThr.label}}">
                 <image src="{{menuThr.image}}" class="thr-menu-image" ></image>
                 <view class="thr-menu-name">{{menuThr.label}}</view>
               </navigator>

src/subPackage/page/pages/categoryPro/categoryPro.js

+// subPackage/page/pages/fun/fun.js
+const wxService = require('../../../../utils/wxService')
+
+wxService.page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    proData: [],
+    pageNo: 1,
+    pageSize: 10,
+    totalPages: '',
+    form: {
+      queryDto: {
+        mallCategoryId: ''
+      }
+    },
+    proStyle:false
+  },
+
+  /**
+  * 生命周期函数--监听页面加载
+  */
+  onLoad: function (options) {
+    console.log(options)
+    if (options && options.id) {
+      this.setData({
+        form: {
+          queryDto: {
+            mallCategoryId: options.id
+          }
+        }
+      })
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    this.getProList();
+  },
+
+  //获取商品列表
+  getProList() {
+    wx.showLoading({
+      title: '加载中'
+    })
+    wxService.post(`/sale/product/buyer/listPageByCategoryId?pageNo=${this.data.pageNo}&pageSize=${this.data.pageSize}`, this.data.form.queryDto).then(res => {
+      const { result, data } = res.data
+      if (result == 0 && data.content) {
+        wx.hideLoading()
+        this.setData({
+          proData: this.data.pageNo == 1 ? [...data.content] : [...this.data.proData, ...data.content],
+          totalPages: data.totalPages,
+          totalElements: data.totalElements
+        })
+      }
+    }).finally(() => {
+      wx.hideLoading()
+    })
+  },
+
+  // 切换列表样式
+  switchProStyle(){
+    this.setData({
+      proStyle: !this.data.proStyle
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    this.setData({
+      pageNo: 1,
+    })
+    this.getProList()
+    wx.stopPullDownRefresh();
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    const { pageNo, pageSize, totalPages } = this.data
+    if (pageNo < totalPages) {
+      this.setData({
+        pageNo: pageNo + 1,
+      })
+      this.getProList()
+    }
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

src/subPackage/page/pages/categoryPro/categoryPro.json

+{
+  "navigationBarTitleText": "聚FUN",
+  "usingComponents": {
+    "product-list-style-one": "/component/productListStyleOne/productListStyleOne",
+    "product-list-style-two": "/component/productListStyleTwo/productListStyleTwo"
+  }
+}
\ No newline at end of file

src/subPackage/page/pages/categoryPro/categoryPro.wxml

+<!--subPackage/page/pages/categoryPro/categoryPro.wxml-->
+<view class="page-category-pro">
+  <view class="pro-nav-wrap">
+    <view class="nav-list">
+      <view class="nav-item nav-active">推荐</view>
+      <view class="nav-item">最新</view>
+      <view class="nav-item">最热</view>
+      <view class="nav-item">价格</view>
+    </view>
+    <view class="pro-style" bindtap="switchProStyle">
+      <image mode="widthFix" src="{{!proStyle ? '/assets/imgs/7_1_0/category-style-01.png' : '/assets/imgs/7_1_0/category-style-02.png'}}"></image>
+    </view>
+  </view>
+  <product-list-style-one image-data="{{proData}}" wx:if="{{!proStyle}}" />
+
+  <product-list-style-two image-data="{{proData}}"  wx:if="{{proStyle}}" />
+
+  <view class="empty" wx:if="{{proData.length < 1}}">
+    暂无商品哦~
+  </view>
+</view>
\ No newline at end of file

src/subPackage/page/pages/categoryPro/categoryPro.wxss

+/* subPackage/page/pages/categoryPro/categoryPro.wxss */
+.empty{
+  width: 300rpx;
+  color: #808080;
+  margin: 40% auto;
+  text-align: center;
+}
+.pro-nav-wrap{
+  padding: 16rpx 54rpx 16rpx 30rpx;
+  display: flex;
+  justify-content: space-between;
+}
+.nav-list{
+  display: flex;
+}
+.nav-item{
+  margin-right: 50rpx;
+  font-size: 24rpx;
+  color: #787878;
+}
+.nav-active{
+  color: #c09a74;
+}
+.pro-style image{
+  width: 30rpx;
+}