index

pages/index/index.vue

@@ -67,10 +67,65 @@
 					</view>
 					<image src="../../static/icon/fanhui.png" class="go" mode=""></image>
 				</view>
+				<view class="commodity flex">
+					<view class="commodity-item" v-for="(item, index) in goodsList" :key="item.id">
+						<image class="commodity-image" :src="item.image" mode=""></image>
+						<view class="commodity-title clamp">{{ item.store_name }}</view>
+						<view class="price">￥{{ item.price }}</view>
+						<view class="vip-price">
+							<image src="../../static/icon/jf.png" mode=""></image>
+							<text>{{ item.vip_price }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 消费券专区 -->
+		<view class="main-box">
+			<view class="main-top">
+				<image src="../../static/icon/xfzq.png" mode="" class="main-icon"></image>
+				<view class="main-title">消费券专区</view>
+				<view class="main-synopsis">买多赚多</view>
+			</view>
+			<view class="main-content ">
+				<view class="content-top flex xfq">
+					<view class="content-font">
+						<view class="content-title">精选好货 平台推荐</view>
+						<view class="content-synopsis">消费券兑换</view>
+					</view>
+					<image src="../../static/icon/fanhui.png" class="go" mode=""></image>
+				</view>
+				<view class="commodity flex">
+					<view class="commodity-item" v-for="(item, index) in goodsList" :key="item.id">
+						<image class="commodity-image" :src="item.image" mode=""></image>
+						<view class="commodity-title clamp">{{ item.store_name }}</view>
+						<view class="price">￥{{ item.price }}</view>
+						<view class="vip-price">
+							<image src="../../static/icon/xfq.png" mode=""></image>
+							<text>{{ item.vip_price }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 精选好货 -->
+		<view class="bastgood-box">
+			<view class="bast-bg">
+				<image src="../../static/icon/jxhh.png" mode=""></image>
 			</view>
-			<view class="commodity flex">
-				<view class="commodity-item" v-for="(item,index) in goodsList" :key='item.id'>
-					
+			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
+				<image :src="item.image"></image>
+				<view class="guess-box">
+					<view class="title clamp2">
+						{{ item.store_name }}
+					</view>
+					<view class="price-box flex">
+						<view class="yuanprice">{{ item.price }}</view>
+						<image src="../../static/icon/down.png" mode=""></image>
+						<view class="jiang">直降{{ (item.vip_price - item.price).toFixed(2) }}元</view>
+					</view>
+					<view class="price">￥{{ item.vip_price }}</view>
+					<view class="btn">立即购买</view>
 				</view>
 			</view>
 		</view>
@@ -184,7 +239,7 @@ export default {
 				this.swiperLength = this.carouselList.length;
 				this.menusList = data.menus;
 				this.goodsList = goods.firstList; //最新商品
-				console.log(this.goodsList,'123456')
+				console.log(this.goodsList, '123456');
 				this.bastList = goods.bastList; //精品推荐
 				this.bastBanner = goods.bastBanner; //促销单品
 				this.userServant = goods.platoonList; //服务商品
@@ -434,6 +489,10 @@ page {
 		background: #f4f4f4;
 		border-radius: 12rpx;
 		margin: 20rpx auto 0;
+		padding-bottom: 10rpx;
+		.xfq {
+			background: linear-gradient(43deg, #ffc063, #ffa163) !important; 
+		}
 		.content-top {
 			width: 690rpx;
 			background: linear-gradient(43deg, #73deb2, #52c696);
@@ -465,5 +524,141 @@ page {
 			}
 		}
 	}
+	.commodity {
+		width: 670rpx;
+		background: #ffffff;
+		border-radius: 8rpx;
+		padding: 2rpx;
+		margin: -50rpx auto 0;
+		flex-wrap: wrap;
+		.commodity-item {
+			width: 33%;
+			padding: 14rpx 30rpx 22rpx;
+			.commodity-image {
+				width: 160rpx;
+				height: 160rpx;
+			}
+			.commodity-title {
+				margin-top: 14rpx;
+				width: 162rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #3f3f3f;
+			}
+			.price {
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				text-decoration: line-through;
+				color: #999999;
+			}
+			.vip-price {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #ff6f0f;
+				image {
+					position: relative;
+					z-index: 10;
+					width: 26rpx;
+					height: 26rpx;
+				}
+				text {
+					display: inline-block;
+					margin-left: 6rpx;
+				}
+			}
+		}
+	}
+}
+.bastgood-box {
+	margin-top: 20rpx;
+	background-color: #FFFFFF;
+	padding-top: 40rpx;
+	.bast-bg {
+		width: 376rpx;
+		height: 34rpx;
+		margin: 0 auto;
+		image{
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.guess-item {
+		display: flex;
+		width: 710rpx;
+		height: 290rpx;
+		background: #ffffff;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+		padding: 15rpx;
+		padding-bottom: 150rpx;
+		margin: 20rpx auto 0;
+		position: relative;
+		image {
+			width: 260rpx;
+			height: 260rpx;
+			border-radius: 10rpx;
+		}
+		.guess-box {
+			padding: 12rpx 0 0 24rpx;
+			width: 436rpx;
+			.title {
+				font-size: 32rpx;
+				padding-left: 4rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+				width: 368rpx;
+				line-height: 36rpx;
+			}
+			.price-box {
+				margin-top: 76rpx;
+				justify-content: flex-start;
+				.yuanprice {
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					text-decoration: line-through;
+					color: #999999;
+					padding-right: 6rpx;
+				}
+				image {
+					width: 16rpx;
+					height: 18rpx;
+				}
+				.jiang {
+					padding-left: 2rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #b59467;
+				}
+			}
+			.price {
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #ff1135;
+			}
+			.btn {
+				width: 138rpx;
+				height: 52rpx;
+				background: #52C696;
+				border-radius: 26rpx;
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				line-height: 52rpx;
+				text-align: center;
+				position: absolute;
+				bottom: 25rpx;
+				right: 25rpx;
+			}
+		}
+	}
 }
+
 </style>