补充分类商品页

mall4uni/pages.json

@@ -40,6 +40,9 @@
 				"navigationBarTextStyle": "black"
 			}
 		},
+		{
+			"path": "pages/sub-category/sub-category"
+		},
 		{
 			"path": "pages/search-page/search-page",
 			"style": {

mall4uni/pages/category/category.css

@@ -227,6 +227,30 @@ page {
   font-family: arial;
 }
 
+.th-cate-con{
+  display: flex;
+  flex-wrap: wrap;
+}
+.sub-category{
+  width: 33.33%;
+  display: flex;
+  flex-direction: column;
+  padding: 30rpx;
+  box-sizing: border-box;
+  align-items: center;
+}
+.sub-category-item > .more-pic{
+  width: 120rpx;
+  height: 120rpx;
+  padding-bottom:10rpx;
+}
+.sub-category-item text{
+  font-size: 25rpx;
+  word-break: break-word;
+}
+
+
+
 /* 空 */
 .cont-item.empty {
   display: block;
@@ -241,4 +265,4 @@ page {
   text-align: center;
   color: #aaa;
   font-size: 24rpx;
-}
+}

mall4uni/pages/category/category.vue

@@ -1,194 +1,153 @@
 <template>
-<!--pages/category/category.wxml-->
-
-<view class="container">
-
-
-<!-- 头部搜索区 -->
-
-  <view class="search-bar">
-    <view class="search-box" @tap="toSearchPage">
-      <image src="/static/images/icon/search.png" class="search-img"></image>
-      <text class="sear-input">搜索您想要的商品</text>
+  <!--pages/category/category.wxml-->
+  
+  <view class="container">
+  <!-- 头部搜索区 -->
+    <view class="search-bar">
+      <view class="search-box" @tap="toSearchPage">
+        <image src="/static/images/icon/search.png" class="search-img"></image>
+        <text class="sear-input">搜索您想要的商品</text>
+      </view>
     </view>
-  </view>
-<!-- 滚动内容区 -->
-  <view class="main">
-    <!-- 左侧菜单start -->
-    <scroll-view scroll-y="true" class="leftmenu">
-      <block v-for="(item, index) in categoryList" :key="index">
-        <view :class="'menu-item ' + (selIndex==index?'active':'') + ' '" :data-index="index" :data-id="item.categoryId" @tap="onMenuTab">
-          {{item.categoryName}}
-        </view>
-      </block>
-      <view v-if="!categoryList || !categoryList.length" class="ca-empty">暂无分类</view>
-    </scroll-view>
-    <!-- 左侧菜单end -->
-
-    <!-- 右侧内容start -->
-    <scroll-view scroll-y="true" class="rightcontent">
-    <!-- <block wx:for='{{ productList}}' wx:key=''> -->
-      <view v-if="categoryImg" class="adver-map">
-        <view class="item-a">
-            <image :src="categoryImg" mode="widthFix"></image>
+  <!-- 滚动内容区 -->
+    <view class="main">
+      <!-- 左侧菜单start -->
+      <scroll-view scroll-y="true" class="leftmenu">
+        <block v-for="(item, index) in categoryList" :key="index">
+          <view :class="'menu-item ' + (selIndex==index?'active':'') + ' '" :data-index="index" :data-id="item.categoryId" @tap="onMenuTab">
+            {{item.categoryName}}
+          </view>
+        </block>
+        <view v-if="!categoryList || !categoryList.length" class="ca-empty">{{categoryList && categoryList.length ? '该分类下暂无商品' : '暂无商品'}}</view>
+      </scroll-view>
+      <!-- 左侧菜单end -->
+  
+      <!-- 右侧内容start -->
+      <scroll-view scroll-y="true" class="rightcontent">
+        <view class="adver-map">
+          <view class="item-a">
+              <image :src="categoryImg" mode="widthFix"></image>
+          </view>
         </view>
-      </view>
-      <view v-if="productList.length" class="cont-item">
-        <block v-for="(item, index) in productList" :key="index">
-          <view class="show-item" @tap="toProdPage" :data-prodid="item.prodId">
-            <view class="more-prod-pic">
-              <image :src="item.pic" class="more-pic" mode="widthFix"></image>
-            </view>
-            <view class="prod-text-right">
-              <view class="prod-text more">{{item.prodName}}</view>
-              <view class="cate-prod-info">{{item.brief}}</view>
-              <view class="prod-price more">
-                <text class="symbol">￥</text> <text class="big-num">{{wxs.parsePrice(item.price)[0]}}</text><text class="small-num">.{{wxs.parsePrice(item.price)[1]}}</text> 
+      <!-- 子分类 -->
+      <view class="th-cate-con" v-if="subCategoryList.length">
+        <block v-for="(thCateItem, index) in subCategoryList" :key="index">
+            <view class="sub-category">
+              <view
+                class="sub-category-item"
+                :data-categoryid="thCateItem.categoryId"
+                :data-parentid="thCateItem.parentId"
+                @tap="toCatePage"
+              >
+                <image :src="thCateItem.pic" class="more-pic" mode="widthFix"></image>
+                <text>{{ thCateItem.categoryName }}</text>
               </view>
             </view>
-          </view>
-         
         </block>
       </view>
-      <view v-if="!productList.length" class="cont-item empty">{{categoryList && categoryList.length ? '该分类下暂无商品' : '暂无商品'}}</view>
-     <!-- </block> -->
-    </scroll-view>
-    <!-- 右侧内容end -->
-    <!-- </block> -->
+        <view v-else class="cont-item empty">该分类下暂无子分类~</view>
+      </scroll-view>
+      <!-- 右侧内容end -->
+    </view>
+  
   </view>
-
-</view>
-</template>
-
-<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>
-
-<script>
-// pages/category/category.js
-var http = require("../../utils/http.js");
-var config = require("../../utils/config.js");
-
-export default {
-  data() {
-    return {
-      selIndex: 0,
-      categoryList: [],
-      productList: [],
-      categoryImg: '',
-      prodid: ''
-    };
-  },
-
-  components: {},
-  props: {},
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-    var ths = this; //加载分类列表
-
-    var params = {
-      url: "/category/categoryInfo",
-      method: "GET",
-      data: {
+  </template>
+  
+  <script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>
+  
+  <script>
+  var http = require("../../utils/http.js");
+  var config = require("../../utils/config.js");
+  
+  export default {
+    data() {
+      return {
+        selIndex: 0,
+        categoryList: [],
+      subCategoryList: [],
+        productList: [],
+        categoryImg: '',
         parentId: ''
-      },
-      callBack: function (res) {
-        // console.log(res);
-        ths.setData({
-          categoryImg: res[0].pic,
-          categoryList: res
-        });
-        ths.getProdList(res[0].categoryId);
-      }
-    };
-    http.request(params);
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {},
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {},
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {},
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {},
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {},
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {},
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {},
-  methods: {
+      };
+    },
+    components: {},
+    props: {},
+  
     /**
-     * 分类点击事件
+     * 生命周期函数--监听页面加载
      */
-    onMenuTab: function (e) {
-      console.log(e);
-      var id = e.currentTarget.dataset.id;
-      var index = e.currentTarget.dataset.index; // this.getProdList(id);
-
-      this.getProdList(this.categoryList[index].categoryId);
-      this.setData({
-        categoryImg: this.categoryList[index].pic,
-        selIndex: index
-      });
-    },
-    // 跳转搜索页
-    toSearchPage: function () {
-      uni.navigateTo({
-        url: '/pages/search-page/search-page'
-      });
-    },
-
-    getProdList(categoryId) {
-      //加载分类列表
+    onLoad: function (options) {
+      var ths = this; //加载分类列表
+  
       var params = {
-        url: "/prod/pageProd",
+        url: "/category/categoryInfo",
         method: "GET",
         data: {
-          categoryId: categoryId
+          parentId: ''
         },
-        callBack: res => {
-          // console.log(res);
-          this.setData({
-            productList: res.records
+        callBack: function (res) {
+          ths.setData({
+            categoryImg: res[0].pic,
+            categoryList: res
           });
+          ths.getProdList(res[0].categoryId);
+      ths.parentId = ths.categoryList[0].categoryId
         }
       };
       http.request(params);
     },
-
-    //跳转商品详情页
-    toProdPage: function (e) {
-      var prodid = e.currentTarget.dataset.prodid;
+    methods: {
+      /**
+       * 分类点击事件
+       */
+      onMenuTab: function (e) {
+        var id = e.currentTarget.dataset.id;
+        var index = e.currentTarget.dataset.index; // this.getProdList(id);
+  
+        this.getProdList(this.categoryList[index].categoryId);
+      this.parentId = this.categoryList[index].categoryId
+        this.setData({
+          categoryImg: this.categoryList[index].pic,
+          selIndex: index
+        });
+      },
+      // 跳转搜索页
+      toSearchPage: function () {
+        uni.navigateTo({
+          url: '/pages/search-page/search-page'
+        });
+      },
+  
+      getProdList(categoryId) {
+        //加载分类列表
+        var params = {
+          url: "/category/categoryInfo",
+          method: "GET",
+          data: {
+            parentId: categoryId
+          },
+          callBack: res => {
+            this.setData({
+              subCategoryList: res
+            });
+          }
+        };
+        http.request(params);
+      },
+  
+    // 跳转子分类商品页面
+    toCatePage: function(e) {
+      const {
+        parentid,
+        categoryid,
+      } = e.currentTarget.dataset;
       uni.navigateTo({
-        url: '/pages/prod/prod?prodid=' + prodid
+        url: `/pages/sub-category/sub-category?parentId=${this.parentId}&categoryId=${categoryid}`
       });
     }
-  }
-};
-</script>
-<style>
-@import "./category.css";
-</style>
+    }
+  };
+  </script>
+  <style>
+  @import "./category.css";
+  </style>

mall4uni/pages/sub-category/sub-category.css

@@ -0,0 +1,113 @@
+/* pages/sub-category/sub-category.wxss */
+
+page {
+  background: #f4f4f4;
+}
+
+.category-tit {
+  width: 100%;
+  white-space: nowrap;
+  position: fixed;
+  top: 0px;
+  z-index: 999;
+  background-color: #fff;
+  border-bottom: 2rpx solid #f4f4f4;
+  font-size: 30rpx;
+}
+
+.category-tit .category-item {
+  display: inline-block;
+  padding: 20rpx 10rpx;
+  margin: 0 20rpx;
+  box-sizing: border-box;
+  font-size: 28rpx;
+}
+
+.prod-item {
+  margin-top: 100rpx;
+}
+
+.on {
+  border-bottom: 4rpx solid #e43130;
+  color: #e43130;
+}
+/* 清除 scroll-view 滚动条 */
+::-webkit-scrollbar {  
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+/* 列表为空 */
+.empty {
+  margin-top: 200rpx;
+}
+
+/* 商品列表 */
+ .prod-items {
+  width: 345rpx;
+  display: inline-block;
+  background: #fff;
+  padding-bottom: 20rpx;
+  box-sizing: border-box;
+  box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
+}
+
+.prod-items:nth-child(2n-1) {
+  margin: 20rpx 10rpx 10rpx 20rpx;
+}
+
+.prod-items:nth-child(2n) {
+  margin: 20rpx 20rpx 10rpx 10rpx;
+}
+
+.prod-items .hot-imagecont .hotsaleimg {
+  width: 341rpx;
+  height: 341rpx;
+}
+
+.prod-items .hot-text .hotprod-text {
+  font-size: 28rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.prod-items .hot-imagecont {
+  font-size: 0;
+  text-align: center;
+}
+
+.prod-items .hot-text {
+  margin-top: 20rpx;
+  padding: 0 10rpx;
+}
+
+.prod-items .hot-text .prod-info, .more-prod .prod-text-right .prod-info {
+  font-size: 22rpx;
+  color: #999;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.prod-items .hot-text .prod-text-info {
+  position: relative;
+  height: 70rpx;
+  line-height: 70rpx;
+  font-family: Arial;
+}
+
+.prod-items .hot-text .prod-text-info .hotprod-price {
+  display: inline;
+  font-size: 26rpx;
+  color: #eb2444;
+}
+
+.prod-items .hot-text .prod-text-info .basket-img {
+  width: 50rpx;
+  height: 50rpx;
+  position: absolute;
+  right: 0;
+  bottom: 7rpx;
+  padding: 8rpx;
+}

mall4uni/pages/sub-category/sub-category.vue

@@ -0,0 +1,159 @@
+<template>
+  <view class="Mall4j container">
+    <!-- 顶部子分类tab -->
+    <scroll-view scroll-x="true" class="category-tit" :scroll-into-view="intoView" :scroll-with-animation="true">
+      <block v-for="(item, index) in subCategoryList" :key="index">
+        <view :id="'sw' + item.categoryId" :class="'category-item ' + (item.categoryId==categoryId? 'on':'')" :data-id="item.categoryId" @tap="onSubCategoryTap">{{ item.categoryName }}</view>
+      </block>
+    </scroll-view>
+    <!-- 商品列表 -->
+    <view class="prod-item" v-if="prodList.length">
+      <block v-for="(prod, key) in prodList" :key="key">
+       <view class="prod-items" @tap="toProdPage" :data-prodid="prod.prodId">
+         <view class="hot-imagecont">
+           <image :src="prod.pic" class="hotsaleimg"></image>
+         </view>
+         <view class="hot-text">
+           <view class="hotprod-text">{{prod.prodName}}</view>
+           <view class="prod-info">{{prod.brief}}</view>
+           <view class="prod-text-info">
+             <view class="price">
+               <text class="symbol">￥</text>
+               <text class="big-num">{{wxs.parsePrice(prod.price)[0]}}</text>
+               <text class="small-num">.{{wxs.parsePrice(prod.price)[1]}}</text>
+             </view>
+           </view>
+         </view>
+       </view>
+      </block>
+    </view>
+	<view v-else class="empty-wrap">
+		暂无商品数据~
+	</view>
+  </view>
+</template>
+
+<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>
+
+<script>
+var http = require('../../utils/http.js')
+
+export default {
+  data() {
+    return {
+      isLoaded: false, // 列表是否加载完毕
+      subCategoryList: [],
+      categoryId: 0,
+      prodList: [],
+      parentId: '',
+      current: 1,
+      pages: 0,
+      intoView: ''
+    }
+  },
+
+  computed: {
+    i18n() {
+      return this.$t('index')
+    }
+  },
+
+	/**
+	 * 生命周期函数--监听页面加载
+	 */
+  onLoad: function(options) {
+    this.setData({
+      parentId: options.parentId,
+      categoryId: options.categoryId
+    })
+    this.getSubCategory()
+    this.getProdList()
+  },
+	/**
+	 * 页面上拉触底事件的处理函数
+	 */
+  onReachBottom: function() {
+    if (this.current < this.pages) {
+      this.current = this.current + 1
+      this.getProdList()
+    }
+  },
+  methods: {
+    /**
+	 * 获取顶栏子分类数据
+	 */
+    getSubCategory() {
+      var params = {
+        url: '/category/categoryInfo',
+        method: 'GET',
+        data: {
+          parentId: this.parentId
+        },
+        callBack: res => {
+          this.setData({
+            subCategoryList: res
+          })
+          this.$nextTick(() => {
+            this.intoView = 'sw' + this.categoryId
+          })
+        }
+      }
+      http.request(params)
+    },
+
+    /**
+	 * 根据分类id获取商品列表数据
+	 */
+    getProdList() {
+      this.isLoaded = false
+      var params = {
+        url: "/prod/pageProd",
+        method: 'GET',
+        data: {
+			categoryId: this.categoryId,
+			current: this.current,
+			size: 10,
+			sort: 0,
+			isAllProdType: true
+        },
+        callBack: res => {
+          this.isLoaded = true
+          this.setData({
+            prodList: res.current == 1 ? res.records : this.prodList.concat(res.records),
+            current: res.current,
+            pages: res.pages
+          })
+        }
+      }
+      http.request(params)
+    },
+
+    /**
+	 * 切换顶部分类
+	 */
+    onSubCategoryTap(e) {
+      this.setData({
+        categoryId: e.currentTarget.dataset.id,
+        current: 1,
+        pages: 0,
+        intoView: 'sw' + e.currentTarget.dataset.id
+      })
+      this.getProdList()
+    },
+	/**
+	 * 跳转商品下详情
+	 */
+	toProdPage: function (e) {
+	  let prodid = e.currentTarget.dataset.prodid;
+	  if (prodid) {
+	    uni.navigateTo({
+	      url: '/pages/prod/prod?prodid=' + prodid
+	    });
+	  }
+	},
+  }
+}
+</script>
+<style>
+	@import "./sub-category.css";
+</style>