feat: 首页好味热卖

.gitignore

@@ -18,6 +18,9 @@ dist/
 unpackage/
 .hbuilderx/
 
+
+package-lock.json
+
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
 

package-lock.json

@@ -1,57 +0,0 @@
-{
-  "name": "feiniao-youwei-uniapp",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "clipboard": "^2.0.11",
-        "dayjs": "^1.11.13",
-        "qqmap-wx-jssdk": "^1.0.0"
-      }
-    },
-    "node_modules/clipboard": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
-      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
-      "dependencies": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
-    "node_modules/dayjs": {
-      "version": "1.11.13",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
-      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
-    },
-    "node_modules/delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-    },
-    "node_modules/good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
-      "dependencies": {
-        "delegate": "^3.1.2"
-      }
-    },
-    "node_modules/qqmap-wx-jssdk": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/qqmap-wx-jssdk/-/qqmap-wx-jssdk-1.0.0.tgz",
-      "integrity": "sha512-wuaNetsA9/OKEQGgK1CNPsX6pppWpY10cQwQu1OHJplGMyMIMzK2bliMkNXjtry99qXYCsvDAWPqw2DI+/foJg=="
-    },
-    "node_modules/select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
-      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
-    },
-    "node_modules/tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-    }
-  }
-}

pages/tabBar/home/home.vue

@@ -24,7 +24,7 @@
 			</view>
 		</view>
 		<view class="type-wrap">
-			<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="5000"
+			<!-- <swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="5000"
 				:duration="duration">
 				<swiper-item>
 					<view class="swiper-item">
@@ -71,13 +71,173 @@
 						<van-button type="primary">按钮</van-button>
 					</view>
 				</swiper-item>
-			</swiper>
+			</swiper> -->
+			 <up-scroll-list indicatorColor="#fae6a4" indicatorActiveColor="#F3C11D" :indicatorWidth="30" :indicatorBarWidth="13">
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<view class="type-text">
+						全部
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
+					<view class="type-text">
+						龙眼
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<view class="type-text">
+						葡萄
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<view class="type-text">
+						水蜜桃
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
+					<view class="type-text">
+						龙眼
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<view class="type-text">
+						葡萄
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<view class="type-text">
+						葡萄1
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<view class="type-text">
+						水蜜桃2
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<view class="type-text">
+						葡萄
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<view class="type-text">
+						水蜜桃
+					</view>
+				</view>
+				<view class="item-type">
+					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
+					<view class="type-text">
+						龙眼
+					</view>
+				</view>
+			</up-scroll-list>
+		</view>
+		<!-- 好味热卖 -->
+		<view class="hot-wrap">
+			<view class="hot-content">
+				<view class="hot-title">
+					<view class="title-l">
+						好味<text class="title-color">热卖</text>
+					</view>
+					<view class="title-btn">
+						限时抢购中<up-icon size="10" name="arrow-right"></up-icon>
+					</view>
+				</view>
+				<view class="hot-list">
+					<up-scroll-list indicatorColor="#fae6a4" indicatorActiveColor="#F3C11D" :indicatorWidth="30" :indicatorBarWidth="13">
+						<view class="hot-panel">
+							<view class="hot-item">
+								<image class="hot-img" src="/static/home/hot-1.png" mode=""></image>
+								<view class="item-info">
+									<view class="info-text">
+										<!-- <up-text :lines="2" color="#000000" size="12" text="海南妃子笑新鲜顺丰发货海南妃子笑海南妃子笑"></up-text> -->
+										<view class="ellipsis-l2">
+											海南妃子笑新鲜顺丰发货海南妃子笑海南妃子笑
+										</view>
+									</view>
+									<view class="info-price">
+										<view class="price-text">
+											<text class="price-unit">￥</text>108
+										</view>
+										<view class="info-sold">
+											已售1251
+										</view>
+									</view>
+								</view>
+							</view>
+							<view class="hot-item">
+								<image class="hot-img" src="/static/home/hot-2.png" mode=""></image>
+								<view class="item-info">
+									<view class="info-text">
+										<view class="ellipsis-l2">
+											海南妃子笑新鲜顺丰发货海南妃子笑海南妃子笑
+										</view>
+									</view>
+									<view class="info-price">
+										<view class="price-text">
+											<text class="price-unit">￥</text>108
+										</view>
+										<view class="info-sold">
+											已售1251
+										</view>
+									</view>
+								</view>
+							</view>
+							<view class="hot-item">
+								<image class="hot-img" src="/static/home/hot-1.png" mode=""></image>
+								<view class="item-info">
+									<view class="info-text">
+										<view class="ellipsis-l2">
+											海南妃子笑新鲜顺丰发货海南妃子笑海南妃子笑新鲜顺丰发货
+										</view>
+									</view>
+									<view class="info-price">
+										<view class="price-text">
+											<text class="price-unit">￥</text>108
+										</view>
+										<view class="info-sold">
+											已售1251
+										</view>
+									</view>
+								</view>
+							</view>
+							<view class="hot-item">
+								<image class="hot-img" src="/static/home/hot-2.png" mode=""></image>
+								<view class="item-info">
+									<view class="info-text">
+										<view class="ellipsis-l2">
+											海南妃子笑新鲜顺丰发货海南妃子笑海南妃子笑新鲜顺丰发货
+										</view>
+									</view>
+									<view class="info-price">
+										<view class="price-text">
+											<text class="price-unit">￥</text>108
+										</view>
+										<view class="info-sold">
+											已售1251
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</up-scroll-list>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import QQMapWX from 'qqmap-wx-jssdk'
 
 
@@ -274,6 +434,11 @@ onMounted(() => {
   // #endif
 })
 
