From 4ae5f85b5e4bad842385ef874d9cb12d432274b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E8=BE=89?= <814457906@qq.com>
Date: Sun, 29 Jan 2023 13:27:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                              |  26 ++-
 pages/ProductList/ProductList.vue       |   6 +-
 pages/classification/classification.vue | 297 ++++++++++++++++++++++++
 pages/toptabbar/toptabbar.vue           |   1 -
 4 files changed, 318 insertions(+), 12 deletions(-)
 create mode 100644 pages/classification/classification.vue

diff --git a/pages.json b/pages.json
index 3b0b8b2..3845169 100644
--- a/pages.json
+++ b/pages.json
@@ -331,17 +331,23 @@
 				"enablePullDownRefresh": false,
 				"navigationBarBackgroundColor": "#ffffff"
 			}
+		}, {
+			"path": "pages/toptabbar/toptabbar",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		},
+		{
+			"path": "pages/classification/classification",
+			"style": {
+				"navigationBarTitleText": "分类",
+				"enablePullDownRefresh": false
+			}
+
 		}
-	    ,{
-            "path" : "pages/toptabbar/toptabbar",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "",
diff --git a/pages/ProductList/ProductList.vue b/pages/ProductList/ProductList.vue
index c9bd2e5..d1e19b9 100644
--- a/pages/ProductList/ProductList.vue
+++ b/pages/ProductList/ProductList.vue
@@ -96,7 +96,11 @@
 		methods: {
 			//点击导航栏标签改变当前索引
 			toggleTab(index) {
-				if (index == 1111111111111) {} else if (index == 0) {
+				if (index == 1111111111111) {
+					uni.navigateTo({
+						url: `/pages/classification/classification?goodsCategoryId=${this.GoodsCategorychildrenid}`
+					})
+				} else if (index == 0) {
 					this.GoodsCategorychildrenid = this.goodsCategoryId
 					this.tabIndex = index
 					this.pageNum = 1
diff --git a/pages/classification/classification.vue b/pages/classification/classification.vue
new file mode 100644
index 0000000..ae706b6
--- /dev/null
+++ b/pages/classification/classification.vue
@@ -0,0 +1,297 @@
+<template>
+	<view class="app">
+		<view class="lefttabbar">
+			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
+				@scrolltolower="lower" @scroll="scroll">
+				<view class="scroll-view-item" v-for="(item,index) in GoodsCategorychildrenlist" :key='item.id'
+					@tap='tapscroll(item,index)'>
+					<view :class="tabIndex==index?'active':''">
+						{{item.goodsCategoryName}}
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="" style="display: inline-block;width: 80%;padding-top: 20rpx;position: absolute;right: 0%;">
+			<view class="productlist" v-if='goodsList.length>0'>
+				<view class="item" @tap='goCommodityDetails(item)' v-for="(item,index) in goodsList" :key="index">
+					<image :src="baseurl+item.goodsPictureUrl" mode=""></image>
+					<view class="title">
+						{{item.goodsName}}
+					</view>
+					<view class="text">
+						{{item.attributeDetailsName}}
+					</view>
+					<view class="price">
+						￥{{item.goodsPrice}}
+					</view>
+				</view>
+				<view style="width: 45%;" v-if="goodsList.length%2!=0">
+				</view>
+			</view>
+			<view class="noorder" v-if='goodsList.length==0'>
+				<image src="../../static/noorder.png" mode=""></image>
+				<view class="">
+					暂无商品
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		goodsList,
+		getGoodsCategoryNameList
+	} from '@/api/ProductList/ProductList.js';
+	import baseurl from '@/api/baseurl.js'
+	export default {
+		data() {
+			return {
+				//将选中标签的索引绑定为tabIndex，以便后续的调用
+				baseurl: '',
+				pageNum: 1,
+				pageSize: 20,
+				goodsCategoryId: '', //请求值
+				goodsList: [], //商品列表list
+				total: 0, //list总长度
+				goodsName: '',
+				tabIndex: 0,
+				GoodsCategorychildrenlist: [], //子分类list
+				GoodsCategorychildrenid: null,
+				scrollTop: 0,
+				old: {
+					scrollTop: 0
+				}
+			};
+		},
+		onShow() {
+			var that = this
+			try {
+				const value = uni.getStorageSync('openid');
+				const value3 = uni.getStorageSync('Refresh');
+				if (value) {} else {
+					uni.navigateTo({
+						url: '/pages/login/login'
+					})
+				}
+				if (value3) {
+					that.goodsListinfo();
+				}
+			} catch (e) {}
+		},
+		onLoad(options) { //获取传值
+			this.goodsCategoryId = options.goodsCategoryId //请求id
+			this.GoodsCategorychildrenid = options.goodsCategoryId //请求id
+			this.baseurl = baseurl;
+			this.goodsListinfo()
+			this.GoodsCategorychildren(this.goodsCategoryId);
+		},
+		methods: {
+			tapscroll(item, index) {
+				this.tabIndex = index
+				if (index == 0) {
+					this.GoodsCategorychildrenid = this.goodsCategoryId
+					this.tabIndex = index
+					this.pageNum = 1
+					goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(
+						res => {
+							if (res.code == 200) {
+								this.goodsList = res.rows
+								this.total = res.total
+							}
+							uni.removeStorageSync('Refresh');
+						})
+				} else {
+					this.GoodsCategorychildrenid = this.GoodsCategorychildrenlist[index].id
+					this.tabIndex = index
+					this.pageNum = 1
+					goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(
+						res => {
+							if (res.code == 200) {
+								this.goodsList = res.rows
+								this.total = res.total
+							}
+							uni.removeStorageSync('Refresh');
+						})
+				}
+			},
+			upper: function(e) {},
+			lower: function(e) {},
+			scroll: function(e) {
+				this.old.scrollTop = e.detail.scrollTop
+			},
+			//根据父级分类id获取子分类
+			GoodsCategorychildren(value) {
+				getGoodsCategoryNameList(value).then(res => {
+					this.GoodsCategorychildrenlist = [{
+						goodsCategoryName: '全部',
+						id: 99999999999999999,
+					}]
+					res.data.forEach(e => {
+						this.GoodsCategorychildrenlist.push(e)
+					})
+				})
+			},
+			// 查询商品列表
+			goodsListinfo() {
+				this.pageNum = 1;
+				goodsList(this.pageSize, this.pageNum, this.goodsCategoryId, this.goodsName).then(res => {
+					if (res.code == 200) {
+						res.rows.forEach(e => {
+							this.goodsList.push(e)
+						})
+						this.total = res.total
+					}
+					uni.removeStorageSync('Refresh');
+				})
+			},
+			//跳转详情页
+			goCommodityDetails(item) {
+				uni.navigateTo({
+					url: `/pages/CommodityDetails/CommodityDetails?goodsPrice=${item.goodsPrice}&goodsInfoId=${item.goodsInfoId}&buySource=${'SHOPPING_MALL'}&goodsAttributeId=${item.goodsAttributeId}`
+				})
+			},
+		},
+		onReachBottom() { //下滑加载
+			if (this.goodsList.length >= this.total) {} else {
+				this.pageNum++;
+				goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
+					if (res.code == 200) {
+						res.rows.forEach(e => {
+							this.goodsList.push(e)
+						})
+					}
+				})
+			}
+		},
+		onPullDownRefresh() { //下拉刷新
+			this.pageNum = 1;
+			goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
+				this.goodsList = res.rows
+				this.total = res.total
+			})
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		//1.分享给朋友
+		onShareAppMessage(res) {
+			let pages = getCurrentPages();
+			let url = pages[pages.length - 1].$page.fullPath
+			url = decodeURIComponent(url)
+			return {
+				title: '泉医到家',
+				path: url,
+			}
+		},
+		//2.分享到朋友圈
+		onShareTimeline(res) {
+			let pages = getCurrentPages();
+			let url = pages[pages.length - 1].$page.fullPath
+			url = decodeURIComponent(url)
+			return {
+				title: '泉医到家',
+				path: url,
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.app {
+		padding: 0;
+		width: 100%;
+		height: 100%;
+
+		.lefttabbar {
+			width: 20%;
+			height: 100%;
+			display: inline-block;
+
+			.scroll-Y {
+				height: 100%;
+			}
+
+			.active {
+				color: red;
+				font-size: 34rpx;
+			}
+
+			.scroll-view-item {
+				color: #7d7e80;
+				height: 100rpx;
+				line-height: 100rpx;
+				text-align: center;
+				font-size: 30rpx;
+			}
+		}
+
+		.noorder {
+			view {
+				text-align: center;
+				font-size: 40rpx;
+				color: #BFBFBF;
+			}
+
+			image {
+				display: block;
+				margin: 20% auto 50rpx;
+				width: 160rpx;
+				height: 200rpx;
+			}
+		}
+
+		.productlist {
+			width: 100%;
+			margin: 0 auto;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-evenly;
+
+			.item {
+				width: 45%;
+				background: #FFFFFF;
+				border-radius: 25rpx;
+				padding-bottom: 10rpx;
+				box-shadow: 0px 4rpx 8rpx 4rpx rgba(199, 200, 202, 0.8);
+				margin-bottom: 30rpx;
+
+				.price {
+					font-size: 28rpx;
+					color: #D43953;
+					line-height: 50rpx;
+					padding-left: 10rpx;
+				}
+
+				.text {
+					font-size: 22rpx;
+					padding: 0 10rpx;
+					// text-overflow: ellipsis;
+					// overflow: hidden;
+					// white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+				}
+
+				.title {
+					font-size: 28rpx;
+					color: #000000;
+					line-height: 50rpx;
+					padding-left: 10rpx;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+				}
+
+				image {
+					border-radius: 25rpx 25rpx 0 0;
+					width: 100%;
+					height: 270rpx;
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/toptabbar/toptabbar.vue b/pages/toptabbar/toptabbar.vue
index 7d685dd..8a6d6e3 100644
--- a/pages/toptabbar/toptabbar.vue
+++ b/pages/toptabbar/toptabbar.vue
@@ -91,7 +91,6 @@
 		methods: {
 			//点击导航栏标签触发
 			toggleTab(index) {
-				console.log(index)
 				this.$emit("toggleToptab", index)
 			}
 		}