shicai/pages/groupBooking/klondike.vue

<template>
	<view class="container">
		<view class="top-box">
			<view class="top-img"><image src="http://shicai.liuniu946.com/img/KlonBanner.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">
				<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>
		<view class="tab-content">
			<view class="preferred_item" v-for="item in list" @click="navToDetailPage(item)">
				<view class="flex_item">
					<view class="tlist-img">
						<view class="leftImgIcon">接龙团</view>
						<!-- <view class="leftImgIcon" v-if="sid == 131">达人团</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="title-text">{{ 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 v-if="item.stock >0 " class="img position-relative" @click.stop="Addcar(item)">去开团</view> -->
						<view v-if="item.stock >0 " class="img position-relative" @click.stop="navToDetailPage(item)">去接龙</view>
						<view v-if="item.stock <1 " class="img1 position-relative">已售罄</view>
						<!-- <view v-if="sid == 131 && item.stock <1 " class="img1 position-relative">敬请期待</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- <button open-type="share" class="shareDate">分享给好友</button> -->
		
	</view>
</template>
<script>
// import { cartAdd, autoPink } from '@/api/product.js';
import { getCombinationList, KlonList } from '@/api/groupBooking.js';
import { loadIndexs } from '@/api/index.js';

import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState } from 'vuex';
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';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	computed: {
		...mapState('user', ['userInfo', 'hasLogin']),
		...mapState(['addressData', 'addressPageShow'])
	},
	components: {
		empty,
		uniLoadMore,
		uniCountdown,
		uniPopup,
	},
	data() {
		return {
			scrollHeight: 0, // 底部分享按钮高度
			checkedTab: 0, // 当前选中的切换页面
			
			sid:132,
			list:[],
			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();
		this.loadData('refresh');
	},
	//下拉刷新
	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/klondike?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: {
		
		// 消息通知
		// tongzhi() {
		// 	this.$refs.popup.close()
		// 	wx.requestSubscribeMessage({
		// 		tmplIds: ['upq4J5ZQqRx-se7KgRdWS5d-l7EXKdAKT8W_J6HF70g','XKBGRmGwCzpT6oZZ0m6CF8nOS-eyGoDAI2KMSO4R4JY', '93fUZzhSsYNpBcDgFSgTDk3raKodD-bedAvfl3V4Iho'],
		// 		  success (res) { 
		// 				uni.showToast({
		// 					title:'开启通知成功',
		// 					success() {
		// 						setTimeout(function() {
		// 							uni.navigateTo({
		// 								url: '/pages/order/order?state=1'
		// 							})
		// 						}, 1000);
		// 					}
		// 				})
		// 			}
		// 	})
		// },
		
		// 获取营业时间
		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) {
			// 当前选中的对象
			if( this.userInfo.is_promoter == 0) {
				this.$api.msg('请先成为团长');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/notice/poster?id=5'
					})
				}, 1000);
				
				return;
			} else {
				this.checkedTab = index
				if(this.checkedTab == 0){
					this.sid = 132;
				}else{
					this.sid = 131;
				}
				console.log(this.sid,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() {
			let obj = this;
			KlonList({
				page: 1,
				limit: 100
			})
				.then(({ data }) => {
					let arr = data.map(e => {
						e.images = e.images.slice(0, 2);
						return e;
					});
					obj.list = arr;
					console.log(obj.list);
				})
				.catch(e => {
					console.log(e);
				});
		},
		
		// 一键拼团
		// pinkAuto() {
		// 	console.log(this.userInfo.is_promoter,999)
		// 	// if( this.userInfo.is_promoter == 0) {
		// 	// 	this.$api.msg('请先成为团长');
		// 	// 	setTimeout(() => {
		// 	// 		uni.navigateTo({
		// 	// 			url: '/pages/notice/poster?id=5'
		// 	// 		})
		// 	// 	}, 1000);
				
		// 	// 	return;
		// 	// }
		// 	autoPink({}).then((data) => {
		// 		console.log(data,5673)
		// 		this.$api.msg(data.msg)
				
		// 		this.$refs.popup.open()
				
		// 	})
		// 	.catch(e => {
		// 		console.log(e.message);
		// 		if (e.message == '请先设置拼团地址') {
		// 			this.$api.msg(e.msg)
		// 			setTimeout(function() {
		// 				uni.navigateTo({
		// 					url: '/pages/address/addressPink'
		// 				})
		// 			}, 1000);
					
					
		// 		}
		// 	})
		// },
		
		//加入购物车
		// Addcar(item) {
		// 	let obj = this;
		// 	uni.navigateTo({
		// 		url: '/pages/product/groupdetails?id='+ item.id
		// 	})
		// },
		//跳转商品详情页
		navToDetailPage(ls) {
			let obj = this;
			let id = ls.id;
			// uni.navigateTo({
			// 	url: '/pages/product/productGroup?id=' + id
			// });
			uni.navigateTo({
				url: '/pages/product/productKlon?id=' + id
			});
		}
	}
};
</script>
<style lang="scss">
page,
.container {
	background: #F3F3F4;
	height: 100%;
}
.top-img {
	width: 100%;
	height: 220rpx;
	image {
		width: 100%;
		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:73.5%;
	}
	.active_color {
		background: linear-gradient(270deg, #fe531e 0%, #fe9503 100%);
		color: #ffffff;
	}
}
.tip {
	width: 100%;
	height: 100rpx;
	// background-color: #7400C2;
	background-color: #FFFFFF;
	// background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
	color: #000000;
	// justify-content: space-around;
	}
	.time-box{
		width: 100%;
		padding: 20rpx 25rpx;
		font-size:27rpx;
		// justify-content: space-around;
		justify-content: center;
	}
	.time-name{
		font-size:27rpx;
	}
	.tab-content{
		padding: 25rpx 25rpx 100rpx 25rpx;
		border-radius: 30rpx;
		background: #F3F3F4;
		margin-top: -26rpx;
	}
	.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: #FFFFFF;
				// background: linear-gradient(270deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
				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;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.title-text {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.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));
					// background: linear-gradient(270deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
					border-radius: 99rpx;
					color: #ffffff;
					font-size: $font-lg;
					text-align: center;
				}
				.img1{
					background-color: #D3D3D3;
					width: 265rpx;
					height: 74rpx;
					line-height: 74rpx;
					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;
	z-index: 999;
}

</style>