From 3f6f68f6928162274f80fad8325de28ca023d478 Mon Sep 17 00:00:00 2001
From: wyy <3234929097@qq.com>
Date: Mon, 31 Jul 2023 11:49:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=88=86=E7=B1=BB=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                          |   3 +
 pages/category/category.css         |  24 +++++
 pages/category/category.vue         | 109 ++++++-------------
 pages/sub-category/sub-category.css | 113 ++++++++++++++++++++
 pages/sub-category/sub-category.vue | 159 ++++++++++++++++++++++++++++
 5 files changed, 333 insertions(+), 75 deletions(-)
 create mode 100644 pages/sub-category/sub-category.css
 create mode 100644 pages/sub-category/sub-category.vue

diff --git a/pages.json b/pages.json
index 723f262..b66cd4f 100644
--- a/pages.json
+++ b/pages.json
@@ -40,6 +40,9 @@
 				"navigationBarTextStyle": "black"
 			}
 		},
+		{
+			"path": "pages/sub-category/sub-category"
+		},
 		{
 			"path": "pages/search-page/search-page",
 			"style": {
diff --git a/pages/category/category.css b/pages/category/category.css
index f1f6668..6e418e2 100644
--- a/pages/category/category.css
+++ b/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;
diff --git a/pages/category/category.vue b/pages/category/category.vue
index 24db3b8..efd17d7 100644
--- a/pages/category/category.vue
+++ b/pages/category/category.vue
@@ -2,10 +2,7 @@
 <!--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>
@@ -27,34 +24,30 @@
 
     <!-- 右侧内容start -->
     <scroll-view scroll-y="true" class="rightcontent">
-    <!-- <block wx:for='{{ productList}}' wx:key=''> -->
       <view class="adver-map">
         <view class="item-a">
             <image :src="categoryImg" mode="widthFix"></image>
         </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>
-            </view>
-          </view>
-         
-        </block>
-      </view>
-      <view v-if="!productList.length" class="cont-item empty">该分类下暂无商品</view>
-     <!-- </block> -->
+	  <!-- 子分类 -->
+	  <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>
+	  	</block>
+	  </view>
+      <view v-else class="cont-item empty">该分类下暂无子分类~</view>
     </scroll-view>
     <!-- 右侧内容end -->
-    <!-- </block> -->
   </view>
 
 </view>
@@ -63,7 +56,6 @@
 <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");
 
@@ -72,12 +64,12 @@ export default {
     return {
       selIndex: 0,
       categoryList: [],
+	  subCategoryList: [],
       productList: [],
       categoryImg: '',
-      prodid: ''
+      parentId: ''
     };
   },
-
   components: {},
   props: {},
 
@@ -94,61 +86,26 @@ export default {
         parentId: ''
       },
       callBack: function (res) {
-        // console.log(res);
         ths.setData({
           categoryImg: res[0].pic,
           categoryList: res
         });
         ths.getProdList(res[0].categoryId);
+		ths.parentId = ths.categoryList[0].categoryId
       }
     };
     http.request(params);
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {},
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {},
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {},
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {},
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {},
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {},
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {},
   methods: {
     /**
      * 分类点击事件
      */
     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.parentId = this.categoryList[index].categoryId
       this.setData({
         categoryImg: this.categoryList[index].pic,
         selIndex: index
@@ -164,28 +121,30 @@ export default {
     getProdList(categoryId) {
       //加载分类列表
       var params = {
-        url: "/prod/pageProd",
+        url: "/category/categoryInfo",
         method: "GET",
         data: {
-          categoryId: categoryId
+          parentId: categoryId
         },
         callBack: res => {
-          // console.log(res);
           this.setData({
-            productList: res.records
+            subCategoryList: res
           });
         }
       };
       http.request(params);
     },
 
-    //跳转商品详情页
-    toProdPage: function (e) {
-      var prodid = e.currentTarget.dataset.prodid;
-      uni.navigateTo({
-        url: '/pages/prod/prod?prodid=' + prodid
-      });
-    }
+	// 跳转子分类商品页面
+	toCatePage: function(e) {
+		const {
+			parentid,
+			categoryid,
+		} = e.currentTarget.dataset;
+		uni.navigateTo({
+			url: `/pages/sub-category/sub-category?parentId=${this.parentId}&categoryId=${categoryid}`
+		});
+	}
   }
 };
 </script>
diff --git a/pages/sub-category/sub-category.css b/pages/sub-category/sub-category.css
new file mode 100644
index 0000000..c8076e6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/pages/sub-category/sub-category.vue b/pages/sub-category/sub-category.vue
new file mode 100644
index 0000000..695472b
--- /dev/null
+++ b/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>