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

256 lines
5.8 KiB

3 years ago
<!--
* @Author: ch
* @Date: 2022-03-21 18:08:07
* @LastEditors: ch
* @LastEditTime: 2022-04-13 09:47:45
3 years ago
* @Description: file content
-->
<template>
<view>
3 years ago
<image class="banner" src="@/static/seckill/banner.png"/>
3 years ago
<view class="tab">
3 years ago
<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>
3 years ago
</view>
</view>
<view class="goods">
3 years ago
<view class="goodsItem" v-for="item in goodsList" :key="item.productId">
<image class="goodsItem--image" :src="item.productMainPicture"/>
<view class="goodsItem--con">
3 years ago
<text>{{item.productName}}</text>
<view class="goodsItem--progBox">
<u-line-progress class="goodsItem--prog" :percentage="30" :showText="false" height="11rpx" activeColor="#FE0A16" inactiveColor="#FF8E8F" />
3 years ago
<text>仅剩{{item.stock}}</text>
</view>
<view class="goodsItem--operation">
<view>
3 years ago
<view class="goodsItem--price">{{item.activityPrice}}</view>
<text class="goodsItem--orgPrice">{{item.originalPrice}}</text>
</view>
3 years ago
<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>
3 years ago
<u-loadmore :status="loadingStatus" color="#fff" iconColor="#fff" nomoreText="我也是有底线的啦~"/>
</view>
3 years ago
3 years ago
</view>
</template>
3 years ago
<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>
3 years ago
<style lang="scss" scoped>
page{
background: #F53739;
}
.banner{
height: 678rpx;
width: 750rpx;
3 years ago
}
.tab{
height:120rpx;
margin: 20rpx 18rpx 0;
3 years ago
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;
3 years ago
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);
}
3 years ago
&--item{
font-size: $font-size-sm;
3 years ago
line-height: 45rpx;
3 years ago
text{
color: #EF6817;
}
&__active text{
3 years ago
color: #F53739;
}
}
&--time{
display: block;
font-size: $font-size-lg;
3 years ago
}
}
.goods{
min-height: calc(100vh - 826rpx);
overflow: hidden;
3 years ago
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;
3 years ago
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;
3 years ago
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{
3 years ago
background: url('@/static/seckill/btn2.png');
background-size: 166rpx;
}
}
3 years ago
}
</style>