shop-app/pages/seckill.vue

<!--
 * @Author: ch
 * @Date: 2022-03-21 18:08:07
 * @LastEditors: ch
 * @LastEditTime: 2022-04-13 09:47:45
 * @Description: file content
-->
<template>
	<view>
		<image class="banner" src="@/static/seckill/banner.png"/>
		<view class="tab">
			<view class="tab--item" :class="{'tab--item__active' : item.id === activityTime.id}" 
				v-for="item in timeList" :key="item.id" @click="changeTime(item)">
				<text class="tab--time">{{item.timeName}}</text>
				<text>{{item.isInProgress ? '已开抢' : '即将开抢'}}</text>
			</view>
		</view>
		<view class="goods">
			<view class="goodsItem" v-for="item in goodsList" :key="item.productId">
				<image class="goodsItem--image" :src="item.productMainPicture"/>
				<view class="goodsItem--con">
					<text>{{item.productName}}</text>
					<view class="goodsItem--progBox">
						<u-line-progress class="goodsItem--prog" :percentage="30" :showText="false" height="11rpx" activeColor="#FE0A16" inactiveColor="#FF8E8F" />
						<text>仅剩{{item.stock}}件</text>	
					</view>
					<view class="goodsItem--operation">
						<view>
							<view class="goodsItem--price">￥{{item.activityPrice}}</view>
							<text class="goodsItem--orgPrice">￥{{item.originalPrice}}</text>
						</view>
						<template v-if="activityTime.isInProgress">
							<button v-if="item.stock > 0" class="goodsItem--btn" 
								@click="$Router.push(`/goodsDetail?id=${item.productId}`)">立即抢购
							</button>
							<button v-else class="goodsItem--btn goodsItem--btn__disable" 
								@click="$Router.push(`/goodsDetail?id=${item.productId}`)">已售罄
							</button>
						</template>
						<button v-else class="goodsItem--btn" 
							@click="$Router.push(`/goodsDetail?id=${item.productId}`)">即将开抢
						</button>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadingStatus" color="#fff" iconColor="#fff" nomoreText="我也是有底线的啦~"/>
		</view>

	</view>
</template>
<script>
import { ApiGetSeckillTimes, ApiGetSeckillGoods } from '@/common/api/seckill.js';
export default {
	data(){
		return {
			timeList : [],
			goodsList : [],
			pageIndex : 1,
			length : 10,
			activityTime : {},
			loadingStatus : 'loading',
			isLast : false
		}
	},
	mounted(){
		this.getTimeList();
	},
	onReachBottom(){
		if(this.loadingStatus === 'nomore'){
			return false;
		}
		this.pageIndex++;
		this.getGoodsList();
	},
	methods:{
		async getTimeList(){
			const {error, result} = await ApiGetSeckillTimes();
			if(error){
				uni.$u.toast(error.message);
				return false
			}
			this.timeList = result;
			this.activityTime = result[0];
			this.getGoodsList()
		},
		async getGoodsList(){
			this.loadingStatus = 'loading';
			const {error, result} = await ApiGetSeckillGoods({
				pageIndex : this.pageIndex,
				length : this.length,
				activityTimeId : this.activityTime.id
			});
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.goodsList = this.goodsList.concat(result.records);
			if(result.records.length < this.length){
				this.loadingStatus = 'nomore';
			}
		},
		changeTime(item){
			this.activityTime = item;
			this.pageIndex = 1;
			this.goodsList = [];
			this.getGoodsList();
		}
	}
}
</script>
<style lang="scss" scoped>
page{
	background: #F53739;
}
.banner{
	height: 678rpx;
	width: 750rpx;
}
.tab{
	height:120rpx;
	margin: 20rpx 18rpx 0;
	background: linear-gradient(180deg, #FDDBAE 0%, #FEC793 25%, #FFB378 97%, #FFB378 100%);
	display: flex;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	position: relative;
	padding: 0 30rpx;
	&::after,&::before{
		display: block;
		content: '';
		width: 24rpx;
		height: 164rpx;
		background: url('@/static/seckill/jz.png') no-repeat;
		transform: rotate(180deg);
		background-size: 24rpx;
		position: absolute;
		right: 0;
		top: -22rpx;
	}
	&::before{
		left: 0;
		transform: rotate(0deg);
	}
	&--item{
		font-size: $font-size-sm;
		line-height: 45rpx;
		text{
			color: #EF6817;
		}
		&__active text{
			color: #F53739;
		}
	}
	&--time{
		display: block;
		font-size: $font-size-lg;
	}
}
.goods{
	min-height: calc(100vh - 826rpx);
	overflow: hidden;
	margin: 0 20rpx;
	padding: 10rpx 30rpx 0;
	background: #DF1F21;
	box-shadow: 0 10rpx 20rpx rgba($color: #000000, $alpha: .1) inset;
}
.goodsItem{
	width: 650rpx;
	height: 258rpx;
	margin: 30rpx auto;
	border-radius: 12rpx;
	padding: 30rpx;
	display: flex;
	box-sizing: border-box;
	background: linear-gradient(181deg, #FFF1D5 0%, #FBE0BB 21%, #F7CFA1 88%, #F7CFA1 100%);
	&--image{
		width: 190rpx;
		height: 190rpx;
		background: #F0EEE6;
		border-radius: 12rpx;
		margin-right: 30rpx;
	}
	&--con{
		width: 378rpx;
		padding-top: 10rpx;
	}
	&--progBox{
		margin-top: 24rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		text{
			font-size: 22rpx;
			color: #F31F07;
		}
	}
	&--prog{
		width: 167rpx;
		margin-right: 20rpx;
		flex: initial;
	}
	&--operation{
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		align-items: flex-end;
	}
	&--price{
		display: flex;
		font-size: $font-size-base;
		color: #F31F07;
		font-weight: bold;
		align-items: center;
		margin-bottom: 10rpx;
		&::before{
			display: block;
			content: '秒';
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			border-radius: 6rpx;
			background: #FE0A16;
			color: $color-grey0;
			font-size: $font-size-sm;
			text-align: center;
			margin-right: 10rpx;
		}
	}
	&--orgPrice{
		font-size: $font-size-sm;
		color: #BE4903;
		text-decoration: line-through;
	}
	&--btn{
		width: 166rpx;
		height: 62rpx;
		line-height: 62rpx;
		background: url('@/static/seckill/btn.png');
		background-size: 166rpx;
		font-size: $font-size-base;
		font-weight: bold;
		padding: 0;
		border: none;
		margin: 0;
		color: #791704;
		&::after{
			display: none;
		}
		&__disable{
			background: url('@/static/seckill/btn2.png');
		background-size: 166rpx;
		}
	}
}
</style>