junzitang/pagesT/seckill/Seckill.vue

<template>
	<view :class="['qn-page-' + theme]">
		<!-- 自定义头部 -->
		<view class="nav-bar">
			<uniStatusBar />
			<view class="nav-bar-cont">
				<view class="nav-bar-left" @click="backPage">
					<text class="nv-back ibonfont ibonfanhui"></text>
				</view>
				<view class="nav-bar-center">秒杀抢购</view>
			</view>
		</view>
		<!-- 自定义头部 END -->
		<view class="goods-view" :style="{marginTop:`calc(${barHeight}px + 108rpx)`}">
			<view class="goods-item clearfix" v-for="(item, index) in activityList" :key="index" @click="goPage(`/pagesT/product/product?id=${item.goodsId}&skuId=${item.skuId}`)">
				<view class="float_left goods-img"><image :src="item.images[0]" mode="aspectFit"></image></view>
				<view class="float_left goods-right">
					<view class="goods-name">{{ item.goodsName }}</view>
					<view class="activity-tit">{{ item.title }}</view>
					<view class="activity-limitNum">每人限购{{item.limitNum}}{{item.unitName}}</view>
					<view class="price-view clearfix">
						<view class="float_left p-left">
							<text class="ic-rmb">¥</text>
							<text class="price">{{ item.price}}</text>
							<text class="markrt-price">¥{{ item.salePrice }}</text>
						</view>
						<view class="buy-btn float_right">
							<view class="activityNum-view">
								爆卖{{item.activityNum}}{{item.unitName}}
							</view>
							<view>
								马上抢
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '已开抢',
					time: '8:00',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 1,
					text: '已开抢',
					time: '12:00',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 2,
					text: '即将开始',
					time: '16:00',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 3,
					text: '已开抢',
					time: '22:00',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 4,
					text: '已开抢',
					time: '24:00',
					loadingType: 'more',
					orderList: []
				}
			],
			activityList: []
		};
	},
	onShareAppMessage(options) {
		return {
			title: this.$store.state.baseSet.shop,
			path: '/pages/index/index?businessmanId=' + (this.$store.state.userStatus.id||''),
			success: res => {
				console.log(res);
			}
		};
	},
	watch:{
		'$store.state.locationObj'(val){
			if(JSON.stringify(val)==='{}'){
				this.getAuthorizeInfo();
				return
			}
			this.getActivityAll();
		}
	},
	onLoad() {
		if(JSON.stringify(this.$store.state.locationObj)==='{}'){
			this.getAuthorizeInfo();
			return
		}
		this.getActivityAll();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getActivityAll();
	},
	methods: {
		// phaseTime(item){
		// 	setInterval(() => {
		// 		item.times = this.$_utils.formatDate(item.endTime - new Date(), 'hh:mm:ss').split(':');
		// 	}, 1000);
		// },
		tabClick(item, index) {
			this.tabCurrentIndex = index;
			this.state = item.state;
			this.tabCurrentIndex = item.state;
			// this.getOrderSelect()
		},
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		getActivityAll() {
			this.$u.api.getActivityAll().then(res=>{
				uni.stopPullDownRefresh();
				this.activityList = res.data;
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

.progress {
	width: 70%;
}

.nav-bar {
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(315deg, rgba(247, 95, 48, 1) 0%, rgba(242, 58, 58, 1) 100%);
	color: #fff;

	.nav-bar-cont {
		position: relative;
		line-height: 88upx;
		height: 88upx;
		width: 100%;

		.nav-bar-left {
			position: absolute;
			left: 0;
			height: 100%;
			top: 0;
			padding-left: 12upx;

			.nv-back {
				font-size: 40rpx;
				color: #ffffff;
				transform: translateY(6upx);
			}
		}

		.nav-bar-center {
			text-align: center;
			width: 100%;
			font-size: 34upx;
		}
	}

	.time-view {
		padding-bottom: 20upx;

		.time-scrollx {
			white-space: nowrap;

			.time-li {
				display: inline-block;
				text-align: center;
				padding-right: 56upx;
				font-size: 38upx;
				opacity: 0.7;

				.time-status {
					font-size: 24upx;
				}
			}

			.timeOn:hover {
				opacity: 1;
				font-size: 45upx;
			}

			// &.timeOn {
			// 	opacity: 1;
			// }
			.time-li:first-child {
				padding-left: 30upx;
			}
		}
	}
}

.goods-view {
	margin-top: 146upx;

	.goods-item {
		width: 702upx;
		margin: 20upx auto 0;
		background: #fff;
		border-radius: 12upx;
		padding: 24upx 30upx;

		.goods-img {
			width: 194upx;
			height: 170upx;
			background: #f5f5f5;
			margin-right: 24upx;

			image {
				border-radius: 8upx;
				width: 100%;
				height: 100%;
			}
		}

		.goods-right {
			width: 414upx;

			.goods-name {
				font-size: 28upx;
				color: #303133;
				width: 100%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.activity-limitNum,.activity-tit{
				font-size: 22upx;
				color: #909399;
				font-weight: 300;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				/* 默认溢出隐藏 */
				text-overflow: ellipsis;
				color: #F56C6C;
			}
			.activity-tit{
				font-weight: 600;
			}
			.activity-limitNum{
				color: #F56C6C;
				font-size: 22upx
			}
			.speed-view {
				width: 200upx;
				height: 12upx;
				background: #ffd9d9;
				border-radius: 12upx;

				.speed-in-view {
					border-radius: 12upx;
					width: 66%;
					height: 12upx;
					background: #f23a3a;
				}
			}

			.skill-num {
				font-size: 24upx;
				font-weight: 300;
				color: #666;
				margin-left: 20upx;
				transform: translateY(-12upx);
			}

			.price-view {
				.p-left {
					color: $price-color;

					.ic-rmb {
						font-size: 22upx;
					}

					.price {
						font-size: 42upx;
					}

					.markrt-price {
						font-size: 24upx;
						margin-left: 24upx;
						text-decoration: line-through;
						color: #999;
					}
				}

				.buy-btn {
					background: #f23a3a;
					// width: 128upx;
					// height: 56upx;
					text-align: center;
					// line-height: 56upx;
					border-radius: 4upx;
					padding: 6upx 30upx;
					color: #fff;
					font-size: 26upx;
					.activityNum-view{
						font-size: 20upx;
						padding-bottom: 2upx;
					}
				}
			}
		}
	}
}

.time-ul {
	padding: 10upx 0;
	font-size: 26upx;
	// margin-left: 20upx;
	.icon-maohao {
		height: 40upx;
		width: 20upx;
		text-align: center;
		font-size: 28upx;
		line-height: 40upx;
	}

	.time-li {
		height: 40upx;
		background-color: #fd463e;
		color: #fff;
		width: 50upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 8upx;
	}
}
</style>