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.
 
 
 
 

479 lines
11 KiB

<template>
<view class="container">
<view class="tui-bg__box">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/bg_seckill.png`" class="tui-bg__img" mode="widthFix" :style="{ opacity: opacity }"></image>
</view>
<view class="tui-header__bg">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/bg_seckill.png`" class="tui-bg__img" mode="widthFix"></image>
<scroll-view class="tui-time-slot" scroll-x>
<view class="tui-time__list" :class="{ 'tui-flex__between': timeList.length < 6 }">
<view class="tui-time__item" :class="[timeList.length < 6 ? 'tui-flex__1' : 'tui-width__min', index == active ? 'tui-time__active' : '']" v-for="(item, index) in timeList" :key="index" @tap="setTime(index)">
<view class="tui-time">{{ item.time }}</view>
<view class="tui-status">{{ item.state }}</view>
</view>
</view>
</scroll-view>
</view>
<view class="tui-body">
<block v-for="(item, index) in timeList" :key="index">
<view class="tui-status__box" v-if="active == index">
<view class="tui-full__width" v-if="item.status == 0">
<tui-divider gradual width="80%" backgroundColor="#fff" :height="34">
<view class="tui-divider__status">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/img_seckill.png`" mode="widthFix"></image>
<text class="tui-color__red">{{ item.time }}</text>
<text>{{ item.state }}</text>
</view>
</tui-divider>
</view>
<view class="tui-full__width" v-if="item.status == 2">
<tui-divider gradual width="80%" backgroundColor="#fff" :height="34">
<view class="tui-divider__status">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/img_seckill.png`" mode="widthFix"></image>
<text class="tui-color__red">{{ item.time }}</text>
<text>{{ item.state }}</text>
</view>
</tui-divider>
</view>
<view class="tui-countdown__box" v-if="item.status == 1 || item.status == 2">
<text>距离{{ item.status == 1 ? '结束还剩' : '开始还有' }}</text>
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="item.stop"></count-down>
</view>
</view>
</block>
<view class="tui-list__goods">
<view class="tui-goods__left">
<block v-for="(item, index) in seckillList" :key="index">
<t-goods-item v-if="index % 2 == 0" :item="item" :timeList="timeList" :active="active" :isList="false" @goDetail="goDetail"></t-goods-item>
</block>
</view>
<view class="tui-goods__right">
<block v-for="(item, index) in seckillList" :key="index">
<t-goods-item v-if="index % 2 !== 0" :item="item" :timeList="timeList" :active="active" :isList="false" @goDetail="goDetail"></t-goods-item>
</block>
</view>
</view>
</view>
</view>
</template>
<script>
import { getSeckillConfig, getSeckillList } from '@/api/activity'
import CountDown from '@/components/CountDown'
// import { Tab, Tabs } from "vant-weapp";
import Loading from '@/components/Loading'
export default {
name: 'GoodsSeckill',
components: {
CountDown,
},
props: {},
data: function() {
return {
headerImg: '',
timeList: [],
sticky: false,
loading: false,
datatime: 0,
active: 0,
seckillList: [],
status: false, //砍价列表是否获取完成 false 未完成 true 完成
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
page: 1, //页码
limit: 5, //数量
title: [],
opacity: 1,
}
},
mounted: function() {
this.mountedStart()
},
onReachBottom() {
!this.loadingList && this.getSeckillList()
},
filters: {
getStatusText(status) {
let text = ['活动已结束', '正在疯抢', '即将开抢'][status - 1]
return text
},
},
methods: {
changeTime: function(index) {
this.active = index
this.getSeckillList()
},
mountedStart: function() {
var that = this
uni.showLoading()
getSeckillConfig().then(res => {
that.$set(that, 'headerImg', res.data.lovely)
that.$set(that, 'timeList', res.data.seckillTime)
that.$set(that, 'active', res.data.seckillTimeIndex)
let title = []
title = res.data.seckillTime.map((item, index) => {
return {
name: 'div',
attrs: {
class: 'timeItem',
},
children: [
{
name: 'div',
attrs: {
class: 'time',
},
children: [
{
type: 'text',
text: item.time,
},
],
},
{
name: 'div',
attrs: {
class: 'state',
},
children: [
{
type: 'text',
text: item.state,
},
],
},
],
}
})
that.$set(that, 'title', title)
that.datatime = that.timeList[that.active].stop
that.getSeckillList()
that.$nextTick(function() {
that.sticky = true
uni.hideLoading()
})
})
},
setTime: function(index) {
var that = this
that.page = 1
that.loadingList = false
that.status = false
that.active = index
that.datatime = that.timeList[that.active].stop
this.seckillList = []
that.getSeckillList()
},
getSeckillList: function() {
var that = this
if (that.loadingList) return
if (that.status) return
var time = that.timeList[that.active].id
getSeckillList(time, {
page: that.page,
limit: that.limit,
}).then(res => {
that.status = res.data.length < that.limit
that.seckillList.push.apply(that.seckillList, res.data)
that.page++
uni.hideLoading()
})
},
goDetail: function(item) {
var that = this
var time = that.timeList[that.active].stop
this.$yrouter.push({
path: '/pages/activity/SeckillDetails/index',
query: {
id: item.id,
time,
status: that.timeList[that.active].status,
},
})
},
onPageScroll(e) {
let scrollTop = e.scrollTop
if (scrollTop <= 2) {
this.opacity = 1
} else {
if (this.opacity <= 0) return
this.opacity = 1 - scrollTop / 40
}
},
},
}
</script>
<style scoped lang="less">
.tui-bg__box {
width: 100%;
height: 210rpx;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
.tui-header__bg {
width: 100%;
height: 120rpx;
position: fixed;
left: 0;
top: 0;
z-index: 3;
overflow: hidden;
}
.tui-bg__img {
width: 100%;
height: 210rpx;
display: block;
transition: opacity 0.1s linear;
}
.tui-body {
width: 100%;
position: relative;
margin-top: 120rpx;
z-index: 2;
padding: 0 25rpx;
box-sizing: border-box;
}
.tui-time-slot {
width: 100%;
height: 120rpx;
position: absolute;
left: 0;
top: 0;
}
.tui-time__list {
min-width: 100%;
height: 120rpx;
display: flex;
align-items: center;
}
.tui-flex__between {
justify-content: space-between;
}
.tui-time__item {
flex-shrink: 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: #ffb2b2;
}
.tui-flex__1 {
flex: 1 !important;
}
.tui-width__min {
min-width: 150rpx;
}
.tui-time {
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
.tui-status {
font-size: 24rpx;
line-height: 24rpx;
font-weight: 500;
padding-top: 16rpx;
}
.tui-time__active .tui-time {
color: #fff;
font-size: 36rpx;
line-height: 36rpx;
}
.tui-time__active .tui-status {
color: #fff;
font-size: 28rpx;
line-height: 28rpx;
font-weight: bold;
}
.tui-status__box {
width: 100%;
height: 146rpx;
background: #fff;
border-radius: 20rpx;
box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.tui-full__width {
width: 100%;
}
.tui-divider__status {
display: flex;
align-items: center;
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.tui-divider__status image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
flex-shrink: 0;
}
.tui-color__red {
color: #eb0909;
padding-right: 6rpx;
font-size: 32rpx;
font-weight: 500;
}
.tui-countdown__box {
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 24rpx;
font-weight: 400;
margin-top: 16rpx;
}
.tui-countdown__box text {
padding-right: 12rpx;
}
/*======商品列表 start=======*/
.tui-list__goods {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20rpx;
padding-bottom: 30rpx;
}
.tui-goods__left,
.tui-goods__right {
width: 49%;
}
.tui-full__width {
width: 100% !important;
}
/*======商品列表 end=======*/
.tui-goods__item {
width: 100%;
padding: 20rpx 20rpx 36rpx;
box-sizing: border-box;
border-radius: 12rpx;
background-color: #fff;
margin-bottom: 4%;
position: relative;
}
.tui-full__item {
display: flex;
margin-bottom: 20rpx !important;
padding: 20rpx !important;
}
.tui-img__newguest {
position: absolute;
width: 96rpx;
height: 32rpx;
left: 0;
top: 8rpx;
}
.tui-image__box {
width: 100%;
height: 300rpx;
}
.tui-full__imgbox {
width: 240rpx !important;
height: 240rpx !important;
margin-right: 20rpx;
}
.tui-goods__img {
max-width: 100%;
max-height: 300rpx;
display: block;
border-radius: 8rpx;
}
.tui-full__img {
max-height: 240rpx !important;
}
.tui-goods__content {
width: 100%;
padding-top: 16rpx;
}
.tui-full__content {
height: 240rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 0 !important;
}
.tui-goods__title {
font-size: 26rpx;
font-weight: 400;
color: #333;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 20rpx;
}
.tui-tag__box {
display: flex;
padding-top: 25rpx;
padding-bottom: 25rpx;
}
.tui-box__bottom {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.tui-price__box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tui-price {
display: flex;
align-items: flex-end;
color: #eb0909;
}
.tui-price__small {
font-size: 24rpx;
line-height: 24rpx;
}
.tui-price__large {
font-size: 34rpx;
line-height: 32rpx;
font-weight: 600;
}
.tui-price__original {
font-size: 24rpx;
line-height: 24rpx;
text-decoration: line-through;
color: #999;
padding-top: 10rpx;
}
</style>