fish-uniapp/pages/activity/GoodsSeckill/index.vue

<template>
	<view class="flash-sale" ref="container">
		<view class="header" v-if="headerImg">
			<image :src="headerImg" />
		</view>
		<scroll-view scroll-y="false" scroll-x="true">
			<view class="timeScroll">
				<view class="" v-for="(item, index) in timeList" :key="index">
					<view :class="{'timeItem':true,'active':active==index}" @click="changeTime(index)">
						<view class="time">{{ item.time }}</view>
						<view class="state">{{ item.state }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="" v-for="(item, index) in timeList" :key="index">
			<view v-if="active == index">
				<view class="countDown font-color-red acea-row row-center-wrapper">
					<view v-if="item.status === 0" class="activity">活动已结束</view>
					<count-down :is-day="false" :tip-text="'距结束仅剩 '" :day-text="''" :hour-text="' : '" :minute-text="' : '"
					 :second-text="''" :datatime="datatime" v-if="item.status === 1"></count-down>
					<view v-if="item.status === 2" class="activity">活动即将开始</view>
				</view>
				<view class="list">
					<view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList" :key="indexSeckill">
						<view class="pictrue">
							<image :src="itemSeckill.image" />
						</view>
						<view class="text acea-row row-column-around">
							<view class="line1" v-text="itemSeckill.title"></view>
							<view class="money">
								限时价
								<text class="num font-color-red" v-text="'￥' + itemSeckill.price"></text>
							</view>
							<view class="progress cart-color">
								<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view>
								<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
							</view>
						</view>
						<view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0" @click="goDetail(itemSeckill.id)">马上抢</view>
						<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
						<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
						<view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
					</view>
				</view>
				<view class="noCommodity" style="background-color: #fff;" v-if="seckillList.length === 0 && page > 1">
					<view class="noPictrue">
						<image :src="$VUE_APP_RESOURCES_URL + '/images/noGood.png'" class="image" />
					</view>
				</view>
			</view>
		</view>
		<!-- 
		<vant-tabs :active="active" @change="setTime" :sticky="sticky" animated line-height="2" :ellipsis="false">
			<vant-tab :ellipsis="false" :title="[title[index]]">
				
			</vant-tab>
		</vant-tabs> -->
	</view>
</template>
<script>
	import {
		getSeckillConfig,
		getSeckillList
	} from '@/api/activity';
	import CountDown from '@/components/CountDown';
	// import { Tab, Tabs } from "vant-weapp";
	import Loading from '@/components/Loading';

	export default {
		name: 'GoodsSeckill',
		components: {
			CountDown
		},
		props: {},
		data: function() {
			return {
				headerImg: '',
				timeList: [],
				sticky: false,
				loading: false,
				datatime: 0,
				active: 0,
				seckillList: [],
				status: false, //砍价列表是否获取完成 false 未完成 true 完成
				loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
				page: 1, //页码
				limit: 5, //数量
				title: [],
			};
		},
		mounted: function() {
			this.mountedStart();
		},
		onReachBottom() {
			!this.loadingList && this.getSeckillList();
		},
		methods: {
			changeTime: function(index) {
				this.active = index
			},
			mountedStart: function() {
				var that = this;
				uni.showLoading();
				getSeckillConfig().then(res => {
					that.$set(that, 'headerImg', res.data.lovely);
					that.$set(that, 'timeList', res.data.seckillTime);
					that.$set(that, 'active', res.data.seckillTimeIndex);

					let title = [];
					title = res.data.seckillTime.map((item, index) => {
						return {
							name: 'div',
							attrs: {
								class: 'timeItem'
							},
							children: [{
									name: 'div',
									attrs: {
										class: 'time'
									},
									children: [{
										type: 'text',
										text: item.time
									}]
								},
								{
									name: 'div',
									attrs: {
										class: 'state'
									},
									children: [{
										type: 'text',
										text: item.state
									}]
								}
							]
						};
					});
					that.$set(that, 'title', title);
					that.datatime = that.timeList[that.active].stop;
					that.getSeckillList();
					that.$nextTick(function() {
						that.sticky = true;
						uni.hideLoading();
					});
				});
			},
			setTime: function(event) {
				var that = this;
				that.active = event.mp.detail.index;
				that.datatime = that.timeList[that.active].stop;
				that.getSeckillList();
			},
			getSeckillList: function() {
				var that = this;
				if (that.loadingList) return;
				if (that.status) return;
				var time = that.timeList[that.active].id;
				getSeckillList(time, {
					page: that.page,
					limit: that.limit
				}).then(res => {
					that.status = res.data.length < that.limit;
					that.seckillList.push.apply(that.seckillList, res.data);
					that.page++;
					uni.hideLoading();
				});
			},
			goDetail: function(id) {
				var that = this;
				var time = that.timeList[that.active].stop;
				this.$yrouter.push({
					path: '/pages/activity/SeckillDetails/index',
					query: {
						id,
						time
					}
				});
			}
		}
	};
</script>
<style scoped lang="less">
	.timeScroll {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.timeItem {
		font-size: 0.22 * 100rpx;
		color: #282828;
		width: 150rpx;
		text-align: center;
		padding: 0.11 * 100rpx 0;
		background-color: none;

		&.active {

			.time {
				color: #00c17b
			}

			.state {
				background-color: #00c17b;
				color: #fff;
				opacity: 1;
				border-radius: 30rpx;
				padding: 0 .2*100rpx;
				font-weight: 800;
				height: .3*100rpx;
				line-height: .3*100rpx;
			}

		}
	}

	.timeItem .time {
		font-size: 0.32 * 100rpx;
		font-weight: bold;
		height: 0.37 * 100rpx;
		line-height: 0.37 * 100rpx;
	}

	.timeItem .state {
		height: 0.37 * 100rpx;
		line-height: 0.37 * 100rpx;
	}

	.activity {
		color: #333;
	}

	.flash-sale .list .item .grab {
		background-color: #999;
	}
</style>