updata

components/uni-countdown/uni-countdown.vue

@@ -1,12 +1,16 @@
 <template>
 	<view class="uni-countdown">
-		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
+		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ d }}</text>
 		<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ h }}</text>
 		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ i }}</text>
 		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ s }}</text>
 		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
 	</view>
 </template>
@@ -184,5 +188,6 @@
 		margin: 5rpx;
 		text-align: center;
 		font-size: $uni-font-size-sm;
+		border-radius: 10rpx;
 	}
-</style>
+</style>

pages.json

@@ -633,6 +633,13 @@
 
 			}
 		},
+		{
+			"path": "pages/shoping/shopService",
+			"style": {
+				"navigationBarTitleText": "店铺"
+
+			}
+		},
 		{
 			"path": "pages/contract/agreement",
 			"style": {
@@ -794,4 +801,4 @@
 			}
 		]
 	}
-}
+}

pages/index/seckill.vue

@@ -1,246 +0,0 @@
-<template>
-	<view class="seckill-section m-t" v-if="show">
-		<view class="s-header">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">限时秒杀</text></view>
-			<view class="tip-box">
-				<text class="tip" v-if="status == 1">{{ showTime }}点场结束</text>
-				<text class="tip" v-if="status == 2">距离下场开始</text>
-				<text class="tip" v-if="status == 0">当天活动已结束</text>
-				<uni-countdown v-if="status == 1 || status == 2" :show-day="false" :hour="stopTimeH" :minute="stopTimeM" :second="stopTimeS"></uni-countdown>
-			</view>
-			<view class="textNav iconfont iconenter" @click="navTo('/pages/seckill/seckill')">更多</view>
-		</view>
-		<scroll-view class="floor-list" scroll-x>
-			<view class="scoll-wrapper position-relative" @click="navTo('/pages/seckill/seckill')">
-				<view v-for="(item, index) in list" :key="index" class="floor-item">
-					<image class="list-img" :src="item.image" mode="aspectFill"></image>
-					<text class="title clamp">{{ item.title }}</text>
-					<text class="price">￥{{ item.price }}</text>
-				</view>
-				<view v-if="list.length == 0" class="floor-item ">
-					<image class="list-img" mode="aspectFill"></image>
-					<text class="title clamp"></text>
-					<text class="price"></text>
-				</view>
-				<view v-if="list.length == 0" class="noGoodsBg"><view>敬请期待</view></view>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-
-<script>
-import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
-import { getList, getClass } from '@/api/seckill.js';
-import { timeComputed } from '@/utils/rocessor.js';
-export default {
-	components: {
-		uniCountdown
-	},
-	data() {
-		return {
-			list: [],
-			page: 1,
-			limit: 10,
-			showTime: '', //显示的时间
-			showTImeId: '', //显示时间id用于查询数据
-			stopTimeH: 0,
-			stopTimeM: 0,
-			stopTimeS: 0,
-			// 判断是否所有活动已经结束
-			stop: false, //活动是否已经结束
-			show: false, //是否显示活动
-			status: 0 //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
-		};
-	},
-	created: function(e) {
-		// 载入分类
-		this.getClass();
-	},
-	methods: {
-		navTo(url) {
-			uni.navigateTo({
-				url
-			});
-		},
-		getList() {
-			getList(
-				{
-					page: this.page,
-					limit: this.limit
-				},
-				this.showTImeId
-			)
-				.then(e => {
-					this.list = e.data;
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		},
-		getClass() {
-			let obj = this;
-			getClass({})
-				.then(({ data }) => {
-					let arr = data.seckillTime;
-					// 用于判断是否有数据
-					let showDate = false;
-					for (var i = 0; i < arr.length; i++) {
-						let ar = arr[i];
-						if (ar.status === 1 || ar.status === 2) {
-							obj.status = ar.status;
-							// 保存要显示的场次时间
-							obj.showTime = ar.time;
-							// 保存要显示活动商品的id
-							obj.showTImeId = ar.id;
-							// 保存当前状态值
-							// 计算倒计时时间
-							if (ar.status === 1) {
-								obj.timeComputed(ar.stop * 1000);
-							} else {
-								// 获取需要开始
-								let arTime = ar.time.split(':');
-								let h = arTime[0];
-								let m = arTime[1];
-								let time = new Date();
-								// 设置时间
-								time.setHours(h, m, 0);
-								obj.timeComputed(time.getTime());
-							}
-							// 获取商品列表
-							obj.getList();
-							// 保存当前有活动在举行
-							showDate = true;
-							// 任务查询结束跳出循环
-							break;
-						}
-					}
-					// 判断是否有活动
-					if (arr.length > 0) {
-						obj.show = true;
-					}
-					// 判断今天活动是否已经全部结束
-					if (!showDate) {
-						// 保存活动结束最后一个小时的活动商品
-						obj.showTImeId = arr[arr.length - 1].id;
-						// 活动已经结束
-						obj.status = 0;
-						// 获取结束时的商品
-						obj.getList();
-						console.log(obj.status);
-					}
-					// 如果所有场次均已经结束
-				})
-				.catch(e => {
-					uni.showModal({
-						title: JSON.stringify(e)
-					});
-				});
-		},
-		// 计算倒计时时间
-		timeComputed(da) {
-			let obj = this;
-			let stopTime = timeComputed(da)
-			obj.stopTimeH =stopTime.hours;
-			obj.stopTimeM = stopTime.minutes;
-			obj.stopTimeS =stopTime.seconds;
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-/* 秒杀专区 */
-.seckill-section {
-	padding: 4rpx 30rpx 24rpx;
-	.s-header {
-		display: flex;
-		align-items: center;
-		height: 92rpx;
-		line-height: 1;
-		.tit-box {
-			flex-shrink: 0;
-		}
-		.tit {
-			@extend %font-title;
-		}
-		.f-left-icon {
-			@extend %f-left-icon;
-		}
-		.textNav {
-			line-height: 1;
-			padding: 15rpx 0;
-			flex-shrink: 0;
-			flex-grow: 1;
-			min-width: 100rpx;
-		}
-		.tip-box {
-			flex-grow: 1;
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-		}
-		.tip {
-			font-size: $font-sm;
-			color: $font-color-light;
-			padding-left: 10rpx;
-			padding-right: 10rpx;
-		}
-		.timer {
-			display: inline-block;
-			width: 40rpx;
-			height: 36rpx;
-			text-align: center;
-			line-height: 36rpx;
-			margin-right: 14rpx;
-			font-size: $font-sm + 2rpx;
-			color: #fff;
-			border-radius: 2px;
-			background: rgba(0, 0, 0, 0.8);
-		}
-		.iconenter {
-			font-size: $font-sm;
-			color: $font-color-light;
-			flex: 1;
-			text-align: right;
-		}
-	}
-	.floor-list {
-		white-space: nowrap;
-		background-color: white;
-		padding: 20rpx;
-		border-radius: 5rpx;
-		box-shadow: $box-shadow;
-	}
-	.scoll-wrapper {
-		display: flex;
-		align-items: flex-start;
-		.noGoodsBg {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			color: $font-color-light;
-		}
-		.floor-item {
-			width: 150rpx;
-			margin-right: 20rpx;
-			font-size: $font-sm + 2rpx;
-			color: $font-color-dark;
-			line-height: 1.8;
-			.list-img {
-				width: 150rpx;
-				height: 150rpx;
-				border-radius: 6rpx;
-			}
-			.price {
-				color: $color-red;
-			}
-		}
-	}
-}
-</style>

pages/shoping/shopService.vue

@@ -0,0 +1,241 @@
+<template>
+	<view class="content">
+		<view class="top-search flex">
+			<view class="search-box flex">
+				<image class="search-icon" src="../../static/icon/sousuo.png" mode=""></image>
+				<view class="search-font"><input type="text" placeholder="输入关键词搜索" v-model="productname" /></view>
+			</view>
+			<view class="search" @click="clickSearch()">
+				搜索
+			</view>
+		</view>
+		<view class="shoplist">
+			<view class="shoplist-item flex" v-for="(item,index) in 10">
+				<image class="shoplist-image" src="../../static/icon/hym.png" mode=""></image>
+				<view class="shoplist-info">
+					<view class="info-top">
+						<view class="info-title">
+							满园春养发馆(1号店）
+						</view>
+						<view class="info-address">
+							<image class="address-icon" src="../../static/icon/dw.png" mode=""></image>
+							<view class="address-font">距离0.3KM</view>
+						</view>
+					</view>
+					<view class="info-tip">椒江区市府大道200号</view>
+					<view class="info-bottom">
+						<view class="info-bleft flex">
+							<view class="infobf-item">免费茶点</view>
+							<view class="infobf-item">不接受退款</view>
+						</view>
+						<view class="info-bright flex">
+							<image class="info-icon" src="../../static/icon/call.png" mode=""></image>
+							<image class="info-icon" src="../../static/icon/dh.png" mode=""></image>
+						</view>
+					</view>
+					<view class="bc">
+						<text class="h">惠</text>
+						<text class="dw">￥</text>
+						<text class="xian">25</text>
+						<text class="yuan">￥99</text>
+						<text> 头皮护理|深层清洁</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {};
+		},
+		onLoad() {},
+		onShow() {},
+		onReachBottom() {},
+		onReady() {},
+		methods: {}
+	};
+</script>
+
+<style lang="scss">
+	page,
+	.content {
+		min-height: 100%;
+		height: auto;
+	}
+
+	.top-search {
+		width: 750rpx;
+		height: 100rpx;
+		background: #FFFFFF;
+		padding: 20rpx 32rpx 16rpx;
+
+		.search-box {
+			justify-content: center;
+			width: 610rpx;
+			height: 64rpx;
+			background: #F6F6F6;
+			border-radius: 10rpx;
+
+			.search-icon {
+				width: 32rpx;
+				height: 32rpx;
+
+			}
+
+			.search-font {
+				margin-left: 20rpx;
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+			}
+		}
+
+		.search {
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+		}
+	}
+
+	.shoplist-item {
+		margin: 20rpx auto 0;
+		width: 700rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(50, 50, 52, 0.06);
+		border-radius: 20rpx;
+		padding: 26rpx 22rpx 22rpx;
+		align-items: flex-start;
+
+		.shoplist-image {
+			flex-shrink: 0;
+			width: 150rpx;
+			height: 150rpx;
+			border-radius: 10rpx;
+		}
+
+		.shoplist-info {
+			margin-left: 18rpx;
+			width: 100%;
+			line-height: 1;
+
+			.info-top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.info-title {
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #333333;
+				}
+
+				.info-address {
+					display: flex;
+					align-items: center;
+
+					.address-icon {
+						width: 20rpx;
+						height: 28rpx;
+					}
+
+					.address-font {
+						font-size: 22rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #666666;
+					}
+				}
+			}
+
+			.info-tip {
+				margin-top: 18rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+			}
+
+			.info-bottom {
+				margin-top: 32rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+				padding-bottom: 10rpx;
+				border-bottom: 1px solid #EAECED;
+
+				.info-bleft {
+					justify-content: flex-start;
+
+					.infobf-item {
+						margin-right: 10rpx;
+						background: #FCF3F0;
+						border-radius: 5rpx;
+						padding: 8rpx 10rpx;
+						font-size: 18rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #FF440D;
+					}
+				}
+
+				.info-bright {
+					justify-content: flex-end;
+
+					.info-icon {
+						margin-left: 10rpx;
+						width: 46rpx;
+						height: 46rpx;
+					}
+				}
+			}
+
+			.bc {
+				margin-top: 10rpx;
+				font-size: 23rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+
+				.h {
+					padding: 6rpx;
+					background: linear-gradient(-48deg, #FFA30B, #FFD158);
+					border-radius: 13rpx;
+					font-size: 21rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #FFFFFF;
+				}
+
+				.dw {
+					font-size: 17rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FF4C4C;
+				}
+
+				.xian {
+					font-size: 27rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FF4C4C;
+				}
+
+				.yuan {
+					display: inline-block;
+					margin-right: 10rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					text-decoration: line-through;
+					color: #999999;
+				}
+			}
+		}
+	}
+</style>