xiongmao/pages/index/promotional-picks/promotional-picks.vue

<!-- 促销精选 -->
<template>
	<view class="wrap">
		
		<HeaderViewBar ref='HeaderViewBar' title='促销精选' :opacity="scrollTop / 20" backgroundColor='#6A4FDB'
			style="position: fixed; top: 0; z-index: 999999999;">
			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px'}">
				<button class="gua-btn">
					<image src="../../../static/share-icon.png" mode=""></image>
				</button>
			</view>
		</HeaderViewBar>

		<view class="swiper-box">
			<swiper class="swiper" :circular="true" autoplay="true" interval="4000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item" class="banner-img" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="module">
			<view class="nav-list">
				<view :class="{ 'selected' : isActive === index }" class="child" v-for="(item,index) in navList"
					:key="index" @click="checked(index)">
					{{item.title}}
				</view> 
			</view>

			<scroll-view scroll-x="true" class="tabList">
				<view v-for="(item, index) in rechargeList" :key="index"
					:class="'type ' + [id == index ? 'active' : '']" @click="selectItem(index)">
					{{item.title}}
				</view>
			</scroll-view>
			
			<view class="bottom">
				<view class="bottom-label">
					<text class="bottom-label-text">距开抢</text>
					<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
						@change="onChange">
						<view class="time">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.minutes }}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>
				<view class="spike-list">
					<view class="spike-item">
						<image src="../../../static/img-4.png" class="spike-img" mode="aspectFill"></image>
						<view class="spike-sidebar">
							<view class="spike-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
							<view class="spike-tag-row">
								<view class="spike-tag">
									直降33元
								</view>
								<text class="snap-up-num">120人抢购</text>
							</view>
							<view class="spike-bottom">
								<button type="default" class="btn-1">
									<image src="../../../static/bg-13.png" class="btn-1bg" mode=""></image>
									<view class="btn-1container">
										秒杀价￥<text>28.00</text>
									</view>
								</button>
								<button type="default" class="btn-2">
									<image src="../../../static/bg-14.png" class="btn-2bg" mode=""></image>
									<view class="btn-2container">
										立即购买
									</view>
								</button>
							</view>
						</view>
					</view>
					<view class="spike-item">
						<image src="../../../static/img-4.png" class="spike-img" mode="aspectFill"></image>
						<view class="spike-sidebar">
							<view class="spike-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
							<view class="spike-tag-row">
								<view class="spike-tag">
									直降33元
								</view>
								<text class="snap-up-num">120人抢购</text>
							</view>
							<view class="spike-bottom">
								<button type="default" class="btn-1">
									<image src="../../../static/bg-13.png" class="btn-1bg" mode=""></image>
									<view class="btn-1container">
										秒杀价￥<text>28.00</text>
									</view>
								</button>
								<button type="default" class="btn-2">
									<image src="../../../static/bg-14.png" class="btn-2bg" mode=""></image>
									<view class="btn-2container">
										立即购买
									</view>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="module-label">
					特卖
				</view>
				<view class="sale-list">
					<view class="sale-item">
						<view class="img-box">
							<image src="../../../static/img-1.png" class="sale-img" mode="aspectFill"></image>
							<view class="tag-box">
								特卖￥<text class="big">394.00</text>
								<text class="small">4.8折</text>
							</view>
						</view>
						<view class="sale-bottom">
							<view class="sale-product-name">
								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
							</view>
							<view class="sale-price-row">
								<text class="sale-price">
									￥<text>394.00</text>
								</text>
								<text class="del-price">￥34.00</text>
							</view>
						</view>
					</view>
					<view class="sale-item">
						<view class="img-box">
							<image src="../../../static/img-2.png" class="sale-img" mode="aspectFill"></image>
							<view class="tag-box">
								特卖￥<text class="big">394.00</text>
								<text class="small">4.8折</text>
							</view>
						</view>
						<view class="sale-bottom">
							<view class="sale-product-name">
								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
							</view>
							<view class="sale-price-row">
								<text class="sale-price">
									￥<text>394.00</text>
								</text>
								<text class="del-price">￥34.00</text>
							</view>
						</view>
					</view>
					<view class="sale-item">
						<view class="img-box">
							<image src="../../../static/img-1.png" class="sale-img" mode="aspectFill"></image>
							<view class="tag-box">
								特卖￥<text class="big">394.00</text>
								<text class="small">4.8折</text>
							</view>
						</view>
						<view class="sale-bottom">
							<view class="sale-product-name">
								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
							</view>
							<view class="sale-price-row">
								<text class="sale-price">
									￥<text>394.00</text>
								</text>
								<text class="del-price">￥34.00</text>
							</view>
						</view>
					</view>
					<view class="sale-item">
						<view class="img-box">
							<image src="../../../static/img-1.png" class="sale-img" mode="aspectFill"></image>
							<view class="tag-box">
								特卖￥<text class="big">394.00</text>
								<text class="small">4.8折</text>
							</view>
						</view>
						<view class="sale-bottom">
							<view class="sale-product-name">
								精品小童茸，云南香格里拉松茸，肉质紧实细腻…
							</view>
							<view class="sale-price-row">
								<text class="sale-price">
									￥<text>394.00</text>
								</text>
								<text class="del-price">￥34.00</text>
							</view>
						</view>
					</view>
				</view>
				<view class="module-label">
					拼团
				</view>
				<view class="group-list">
					<view class="group-item">
						<image src="../../../static/bg-10.png" class="group-img" mode="aspectFill"></image>
						<view class="group-sidebar">
							<view class="group-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
							<view class="group-row">
								<text class="group-num">
									拼团数<text>20</text>
								</text>
								<text class="form-group-num">已有10人成团</text>
							</view>
							<view class="group-bottom">
								<view class="group-price">
									￥<text>28.00</text>
								</view>
								<button type="default" class="group-btn">去拼团</button>
							</view>
						</view>
					</view>
					<view class="group-item">
						<image src="../../../static/bg-10.png" class="group-img" mode="aspectFill"></image>
						<view class="group-sidebar">
							<view class="group-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
							<view class="group-row">
								<text class="group-num">
									拼团数<text>20</text>
								</text>
								<text class="form-group-num">已有10人成团</text>
							</view>
							<view class="group-bottom">
								<view class="group-price">
									￥<text>28.00</text>
								</view>
								<button type="default" class="group-btn">去拼团</button>
							</view>
						</view>
					</view>
					<view class="group-item">
						<image src="../../../static/bg-10.png" class="group-img" mode="aspectFill"></image>
						<view class="group-sidebar">
							<view class="group-product-name">李子柒推荐藕粉桂花坚果早餐懒人冲饮</view>
							<view class="group-row">
								<text class="group-num">
									拼团数<text>20</text>
								</text>
								<text class="form-group-num">已有10人成团</text>
							</view>
							<view class="group-bottom">
								<view class="group-price">
									￥<text>28.00</text>
								</view>
								<button type="default" class="group-btn">去拼团</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
	export default {
		components: {
			HeaderViewBar,
		},
		data() {
			return {
				headerHeight: 0,
				headerContainerWidth: '100%',
				scrollTop: 0,

				//轮播
				swiperList: [
					'../../../static/bg-15.png',
					'../../../static/bg-15.png',
					'../../../static/bg-15.png'
				],

				//选项卡
				isActive: 0,
				navList: [{
					title: '限时秒杀',
				}, {
					title: "特卖",
				}, {
					title: "拼团砍价",
				}],


				//选项卡2
				rechargeList: [{
						title: '09:00开抢中'
					},
					{
						title: '10:00开抢'
					},
					{
						title: '11:00开抢'
					}
				],
				id: 0, //单选 初始化第一个高亮
				
				//倒计时
				timeData: {},
			}
		},
		onShow() {
			setTimeout(() => {
				const {
					headerHeight,
					headerContainerWidth
				} = this.$refs['HeaderViewBar'].getHeaderStyle();
				this.headerHeight = headerHeight;
				this.headerContainerWidth = headerContainerWidth;
			}, 20);
		},
		methods: { 
			//选项卡
			checked(index) {
				this.isActive = index
			},
			//单选-选项卡
			selectItem(index) {
				this.id = index;
			},
			//倒计时
			onChange(e) {
				this.timeData = e
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	@import "./promotional-picks.css";
	.time {
		@include flex;
		align-items: center;
	
		&__custom {
			margin-top: 4px;
			width: 27px;
			height: 20px;
			background-color: #F2501A !important;
			border-radius: 4px;
			/* #ifndef APP-NVUE */		
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
	
			&__item {
				color: #fff !important;
				font-size: 34rpx !important;
				text-align: center;
				font-weight: bold;
				margin: 0 !important;
			}
		}
	
		&__doc {
			color: #A8A7AC !important;
			padding: 0 3rpx !important;
			font-size: 36rpx !important;
			margin: 0 !important;
		}
	}
</style>