+const typeList = reactive([  
+    'https://cdn.uviewui.com/uview/swiper/swiper3.png',  
+    'https://cdn.uviewui.com/uview/swiper/swiper2.png',  
+    'https://cdn.uviewui.com/uview/swiper/swiper1.png',  
+]);  
 </script>
 
 <style lang="scss" scoped>
@@ -315,7 +480,7 @@ onMounted(() => {
 		}
 		.type-wrap {
 			margin: 20rpx;
-			padding: 20rpx 20rpx 10rpx 20rpx;
+			padding: 20rpx;
 			background-color: #fff;
 			border-radius: 16rpx;
 			height: 200rpx;
@@ -323,33 +488,104 @@ onMounted(() => {
 			.swiper-item {
 				display: flex;
 				align-items: center;
-				.item-type {
-					text-align: center;
-					font-size: 24rpx;
-					.type-img {
-						width: 92rpx;
-						height: 92rpx;
-					}
-				}
-				.item-type + .item-type {
-					padding-left: 22rpx;
-				}
+			}
+			
+			.swiper {
+				height: 170rpx;
 			}
 			::v-deep {
-				.uni-swiper-dot {
-					width: 12rpx;
-					height: 6rpx;
-					border-radius: 24rpx;
-					margin-right: 4rpx;
-					
+				.u-scroll-list__indicator {
+					margin-top: 20rpx;
 				}
-				.uni-swiper-dot.uni-swiper-dot-active {
-					background-color: #F3C11D;
-					width: 26rpx;
+			}
+			
+			.item-type {
+				text-align: center;
+				font-size: 24rpx;
+				.type-img {
+					width: 92rpx;
+					height: 92rpx;
 				}
 			}
-			.swiper {
-				height: 170rpx;
+			.item-type + .item-type {
+				padding-left: 22rpx;
+			}
+		}
+		
+		.hot-wrap {
+			margin: 0 20rpx 20rpx;
+			background: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0));
+			padding: 2rpx;
+			border-radius: 16rpx;
+			.hot-content {
+				background: linear-gradient(#fff1c3 4%,  #FFFFFF 28%);
+				border-radius: 16rpx;
+				padding: 20rpx;
+				height: 236rpx;
+				.hot-title {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding-bottom: 20rpx;
+					.title-l {
+						font-family: 'PangMenZhengDao';
+						font-size: 32rpx;
+						.title-color {
+							color: #F3C11D ;
+						}
+					}
+					.title-btn {
+						color: rgba(0, 0, 0, 0.6);
+						font-size: 24rpx;
+						display: inline-flex;
+						align-items: center;
+					}
+				}
+				.hot-list {
+					.hot-panel {
+						width: 100%;
+						display: flex;
+						.hot-item {
+							width: calc(50% - 10rpx);
+							display: flex;
+							white-space: nowrap;
+							.hot-img {
+								flex: none;
+								width: 116rpx;
+								height: 116rpx;
+								object-fit: cover;
+								border-radius: 10rpx;
+							}
+							.item-info {
+								padding-left: 10rpx;
+								width: 200rpx;
+								.info-text {
+									color: #000000;
+									font-size: 24rpx;
+								}
+								.info-price {
+									display: flex;
+									align-items: baseline;
+									justify-content: space-between;
+									.price-text {
+										color: #FF7700;
+										font-size: 36rpx;
+										.price-unit {
+											font-size: 23rpx;
+										}
+									}
+									.info-sold {
+										font-size: 20rpx;
+										color: #C4C4C4;
+									}
+								}
+							}
+						}
+						.hot-item + .hot-item {
+							margin-left: 20rpx;
+						}
+					}
+				}
 			}
 		}
 	}