22

components/uni-countdown/uni-countdown.vue

@@ -112,7 +112,8 @@
 				this.i = minute
 				this.s = second
 			},
-			startData() {
+			startData() {
+				console.log(this.day, this.hour, this.minute, this.second,'this.day, this.hour, this.minute, this.second')
 				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
 				if (this.seconds <= 0) {
 					return

pages/category/mall.vue

@@ -3,7 +3,7 @@
 		<!-- 顶部logo and 搜索 start-->
 		<view class="top-search flex">
 			<view class="top-logo">
-				<image src="../../static/icon/sh-log.png" mode=""></image>
+				<image src="../../static/icon/logo.png" mode="widthFix"></image>
 			</view>
 			<view class="search-box flex" @click="clickSearch()">
 				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
@@ -162,12 +162,12 @@
 		background-color: #fff;
 		.top-logo {
 			width: 50rpx;
-			height: 50rpx;
+			// height: 50rpx;
 			margin-right: 10rpx;
 
 			image {
 				width: 50rpx;
-				height: 50rpx;
+				// height: 50rpx;
 			}
 
 		}

pages/index/index.vue

@@ -3,7 +3,7 @@
 		<!-- 顶部logo and 搜索 start-->
 		<view class="top-search flex">
 			<view class="top-logo">
-				<image src="../../static/icon/sh-log.png" mode=""></image>
+				<image src="../../static/icon/logo.png" mode="widthFix"></image>
 			</view>
 			<view class="search-box flex" @click="clickSearch()">
 				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
@@ -34,8 +34,78 @@
 				<view class="">超值正品优惠</view>
 			</view>
 		</view>
-		<!-- 商品列表 -->
-		
+		<!-- 预约 start-->
+		<view class="yuyue-wrap">
+			<view class="yuyue-top flex">
+				<image src="../../static/img/yuyue-top.png" mode="heightFix"></image>
+			</view>
+			<view class="yuyue-item"  v-for="item in 3">
+				<view class="item-top">
+					<image src="../../static/img/yuyue.png" mode=""></image>
+					<view class="item-top-info flex">
+						<view class="">
+							早上场<text>/大家都在买</text>
+						</view>
+						<view class="goto">
+							GO>
+						</view>
+					</view>
+				</view>
+				<view class="item-info flex">
+					<view class="item-img">
+						<image src="../../static/img/zaoshang.png" mode=""></image>
+					</view>
+					<view class="item-val flex">
+						<view class="item-status">
+							距离本场开始
+						</view>
+						<view class="item-djs">
+							<uni-countdown
+								color="#C6914E"
+								background-color="#F6EFDF"
+								:show-day="false"
+								:day="0"
+								:hour="10"
+								:minute="10"
+								:second="10"
+							></uni-countdown>
+						</view>
+						<view class="item-base">
+							开始时间 16:00:00 结束时间 16:30:00
+						</view>
+						<view class="item-btn" @click="yuyue()">
+							已预约
+						</view>
+					</view>
+					
+				</view>
+			</view>
+		</view>
+		<!-- 预约 end-->
+		<!-- 预约弹窗 start-->
+		<uni-popup ref="popupyy" type="bottom">
+			<view class="popupyy-wrap">
+				<view class="popupyy-top">
+					预约活动
+				</view>
+				<view class="popupyy-tit">
+					本次预约冻结广告值
+				</view>
+				<view class="popupyy-val">
+					330
+				</view>
+				<view class="" style="margin-top: 50rpx;">
+					消费积分不低于100
+				</view>
+				<view class="" style="color: #FF4C4C;margin-top: 15rpx;">
+					可用广告值700
+				</view>
+				<view class="popupyy-btn" @click="yuyueOk()">
+					确认预约
+				</view>
+			</view>
+		</uni-popup>
+		<!-- 预约弹窗 end-->
 	</view>
 </template>
 
@@ -46,10 +116,10 @@
 	import {
 		loadIndexs
 	} from '@/api/index.js';
-	import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
+	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
 	export default {
 		components: {
-			uniCountdowns
+			uniCountdown
 		},
 		data() {
 			return {
@@ -119,6 +189,14 @@
 				uni.navigateTo({
 					url: '/pages/product/product?id=' + id
 				});
+			},
+			// 打开预约弹窗
+			yuyue() {
+				this.$refs.popupyy.open()
+			},
+			// 确定预约
+			yuyueOk() {
+				this.$refs.popupyy.close()
 			}
 		}
 	};
@@ -138,12 +216,11 @@
 		background-color: #fff;
 		.top-logo {
 			width: 50rpx;
-			height: 50rpx;
+			// height: 50rpx;
 			margin-right: 10rpx;
 
 			image {
-				width: 50rpx;
-				height: 50rpx;
+				width: 48rpx;
 			}
 
 		}
@@ -202,4 +279,179 @@
 		height: 20rpx;
 		background-color: #fff;
 	}
+	.yuyue-wrap {
+		background-color: #fff;
+		.yuyue-top {
+			height: 117rpx;
+			justify-content: center;
+			image {
+				display: inline-block;
+				height: 31rpx;
+				margin: auto;
+			}
+		}
+		.yuyue-item {
+			width: 690rpx;
+			margin: auto;
+			
+			.item-top {
+				width: 690rpx;
+				height: 80rpx;
+				border-radius: 18rpx;
+				// background-color: #bfa;
+				position: relative;
+				image {
+					width: 690rpx;
+					height: 80rpx;
+					// position: relative;
+				}
+				.item-top-info {
+					width: 690rpx;
+					height: 80rpx;
+					position: absolute;
+					top: 0;
+					left: 0;
+					font-size: 33rpx;
+					font-weight: bold;
+					color: #C6914E;
+					padding-left: 35rpx;
+					padding-right: 25rpx;
+					text {
+						font-size: 22rpx;
+						font-weight: 500;
+						color: #C6914E;
+					}
+					.goto {
+						width: 60rpx;
+						line-height: 26rpx;
+						background: #C6914E;
+						border-radius: 12rpx;
+						font-size: 18rpx;
+						font-weight: 500;
+						color: #FFFFFF;
+						text-align: center;
+					}
+				}
+			}
+			.item-info {
+				width: 690rpx;
+				height: 252rpx;
+				margin-top: -20rpx;
+				background: #FFFFFF;
+				box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+				border-radius: 0px 0px 20rpx 20rpx;
+				padding: 0 25rpx;
+				margin-bottom: 20rpx;
+				.item-img {
+					width: 134rpx;
+					height: 133rpx;
+					background-color: red;
+					flex-shrink: 0;
+					image {
+						width: 134rpx;
+						height: 133rpx;
+					}
+				}
+				.item-val {
+					flex-grow: 1;
+					height: 100%;
+					// background-color: #009688;
+					position: relative;
+					flex-direction: column;
+					align-items: flex-start;
+					padding-left: 25rpx;
+					justify-content: center;
+					.item-djs {
+						margin: 20rpx 0;
+						height: 42rpx;
+					}
+					.item-status {
+						font-size: 26rpx;
+						font-weight: bold;
+						color: #333333;
+					}
+					.item-base {
+						font-size: 25rpx;
+						font-weight: 500;
+						color: #666666;
+					}
+					.item-btn {
+						width: 159rpx;
+						height: 59rpx;
+						line-height: 59rpx;
+						background: #CCCCCC;
+						border-radius: 10rpx;
+						position: absolute;
+						right: 0;
+						top: 0;
+						bottom: 0;
+						margin: auto;
+						text-align: center;
+					}
+				}
+				
+			}
+		}
+	}
+	.popupyy-wrap {
+		width: 750rpx;
+		height: 745rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 0px 0px;
+		text-align: center;
+		font-size: 32rpx;
+		color: #999999;
+		font-weight: 500;
+		padding-top: 60rpx;
+		.popupyy-top {
+			font-size: 36rpx;
+			font-weight: 500;
+			color: #333333;
+			position: relative;
+			&::before {
+				content: '';
+				width: 138rpx;
+				height: 1rpx;
+				background: #CBCBCB;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 124rpx;
+				margin: auto;
+			}
+			&::after {
+				content: '';
+				width: 138rpx;
+				height: 1rpx;
+				background: #CBCBCB;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				right: 124rpx;
+				margin: auto;
+			}
+		}
+		.popupyy-tit {
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #999999;
+			margin-top: 70rpx;
+		}
+		.popupyy-val {
+			font-size: 67rpx;
+			font-weight: bold;
+			color: #333333;
+			margin-top: 60rpx;
+		}
+		.popupyy-btn {
+			width: 680rpx;
+			line-height: 100rpx;
+			background: #303030;
+			border-radius: 10rpx;
+			font-size: 34rpx;
+			font-weight: 500;
+			color: #F8DABA;
+			margin: 20rpx auto 0;
+		}
+	}
 </style>