shicai/pages/groupBooking/1.vue

<template>
	<view class="container">
		<view id="pinkBanner">
			<view class="top-img"><image src="http://shicai.liuniu946.com/static/img/pinkBanner.png"></image></view>
			<view class="switch-bar flex_item">
				<view class="switchList" @click="change(index)" :key="index" v-for="(ls, index) in switchList" v-bind:class="{ active_color: index == checkedTab }">
					<view class="time">{{ ls.time }}</view>
					<view class="name">{{ ls.name }}</view>
					<view class="switchimg" v-bind:class="{ switchimgshow: index == 1 }"><image src="/static/img/img084.png"></image></view>
				</view>
			</view>
			<view class="tip flex">
				<view class="time-box flex" >
					<view class="time-name">抢购中先下单先得哦</view>
					<view class="flex_item" v-show="starting">
						<view>距开始</view>
						<uni-countdown color="#FFFFFF" background-color="#334432" 
							:show-day="false" 
							:hour="starthour" 
							:minute="startminute" 
							:second="startsecond">
						</uni-countdown>
					</view>
					<view class="flex_item" v-show="Timeing">
						<view>距结束</view>
						<uni-countdown color="#FFFFFF" background-color="#334432" 
							:show-day="false" 
							:hour="Timeinghour" 
							:minute="Timeingminute" 
							:second="Timeingsecond">
						</uni-countdown>
					</view>
				</view>
			</view>
		</view>
		<swiper :current="checkedTab" :style="{ height: scrollHeight + 'px' }" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in switchList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData()">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.list.length === 0"></empty>
					<!-- 订单列表 -->
					<view class="preferred_centent">
						<view class="preferred_item" v-for="item in tabItem.list" @click="navToDetailPage(item)">
							<view class="flex_item">
								<view class="tlist-img">
									<view class="leftImgIcon" v-if="tabItem.id == 1">AA团</view>
									<view class="leftImgIcon" v-if="tabItem.id == 2">达人团</view>
									<view class="img"><image :src="item.image" mode="scaleToFill"></image></view>
								</view>
								<view class="tlist-img " v-for="imgItem in item.images">
									<view class="img"><image :src="imgItem" mode="scaleToFill"></image></view>
								</view>
							</view>
							<view class="goods_name">
								<view class="goods_title flex_item">
									<view class="text">{{ item.min_people }}人团</view>
									<view class="">{{ item.title }}</view>
								</view>
								<view class="goods-height">
									<!-- <view class="goods_num clamp">{{ item.info }}</view> -->
									<view class="flex goods-peplo">
										<view class="goods-tip flex_item">
											<view class="peplo">库存剩{{ item.percent | parseIntTo }}%</view>
											<view class="make">{{ item.mark }}</view>
										</view>
										<view class="right flex_item">
											<image src="/static/icon/hot.png" mode="aspectFill"></image>
											<text>已拼{{ item.order_count }}份</text>
										</view>
									</view>
								</view>
								<view class="price flex">
									<view class="price_list">
										<view class="price-red">
											<text class="moneyIcon">￥</text>
											<text class="money">{{ item.price }}</text>
											<text class="moneyType">/{{ item.unit_name }}</text>
											<text class="outMoney">￥{{ item.product_price }}</text>
										</view>
									</view>
									<view class="img position-relative" @click.stop="Addcar(item)">去开团</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<button open-type="share" class="shareDate">分享给好友</button>
	</view>
