shicai/pages/seckill/seckill.vue

<template>
	<view class="container">
		<view class="top-img"><image src="http://shicai.liuniu946.com/static/img/img16.png"></image></view>
		<view class="switch-bar flex_item">
			<view class="switchList" @click="change(ls)" v-for="ls in switchList" v-bind:class="{ active_color: ls.id == checkid }">
				<view class="time">{{ workstarTime}}-{{workendTime}}</view>
				<view class="name">{{ ls.name }}</view>
			</view>
		</view>
		<view class="preferred_centent">
			<view class="tip flex">
				<view class="name">{{ tip }}</view>
				<view class="time flex_item" v-if="checkid == 1">
					<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 class="flex_item" v-show="end">
						<view>距结束</view>
						<uni-countdown color="#FFFFFF" background-color="#334432" 
							:show-day="false" 
							:hour="endhour" 
							:minute="endminute" 
							:second="endsecond">
						</uni-countdown>
					</view> -->
				</view>
				<view class="time flex_item" v-if="checkid == 2">
					<view>距开始</view>
					<uni-countdown color="#FFFFFF" background-color="#334432" 
						:show-day="false" 
						:hour="hour" 
						:minute="minute" 
						:second="second">
					</uni-countdown>
				</view>
			</view>
			<view class="flex_item preferred_item" v-for="item in list" @click="navToDetailPage(item)">
				<view class="tlist-img">
					<view class="img"><image :src="item.image" mode="scaleToFill"></image></view>
					<view class="stock flex_item">
						<image class="img" src="/static/img/img01.png" mode="scaleToFill"></image>
						<view class="stock-num clamp">库存剩{{ item.percent * 100 }}%</view>
					</view>
				</view>
				<view class="goods_name">
					<view class="goods_title clamp">{{ item.store_name }}</view>
					<view class="goods-height">
						<view class="goods_num clamp">{{ item.store_info }}</view>
						<view class="goods-tip" v-if="item.keyword != ''">
							<text v-for="lss in item.keyword">{{ lss }}</text>
						</view>
					</view>
					<view class="price flex">
						<view class="price_list">
							<view class="price-red">￥{{ item.price }}<text>/份</text></view>
							<view class="price-green">￥{{item.ot_price}}<text>市场价</text></view>
						</view>
						<view class="img position-relative" v-if="checkid == 1" @click.stop="Addcar(item)">
							<image src="/static/img/img21.png"></image>
							<view class="corner" v-if="item.cart_num > 0">
								<text>{{ item.cart_num }}</text>
							</view>
						</view>
						<view class="tomorrow" v-if="checkid == 2">明日开抢</view>
					</view>
				</view>
			</view>
		</view>
		<button  open-type="share" class="shareDate">分享给好友</button>
		
		<!-- 返回按钮 -->
		<!-- <return-button></return-button> -->
	</view>
