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.

279 lines
7.9 KiB

<template>
<view class="flash-sale" ref="container">
<view class="header" v-if="headerImg">
<image :src="headerImg" />
</view>
<scroll-view scroll-y="false" scroll-x="true">
<view class="timeScroll">
<div class="logoPic">
<image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png"></image>
</div>
<view v-for="(item, index) in timeList" :key="index">
<view v-if="active == index" class="timeItem active" @click="setTime(index)">
<view class="time">{{ item.time }}</view>
<view class="state">{{ item.state }}</view>
</view>
<view v-if="active != index" class="timeItem" @click="setTime(index)">
<view class="time">{{ item.time }}</view>
<view class="state">{{ item.state }}</view>
</view>
</view>
</view>
</scroll-view>
<view v-for="(item, index) in timeList" :key="index">
<view v-if="active == index">
<!-- <view class="countDown font-color-red acea-row row-center-wrapper">
<view v-if="item.status === 0" class="activity">活动已结束</view>
<count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '"
:secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down>
<view v-if="item.status === 2" class="activity">活动即将开始</view>
</view> -->
<view class="list">
<view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList" :key="indexSeckill">
<view class="pictrue">
<image :src="itemSeckill.image" />
</view>
<view class="text acea-row row-column-around">
<view class="line1" v-text="itemSeckill.title"></view>
<view class="money">
限时价
<text class="num font-color-red">{{ itemSeckill.price || '' }}</text>
</view>
<view class="progress cart-color">
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view>
<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
</view>
</view>
<view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0" @click="goDetail(itemSeckill.id, item.status)">马上抢</view>
<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
<view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
<!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 2">即将开始</view> -->
<!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 0">已结束</view> -->
</view>
</view>
<view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1">
<view class="noPictrue">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/noGood.png`" class="image" />
</view>
</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: [],
}
},
mounted: function() {
this.mountedStart()
},
onReachBottom() {
!this.loadingList && this.getSeckillList()
},
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(id, status) {
var that = this
var time = that.timeList[that.active].stop
this.$yrouter.push({
path: '/pages/activity/SeckillDetails/index',
query: {
id,
time,
status,
},
})
},
},
}
</script>
<style scoped lang="less">
.flash-sale {
background: #f5f5f5 !important;
height: 100%;
}
.timeScroll {
display: flex;
align-items: center;
flex-direction: row;
}
.list {
padding: 0 20rpx;
.item {
padding: 0.25 * 100rpx;
border-bottom: 1px solid #f0f0f0;
height: auto;
position: relative;
background: #fff;
margin-bottom: 0.2 * 100rpx;
border-radius: 0.2 * 100rpx;
}
}
.logoPic {
width: 75rpx;
height: 70rpx;
margin-left: 20rpx;
margin-right: 20rpx;
image {
width: 75rpx;
height: 70rpx;
}
}
.timeItem {
font-size: 0.22 * 100rpx;
color: #282828;
width: 150rpx;
text-align: center;
padding: 20rpx 0;
background-color: none;
&.active {
.time {
color: #eb3729;
}
.state {
background: linear-gradient(90deg, #00c17b, #00c17b);
color: #fff;
opacity: 1;
border-radius: 30rpx;
padding: 0 0.2 * 100rpx;
font-weight: 800;
height: 0.37 * 100rpx;
line-height: 0.37 * 100rpx;
}
}
}
.timeItem .time {
font-size: 0.32 * 100rpx;
font-weight: bold;
height: 0.5 * 100rpx;
line-height: 0.5 * 100rpx;
}
.timeItem .state {
height: 0.37 * 100rpx;
line-height: 0.37 * 100rpx;
}
.activity {
color: #333;
}
.flash-sale .list .item .grab {
background-color: #999;
}
</style>