shop-app/pages/seckill.vue

<!--
 * @Author: ch
 * @Date: 2022-03-21 18:08:07
 * @LastEditors: ch
 * @LastEditTime: 2022-04-29 22:58:20
 * @Description: file content
-->
<template>
	<view>
		<image class="back" src="@/static/common/back_white.png" @click="$Router.back()"/>
		<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-item" v-for="item in goodsList" :key="item.productId"
			@click="$Router.push(`/goodsDetail?id=${item.productId}`)">
			<image class="goods-item--image" :src="item.productMainPicture"/>
			<view class="goods-item--con">
				<text class="goods-item--title">{{item.productName}}</text>
				<view class="goods-item--prog-box">
					<u-line-progress class="goods-item--prog" :percentage="30" :showText="false" height="11rpx" activeColor="#FE0A16" inactiveColor="#FF8E8F" />
					<text>仅剩{{item.stock}}件</text>	
				</view>
				<view class="goods-item--operation">
					<view>
						<view class="goods-item--price">￥{{item.activityPrice}}</view>
						<text class="goods-item--orgPrice">￥{{item.originalPrice}}</text>
					</view>
					<template v-if="activityTime.isInProgress">
						<button v-if="item.stock > 0" class="goods-item--btn" >立即抢购
						</button>
						<button v-else class="goods-item--btn goods-item--btn__disable">已售罄
						</button>
					</template>
					<button v-else class="goods-item--btn">即将开抢
					</button>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadingStatus" color="#FF8384" iconColor="#FF8384" nomoreText="我也是有底线的啦~"/>
	</view>
</template>
<script>
import { ApiGetSeckillTimes, ApiGetSeckillGoods } from '@/common/api/seckill.js';
export default {
	data(){
		return {
			timeList : [],
			goodsList : [],
			pageIndex : 1,
			length : 15,
			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.find( i => i.isInProgress) || 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">
page {
	background: #F53739;
	padding-bottom: 30rpx;
}
</style>
<style lang="scss" scoped>
.back{
	width: 14rpx;
	height: 28rpx;
	position: absolute;
	top: 118rpx;
	left: 40rpx;
	z-index: 999;
}
.banner{
	height: 678rpx;
	width: 750rpx;
}
.tab{
	height:116rpx;
	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;
	border: 4rpx solid #FFB556;
	&::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: -4rpx;
		top: -30rpx;
	}
	&::before{
		left: -4rpx;
		top: -23rpx;
		transform: rotate(0deg);
	}
	&--item{
		font-size: $font-size-sm;
		line-height: 45rpx;
		text{
			color: #EF6817;
			&.tab--time{
				font-weight: bold;
			}
		}
		&__active text{
			color: #F53739;
		}
		
	}
	&--time{
		display: block;
		font-size: $font-size-lg;
	}
}
.goods-item{
	width: 690rpx;
	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: 200rpx;
		height: 200rpx;
		background: #F0EEE6;
		border-radius: 12rpx;
		margin-right: 30rpx;
	}
	&--con{
		width: 400rpx;
		padding-top: 10rpx;
	}
	&--title{
		font-weight: bold;
		line-height: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 378rpx;
		color: #791704;
	}
	&--prog-box{
		margin-top: 16rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		text{
			font-size: $font-size-sm;
			line-height: $font-size-sm;
			color: #F31F07;
		}
	}
	&--prog{
		width: 167rpx;
		margin-right: 20rpx;
		flex: initial;
	}
	&--operation{
		display: flex;
		justify-content: space-between;
		margin-top: 16rpx;
		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>