You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/seckill.vue

272 lines
6.0 KiB

<!--
* @Author: ch
* @Date: 2022-03-21 18:08:07
* @LastEditors: ch
* @LastEditTime: 2022-04-25 10:43:11
* @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" scoped>
page{
background: #F53739;
padding-bottom: 30rpx;
}
.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>