</template>
<script>
import { cartAdd } from '@/api/product.js';
import { getCombinationList } from '@/api/groupBooking.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState } from 'vuex';
import { loadIndexs } from '@/api/index.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	computed: {
		...mapState('user', ['userInfo', 'hasLogin']),
		...mapState(['addressData', 'addressPageShow'])
	},
	components: {
		empty,
		uniLoadMore,
		uniCountdown
	},
	data() {
		return {
			scrollHeight: 0, // 底部分享按钮高度
			checkedTab: 0, // 当前选中的切换页面
			switchList: [
				{
					id: 1,
					time: 'AA团',
					name: '人人参与',
					// sid: 128,	// 测试服
					sid: 132,	// 正式服
					list: [],
					loadingType: 'more',
					page: 1, //当前页数
					limit: 3 //每次信息条数
				},
				{
					id: 2,
					time: '带货达人团',
					name: '多人成团 不限人数',
					// sid: 129,	// 测试服
					sid: 131,	// 正式服
					list: [],
					loadingType: 'more',
					page: 1, //当前页数
					limit: 3 //每次信息条数
				}
			],
			checkid:0,
			//倒计时
			hour: 0,//距离明天8点开始时间
			minute: 0,
			second: 0,
			
			starting: false,//判断活动未开始
			Timeing:false,//判断活动进行中
			
			starthour:0,//距离今天开始时间
			startminute:0,
			startsecond:0,
			
			Timeinghour:0,//距离今天结束时间
			Timeingminute:0,
			Timeingsecond:0,
			
			workstarTime:'',
			workendTime:'',
		};
	},
	filters: {
		parseIntTo(percent) {
			percent = +percent * 100;
			if (percent % 1 === 0) {
				return percent;
			} else {
				percent = percent.toFixed(1);
				return percent;
			}
		}
	},
	onLoad(option) {
		// 判断是否登录
		if (!this.hasLogin) {
			interceptor();
		}
		// 判断有无邀请人
		if (option.spread) {
			uni.setStorageSync('spread', option.spread);
		}
		saveUrl();
	},
	onShow() {
		this.Getlist();
	},
	//下拉刷新
	onPullDownRefresh() {
		let obj = this;
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		obj.loadData('refresh');
	},
	// 加载完成后重置无限加载商品包裹框高度
	onReady() {
		let obj = this;
		// 处理数据加载完毕则加载数据
		obj.onlodingTrue().then(e => {
			obj.scrollHeight = e.pageHeight - e.topHeight - e.bottomHeight;
			obj.loadData();
		});
	},
	//分享
	onShareAppMessage(options) {
		// 设置菜单中的转发按钮触发转发事件时的转发内容
		let shareObj = {
			title: '点击进入拼团', // 默认是小程序的名称(可以写slogan等)
			path: '/pages/groupBooking/index?spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
			imageUrl: 'http://shicai.liuniu946.com/static/img/pinkShare.jpg',
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
			fail: function() {
				// 转发失败之后的回调
				if (res.errMsg == 'shareAppMessage:fail cancel') {
					// 用户取消转发
				} else if (res.errMsg == 'shareAppMessage:fail') {
					// 转发失败，其中 detail message 为详细失败信息
				}
			}
		}; // 来自页面内的按钮的转发 // 返回shareObj
		return shareObj;
	},
	methods: {
		// 获取营业时间
		async Getlist() {
			loadIndexs({})
				.then(({ data }) => {
					let arr = data.sell_time.split(',');
					this.workstarTime = arr[0];
					this.workendTime = arr[1];
					this.StartDate();
					this.GetDate();
				})
				.catch(e => {
					
				});
		},
		//点击切换商品种类
		change(index) {
			// 当前选中的对象
			this.checkedTab = index;
			console.log(this.checkedTab,55)
			this.loadData('tabChange');
		},
		StartDate() {
			let obj = this;
			console.log(obj.workstarTime)
			console.log(this.workendTime)
			// 获取当前时间
			let now = new Date();
			let year = now.getFullYear(); //得到年份
			let month = now.getMonth();//得到月份
			let date = now.getDate();//得到日期
			let hour = now.getHours();//得到小时
			let minu = now.getMinutes();//得到分钟
			let sec = now.getSeconds();//得到秒
			//获取早上开始营业的时间戳
			let aa = this.workstarTime.split(':');
			let bb = aa[0];
			let cc = aa[1];
			let dd = String(cc).split('');
			let ff = dd[0];
			let gg = dd[1];
			console.log(bb,ff,gg)
			let time1 = new Date(year,month,date,bb,ff,gg);
			let morning = time1.getTime();
			//获取现在时间的时间戳
			let time2 = new Date(year,month,date,hour,minu,sec);
			let present = time2.getTime();
			//获取晚上结束营业的时间戳
			let a = this.workendTime.split(':');
			let b = a[0];
			let c = a[1];
			let d = String(c).split('');
			let f = d[0];
			let g = d[1];
			console.log(b,f,g)
			let time3 = new Date(year,month,date,b,f,g);
			console.log(time1,'time1')
			console.log(time3,'time3')
			let night = time3.getTime();
			//现在时间大于结束时间，活动结束
			// if(present > time3){
			// 	console.log('现在时间大于结束时间，活动结束')
			// 	obj.end = true;
			// }
			//现在时间大于开始时间小于结束时间，活动进行中
			if(present < time3 &&  present > time1){
				console.log('现在时间大于开始时间小于结束时间，活动进行中')
				obj.Timeing = true;
				let starTime = time3 - present;
				let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
				let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
				let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
				obj.Timeinghour = hours;
				obj.Timeingminute = minutes;
				obj.Timeingsecond = seconds;
				 console.log('时间差是: '+ obj.Timeinghour + '小时, ' + obj.Timeingminute + '分钟, ' + obj.Timeingsecond + '秒','距离晚上22：00点结束');
			}
			//现在时间小于开始时间，活动还未开始
			if(present < time1){
				console.log('现在时间小于开始时间，活动还未开始')
				obj.starting = true;
				let  starTime = time1 - present;
				let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
				let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
				let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
				obj.starthour = hours;
				obj.startminute = minutes;
				obj.startsecond = seconds;
				 console.log('时间差是: '+ obj.starthour + '小时, ' + obj.startminute + '分钟, ' + obj.startsecond + '秒','距离早上7：00点开始');
			}
			//现在时间距离第二天开始时间
			// day3.setTime(day3.getTime()+24*60*60*1000);
			// var s3 = day3.getFullYear()+"-" + (day3.getMonth()+1) + "-" + day3.getDate();
			
		},
		//获取明天早上7：00的时间戳
		GetDate(){
			let obj = this;
			let now = new Date();
			//现在时间转换成时间戳
			let nowTime = now.getTime();
			now.setTime(now.getTime()+24*60*60*1000);
			let time = obj.workstarTime;
			let data = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + time;
			data = data.replace(/-/g, '/');
			let time4 = new Date(data);
			let tomorrow = time4.getTime();
			let starTime = tomorrow - nowTime;
			let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
			let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
			let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
			obj.hour = hours;
			obj.minute = minutes;
			obj.second = seconds;
			console.log('时间差是: '+ hours + '小时, ' + minutes + '分钟, ' + seconds + '秒','距离第二天6：40开始');
			
		},
		onlodingTrue() {
			let obj = this;
			return new Promise(function(resolve, reject) {
				let num = 0;
				let height = {
					topHeight: 0,
					bottomHeight: 0,
					pageHeight: 0
				};
				// 初始化获取头部宽度
				uni.createSelectorQuery()
					.select('#pinkBanner')
					.fields(
						{
							size: true
						},
						data => {
							// 计算最多下拉的高度
							height.topHeight = data.height;
							num++;
							if (num == 3) {
								resolve(height);
							}
						}
					)
					.exec();
				// 初始化获取底部分享宽度
				uni.createSelectorQuery()
					.select('.shareDate')
					.fields(
						{
							size: true
						},
						data => {
							// 计算最多下拉的高度
							height.bottomHeight = data.height;
							num++;
							if (num == 3) {
								resolve(height);
							}
						}
					)
					.exec();
				// 初始化获取底部分享宽度
				uni.createSelectorQuery()
					.select('.container')
					.fields(
						{
							size: true
						},
						data => {
							// 计算最多下拉的高度
							height.pageHeight = data.height;
							num++;
							if (num == 3) {
								resolve(height);
							}
						}
					)
					.exec();
			});
		},
		// 查询分类切换
		changeTab(e) {
			this.checkedTab = e.target.current;
			this.loadData('tabChange');
		},
		// 请求商品列表
		async loadData(source) {
			console.log(source);
			let obj = this;
			//这里是将订单挂载到tab列表下
			let index = obj.checkedTab;
			let navItem = obj.switchList[index];
			let state = navItem.state;
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			if (source == 'refresh') {
				navItem.page = 1;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			getCombinationList({
				type: navItem.sid,
				page: navItem.page,
				limit: navItem.limit
			})
				.then(({ data }) => {
					console.log(source == 'refresh');
					if (source == 'refresh') {
						navItem.list = [];
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					}
					let arr = data.map(e => {
						e.images = e.images.slice(0, 2);
						return e;
					});
					console.log(arr);
					navItem.list = navItem.list.concat(arr);
					console.log(navItem);
					navItem.page++;
					// 判断是否是第一次加载
					if (!navItem.loaded) {
						obj.$set(navItem, 'loaded', true);
						uni.hideLoading();
					}
					if (navItem.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'more';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'noMore';
					}
					
				})
				.catch(e => {
					console.log(e);
				});
		},
		//加入购物车
		Addcar(item) {
			let obj = this;
			uni.navigateTo({
				url: '/pages/product/productGroup?id=' + item.id
			});
		},
		//跳转商品详情页
		navToDetailPage(ls) {
			let obj = this;
			let id = ls.id;
			uni.navigateTo({
				url: '/pages/product/productGroup?id=' + id
			});
		}
	}
};
</script>
<style lang="scss">
page,
.container {
	background: #F3F3F4;
	height: 100%;
}
.top-img {
	width: 100%;
	height: 180rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.tab-content {
	.list-scroll-content {
		height: 100%;
	}
}

.switch-bar {
	width: 100%;
	font-size: 32rpx;
	background-color: #FFFFFF;
	.switchList {
		padding: 28rpx 0rpx;
		text-align: center;
		width: 50%;
		.time {
			font-size: $font-lg;
			font-weight: bold;
		}
		.name {
			font-size: $font-sm;
		}
	}
	.switchimg{
		position: absolute;
		left: 23%;
		image{
			width: 24rpx;
			height: 13rpx;
		}
	}
	.switchimgshow{
		left:75%;
	}
	.active_color {
		background: linear-gradient(270deg, #fe531e 0%, #fe9503 100%);
		color: #ffffff;
	}
}
.tip {
	width: 100%;
	height: 76rpx;
	background-color: #FFFFFF;
	}
	.time-box{
		width: 100%;
		padding: 0rpx 25rpx;
		font-size:27rpx;
	}
	.time-name{
		font-size:27rpx;
	}
.preferred_centent {
	padding:32rpx 20rpx;
	width: 100%;
	.tip {
		padding: 25rpx 0rpx;
		font-size: 28rpx;
	}
	.preferred_item {
		width: 100%;
		height: 100%;
		padding: 25rpx 25rpx;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		margin-bottom: 15rpx;
		.tlist-img {
			width: 225rpx;
			position: relative;
			margin-right: 15rpx;
			.leftImgIcon {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 22rpx;
				font-family: PingFangSC;
				color: rgba(148, 71, 34, 1);
				background: rgba(254, 242, 111, 1);
				z-index: 99;
				border-radius: 5rpx;
				padding: 5rpx 10rpx;
			}
			.img {
				width: 210rpx;
				height: 210rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
			.stock {
				margin-top: 13rpx;
				font-size: 26rpx;
				background: #fff1ee;
				width: 100%;
				color: #fb4912;
				padding: 6rpx 0;
				border-radius: 5rpx;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 0;
				bottom: 0;
				.img {
					width: 20rpx;
					height: 20rpx;
					flex-shrink: 0;
				}
				.stock-num {
					padding-left: 7rpx;
					font-size: 22rpx;
					border-radius: 5rpx;
					height: 32rpx;
					line-height: 32rpx;
				}
			}
		}
		.goods_name {
			.goods_title {
				padding-top: 15rpx;
				color:rgba(0,0,0,1);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size:32rpx;
				color: $font-color-dark;
				height: 70rpx;
				.text{
					border-radius: 8rpx;
					border: 2rpx solid #FF1A27;
					color: #FF1A27;
					padding:0rpx 10rpx;
					font-size: 26rpx !important;
					margin-right: 15rpx;
					
				}
			}
			.goods-height {
				min-height: 60rpx;
			}
			.goods_num {
				font-size: 26rpx;
				color: #8f8f97;
				padding-bottom: 15rpx;
			}
			.goods-peplo {
				height: 45rpx;
				margin-top: 15rpx;
				.right {
					color:#8e8e8e;
					font-size: 24rpx;
					width:195rpx;
					image {
						width: 30rpx;
						height: 33rpx;
						margin-right: 15rpx;
					}
				}
				.goods-tip {
					.peplo {
						background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
						padding: 5rpx 10rpx;
						color: #ffffff;
						border-top-left-radius:8rpx;
						border-bottom-left-radius: 8rpx;
					}
					.make {
						background-color: #fef26f;
						color: #944722;
						border-top-right-radius: 8rpx;
						border-bottom-right-radius: 8rpx;
					}
					.make,
					.peplo {
						font-size: $font-sm;
						padding: 5rpx 10rpx;
					}
				}
			}
			.price {
				font-size: 28rpx;
				position: relative;
				padding-top: 15rpx;
				.price_list {
					.price-red {
						font-size: 30rpx !important;
						font-family: Source Han Sans CN;
						color: rgba(253, 27, 42, 1);
						font-size: $font-base;
						font-weight: bold;
						.moneyIcon {
							font-weight: normal !important; 
						}
						.money {
							font-size: 58rpx;
						}
						.moneyType {
							font-weight: 400;
						}
						.outMoney {
							font-weight: 400;
							text-decoration: line-through;
							color: rgba(142, 142, 142, 1);
						}
					}
					.price-green {
						color: #2dbd59;
						font-size: 26rpx !important;
						font-weight: bold;
						text {
							background: linear-gradient(45deg, rgba(21, 197, 52, 1), rgba(21, 197, 52, 1));
							color: #ffffff;
							padding: 0rpx 10rpx;
							border-radius: 7rpx;
							font-size: 24rpx !important;
							margin-left: 15rpx;
						}
					}
				}
				.img {
					width: 265rpx;
					height: 74rpx;
					line-height: 74rpx;
					background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
					border-radius: 99rpx;
					color: #ffffff;
					font-size: $font-lg;
					text-align: center;
				}
				.tomorrow {
					background: #29a66e;
					color: #ffffff;
					border-radius: 25rpx;
					padding: 10rpx 25rpx;
				}
			}
		}
	}
}
.shareDate {
	width: 100%;
	font-size: 28rpx;
	background: linear-gradient(270deg, #fe531e 0%, #fe9503 100%);
	padding: 25rpx 0rpx;
	line-height: 1;
	text-align: center;
	color: #ffffff;
	position: fixed;
	bottom: 0;
	border: none;
	border-radius: 0rpx !important;
}
</style>