guanmao-wxapp/packageGoods/pages/seckill.vue

<template>
	<view class="app-container">
		<view class="bg-container">
			<image src="@/static/home/top_bg.png" mode="widthFix"></image>
		</view>
		<view class="top-container">
			<image src="@/static/home/top_bg2.png" mode="widthFix" class="front-bg" v-if="StatusBar <= 20"></image>
			<image src="@/static/home/top_bg3.png" mode="widthFix" class="front-bg" v-if="StatusBar > 20"></image>
			
			<view class="content" :style="'height:' + (StatusBar > 20 ? getpx(350) : getpx(300)) + 'px'">
				<view class="title" :style="cuStyle">
					<view class="left" @tap="toBack">
						<image src="@/static/icon/back.png"></image>
					</view>
					<view class="tit">限时秒杀</view>
					<view class="right"></view>
				</view>
				<view class="time-list">
					<block v-for="(item, index) in seckillTimeList" :key='index'>
						<view class="item" :class="seckillTimeCurrent == index ? 'current':''" @tap="changeSeckillTime(index)">
							<view class="time">{{item.startHour}}:00</view>
							<view class="tag" v-if="item.type == 'yjs'">已结束</view>
							<view class="tag" v-if="item.type == 'jxz'">{{countdownTime}}</view>
							<view class="tag" v-if="item.type == 'wks'">即将开始</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="list-container">
			<scroll-view class="scroll-view" scroll-y :refresher-triggered="refresherTriggered" @scrolltolower="scrolltolower" @refresherrefresh="refresherrefresh" refresher-enabled  :class="StatusBar > 20 ? 'higher':''">
				<block v-for="(item, index) in goodsList" :key='index'>
					<div class="item" @tap="toSeckillGoodsDetail(item.goodsId)">
						<image :src="item.imgUrl" mode="aspectFill"></image>
						<view class="right">
							<view class="title ellipsis-2">{{item.goodsName}}</view>
							<view class="des ellipsis-2">{{item.describeText ? item.describeText : ''}}</view>
							<view class="stock-sales">
								<view class="stock">
									<text>剩余{{item.secStockNum}}件</text>
									<view class="progress-box">
										<!-- 库存 / 总数 * 100 = 剩余百分比 -->
										<progress :percent="item.secStockNum / item.limitBuy * 100" activeColor="#FF3F42" active stroke-width="6" />
									</view>
								</view>
								<view class="sales">销量：{{item.salesVolume}}</view>
							</view>
							<view class="bottom">
								<view class="price">
									<view class="price-1">¥{{item.price | numToFixed}}</view>
									<view class="price-2">¥{{item.goodsPrice | numToFixed}}</view>
								</view>
								<view class="btn" v-if="seckillTimeList[seckillTimeCurrent].type == 'jxz'">马上抢</view>
								<view class="btn2" v-else>马上抢</view>
							</view>
						</view>
					</div>
				</block>
				<no-data v-if="!goodsList.length" :showText="'暂无商品'"></no-data>
				<loading-text v-if="goodsList.length"  :loading="loading" :noMore="noMore" ></loading-text>
			</scroll-view>
		</view>
		
		<drag-button :isDock="true" :customBar="false" ref="dragButton"></drag-button>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import dragButton from '@/components/drag-button.vue';
	
	export default {
		components:{
			dragButton
		},
		data() {
			return {
				scrollTop: 0, // 滚动高度（用于控制自定义导航）
				seckillTimeList: [], // 秒杀时间段列表
				seckillTimeCurrent: 0, // 秒杀时间段选择
				goodsList: [], // 秒杀商品列表
				pageNum: 1,
				pageSize: 8,
				noMore: false,
				loading: false,
				countdownTime: '', // 倒计时
				endDatetime: '', // 倒计时结束时间
				nowDate: null, // 当前时间
				dateInterval: null, // 时间定时器
				refresherTriggered: false,
				StatusBar: this.StatusBar
			}
		},
		computed:{
			cuStyle(){
				return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
			},
			...mapState(['userInfo', 'isLogin', 'userId']),
			isLoaded() {
				uni.hideLoading();
				return this.isLoaded_banner && this.isLoaded_coupon && this.isLoaded_seckill && this.isLoaded_tab && this.isLoaded_myManager;
			}
		},
		watch: {
			nowDate() {
				let hh = this.nowDate.getHours(),
					mm = this.nowDate.getMinutes(),
					ss = this.nowDate.getSeconds();
				let hs = [10, 12, 15, 18, 20];
				if(mm == 0 && ss == 0 && hs.indexOf(hh) >= 0) {
					setTimeout(() => {
						this.getSeckillTimeList();
					}, 1000)
				}
			}
		},
		onShow() {
			this.$refs.dragButton.init();
		},
		onLoad() {
			this.getSeckillTimeList();
		},
		methods: {
			toBack(){
				uni.navigateBack({
					delta:1
				})
			},
			
			getpx(val) {
				return uni.upx2px(val);
			},
			
			// 下拉刷新
			refresherrefresh() {
				this.refresherTriggered = true;
				this.pageNum = 1;
				this.getSeckillGoodsList();
			},
			
			// 上拉加载
			scrolltolower() {
				this.getSeckillGoodsList(true);
			},
			
			findElem(array, attr, val) {
			    for (var i = 0; i < array.length; i++) {
			        if (array[i][attr] == val) {
			            return i; //返回当前索引值
			        }
			    }
			    return -1;
			},
			
			// 计算倒计时
			countTime() {
				let endDatetime = this.endDatetime.replace(/\-/g, '/');
				// console.log(endDatetime)
			    var nowtime = new Date(),  //获取当前时间
			        endtime = new Date(endDatetime);  //定义结束时间
			    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
			        hh = Math.floor(lefttime/(1000*60*60)),  //计算小时数
			        mm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
			        ss = Math.floor(lefttime/1000%60);  //计算秒数
				// console.log(new Date(endDatetime))
				function checkTime(i){
					if (i<10) {
						i = "0"+i;
					}
					return i;
				}
				setTimeout(() => {
					this.countTime();
				}, 1000);
				this.countdownTime = checkTime(hh) + ":" + checkTime(mm) + ":" + checkTime(ss);
				// console.log(this.countdownTime)
			},
			
			// 获取秒杀时间列表
			getSeckillTimeList() {
				this.$axios({
					url: '/goods/sec/time',
					method: 'get',
					params: {}
				}).then(res => {
					if(res.data.length < 1) {return false;}
					this.seckillTimeList = res.data;
					this.seckillTimeCurrent = this.findElem(this.seckillTimeList, 'type', 'jxz');
					if(this.seckillTimeCurrent == -1) {
						this.seckillTimeCurrent = 0;
						this.getSeckillGoodsList();
					}else {
						this.endDatetime = this.seckillTimeList[this.seckillTimeCurrent].endDatetime;
						this.countTime();
						this.getSeckillGoodsList();
					}
				}).finally(res => {
					this.isLoaded_seckill = true;
				})
			},
			
			// 切换秒杀时间
			changeSeckillTime(index) {
				this.seckillTimeCurrent = index;
				this.getSeckillGoodsList();
			},
			
			// 获取秒杀商品列表
			getSeckillGoodsList(loadMore) {
				if(this.noMore && loadMore)return;
				this.noMore = false;
				if(!loadMore){
					this.pageNum = 1;
				}else{
					this.loading = true;
				}
				let secKillId = this.seckillTimeList[this.seckillTimeCurrent].secKillId;
				this.$axios({
					url: '/goods/sec/goods/list',
					method: 'get',
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						secKillId: secKillId,
					}
				}).then(res => {
					let _list = res.data.records;
					let pageTotal = res.data.pages;
					if(this.pageNum >= pageTotal){
						this.noMore = true;
					}
					if (_list.length) {
						this.pageNum += 1
					}
					if (loadMore) {
						this.goodsList = this.goodsList.concat(_list);
						this.loading = false;
					} else {
						this.goodsList = _list;
					}
				}).finally(res => {
					this.refresherTriggered = false;
				})
			},
			
			// 进入秒杀商品详情
			toSeckillGoodsDetail(id) {
				if(!id) {
					return false;
				}
				if(this.seckillTimeList[this.seckillTimeCurrent].type == 'wks') {
					return this.$toast('活动未开始');
				}
				uni.navigateTo({
					url: '/packageGoods/pages/detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		box-sizing: border-box;
	}
	.bg-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		image {
			width: 750rpx;
		}
	}
	.top-container {
		position: relative;
		.front-bg {
			display: block;
			width: 750rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}
		.content {
			width: 750rpx;
			padding: 0 20rpx;
			position: relative;
			box-sizing: border-box;
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 36rpx;
			.left {
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			image {
				width: 32rpx;
				height: 32rpx;
				display: block;
			}
			.right {
				width: 50rpx;
				height: 50rpx;
			}
		}
		.time-list {
			flex: 1;
			display: flex;
			overflow-x: scroll;
			align-items: center;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;
				width: 140rpx;
				margin-right: 48rpx;
				.time {
					font-size: 32rpx;
					color: #FFFFFF;
				}
				.tag {
					width: 140rpx;
					height: 44rpx;
					border-radius: 44rpx;
					border: 1px solid #FFFFFF;
					font-size: 24rpx;
					color: #FFFFFF;
					box-sizing: border-box;
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&.current {
					.tag {
						background: #FFFFFF;
						color: #FF3F42;
					}
				}
			}
		}
	}
	.list-container {
		padding: 0 20rpx;
		.scroll-view {
			height: calc(100vh - 300rpx);
			&.higher {
				height: calc(100vh - 350rpx);
			}
		}
		.item {
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			padding: 20rpx;
			margin-bottom: 20rpx;
			image {
				display: block;
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
			}
			.right {
				width: 490rpx;
				box-sizing: border-box;
				padding-left: 20rpx;
				.title {
					font-size: 30rpx;
					color: #333333;
					line-height: 36rpx;
					font-weight: 600;
				}
				.des {
					font-size: 24rpx;
					line-height: 30rpx;
					color: #999999;
					margin-top: 6rpx;
				}
				.stock-sales {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #666666;
					.stock {
						display: flex;
						align-items: center;
						text {
							font-size: 24rpx;
							color: #666666;
						}
						.progress-box {
							width: 140rpx;
							border-radius: 6px;
							overflow: hidden;
							margin-left: 10rpx;
						}
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;
					.price {
						display: flex;
						flex-direction: column;
					}
					.price-1 {
						font-size: 32rpx;
						color: #FF3F42;
						line-height: 36rpx;
					}
					.price-2 {
						font-size: 26rpx;
						color: #666666;
						line-height: 30rpx;
						text-decoration: line-through;
					}
					.btn {
						width: 110rpx;
						height: 44rpx;
						background: #FF3F42;
						border-radius: 5rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 44rpx;
					}
					.btn2 {
						width: 110rpx;
						height: 44rpx;
						background: #AAAAAA;
						border-radius: 5rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 44rpx;
					}
				}
			}
		}
	}
</style>