</template>
<script>
import { cartAdd } from '@/api/product.js';
import { getProducts } from '@/api/product.js';
import { loadIndexs } from '@/api/index.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState } from 'vuex';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
// 返回按钮
// import returnButton from '@/pages/return/returnButton.vue';
export default {
	computed: {
		...mapState('user',['userInfo','hasLogin']),
		...mapState(['addressData','addressPageShow'])
	},
	components: {
		uniCountdown,
		// returnButton
	},
	data() {
		return {
			bastList: '',
			switchList: [
				{
					id: 1,
					time: '08:00-17:00',
					name: '今日秒杀',
					sid: 100
				},
				{
					id: 2,
					time: '08:00-17:00',
					name: '明日预购',
					sid: 101
				}
			],
			checkid: '1', //切换导航栏id
			list: '',
			tip: '抢购中先下单先得哦', //提示消息
			sid: 100, //商品切换导航栏类别id
			
			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:'',
		};
	},
	onLoad(option){
		// 判断是否登录
		if(!this.hasLogin){
			interceptor()
		}
		// 判断有无邀请人
		if (option.spread) {
			uni.setStorageSync('spread', option.spread);
		}
		saveUrl();
	},
	onShow() {
		this.loadData();
		this.Getlist();
	},
	//下拉刷新
	onPullDownRefresh() {
		let obj = this;
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		setTimeout(function() {
			obj.loadData();
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	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 => {
					
				});
		},
		//分享
		onShareAppMessage(options){
		　　// 设置菜单中的转发按钮触发转发事件时的转发内容
		　　let shareObj = {
		　　　　title: "点击进入秒杀榜",        // 默认是小程序的名称(可以写slogan等)
		　　　　path: '/pages/seckill/seckill?spread='+this.userInfo.uid,        // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　imageUrl: 'http://shicai.liuniu946.com/static/img/img41.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 为详细失败信息
		　　　　　　}
		　　　　}
		　　};
		　　// 来自页面内的按钮的转发
		// 　　if( options.from == 'button' ){
		// 　　　　// 此处可以修改 shareObj 中的内容
		// 　　　　shareObj.path = '/pages/seckill/seckill';
		// 　　}
		　　// 返回shareObj
		console.log(shareObj,'shareObj')
		　　return shareObj;
		},
		//点击切换商品种类
		change(item) {
			let id = item.id;
			this.checkid = id;
			this.sid = item.sid;
			if (this.checkid == 1) {
				this.tip = '抢购中先下单先得哦';
			}
			if (this.checkid == 2) {
				this.tip = '明日好货敬请期待呢';
			}
			this.loadData();
		},
		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开始');
			
		},
		// 请求商品列表
		async loadData() {
			let obj = this;
			getProducts({
				type: 1,
				sid: obj.sid //分类id
			})
				.then(({ data }) => {
					obj.list = data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		//加入购物车
		Addcar(item) {
			let obj = this;
			// let id = ls.id;
			// uni.navigateTo({
			// 	url: '/pages/product/product?id=' + id
			// });
			if(obj.checkid == 1){
				if(obj.start == true){
					this.$api.msg('未开始该活动！');
					return;
				}
				if(obj.Timeing== true){
					cartAdd({
						cartNum: '1', //商品数量
						uniqueId: '', //商品标签
						new: 0, //商品是否新增加到购物车1为不加入0为加入
						mer_id: '',
						productId: item.id //商品编号
					})
						.then(function(e) {
							uni.showToast({
								title: '成功加入购物车',
								type: 'top',
								duration: 500,
								icon: 'none'
							});
							obj.loadData();
						})
						.catch(e => {
							console.log(e);
						});
					return;
				}
				if(obj.end == true){
					this.$api.msg('该活动已结束！');
					return;
				}
			}else{
				this.$api.msg('未开始该活动！');
				return;
			}
		},
		//跳转商品详情页
		navToDetailPage(ls) {
			let obj = this;
			// let id = ls.id;
			// uni.navigateTo({
			// 	url: '/pages/product/product?id=' + id
			// });
			if(obj.checkid == 1){
	            uni.showToast({
	            	title: obj.starting,
	            	type: 'top',
	            	duration: 500,
	            	icon: 'none'
	            });
				if(obj.starting == true){
					this.$api.msg('未开始该活动！');
					return;
				}
				uni.showToast({
					title: obj.Timeing,
					type: 'top',
					duration: 500,
					icon: 'none'
				});
				if(obj.Timeing == true){
					let id = ls.id;
					uni.navigateTo({
						url: '/pages/product/product?id=' + id
					});
					return;
				}
				uni.showToast({
					title: obj.end,
					type: 'top',
					duration: 500,
					icon: 'none'
				});
				if(obj.end == true){
					alert(obj.end)
					this.$api.msg('该活动已结束！');
					return;
				}
			}else{
				this.$api.msg('未开始该活动！');
			}
			
		}
	}
};
</script>
<style lang="scss">
page {
	background: #ffffff;
	height: 100%;
}
.container {
	background: #ffffff;
	height: 100%;
}
.top-img {
	width: 100%;
	height: 220rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.switch-bar {
	width: 100%;
	font-size: 32rpx;
	.switchList {
		padding: 28rpx 0rpx;
		text-align: center;
		width: 50%;
	}
	.active_color {
		background: linear-gradient(270deg, #fe531e 0%, #fe9503 100%);
		color: #ffffff;
	}
}
.time{padding-right: 15rpx;}
.preferred_centent {
	width: 100%;
	padding: 0rpx 25rpx;
	margin-bottom: 25rpx;
	padding-bottom: 80rpx !important;
	.tip {
		padding: 25rpx 0rpx;
		font-size: 28rpx;
	}
	.preferred_item {
		width: 100%;
		height: 100%;
		border-top: 1px solid #f0f0f0;
		padding: 25rpx 0rpx;
		position: relative;
		.tlist-img {
				width: 240rpx;
				position: relative;
				.img {
					width: 240rpx;
					height: 240rpx;
					image {
						width: 240rpx;
						height: 240rpx;
					}
				}
				.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 {
			padding-left: 25rpx;
			width: 65%;
			padding-right: 30rpx;
			.goods_title {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: $font-base;
				color: $font-color-dark;
				font-weight: bold;
			}
			.goods-height{
				min-height: 120rpx;
			}
			.goods_num {
				font-size: 26rpx;
				color: #8f8f97;
			}
			.goods-tip {
				margin-bottom: -15rpx;
					text {
						border: 2rpx solid #ff1a27;
						color: #ff1a27;
						font-size: 20rpx;
						padding: 2rpx 8rpx;
						margin-right: 15rpx;
						border-radius: 7rpx;
					}
				}
			.price {
				font-size: 28rpx;
				position: relative;
				.price_list {
					.price-red {
						color: #ff1a27;
						font-weight: bold;
						font-size: 30rpx !important;
						text {
							color: #9699a0;
							font-size: 24rpx !important;
							font-weight: normal;
							padding: 0rpx 10rpx;
							// text-decoration: line-through;
						}
					}
					.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: 50rpx;
					height: 50rpx;
					position: absolute;
					right: 0;
					bottom: 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.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>