From a38d72c98779132e20accbdaf169a752c5fd2457 Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Wed, 13 Mar 2024 14:30:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=80=E6=9C=89=E5=95=86=E5=93=81=E7=80=91?=
 =?UTF-8?q?=E5=B8=83=E6=B5=81=E5=8F=8A=E5=88=86=E7=B1=BB=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E7=9A=84=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/activity/newPeople.vue |  827 +++++++++++++-------------
 pages/cart/index.vue         |  177 +++---
 pages/category/index.vue     |  126 +---
 pages/goods/list.vue         |  173 ++++--
 pages/index/index.vue        |  113 ++--
 pages/user/vip/goods.vue     | 1087 +++++++++++++++++-----------------
 6 files changed, 1256 insertions(+), 1247 deletions(-)

diff --git a/pages/activity/newPeople.vue b/pages/activity/newPeople.vue
index b4721e8..1bf9668 100644
--- a/pages/activity/newPeople.vue
+++ b/pages/activity/newPeople.vue
@@ -1,411 +1,408 @@
-<template>
-	<view class="newpeople">
-		<view class="newpeople-navbar">
-			<u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :border-bottom="false"
-				:background="background"></u-navbar>
-		</view>
-		<view class="newpeople-hd">
-			<view class="rule" @click="openRule()">规则</view>
-		</view>
-		<view class="newpeople-gift">
-			<view class="a">
-				<image :src="$picUrl+'/static/news/newPeople-bg1.png'"></image>
-			</view>
-			<scroll-view scroll-x class="b">
-				<view class="item" v-for="(item,index) in couList" :key="i">
-					<image :src="$picUrl+'/static/news/newPeople-bg2.png'"></image>
-					<view class="p" v-if="item.coupon_type==10">¥<text>{{item.reduce_price}}</text></view>
-					<view class="p" v-if="item.coupon_type==20">¥<text>{{item.discount}}</text>折</view>
-					<view class="l">满{{item.min_price}}可用</view>
-					<view class="btn" v-if="!item.is_receive" @click="getUseCoupons(item)">立即领取</view>
-					<view class="btn" v-else>已领取</view>
-				</view>
-			</scroll-view>
-		</view>
-		<view class="newpeople-bd" :isLoading="isLoading">
-			<view class="a">
-				<u-tabs :list="menuList" bg-color="#fafafa" inactive-color="#3C3C3C" active-color="#FF3C43"
-					:is-scroll="true" font-size="30" v-model="current" @change="onChosed"></u-tabs>
-			</view>
-			<view scroll-x class="b">
-				<view class="">
-					<view class="item" v-for="(item, index) in LeftList" :key="index" @click="goDetail(item.goods_id)">
-						<image :src="item.goods_image" mode="widthFix"></image>
-						<view class="title">
-							<text>自营</text>{{item.goods_name}}
-						</view>
-						<view class="price">
-							<view class="n">￥<text
-									style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
-							</view>
-							<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
-						</view>
-					</view>
-				</view>
-				<view class="">
-					<view class="item" v-for="(item, index) in RightList" :key="index" @click="goDetail(item.goods_id)">
-						<image :src="item.goods_image" mode="widthFix"></image>
-						<view class="title">
-							<text>自营</text>{{item.goods_name}}
-						</view>
-						<view class="price">
-							<view class="n">￥<text
-									style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
-							</view>
-							<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="newpeople-fd" @click="openPage()">
-			<image :src="$picUrl+'/static/toTop.png?=1'"></image>
-		</view>
-	</view>
-</template>
-
-<script>
-	import * as Api from '@/api/activity'
-	export default {
-		data() {
+<template>
+	<view class="newpeople">
+		<view class="newpeople-navbar">
+			<u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :border-bottom="false"
+				:background="background"></u-navbar>
+		</view>
+		<view class="newpeople-hd">
+			<view class="rule" @click="openRule()">规则</view>
+		</view>
+		<view class="newpeople-gift">
+			<view class="a">
+				<image :src="$picUrl+'/static/news/newPeople-bg1.png'"></image>
+			</view>
+			<scroll-view scroll-x class="b">
+				<view class="item" v-for="(item,index) in couList" :key="i">
+					<image :src="$picUrl+'/static/news/newPeople-bg2.png'"></image>
+					<view class="p" v-if="item.coupon_type==10">¥<text>{{item.reduce_price}}</text></view>
+					<view class="p" v-if="item.coupon_type==20">¥<text>{{item.discount}}</text>折</view>
+					<view class="l">满{{item.min_price}}可用</view>
+					<view class="btn" v-if="!item.is_receive" @click="getUseCoupons(item)">立即领取</view>
+					<view class="btn" v-else>已领取</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="newpeople-bd" :isLoading="isLoading">
+			<view class="a">
+				<u-tabs :list="menuList" bg-color="#fafafa" inactive-color="#3C3C3C" active-color="#FF3C43"
+					:is-scroll="true" font-size="30" v-model="current" @change="onChosed"></u-tabs>
+			</view>
+			<view scroll-x class="b">
+				<u-waterfall v-model="goodList" ref="uWaterfall1">
+					<template v-slot:left="{leftList}">
+						<view class="item" v-for="(item, index) in leftList" :key="index"
+							@click="goDetail(item.goods_id)">
+							<image :src="item.goods_image" mode="widthFix"></image>
+							<view class="title">
+								<text>自营</text>{{item.goods_name}}
+							</view>
+							<view class="price">
+								<view class="n">￥<text
+										style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
+								</view>
+								<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
+							</view>
+						</view>
+					</template>
+					<template v-slot:right="{rightList}">
+						<view class="item" v-for="(item, index) in rightList" :key="index"
+							@click="goDetail(item.goods_id)">
+							<image :src="item.goods_image" mode="widthFix"></image>
+							<view class="title">
+								<text>自营</text>{{item.goods_name}}
+							</view>
+							<view class="price">
+								<view class="n">￥<text
+										style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
+								</view>
+								<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
+							</view>
+						</view>
+					</template>
+				</u-waterfall>
+				<u-empty text="暂无数据显示哦～" v-if="goodList.length==0" mode="list"></u-empty>
+			</view>
+		</view>
+		<view class="newpeople-fd" @click="openPage()">
+			<image :src="$picUrl+'/static/toTop.png?=1'"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	import * as Api from '@/api/activity'
+	export default {
+		data() {
 			return {
-				title: "新人首单礼",
-				current: 1,
-				isLoading: true,
-				background: {
-					background: 'url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat',
-					backgroundSize: '100%',
-
-				},
-				goodList: [],
-				LeftList: [],
-				RightList: [],
-				menuList: [],
-				couList: []
-			}
-		},
-		/**
-		 * 生命周期函数--监听页面显示
-		 */
-		onShow(options) {
-			this.getCoupons()
-			this.getListCharts()
-		},
-		methods: {
-			// 立即领取
-			async getUseCoupons(item) {
-				let {
-					status,
-					message,
-					data
-				} = await Api.receive({
-					couponId: item.coupon_id
-				});
-				if (status == 200) {
-					uni.showToast({
-						title: "领取成功"
-					})
-					this.getCoupons()
-				}
-			},
-			// 获取新人礼包劵
-			async getCoupons() {
-				let {
-					status,
-					message,
-					data
-				} = await Api.couponList();
-				if (status == 200) {
-					this.couList = data.list || []
-				}
-			},
-			// 根据分类查数据
-			getListgoodData(categoryId) {
-				let app = this;
-				this.LeftList = [];
-				this.RightList = []
-				let pamars = {
-					categoryId: categoryId,
-				}
-				Api.chartsGoodsList(pamars)
-					.then(result => {
-						if (result.data.data.length > 0) {
-							for (let i = 0; i < result.data.data.length; i++) {
-								result.data.data[i].goods_price_min = Number(result.data.data[i].goods_price_min);
-								result.data.data[i].line_price_min = Number(result.data.data[i].line_price_min)
-								if (i % 2 === 0) {
-									this.LeftList.push(result.data.data[i])
-								} else {
-									this.RightList.push(result.data.data[i])
-								}
-							}
-							app.goodList = result.data.data;
-						}
-					})
-					.finally(() => app.isLoading = false)
-			},
-			onChosed(index) {
-				let app = this;
-				app.current = index;
-				app.getListgoodData(index != 0 ? app.menuList[index].category_id : '')
-			},
-			openPage() {
-				uni.pageScrollTo({
-					scrollTop: 0
-				})
-			},
-			// 分类
-			async getListCharts() {
-				let app = this
-				let {
-					status,
-					message,
-					data
-				} = await Api.charts({
-					store_id: 10001
-				});
-				if (status == 200) {
-					let obj = {
-						name: '精选好物'
-					}
-					this.couList = data.list;
-					data.unshift(obj);
-					app.menuList = data;
-					app.getListgoodData()
-				}
-			},
-			goDetail(goods_id) {
-				uni.navigateTo({
-					url: '/pages/goods/detail?goodsId=' + goods_id
-				})
-			},
-			openRule() {
-				uni.navigateTo({
-					url: '/pages/activity/presaleRule?type=4'
-				})
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.newpeople {
-		background: url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat;
-		background-size: 100% auto;
-		overflow: hidden;
-
-		&-hd {
-			height: 200rpx;
-
-			.rule {
-				right: 0;
-				top: 204rpx;
-				z-index: 2;
-				width: 100rpx;
-				height: 60rpx;
-				background-color: rgba(0, 0, 0, 0.3);
-				font-size: 24rpx;
-				font-weight: 400;
-				color: #FFFFFF;
-				line-height: 60rpx;
-				text-align: center;
-				position: absolute;
-				border-radius: 50rpx 0 0 50rpx;
-			}
-		}
-
-		&-gift {
-			width: 100%;
-			border-radius: 10rpx 10rpx 0 0;
-			background-color: #fff;
-			overflow: hidden;
-
-			.a {
-				width: 100%;
-
-				image {
-					width: 380rpx;
-					height: 58rpx;
-					margin-left: 60rpx;
-					margin-top: 20rpx;
-				}
-			}
-
-			.b {
-				padding: 20rpx;
-				overflow: hidden;
-
-				white-space: nowrap;
-				display: flex;
-				justify-content: space-between;
-
-				.item {
-					width: 210rpx;
-					height: 240rpx;
-					position: relative;
-					margin-left: 30rpx;
-					display: inline-block;
-					text-align: center;
-
-					&:first-child {
-						margin-left: 0;
-					}
-
-					image {
-						width: 100%;
-						height: 100%;
-					}
-
-					.p {
-						width: 100%;
-						font-size: 42rpx;
-						color: #FF343B;
-						height: 80rpx;
-						position: absolute;
-						left: 0;
-						top: 50rpx;
-						z-index: 2;
-
-						text {
-							font-size: 52rpx;
-						}
-					}
-
-					.l {
-						width: 100%;
-						font-size: 24rpx;
-						font-weight: 500;
-						color: #8C4D00;
-						height: 50rpx;
-						position: absolute;
-						left: 0;
-						top: 120rpx;
-						z-index: 2;
-
-						text {
-							font-size: 52rpx;
-						}
-					}
-
-					.btn {
-						width: 100%;
-						font-size: 24rpx;
-						font-weight: 500;
-						color: #8C4D00;
-						height: 50rpx;
-						position: absolute;
-						left: 0;
-						bottom: 2rpx;
-						z-index: 2;
-
-						text {
-							font-size: 52rpx;
-						}
-					}
-				}
-			}
-		}
-
-		&-bd {
-			padding: 0 22rpx;
-			overflow: hidden;
-
-			.a {
-				padding: 10rpx 0;
-				overflow: hidden;
-			}
-
-			.b {
-				overflow: hidden;
-				display: flex;
-				justify-content: space-between;
-				flex-wrap: wrap;
-
-				.item {
-					width: 346rpx;
-					background: #FFFFFF;
-					border-radius: 8rpx;
-					opacity: 1;
-					border: 1px solid #ECECEC;
-					padding: 10rpx 15rpx 25rpx 15rpx;
-					box-sizing: border-box;
-
-					margin-bottom: 20rpx;
-
-					&:nth-child(2n+1) {
-						margin-left: 0;
-					}
-
-					image {
-						width: 275rpx;
-						height: 275rpx;
-						display: block;
-						margin: 0 auto;
-					}
-
-					.title {
-						padding: 10rpx 0;
-						line-height: 40rpx;
-						font-size: 24rpx;
-						font-family: PingFang SC, PingFang SC;
-						font-weight: 400;
-						color: #1E1E1E;
-						// text-overflow: ellipsis;
-						// white-space: nowrap;
-						// overflow: hidden;
-
-						text {
-							background-color: #F34A40;
-							font-size: 24rpx;
-							padding: 0 10rpx;
-							height: 40rpx;
-							line-height: 40rpx;
-							text-align: center;
-							border-radius: 4rpx;
-							font-weight: 400;
-							color: #FFFFFF;
-							margin-right: 5rpx;
-							display: inline-block;
-						}
-					}
-
-					.price {
-						display: flex;
-						align-items: center;
-						white-space: nowrap;
-
-						.n {
-							display: flex;
-							align-items: baseline;
-							font-size: 11px;
-							font-weight: 500;
-							color: #F21A1C;
-
-							text {
-								font-size: 29rpx;
-							}
-						}
-
-						.o {
-							font-size: 12px;
-							color: #949494;
-							text-decoration: line-through;
-						}
-					}
-
-					.desc {
-						font-size: 10px;
-						font-weight: 400;
-						color: #949494;
-						white-space: nowrap;
-						margin-top: 10rpx;
-					}
-				}
-
-			}
-		}
-
-		&-fd {
+				title: "新人首单礼",
+				current: 1,
+				isLoading: true,
+				background: {
+					background: 'url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat',
+					backgroundSize: '100%',
+
+				},
+				goodList: [],
+				menuList: [],
+				couList: []
+			}
+		},
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow(options) {
+			this.getCoupons()
+			this.getListCharts()
+		},
+		methods: {
+			// 立即领取
+			async getUseCoupons(item) {
+				let {
+					status,
+					message,
+					data
+				} = await Api.receive({
+					couponId: item.coupon_id
+				});
+				if (status == 200) {
+					uni.showToast({
+						title: "领取成功"
+					})
+					this.getCoupons()
+				}
+			},
+			// 获取新人礼包劵
+			async getCoupons() {
+				let {
+					status,
+					message,
+					data
+				} = await Api.couponList();
+				if (status == 200) {
+					this.couList = data.list || []
+				}
+			},
+			// 根据分类查数据
+			getListgoodData(categoryId) {
+				let app = this;
+				this.LeftList = [];
+				this.RightList = []
+				let pamars = {
+					categoryId: categoryId,
+				}
+				Api.chartsGoodsList(pamars)
+					.then(result => {
+						if (result.data.data.length > 0) {
+							for (let i = 0; i < result.data.data.length; i++) {
+								result.data.data[i].goods_price_min = Number(result.data.data[i].goods_price_min);
+								result.data.data[i].line_price_min = Number(result.data.data[i].line_price_min)
+							}
+							app.goodList = result.data.data || [];
+						}
+					})
+					.finally(() => app.isLoading = false)
+			},
+			onChosed(index) {
+				let app = this;
+				app.current = index;
+				app.getListgoodData(index != 0 ? app.menuList[index].category_id : '')
+			},
+			openPage() {
+				uni.pageScrollTo({
+					scrollTop: 0
+				})
+			},
+			// 分类
+			async getListCharts() {
+				let app = this
+				let {
+					status,
+					message,
+					data
+				} = await Api.charts({
+					store_id: 10001
+				});
+				if (status == 200) {
+					let obj = {
+						name: '精选好物'
+					}
+					this.couList = data.list;
+					data.unshift(obj);
+					app.menuList = data;
+					app.getListgoodData()
+				}
+			},
+			goDetail(goods_id) {
+				uni.navigateTo({
+					url: '/pages/goods/detail?goodsId=' + goods_id
+				})
+			},
+			openRule() {
+				uni.navigateTo({
+					url: '/pages/activity/presaleRule?type=4'
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .u-empty {
+		padding: 100rpx 0;
+	}
+	.newpeople {
+		background: url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat;
+		background-size: 100% auto;
+		overflow: hidden;
+
+		&-hd {
+			height: 200rpx;
+
+			.rule {
+				right: 0;
+				top: 204rpx;
+				z-index: 2;
+				width: 100rpx;
+				height: 60rpx;
+				background-color: rgba(0, 0, 0, 0.3);
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #FFFFFF;
+				line-height: 60rpx;
+				text-align: center;
+				position: absolute;
+				border-radius: 50rpx 0 0 50rpx;
+			}
+		}
+
+		&-gift {
+			width: 100%;
+			border-radius: 10rpx 10rpx 0 0;
+			background-color: #fff;
+			overflow: hidden;
+
+			.a {
+				width: 100%;
+
+				image {
+					width: 380rpx;
+					height: 58rpx;
+					margin-left: 60rpx;
+					margin-top: 20rpx;
+				}
+			}
+
+			.b {
+				padding: 20rpx;
+				overflow: hidden;
+
+				white-space: nowrap;
+				display: flex;
+				justify-content: space-between;
+
+				.item {
+					width: 210rpx;
+					height: 240rpx;
+					position: relative;
+					margin-left: 30rpx;
+					display: inline-block;
+					text-align: center;
+
+					&:first-child {
+						margin-left: 0;
+					}
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+
+					.p {
+						width: 100%;
+						font-size: 42rpx;
+						color: #FF343B;
+						height: 80rpx;
+						position: absolute;
+						left: 0;
+						top: 50rpx;
+						z-index: 2;
+
+						text {
+							font-size: 52rpx;
+						}
+					}
+
+					.l {
+						width: 100%;
+						font-size: 24rpx;
+						font-weight: 500;
+						color: #8C4D00;
+						height: 50rpx;
+						position: absolute;
+						left: 0;
+						top: 120rpx;
+						z-index: 2;
+
+						text {
+							font-size: 52rpx;
+						}
+					}
+
+					.btn {
+						width: 100%;
+						font-size: 24rpx;
+						font-weight: 500;
+						color: #8C4D00;
+						height: 50rpx;
+						position: absolute;
+						left: 0;
+						bottom: 2rpx;
+						z-index: 2;
+
+						text {
+							font-size: 52rpx;
+						}
+					}
+				}
+			}
+		}
+
+		&-bd {
+			padding: 0 22rpx;
+			overflow: hidden;
+
+			.a {
+				padding: 10rpx 0;
+				overflow: hidden;
+			}
+
+			.b {
+				overflow: hidden;
+
+				.item {
+					width: 346rpx;
+					background: #FFFFFF;
+					border-radius: 8rpx;
+					opacity: 1;
+					border: 1px solid #ECECEC;
+					padding: 10rpx 15rpx 25rpx 15rpx;
+					box-sizing: border-box;
+					margin-bottom: 20rpx;
+
+					&:nth-child(2n+1) {
+						margin-left: 0;
+					}
+
+					image {
+						width: 275rpx;
+						height: 275rpx !important;
+						display: block;
+						margin: 0 auto;
+					}
+
+					.title {
+						padding: 10rpx 0;
+						line-height: 40rpx;
+						font-size: 24rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 400;
+						color: #1E1E1E;
+						// text-overflow: ellipsis;
+						// white-space: nowrap;
+						// overflow: hidden;
+
+						text {
+							background-color: #F34A40;
+							font-size: 24rpx;
+							padding: 0 10rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							text-align: center;
+							border-radius: 4rpx;
+							font-weight: 400;
+							color: #FFFFFF;
+							margin-right: 5rpx;
+							display: inline-block;
+						}
+					}
+
+					.price {
+						display: flex;
+						align-items: center;
+						white-space: nowrap;
+
+						.n {
+							display: flex;
+							align-items: baseline;
+							font-size: 11px;
+							font-weight: 500;
+							color: #F21A1C;
+
+							text {
+								font-size: 29rpx;
+							}
+						}
+
+						.o {
+							font-size: 12px;
+							color: #949494;
+							text-decoration: line-through;
+						}
+					}
+
+					.desc {
+						font-size: 10px;
+						font-weight: 400;
+						color: #949494;
+						white-space: nowrap;
+						margin-top: 10rpx;
+					}
+				}
+
+			}
+		}
+
+		&-fd {
 			position: fixed;
 			bottom: 120rpx;
 			right: 16rpx;
@@ -416,12 +413,12 @@
 			z-index: 999;
 			display: flex;
 			align-items: center;
-			justify-content: center;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
+			justify-content: center;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
 </style>
diff --git a/pages/cart/index.vue b/pages/cart/index.vue
index 7127927..65a58df 100644
--- a/pages/cart/index.vue
+++ b/pages/cart/index.vue
@@ -40,11 +40,13 @@
 					<view class="item-foot">
 						<view class="goods-price">
 							<text class="unit">￥</text>
-							<text class="value">{{ item.goods.skuInfo.goods_price?Number(item.goods.skuInfo.goods_price):item.goods.skuInfo.goods_price }}</text>
+							<text
+								class="value">{{ item.goods.skuInfo.goods_price?Number(item.goods.skuInfo.goods_price):item.goods.skuInfo.goods_price }}</text>
 						</view>
 						<view class="stepper">
-							<u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1" @change="onChangeStepper($event, item)" />
-							
+							<u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1"
+								@change="onChangeStepper($event, item)" />
+
 						</view>
 					</view>
 				</view>
@@ -62,33 +64,61 @@
 
 		<!-- 商品推荐 -->
 		<view class="goodsRecommend-title">
-			<image :src="$picUrl+'/static/user/left.png'"></image>为您推荐<image :src="$picUrl+'/static/user/right.png'"></image>
+			<image :src="$picUrl+'/static/user/left.png'"></image>为您推荐<image :src="$picUrl+'/static/user/right.png'">
+			</image>
 		</view>
 		<view class="goodsRecommend">
-			<view class="goodsItem" v-for="(item,index) in goodsRecommend" @click="onTargetGoods(item.goods_id)" :key="index">
-				<view class="pic">
-					<image :src="item.goods_image" mode=""></image>
-				</view>
-				<view class="goodsInfo">
-					<view class="title">
-						<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
-						<text class="name">{{item.goods_name}}</text>
-					</view>
-					<view class="isExpress">
-						<text>包邮</text>
+			<u-waterfall v-model="goodsRecommend" ref="uWaterfall1">
+				<template v-slot:left="{leftList}">
+					<view class="goodsItem" v-for="(item,index) in leftList" @click="onTargetGoods(item.goods_id)"
+						:key="index">
+						<view class="pic">
+							<image :src="item.goods_image" mode=""></image>
+						</view>
+						<view class="goodsInfo">
+							<view class="title">
+								<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
+								<text class="name">{{item.goods_name}}</text>
+							</view>
+							<view class="isExpress">
+								<text>包邮</text>
+							</view>
+							<view class="price">
+								<text style="font-size: 20rpx;">￥</text>
+								<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
+								<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
+								<text
+									style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
+							</view>
+						</view>
 					</view>
-					<view class="price">
-						<text style="font-size: 20rpx;">￥</text>
-						<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
-						<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
-						<text style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
+				</template>
+				<template v-slot:right="{rightList}">
+					<view class="goodsItem" v-for="(item,index) in rightList" @click="onTargetGoods(item.goods_id)"
+						:key="index">
+						<view class="pic">
+							<image :src="item.goods_image" mode=""></image>
+						</view>
+						<view class="goodsInfo">
+							<view class="title">
+								<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
+								<text class="name">{{item.goods_name}}</text>
+							</view>
+							<view class="isExpress">
+								<text>包邮</text>
+							</view>
+							<view class="price">
+								<text style="font-size: 20rpx;">￥</text>
+								<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
+								<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
+								<text
+									style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
+							</view>
+						</view>
 					</view>
-					<!-- <view class="comment">
-						<text>{{item.goods_sales}}条评论</text>
-						<text style="margin-left:20rpx;">{{item.remaizhishu}}%好评率</text>
-					</view> -->
-				</view>
-			</view>
+				</template>
+			</u-waterfall>
+			<u-empty text="暂无数据显示哦～" v-if="goodsRecommend.length==0" mode="list"></u-empty>
 		</view>
 
 		<!-- 底部操作栏 -->
@@ -145,7 +175,7 @@
 		},
 		data() {
 			return {
-				goodsRecommend:[],
+				goodsRecommend: [],
 				inArray,
 				// 正在加载
 				isLoading: true,
@@ -198,8 +228,8 @@
 				// 获取推荐商品
 				Api.recommended().then(res => {
 					let arr = res.data.goodsList
-					if(arr && arr.length > 0){
-						arr.map(a=>{
+					if (arr && arr.length > 0) {
+						arr.map(a => {
 							a.goods_price_min = Number(a.goods_price_min)
 							a.goods_price_max = Number(a.goods_price_max)
 							a.line_price_min = Number(a.line_price_min)
@@ -208,7 +238,7 @@
 					}
 					this.goodsRecommend = arr
 				})
-			
+
 			},
 			// 计算合计金额 (根据选中的商品)
 			onCalcTotalPrice() {
@@ -372,10 +402,14 @@
 	}
 </style>
 <style lang="scss" scoped>
+	::v-deep .u-empty {
+		padding: 100rpx 0;
+	}
 	.container {
 		padding-bottom: 120rpx;
 	}
-	.goodsRecommend-title{
+
+	.goodsRecommend-title {
 		padding: 20rpx 25rpx;
 		display: flex;
 		align-items: center;
@@ -383,72 +417,75 @@
 		font-weight: 600;
 		color: #3B3B3B;
 		justify-content: center;
-		image{
+
+		image {
 			width: 30rpx;
 			height: 30rpx;
 			margin: 0 10rpx;
 		}
 	}
-	.goodsRecommend{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		padding:10rpx 25rpx 25rpx;
-		.goodsItem{
-			width: 340rpx;
+
+	.goodsRecommend {
+		overflow: hidden;
+		padding: 10rpx 25rpx 25rpx;
+
+		.goodsItem {
+			width: 338rpx;
 			border-radius: 8rpx;
 			overflow: hidden;
 			background-color: #ffffff;
-			margin-bottom:24rpx;
+			margin-bottom: 24rpx;
 			padding: 20rpx;
 			box-sizing: border-box;
-			.pic{
+
+			.pic {
 				width: 100%;
 				text-align: center;
-				image{
+
+				image {
 					// width:100%;
-					width:256rpx;
-					height:256rpx;
-					
+					width: 256rpx;
+					height: 256rpx;
+
 				}
 			}
-			.goodsInfo{
-				.title{
+
+			.goodsInfo {
+				.title {
 					display: flex;
 					align-items: center;
-					margin-top:14rpx;
-					.ziying{
-						padding:4rpx 10rpx;
+					margin-top: 14rpx;
+
+					.ziying {
+						padding: 4rpx 10rpx;
 						background: #FF4438;
 						border-radius: 2px 2px 2px 2px;
 						opacity: 1;
 						font-size: 24rpx;
 						font-weight: 400;
 						color: #FFFFFF;
-						
+
 					}
-					.name{
-						margin-left:6rpx;
+
+					.name {
+						margin-left: 6rpx;
 						font-size: 24rpx;
 						font-weight: 400;
 						color: #1E1E1E;
-						flex:1;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-						
+						flex: 1;
 					}
 				}
-				.isExpress{
+
+				.isExpress {
 					height: 30rpx;
 					display: flex;
 					align-items: center;
-					margin:10rpx 0;
-					text{
-						display:inline-block;
+					margin: 10rpx 0;
+
+					text {
+						display: inline-block;
 						width: 44rpx;
-						height:30rpx;
+						height: 30rpx;
 						line-height: 28rpx;
 						border: 1px solid #F21A1C;
 						border-radius: 2px 2px 2px 2px;
@@ -459,23 +496,26 @@
 						font-weight: 400;
 						color: #F21A1C;
 					}
-					
+
 				}
-				.price{
+
+				.price {
 					color: #F21A1C;
 					display: flex;
 					align-items: baseline;
 				}
-				.comment{
+
+				.comment {
 					margin-top: 6rpx;
 					font-size: 22rpx;
 					font-weight: 400;
 					color: #949494;
-				
+
 				}
 			}
 		}
 	}
+
 	// 页面顶部
 	.head-info {
 		display: flex;
@@ -580,6 +620,7 @@
 					vertical-align: bottom;
 					color: $main-bg;
 					flex: 1;
+
 					.unit {
 						font-size: 24rpx;
 					}
diff --git a/pages/category/index.vue b/pages/category/index.vue
index 600ff9e..fa18bda 100644
--- a/pages/category/index.vue
+++ b/pages/category/index.vue
@@ -7,18 +7,16 @@
 			</view>
 		</view>
 		<view class="u-menu-wrap">
-			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
-				:scroll-into-view="itemId">
+			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view">
 				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
 					:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
 					<text class="u-line-1">{{item.name}}</text>
 				</view>
 			</scroll-view>
-			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
-				@scroll="rightScroll">
+			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box">
 				<view class="page-view">
-					<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
-						<view class="item-box" v-for="(item1, index1) in item.children" :key="index1">
+					<view class="class-item">
+						<view class="item-box" v-for="(item1, index1) in tabbarList.children" :key="index1">
 							<view class="item-title">
 								<text>{{item1.name}}</text>
 							</view>
@@ -43,18 +41,10 @@
 	export default {
 		data() {
 			return {
-				scrollTop: 0, //tab标题的滚动条位置
-				oldScrollTop: 0,
 				current: 0, // 预设当前项的值
-				menuHeight: 0, // 左边菜单的高度
-				menuItemHeight: 0, // 左边菜单item的高度
-				itemId: '', // 栏目右边scroll-view用于滚动的id
 				tabbar: [],
-				menuItemPos: [],
-				arr: [],
-				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
-				timer: null, // 定时器
-
+				tabbarList: [],
+				scrollRightTop: 0,
 			}
 		},
 		onLoad() {
@@ -78,17 +68,10 @@
 			},
 			// 点击左边的栏目切换
 			async swichMenu(index) {
-				console.log(index)
-				if (this.arr.length == 0) {
-					await this.getMenuItemTop();
-				}
-				if (index == this.current) return;
-				this.scrollRightTop = this.oldScrollTop;
-				this.$nextTick(function() {
-					this.current = index;
-					this.scrollRightTop = this.arr[index];
-					this.leftMenuStatus(index);
-				})
+				this.tabbarList = []
+				this.current = index;
+				this.tabbarList = this.tabbar[index];
+				this.getMenuItemTop()
 			},
 			getGoodsTypeList() {
 				const that = this;
@@ -97,105 +80,25 @@
 							// is_hot: 0
 						})
 						.then(res => {
-							// 合并新数据
-							console.log(res, '分类数据')
 							that.tabbar = res.data.list;
+							that.tabbarList = res.data.list[0]
 						})
 						.catch(reject)
 				})
 			},
-			// 获取一个目标元素的高度
-			getElRect(elClass, dataVal) {
-				new Promise((resolve, reject) => {
-					const query = uni.createSelectorQuery().in(this);
-					query.select('.' + elClass).fields({
-						size: true
-					}, res => {
-						// 如果节点尚未生成，res值为null，循环调用执行
-						if (!res) {
-							setTimeout(() => {
-								this.getElRect(elClass);
-							}, 10);
-							return;
-						}
-						this[dataVal] = res.height;
-						resolve();
-					}).exec();
-				})
-			},
-			// 观测元素相交状态
-			async observer() {
-				this.tabbar.map((val, index) => {
-					let observer = uni.createIntersectionObserver(this);
-					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
-					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
-					observer.relativeTo('.right-box', {
-						top: 0
-					}).observe('#item' + index, res => {
-						if (res.intersectionRatio > 0) {
-							let id = res.id.substring(4);
-							this.leftMenuStatus(id);
-						}
-					})
-				})
-			},
-			// 设置左边菜单的滚动状态
-			async leftMenuStatus(index) {
-				// 如果为0，意味着尚未初始化
-				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-					await this.getElRect('menu-scroll-view', 'menuHeight');
-					await this.getElRect('u-tab-item', 'menuItemHeight');
-				}
-				// 将菜单活动item垂直居中
-				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-				this.current = index-1;
-
-			},
 			// 获取右边菜单每个item到顶部的距离
 			getMenuItemTop() {
 				new Promise(resolve => {
 					let selectorQuery = uni.createSelectorQuery();
 					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
-						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
-						if (!rects.length) {
-							setTimeout(() => {
-								this.getMenuItemTop();
-							}, 10);
-							return;
-						}
 						rects.forEach((rect) => {
-							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
-							this.arr.push(rect.top - rects[0].top);
+							console.log(rects[0].top)
+							this.scrollRightTop = rects[0].top
 							resolve();
 						})
 					}).exec()
 				})
 			},
-			// 右边菜单滚动
-			async rightScroll(e) {
-				this.oldScrollTop = e.detail.scrollTop;
-				if (this.arr.length == 0) {
-					await this.getMenuItemTop();
-				}
-				if (this.timer) return;
-				if (!this.menuHeight) {
-					await this.getElRect('menu-scroll-view', 'menuHeight');
-				}
-				setTimeout(() => { // 节流
-					this.timer = null;
-					// scrollHeight为右边菜单垂直中点位置
-					let scrollHeight = e.detail.scrollTop;
-					for (let i = 0; i < this.arr.length; i++) {
-						let height1 = this.arr[i];
-						let height2 = this.arr[i + 1];
-						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
-							this.leftMenuStatus(i+1);
-							return;
-						}
-					}
-				}, 10)
-			}
 		}
 	}
 </script>
@@ -276,12 +179,11 @@
 	}
 
 	.page-view {
-		padding: 0 16rpx 16rpx;
 		overflow: hidden;
 	}
 
 	.class-item {
-		margin-bottom: 12rpx;
+		margin-bottom: 30rpx;
 		background-color: #fff;
 		padding: 20rpx;
 		border-radius: 8rpx;
diff --git a/pages/goods/list.vue b/pages/goods/list.vue
index 8e26598..9a5f4e3 100644
--- a/pages/goods/list.vue
+++ b/pages/goods/list.vue
@@ -57,76 +57,124 @@
 
 			<!-- 商品列表 -->
 			<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
-				<view class="goods-item" v-for="(item, index) in list.data" :key="index"
-					@click="onTargetDetail(item.goods_id)">
-					<!-- 单列显示 -->
-					<view v-if="showView" class="dis-flex">
-						<!-- 商品图片 -->
-						<view class="goods-item-left">
-							<image class="image" :src="item.goods_image"></image>
-						</view>
-						<view class="goods-item-right">
-							<!-- 商品名称 -->
-							<view class="goods-name">
-								<text class="twoline-hide">{{ item.goods_name }}</text>
+				<view v-if="showView">
+					<view class="goods-item" v-for="(item, index) in list.data" :key="index"
+						@click="onTargetDetail(item.goods_id)">
+						<!-- 单列显示 -->
+						<view v-if="showView" class="dis-flex">
+							<!-- 商品图片 -->
+							<view class="goods-item-left">
+								<image class="image" :src="item.goods_image"></image>
 							</view>
-							<view class="goods-item-desc">
-								<!-- 商品卖点 -->
-								<view class="desc-selling-point dis-flex">
-									<text class="oneline-hide">{{ item.selling_point }}</text>
-								</view>
-								<!-- 商品销量 -->
-								<view class="desc-goods-sales dis-flex">
-									<text>已售{{ item.goods_sales }}件</text>
+							<view class="goods-item-right">
+								<!-- 商品名称 -->
+								<view class="goods-name">
+									<text class="twoline-hide">{{ item.goods_name }}</text>
 								</view>
-								<!-- 商品价格 -->
-								<view class="desc-footer">
-									<text
-										class="price-x">¥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}</text>
-									<text class="price-y col-9"
-										v-if="item.line_price_min > 0">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
+								<view class="goods-item-desc">
+									<!-- 商品卖点 -->
+									<view class="desc-selling-point dis-flex">
+										<text class="oneline-hide">{{ item.selling_point }}</text>
+									</view>
+									<!-- 商品销量 -->
+									<view class="desc-goods-sales dis-flex">
+										<text>已售{{ item.goods_sales }}件</text>
+									</view>
+									<!-- 商品价格 -->
+									<view class="desc-footer">
+										<text
+											class="price-x">¥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}</text>
+										<text class="price-y col-9"
+											v-if="item.line_price_min > 0">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
+									</view>
 								</view>
 							</view>
 						</view>
 					</view>
-					<!-- 多列显示 -->
-					<view v-else class="">
-						<!-- 商品图片 -->
-						<view class="goods-image">
-							<image class="image" mode="aspectFill" :src="item.goods_image"></image>
-						</view>
-						<view class="detail">
-							<!-- 商品名称 -->
-							<view class="goods-name">
-								<text class="twoline-hide">{{ item.goods_name }}</text>
-							</view>
-							<view class="shipping">
-								包邮
-							</view>
-							<view class="goodsInfo">
-								<view class="oneTip tip">
-									85英寸
-								</view>
-								<view class="twoTip tip">
-									量子电视
-								</view>
-								<view class="threeTip tip">
-									4K电视
+				</view>
+				<view v-else>
+					<u-waterfall v-model="list.data" ref="uWaterfall1">
+						<template v-slot:left="{leftList}">
+							<view class="goods-item" v-for="(item, index) in leftList" :key="index"
+								@click="onTargetDetail(item.goods_id)">
+								<!-- 多列显示 -->
+								<view class="">
+									<!-- 商品图片 -->
+									<view class="goods-image">
+										<image class="image" mode="aspectFill" :src="item.goods_image"></image>
+									</view>
+									<view class="detail">
+										<!-- 商品名称 -->
+										<view class="goods-name">
+											<text>{{ item.goods_name }}</text>
+										</view>
+										<view class="shipping">
+											包邮
+										</view>
+										<view class="goodsInfo">
+											<view class="oneTip tip">
+												85英寸
+											</view>
+											<view class="twoTip tip">
+												量子电视
+											</view>
+											<view class="threeTip tip">
+												4K电视
+											</view>
+										</view>
+										<!-- 商品价格 -->
+										<view class="detail-price oneline-hide">
+											<text
+												class="goods-price f-30 col-m">￥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}
+												<text class="delPrice">到手价</text></text>
+											<text v-if="item.line_price_min > 0"
+												class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):''  }}</text>
+										</view>
+									</view>
 								</view>
 							</view>
-							<!-- 商品价格 -->
-							<view class="detail-price oneline-hide">
-								<text
-									class="goods-price f-30 col-m">￥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}
-									<text class="delPrice">到手价</text></text>
-								<text v-if="item.line_price_min > 0"
-									class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):''  }}</text>
+						</template>
+						<template v-slot:right="{rightList}">
+							<view class="goods-item" v-for="(item, index) in rightList" :key="index"
+								@click="onTargetDetail(item.goods_id)">
+								<!-- 多列显示 -->
+								<view class="">
+									<!-- 商品图片 -->
+									<view class="goods-image">
+										<image class="image" mode="aspectFill" :src="item.goods_image"></image>
+									</view>
+									<view class="detail">
+										<!-- 商品名称 -->
+										<view class="goods-name">
+											<text>{{ item.goods_name }}</text>
+										</view>
+										<view class="shipping">
+											包邮
+										</view>
+									<!-- 	<view class="goodsInfo">
+											<view class="oneTip tip">
+												85英寸
+											</view>
+											<view class="twoTip tip">
+												量子电视
+											</view>
+											<view class="threeTip tip">
+												4K电视
+											</view>
+										</view> -->
+										<!-- 商品价格 -->
+										<view class="detail-price oneline-hide">
+											<text
+												class="goods-price f-30 col-m">￥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}
+												<text class="delPrice">到手价</text></text>
+											<text v-if="item.line_price_min > 0"
+												class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):''  }}</text>
+										</view>
+									</view>
+								</view>
 							</view>
-							<!-- <view class="evaluate">
-								200+条评论 99%好评率
-							</view> -->
-						</view>
-					</view>
+						</template>
+					</u-waterfall>
 				</view>
 				<u-empty text="暂无数据显示哦～" v-if="list.data.length==0" mode="list"></u-empty>
 			</view>
@@ -538,7 +586,7 @@
 	// 平铺显示
 	.goods-list.column-2 {
 		.goods-item {
-			width: 50%;
+			// width: 50%;
 		}
 	}
 
@@ -577,7 +625,6 @@
 			background: #fff;
 
 			.goods-name {
-				min-height: 68rpx;
 				line-height: 1.3;
 				white-space: normal;
 				color: #484848;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 188d23a..39c3da3 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -55,7 +55,8 @@
 							<text>{{item.text}}</text>
 						</view>
 					</view>
-					<view class="gridRows secondRows" :style="{'height': isToggle == false?catagoryList.length >0?'160rpx':'auto':'auto'}">
+					<view class="gridRows secondRows"
+						:style="{'height': isToggle == false?catagoryList.length >0?'160rpx':'auto':'auto'}">
 						<view class="gridItem" v-for="(item,index) in catagoryList" :key="index"
 							@click="goJump('/pages/goods/list?categoryId=' + item.category_id)">
 							<view class="imageC">
@@ -85,7 +86,8 @@
 							</view>
 							<view class="left">
 								<text class="flag">¥</text>
-								<text class="num">{{couList.reduce_price?Number(couList.reduce_price):couList.reduce_price}}</text>
+								<text
+									class="num">{{couList.reduce_price?Number(couList.reduce_price):couList.reduce_price}}</text>
 								<view class="couponName">
 									<view>{{couList.name}}</view>
 									<view style="font-size: 20rpx;">领取后{{couList.expire_day}}天内有效</view>
@@ -233,53 +235,59 @@
 					</view>
 				</view>
 				<view class="goodsRecommend">
-					<view class="">
-						<view class="goodsItem" v-for="(item,index) in LeftList" @click="goDetails(item)" :key="index">
-							<view class="pic">
-								<image :src="item.goods_image" mode="widthFix"></image>
-							</view>
-							<view class="goodsInfo">
-								<view class="title">
-									<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
-									<text class="name">{{item.goods_name}}</text>
-								</view>
-								<view class="isExpress">
-									<text>包邮</text>
+					<u-waterfall v-model="goodsRecommend" ref="uWaterfall1">
+						<template v-slot:left="{leftList}">
+							<view class="goodsItem" v-for="(item,index) in leftList" @click="goDetails(item)"
+								:key="index">
+								<view class="pic">
+									<image :src="item.goods_image" mode="widthFix"></image>
 								</view>
-								<view class="price">
-									<text style="font-size: 20rpx;">￥</text>
-									<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
-									<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
-									<text
-										style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
+								<view class="goodsInfo">
+									<view class="title">
+										<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
+										<text class="name">{{item.goods_name}}</text>
+									</view>
+									<view class="isExpress">
+										<text>包邮</text>
+									</view>
+									<view class="price">
+										<text style="font-size: 20rpx;">￥</text>
+										<text
+											style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
+										<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
+										<text
+											style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
+									</view>
 								</view>
 							</view>
-						</view>
-					</view>
-					<view class="">
-						<view class="goodsItem" v-for="(item,index) in RightList" @click="goDetails(item)" :key="index">
-							<view class="pic">
-								<image :src="item.goods_image" mode="widthFix"></image>
-							</view>
-							<view class="goodsInfo">
-								<view class="title">
-									<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
-									<text class="name">{{item.goods_name}}</text>
-								</view>
-								<view class="isExpress">
-									<text>包邮</text>
+						</template>
+						<template v-slot:right="{rightList}">
+							<view class="goodsItem" v-for="(item,index) in rightList" @click="goDetails(item)"
+								:key="index">
+								<view class="pic">
+									<image :src="item.goods_image" mode="widthFix"></image>
 								</view>
-								<view class="price">
-									<text style="font-size: 20rpx;">￥</text>
-									<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
-									<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
-									<text
-										style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
+								<view class="goodsInfo">
+									<view class="title">
+										<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
+										<text class="name">{{item.goods_name}}</text>
+									</view>
+									<view class="isExpress">
+										<text>包邮</text>
+									</view>
+									<view class="price">
+										<text style="font-size: 20rpx;">￥</text>
+										<text
+											style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
+										<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
+										<text
+											style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
+									</view>
 								</view>
 							</view>
-						</view>
-					</view>
-
+						</template>
+					</u-waterfall>
+					<u-empty text="暂无数据显示哦～" v-if="goodsRecommend.length==0" mode="list"></u-empty>
 				</view>
 			</view>
 		</view>
@@ -545,8 +553,6 @@
 				seckillList: [],
 				xinpinList: [],
 				goodsRecommend: [],
-				LeftList: [],
-				RightList: [],
 				isToggle: false,
 				//第二
 				count: 4,
@@ -686,7 +692,7 @@
 					uni.navigateTo({
 						url
 					})
-				} else{
+				} else {
 					uni.navigateTo({
 						url
 					})
@@ -761,11 +767,6 @@
 							arr[i].goods_price_max = Number(arr[i].goods_price_max)
 							arr[i].line_price_min = Number(arr[i].line_price_min);
 							arr[i].line_price_max = Number(arr[i].line_price_max)
-							if (i % 2 === 0) {
-								this.LeftList.push(arr[i])
-							} else {
-								this.RightList.push(arr[i])
-							}
 						}
 					}
 					this.goodsRecommend = arr
@@ -1065,14 +1066,16 @@
 			width: 100%;
 			overflow-x: auto;
 			overflow-y: hidden;
+
 			.tabItem {
-			    margin-right: 30rpx;
+				margin-right: 30rpx;
 				position: relative;
-				display: inline-block;
+				display: inline-block;
 				font-size: 28rpx;
 				font-weight: 400;
 				padding: 0 20rpx;
 				color: #282828;
+
 				.flag {
 					position: absolute;
 					bottom: -13px;
@@ -1677,9 +1680,7 @@
 			}
 
 			.goodsRecommend {
-				display: flex;
-				justify-content: space-between;
-				flex-wrap: wrap;
+				overflow: hidden;
 				margin-top: 20rpx;
 
 				.goodsItem {
diff --git a/pages/user/vip/goods.vue b/pages/user/vip/goods.vue
index f3b50d7..708efc7 100644
--- a/pages/user/vip/goods.vue
+++ b/pages/user/vip/goods.vue
@@ -1,552 +1,573 @@
-<template>
-	<view class="goods">
-		<u-navbar>
-			<view class="slot-wrap">
-				<u-search @click="openPage()" placeholder="iPhone 15" disabled :show-action="false" v-model="keyword">
-				</u-search>
-			</view>
-		</u-navbar>
-		<view class="goods-hd">
-			<u-swiper :list="swiperList" mode="none" height="400"></u-swiper>
-		</view>
-		<scroll-view scroll-x class="goods-menu">
-			<view class="item" @click="tabItem1(item,index)" v-for="(item,index) in categoryList" :key="index"
-				:class="tabIndex1==index?'item-on':''">
-				<image :src="item.image?item.image.external_url:''"></image>
-				<view class="p">{{item.name}}</view>
-			</view>
-		</scroll-view>
-		<view class="goods-bd">
-			<scroll-view scroll-y class="a">
-				<view class="item" v-for="(item,index) in categoryChildren" :key="index" @click="tabItem(index,item)"
-					:class="tabIndex==index?'item-on':''">{{item.name}}</view>
-			</scroll-view>
-			<view class="b">
-				<view class="t">
-					<view class="item" @click="tabFilter(0,1)" :class="filterIndex==0?'item-on':''">价格</view>
-					<view class="item" @click="tabFilter(1,3)" :class="filterIndex==1?'item-on':''">折扣</view>
-					<view class="item" @click="tabFilter(2,5)" :class="filterIndex==2?'item-on':''">销量</view>
-					<view class="item" @click="tabFilter(3,7)" :class="filterIndex==3?'item-on':''">综合</view>
-				</view>
-				<scroll-view scroll-y class="l" @scrolltolower="lowerthreshold" >
-					<view class="item" v-for="(item,index) in list" v-if="list.length>0" :key="index"
-						@click="goodsDetail(item.goods_id)" :isLoading="isLoading">
-						<image :src="item.goods_image"></image>
-						<view class="title">
-							<text>自营</text>{{item.goods_name}}
-						</view>
-						<view class="price">
-							<view class="n">￥<text>{{item.goods_price_min?Number(item.goods_price_min):''}}</text>到手价</view>
-							<view class="o">￥{{item.line_price_min?Number(item.line_price_min):''}}</view>
-						</view>
-						<!-- <view class="desc">
-							{{item.goods_sales}}+条评论 {{item.remaizhishu}}%好评率
-						</view> -->
-					</view>
-					<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
-					<u-divider v-if="list.length == total && total>=1">没有更多了</u-divider>
-				</scroll-view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import * as Api from '@/api/user/vip'
-	export default {
-		data() {
-			return {
-				backgroundBg: {
-					"background": "transparent",
-					"overflow": "auto"
+<template>
+	<view class="goods">
+		<u-navbar>
+			<view class="slot-wrap">
+				<u-search @click="openPage()" placeholder="iPhone 15" disabled :show-action="false" v-model="keyword">
+				</u-search>
+			</view>
+		</u-navbar>
+		<view class="goods-hd">
+			<u-swiper :list="swiperList" mode="none" height="400"></u-swiper>
+		</view>
+		<scroll-view scroll-x class="goods-menu">
+			<view class="item" @click="tabItem1(item,index)" v-for="(item,index) in categoryList" :key="index"
+				:class="tabIndex1==index?'item-on':''">
+				<image :src="item.image?item.image.external_url:''"></image>
+				<view class="p">{{item.name}}</view>
+			</view>
+		</scroll-view>
+		<view class="goods-bd">
+			<scroll-view scroll-y class="a">
+				<view class="item" v-for="(item,index) in categoryChildren" :key="index" @click="tabItem(index,item)"
+					:class="tabIndex==index?'item-on':''">{{item.name}}</view>
+			</scroll-view>
+			<view class="b">
+				<view class="t">
+					<view class="item" @click="tabFilter(0,1)" :class="filterIndex==0?'item-on':''">价格</view>
+					<view class="item" @click="tabFilter(1,3)" :class="filterIndex==1?'item-on':''">折扣</view>
+					<view class="item" @click="tabFilter(2,5)" :class="filterIndex==2?'item-on':''">销量</view>
+					<view class="item" @click="tabFilter(3,7)" :class="filterIndex==3?'item-on':''">综合</view>
+				</view>
+				<scroll-view scroll-y class="l" @scrolltolower="lowerthreshold">
+					<u-waterfall v-model="list" ref="uWaterfall1">
+						<template v-slot:left="{leftList}">
+							<view class="item" v-for="(item,index) in leftList" :key="index"
+								@click="goodsDetail(item.goods_id)" :isLoading="isLoading">
+								<image :src="item.goods_image"></image>
+								<view class="title">
+									<text>自营</text>{{item.goods_name}}
+								</view>
+								<view class="price">
+									<view class="n">
+										￥<text>{{item.goods_price_min?Number(item.goods_price_min):''}}</text>到手价
+									</view>
+									<view class="o">￥{{item.line_price_min?Number(item.line_price_min):''}}</view>
+								</view>
+							</view>
+						</template>
+						<template v-slot:right="{rightList}">
+							<view class="item" v-for="(item,index) in rightList" :key="index"
+								@click="goodsDetail(item.goods_id)" :isLoading="isLoading">
+								<image :src="item.goods_image"></image>
+								<view class="title">
+									<text>自营</text>{{item.goods_name}}
+								</view>
+								<view class="price">
+									<view class="n">
+										￥<text>{{item.goods_price_min?Number(item.goods_price_min):''}}</text>到手价
+									</view>
+									<view class="o">￥{{item.line_price_min?Number(item.line_price_min):''}}</view>
+								</view>
+							</view>
+						</template>
+					</u-waterfall>
+					<u-empty text="暂无数据显示哦～" v-if="list.length==0" mode="list"></u-empty>
+					<u-divider v-if="list.length == total && total>=1">没有更多了</u-divider>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import * as Api from '@/api/user/vip'
+	export default {
+		data() {
+			return {
+				backgroundBg: {
+					"background": "transparent",
+					"overflow": "auto"
 				},
 				page: 1,
-				total: 0,
-				// 正在加载
-				isLoading: true,
-				tabIndex1: 0,
-				tabIndex: 0,
-				filterIndex: 0,
-				keyword: "",
-				categoryList: [],
-				category_id: 10001,
-				categoryChildren: [],
-				list: [],
-				swiperList: [],
-				orderSort: 1,
-				type: 0
-			}
-		},
-		onLoad(op) {
-			this.type = op.type
-		},
-		/**
-		 * 生命周期函数--监听页面显示
-		 */
-		onShow(options) {
-			this.getCarouselList()
-			this.getCategoryList()
-		},
+				total: 0,
+				// 正在加载
+				isLoading: true,
+				tabIndex1: 0,
+				tabIndex: 0,
+				filterIndex: 0,
+				keyword: "",
+				categoryList: [],
+				category_id: 10001,
+				categoryChildren: [],
+				list: [],
+				swiperList: [],
+				orderSort: 1,
+				type: 0
+			}
+		},
+		onLoad(op) {
+			this.type = op.type
+		},
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow(options) {
+			this.getCarouselList()
+			this.getCategoryList()
+		},
 		methods: {
 			lowerthreshold() {
-				if(this.list.length <= this.total){
-					this.page ++
+				if (this.list.length <= this.total) {
+					this.page++
 					console.log("g")
 					this.getBrandList(this.category_id)
 				}
-			},
-			// 获取背景图
-			getCarouselList() {
-				const app = this;
-				Api.getImage({
-						type: 4
-					})
-					.then(result => {
-						app.swiperList = result.data.imgurl;
-					})
-					.finally(() => app.isLoading = false)
-			},
-			// 获取分类
-			getCategoryList() {
-				const app = this;
-				Api.category({is_in_store:this.type==1?1:''})
-					.then(result => {
+			},
+			// 获取背景图
+			getCarouselList() {
+				const app = this;
+				Api.getImage({
+						type: 4
+					})
+					.then(result => {
+						app.swiperList = result.data.imgurl;
+					})
+					.finally(() => app.isLoading = false)
+			},
+			// 获取分类
+			getCategoryList() {
+				const app = this;
+				Api.category({
+						is_in_store: this.type == 1 ? 1 : ''
+					})
+					.then(result => {
 						app.categoryList = result.data.list;
-						if(result.data.list && result.data.list.length > 0){
+						if (result.data.list && result.data.list.length > 0) {
 							app.categoryChildren = result.data.list[0].children;
 							app.category_id = result.data.list[0].category_id
 							app.getBrandList(result.data.list[0].category_id)
-						}
-						
-						
-					})
-					.finally(() => app.isLoading = false)
-			},
-			// 获取大牌商品
-			getBrandList(categoryId) {
-				const app = this;
-				let pamars = {
-					// store_id: 10001,
-					page: this.page,
-					is_brand:this.type==1?'':1,
-					is_new: '',
-					categoryId: categoryId,
-					order: app.orderSort,
-					is_in_store:this.type==1?1:0
-				}
-				Api.brandList(pamars)
-					.then(result => {
-						let arr = result.data.data;
-						app.list = app.arrayUnique([...app.list,...arr],'goods_id')
-						app.total = result.data.total
-					})
-					.finally(() => app.isLoading = false)
+						}
+
+
+					})
+					.finally(() => app.isLoading = false)
+			},
+			// 获取大牌商品
+			getBrandList(categoryId) {
+				const app = this;
+				let pamars = {
+					// store_id: 10001,
+					page: this.page,
+					is_brand: this.type == 1 ? '' : 1,
+					is_new: '',
+					categoryId: categoryId,
+					order: app.orderSort,
+					is_in_store: this.type == 1 ? 1 : 0
+				}
+				Api.brandList(pamars)
+					.then(result => {
+						let arr = result.data.data ||[];
+						app.list = app.arrayUnique([...app.list, ...arr], 'goods_id')
+						app.total = result.data.total
+					})
+					.finally(() => app.isLoading = false)
 			},
 			//数组对象去重
 			arrayUnique(arr, name) {
-			    var hash = {};
-			    return arr.reduce(function (item, next) {
-			        hash[next[name]]
-			            ? ""
-			            : (hash[next[name]] = true && item.push(next));
-			        return item;
-			    }, []);
-			},
-			tabItem(index, item) {
-				this.tabIndex = index;
-				this.page = 1;
+				var hash = {};
+				return arr.reduce(function(item, next) {
+					hash[next[name]] ?
+						"" :
+						(hash[next[name]] = true && item.push(next));
+					return item;
+				}, []);
+			},
+			tabItem(index, item) {
+				this.tabIndex = index;
+				this.page = 1;
 				this.list = [];
-				this.category_id = item.category_id
-				this.getBrandList(item.category_id)
-			},
-			tabItem1(item, index) {
-				this.tabIndex1 = index;
-				let app = this;
-				this.page = 1;
-				app.categoryChildren = [];
-				app.categoryChildren = item.children;
+				this.category_id = item.category_id
+				this.getBrandList(item.category_id)
+			},
+			tabItem1(item, index) {
+				this.tabIndex1 = index;
+				let app = this;
+				this.page = 1;
+				app.categoryChildren = [];
+				app.categoryChildren = item.children;
 				app.list = [];
-				app.category_id = item.category_id
-				this.getBrandList(item.category_id)
-			},
-			tabFilter(index, stuts) {
-				this.filterIndex = index;
-				if (index == 0) {
-					this.orderSort = stuts == 1 ? 2 : 1
-				}
-				if (index == 1) {
-					this.orderSort = stuts == 3 ? 4 : 3
-				}
-				if (index == 2) {
-					this.orderSort = stuts == 5 ? 6 : 5
-				}
-				if (index == 3) {
-					this.orderSort = stuts == 7 ? 8 : 7
-				}
+				app.category_id = item.category_id
+				this.getBrandList(item.category_id)
+			},
+			tabFilter(index, stuts) {
+				this.filterIndex = index;
+				if (index == 0) {
+					this.orderSort = stuts == 1 ? 2 : 1
+				}
+				if (index == 1) {
+					this.orderSort = stuts == 3 ? 4 : 3
+				}
+				if (index == 2) {
+					this.orderSort = stuts == 5 ? 6 : 5
+				}
+				if (index == 3) {
+					this.orderSort = stuts == 7 ? 8 : 7
+				}
 				console.log(this.orderSort)
-				this.page = 1
+				this.page = 1
 				this.list = [];
-				this.category_id = this.categoryChildren[0].category_id
-				this.getBrandList(this.categoryChildren[0].category_id)
-			},
-			goodsDetail(orderId) {
-				uni.navigateTo({
-					url: '/pages/goods/detail?goodsId=' + orderId
-				})
-			},
-			openPage() {
-				uni.navigateTo({
-					url: "/pages/search/index"
-				})
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.goods {
-		.slot-wrap {
-			width: 400rpx;
-			margin-left: 60rpx;
-		}
-
-		&-hd {
-			width: 100%;
-			height: 400rpx;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		&-menu {
-			height: 180rpx;
-			white-space: nowrap;
-			margin-top: 30rpx;
-			padding: 0 20rpx;
-
-			.item {
-				width: 150rpx;
-				height: 180rpx;
-				background: #FFFFFF;
-				display: inline-block;
-				padding: 16rpx;
-				box-sizing: border-box;
-				border: 1px solid #FFFFFF;
-				text-align: center;
-				margin-left: 12rpx;
-				border-radius: 8rpx;
-
-				image {
-					width: 112rpx;
-					height: 112rpx;
-				}
-
-				.p {
-					white-space: nowrap;
-					overflow: hidden;
-					font-size: 28rpx;
-					font-weight: 400;
-					color: #3F3F3F;
-				}
-
-				&-on {
-					border: 1px solid #F21A1C;
-				}
-			}
-		}
-
-		&-bd {
-			padding: 30rpx 0 0;
-			display: flex;
-			height: calc(100vh - 750rpx);
-			box-sizing: border-box;
-			overflow: hidden;
-
-			.a {
-				width: 150rpx;
-				height: 100%;
-
-				.item {
-					padding: 20rpx 35rpx;
-					border-left: 3px solid #FFFFFF;
-					line-height: 50rpx;
-					text-align: center;
-					font-size: 28rpx;
-					font-weight: 400;
-					color: #3F3F3F;
-					box-sizing: border-box;
-
-					&-on {
-						background-color: #FFFFFF;
-						border-left-color: #F34A40;
-					}
-				}
-			}
-
-			.b {
-				width: 600rpx;
-				height: 100%;
-				background-color: #FFFFFF;
-
-				.t {
-					display: flex;
-					align-items: center;
-					font-size: 28rpx;
-					font-weight: 400;
-					color: #3F3F3F;
-					line-height: 100rpx;
-
-					.item-on {
-						color: #F21A1C;
-					}
-
-					.item {
-						flex: 1;
-						text-align: center;
-
-						&-on {
-							color: #F34A40;
-						}
-					}
-				}
-
-				.l {
-					height: calc(100% - 120rpx);
-					box-sizing: border-box;
-					overflow: hidden;
-
-					.item {
-						width: 270rpx;
-						height: 389rpx;
-						background: #FFFFFF;
-						border-radius: 7rpx;
-						opacity: 1;
-						border: 1px solid #ECECEC;
-						padding: 10rpx 15rpx;
-						box-sizing: border-box;
-						float: left;
-						margin-left: 20rpx;
-						margin-bottom: 20rpx;
-
-						image {
-							width: 230rpx;
-							height: 230rpx;
-							display: block;
-							margin: 0 auto;
-						}
-
-						.title {
-							padding: 10rpx 0;
-							line-height: 40rpx;
-							font-size: 20rpx;
-							font-family: PingFang SC, PingFang SC;
-							font-weight: 400;
-							color: #1E1E1E;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-							overflow: hidden;
-
-							text {
-								background-color: #F34A40;
-								font-size: 20rpx;
-								padding: 0 10rpx;
-								height: 40rpx;
-								line-height: 40rpx;
-								text-align: center;
-								border-radius: 4rpx;
-								font-weight: 400;
-								color: #FFFFFF;
-								margin-right: 5rpx;
-								display: inline-block;
-							}
-						}
-
-						.price {
-							display: flex;
-							align-items: center;
-							white-space: nowrap;
-
-							.n {
-								display: flex;
-								align-items: baseline;
-								font-size: 11px;
-								font-weight: 500;
-								color: #F21A1C;
-
-								text {
-									font-size: 29rpx;
-								}
-							}
-
-							.o {
-								font-size: 12px;
-								color: #949494;
-								text-decoration: line-through;
-							}
-						}
-
-						.desc {
-							font-size: 10px;
-							font-weight: 400;
-							color: #949494;
-							white-space: nowrap;
-							margin-top: 10rpx;
-						}
-					}
-				}
-			}
-		}
-
-		&-share {
-			width: 548rpx;
-			height: 810rpx;
-			overflow: hidden;
-
-			.l {
-				width: 548rpx;
-				background: #FFFFFF;
-				margin: 0 auto;
-				overflow: hidden;
-				position: relative;
-
-				.a {
-					width: 490rpx;
-					height: 243rpx;
-					margin: 0 auto;
-					padding-top: 24rpx;
-
-					image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				.b {
-					padding: 20rpx 20rpx;
-					overflow: hidden;
-
-					.item {
-						width: 220rpx;
-						height: 369rpx;
-						background: #FFFFFF;
-						border-radius: 7rpx;
-						opacity: 1;
-						border: 1px solid #ECECEC;
-						padding: 10rpx 0;
-						box-sizing: border-box;
-						float: left;
-						margin-left: 20rpx;
-						margin-bottom: 10rpx;
-
-						image {
-							width: 180rpx;
-							height: 180rpx;
-							display: block;
-							margin: 0 auto;
-						}
-
-						.title {
-							padding: 10rpx 0;
-							line-height: 40rpx;
-							font-size: 20rpx;
-							font-family: PingFang SC, PingFang SC;
-							font-weight: 400;
-							color: #1E1E1E;
-							text-overflow: ellipsis;
-							white-space: nowrap;
-							overflow: hidden;
-
-							text {
-								background-color: #F34A40;
-								font-size: 20rpx;
-								padding: 0 10rpx;
-								height: 40rpx;
-								line-height: 40rpx;
-								text-align: center;
-								border-radius: 4rpx;
-								font-weight: 400;
-								color: #FFFFFF;
-								margin-right: 5rpx;
-								display: inline-block;
-							}
-						}
-
-						.price {
-							display: flex;
-							align-items: center;
-							white-space: nowrap;
-							padding: 0 5rpx;
-
-							.n {
-								display: flex;
-								align-items: baseline;
-								font-size: 11px;
-								font-weight: 500;
-								color: #F21A1C;
-
-								text {
-									font-size: 29rpx;
-								}
-							}
-
-							.o {
-								font-size: 12px;
-								color: #949494;
-								text-decoration: line-through;
-							}
-						}
-
-						.desc {
-							padding: 0 5rpx;
-							font-size: 10px;
-							font-weight: 400;
-							color: #949494;
-							white-space: nowrap;
-							margin-top: 10rpx;
-							overflow: hidden;
-						}
-					}
-
-				}
-
-				.c {
-					background-color: #F1F1F1;
-					height: 150rpx;
-					display: flex;
-					justify-content: flex-end;
-					align-items: center;
-
-					image {
-						width: 140rpx;
-						height: 122rpx;
-						margin-right: 30rpx;
-					}
-				}
-			}
-
-			.btn {
-				width: 640rpx;
-				line-height: 80rpx;
-				text-align: center;
-				background: #F34A40;
-				position: fixed;
-				left: 50%;
-				margin-left: -320rpx;
-				top: 50%;
-				z-index: 2;
-				border-radius: 8rpx;
-				font-size: 28rpx;
-				font-weight: 600;
-				color: #FFFFFF;
-				margin-top: 450rpx;
-			}
-		}
-	}
-</style>
-<style>
-	.goods .uni-scroll-view .uni-scroll-view {
-		overflow: auto !important;
-	}
+				this.category_id = this.categoryChildren[0].category_id
+				this.getBrandList(this.categoryChildren[0].category_id)
+			},
+			goodsDetail(orderId) {
+				uni.navigateTo({
+					url: '/pages/goods/detail?goodsId=' + orderId
+				})
+			},
+			openPage() {
+				uni.navigateTo({
+					url: "/pages/search/index"
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .u-empty {
+		padding: 100rpx 0;
+	}
+
+	.goods {
+		.slot-wrap {
+			width: 400rpx;
+			margin-left: 60rpx;
+		}
+
+		&-hd {
+			width: 100%;
+			height: 400rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		&-menu {
+			height: 180rpx;
+			white-space: nowrap;
+			margin-top: 30rpx;
+			padding: 0 20rpx;
+
+			.item {
+				width: 150rpx;
+				height: 180rpx;
+				background: #FFFFFF;
+				display: inline-block;
+				padding: 16rpx;
+				box-sizing: border-box;
+				border: 1px solid #FFFFFF;
+				text-align: center;
+				margin-left: 12rpx;
+				border-radius: 8rpx;
+
+				image {
+					width: 112rpx;
+					height: 112rpx;
+				}
+
+				.p {
+					white-space: nowrap;
+					overflow: hidden;
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #3F3F3F;
+				}
+
+				&-on {
+					border: 1px solid #F21A1C;
+				}
+			}
+		}
+
+		&-bd {
+			padding: 30rpx 0 0;
+			display: flex;
+			height: calc(100vh - 750rpx);
+			box-sizing: border-box;
+			overflow: hidden;
+
+			.a {
+				width: 150rpx;
+				height: 100%;
+
+				.item {
+					padding: 20rpx 35rpx;
+					border-left: 3px solid #FFFFFF;
+					line-height: 50rpx;
+					text-align: center;
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #3F3F3F;
+					box-sizing: border-box;
+
+					&-on {
+						background-color: #FFFFFF;
+						border-left-color: #F34A40;
+					}
+				}
+			}
+
+			.b {
+				width: 600rpx;
+				height: 100%;
+				background-color: #FFFFFF;
+
+				.t {
+					display: flex;
+					align-items: center;
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #3F3F3F;
+					line-height: 100rpx;
+
+					.item-on {
+						color: #F21A1C;
+					}
+
+					.item {
+						flex: 1;
+						text-align: center;
+
+						&-on {
+							color: #F34A40;
+						}
+					}
+				}
+
+				.l {
+					height: calc(100% - 120rpx);
+					box-sizing: border-box;
+					overflow: hidden;
+
+					.item {
+						width: 270rpx;
+						// height: 389rpx;
+						background: #FFFFFF;
+						border-radius: 7rpx;
+						opacity: 1;
+						border: 1px solid #ECECEC;
+						padding: 10rpx 15rpx;
+						box-sizing: border-box;
+						float: left;
+						margin-left: 20rpx;
+						margin-bottom: 20rpx;
+
+						image {
+							width: 230rpx;
+							height: 230rpx;
+							display: block;
+							margin: 0 auto;
+						}
+
+						.title {
+							padding: 10rpx 0;
+							line-height: 40rpx;
+							font-size: 20rpx;
+							font-family: PingFang SC, PingFang SC;
+							font-weight: 400;
+							color: #1E1E1E;
+
+							text {
+								background-color: #F34A40;
+								font-size: 20rpx;
+								padding: 0 10rpx;
+								height: 40rpx;
+								line-height: 40rpx;
+								text-align: center;
+								border-radius: 4rpx;
+								font-weight: 400;
+								color: #FFFFFF;
+								margin-right: 5rpx;
+								display: inline-block;
+							}
+						}
+
+						.price {
+							display: flex;
+							align-items: center;
+							white-space: nowrap;
+
+							.n {
+								display: flex;
+								align-items: baseline;
+								font-size: 11px;
+								font-weight: 500;
+								color: #F21A1C;
+
+								text {
+									font-size: 29rpx;
+								}
+							}
+
+							.o {
+								font-size: 12px;
+								color: #949494;
+								text-decoration: line-through;
+							}
+						}
+
+						.desc {
+							font-size: 10px;
+							font-weight: 400;
+							color: #949494;
+							white-space: nowrap;
+							margin-top: 10rpx;
+						}
+					}
+				}
+			}
+		}
+
+		&-share {
+			width: 548rpx;
+			height: 810rpx;
+			overflow: hidden;
+
+			.l {
+				width: 548rpx;
+				background: #FFFFFF;
+				margin: 0 auto;
+				overflow: hidden;
+				position: relative;
+
+				.a {
+					width: 490rpx;
+					height: 243rpx;
+					margin: 0 auto;
+					padding-top: 24rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				.b {
+					padding: 20rpx 20rpx;
+					overflow: hidden;
+
+					.item {
+						width: 220rpx;
+						height: 369rpx;
+						background: #FFFFFF;
+						border-radius: 7rpx;
+						opacity: 1;
+						border: 1px solid #ECECEC;
+						padding: 10rpx 0;
+						box-sizing: border-box;
+						float: left;
+						margin-left: 20rpx;
+						margin-bottom: 10rpx;
+
+						image {
+							width: 180rpx;
+							height: 180rpx;
+							display: block;
+							margin: 0 auto;
+						}
+
+						.title {
+							padding: 10rpx 0;
+							line-height: 40rpx;
+							font-size: 20rpx;
+							font-family: PingFang SC, PingFang SC;
+							font-weight: 400;
+							color: #1E1E1E;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+							overflow: hidden;
+
+							text {
+								background-color: #F34A40;
+								font-size: 20rpx;
+								padding: 0 10rpx;
+								height: 40rpx;
+								line-height: 40rpx;
+								text-align: center;
+								border-radius: 4rpx;
+								font-weight: 400;
+								color: #FFFFFF;
+								margin-right: 5rpx;
+								display: inline-block;
+							}
+						}
+
+						.price {
+							display: flex;
+							align-items: center;
+							white-space: nowrap;
+							padding: 0 5rpx;
+
+							.n {
+								display: flex;
+								align-items: baseline;
+								font-size: 11px;
+								font-weight: 500;
+								color: #F21A1C;
+
+								text {
+									font-size: 29rpx;
+								}
+							}
+
+							.o {
+								font-size: 12px;
+								color: #949494;
+								text-decoration: line-through;
+							}
+						}
+
+						.desc {
+							padding: 0 5rpx;
+							font-size: 10px;
+							font-weight: 400;
+							color: #949494;
+							white-space: nowrap;
+							margin-top: 10rpx;
+							overflow: hidden;
+						}
+					}
+
+				}
+
+				.c {
+					background-color: #F1F1F1;
+					height: 150rpx;
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+
+					image {
+						width: 140rpx;
+						height: 122rpx;
+						margin-right: 30rpx;
+					}
+				}
+			}
+
+			.btn {
+				width: 640rpx;
+				line-height: 80rpx;
+				text-align: center;
+				background: #F34A40;
+				position: fixed;
+				left: 50%;
+				margin-left: -320rpx;
+				top: 50%;
+				z-index: 2;
+				border-radius: 8rpx;
+				font-size: 28rpx;
+				font-weight: 600;
+				color: #FFFFFF;
+				margin-top: 450rpx;
+			}
+		}
+	}
+</style>
+<style>
+	.goods .uni-scroll-view .uni-scroll-view {
+		overflow: auto !important;
+	}
 </style>