热门榜单商品列表

pages/shop/HotNewGoods/index.vue

@@ -52,8 +52,34 @@
 			</view>
 			
 			<view class="list-box">
-				<view class="item">
+				<view class="top-box">
-					
+					<view class="top-item acea-row" v-for="(item,index) in goodsList" :key="index" @tap="goGoodsCon(item)">
+					<!-- <view class="top-item acea-row" v-for="(item,index) in topList" :key="index" @tap="goGoodsCon(item)"> -->
+						<view class="top-num-box">
+							<view class="">{{index+1}}</view>
+							<view class="tip">{{index===0?'ST':index===1?'ND':index===2?'RD':'TH'}}</view>
+						</view>
+						<image class="img" :src="item.image" mode="aspectFill"></image>
+						<view class="info-box">
+							<view class="title more-t">{{item.storeName}}</view>
+							<view class="price-box" v-if="item.isIntegral === 1">{{ item.integral }}积分</view>
+							<view class="price-box" v-else>¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
+							<view class="original">{{ item.sales }}+人购买</view>
+						</view>
+					</view>
+				</view>
+				<view class="goods-list acea-row row-between" v-if="goodsList.length">
+					<view class="goods-item" v-for="(item, promotionGoodIndex) in goodsList"
+						:key="promotionGoodIndex" @tap="goGoodsCon(item)">
+						<view class="img-box">
+							<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
+						</view>
+						<view class="name more-t">{{ item.storeName }}</view>
+						<view class="price-box">
+							<view class="current" v-if="item.isIntegral === 1">{{ item.integral }}积分</view>
+							<view class="current" v-else>¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
+						</view>
+					</view>
 				</view>
 			</view>
 			
@@ -71,13 +97,13 @@
   </view>
 </template>
 <script>
-import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
+// import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
 import GoodList from "@/components/GoodList";
 import { getBanner, getHotList, getGroomList } from "@/api/store";
 export default {
   name: "HotNewGoods",
   components: {
-		UniNoticeBar,
+		// UniNoticeBar,
     GoodList
   },
   props: {},
@@ -85,7 +111,7 @@ export default {
     return {
 			banner: [],
 			classifyType: 0,
-      imgUrls: [],
+			topList: [],
       goodsList: [],
       name: "",
       icon: "",
@@ -123,7 +149,7 @@ export default {
 			this.swiperCurrent = e.detail.current;
 		},
 		getHotList() {
-			let mouth = '2022-10'
+			let mouth = '2022-9'
 			getHotList(mouth),then(res => {
 				
 			})
@@ -132,6 +158,23 @@ export default {
 			if(this.classifyType == i) return
 			this.classifyType = i;
 		},
+		goGoodsCon(item) {
+			if(item.isIntegral === 1) {
+				this.$yrouter.push({
+				  path: '/pages/shop/IntegralGoodsCon/index',
+				  query: {
+				    id: item.id,
+				  },
+				})
+			} else {
+				this.$yrouter.push({
+					path: '/pages/shop/GoodsCon/index',
+					query: {
+						id: item.id,
+					},
+				})
+			}
+		},
 		
     titleInfo: function() {
       let type = this.$yroute.query.type;
@@ -154,7 +197,7 @@ export default {
       let type = this.$yroute.query.type;
       getGroomList(type)
         .then(res => {
-          that.imgUrls = res.data.banner;
+          // that.banner = res.data.banner;
           that.goodsList = res.data.list;
         })
         .catch((err)=> {
@@ -311,8 +354,139 @@ export default {
 	.list-box {
 		height: calc(100% - 196rpx);
 		overflow-y: scroll;
-		.item {
+		.top-box {
+			padding: 0rpx 32rpx 12rpx;
+		
+			.top-item {
+				width: 686rpx;
+				height: 174rpx;
+				background: #F5F6F8;
+				box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
+				border-radius: 16rpx;
+				margin-bottom: 20rpx;
+		
+				.top-num-box {
+					width: 146rpx;
+					height: 174rpx;
+					padding: 24rpx 0rpx 24rpx 12rpx;
+					font-size: 80rpx;
+					font-family: Futura;
+					font-weight: 700;
+					color: #2DB5AE;
+					line-height: 106rpx;
+					text-align: center;
+		
+					.tip {
+						font-size: 32rpx;
+						line-height: 42rpx;
+						position: relative;
+						top: -22rpx;
+					}
+				}
+		
+				.img {
+					width: 168rpx;
+					height: 162rpx;
+					border-radius: 8rpx;
+					margin: 6rpx 0rpx;
+				}
+		
+				.info-box {
+					width: 370rpx;
+					height: 174rpx;
+					padding: 16rpx 18rpx 16rpx 10rpx;
+		
+					.title {
+						height: 76rpx;
+						font-size: 26rpx;
+						font-weight: 500;
+						color: #3A3A3C;
+						line-height: 38rpx;
+					}
+		
+					.price-box {
+						font-size: 30rpx;
+						font-family: Futura;
+						font-weight: 600;
+						color: #3A3A3C;
+						line-height: 40rpx;
+		
+						text {
+							font-size: 20rpx;
+							font-weight: 500;
+							color: #999999;
+							line-height: 26rpx;
+							text-decoration: line-through;
+							padding-left: 10rpx;
+						}
+					}
 		
+					.original {
+						font-size: 20rpx;
+						color: #999999;
+						line-height: 26rpx;
+					}
+				}
+			}
+		}
+	}
+	
+	.list-box .goods-list {
+		padding: 0rpx 32rpx 8rpx;
+	
+		.goods-item {
+			width: 332rpx;
+			background: #F5F6F8;
+			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
+			border-radius: 16rpx;
+			margin-bottom: 20rpx;
+	
+			.img-box {
+				width: 332rpx;
+				height: 316rpx;
+				border-radius: 16rpx 16rpx 0rpx 0rpx;
+				overflow: hidden;
+	
+				.img {
+					width: 100%;
+					height: 100%;
+					background-color: #fff;
+				}
+			}
+	
+			.name {
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #3A3A3C;
+				line-height: 38rpx;
+				height: 76rpx;
+				margin: 10rpx 16rpx;
+			}
+	
+			.price-box {
+				padding: 0rpx 16rpx 26rpx;
+				width: 100%;
+				box-sizing: border-box;
+				text-align: center;
+	
+				.current {
+					font-size: 30rpx;
+					font-family: Futura;
+					font-weight: 600;
+					color: #3A3A3C;
+					line-height: 40rpx;
+	
+					text {
+						padding-left: 10rpx;
+						font-size: 20rpx;
+						color: #999999;
+						line-height: 26rpx;
+						font-weight: 500;
+						text-decoration: line-through;
+					}
+				}
+			}
 		}
 	}