|
|
|
|
@ -5,24 +5,36 @@
|
|
|
|
|
</view> |
|
|
|
|
<scroll-view scroll-y="false" scroll-x="true"> |
|
|
|
|
<view class="timeScroll"> |
|
|
|
|
<view class="" v-for="(item, index) in timeList" :key="index"> |
|
|
|
|
<view :class="{'timeItem':true,'active':active==index}" @click="changeTime(index)"> |
|
|
|
|
<view class v-for="(item, index) in timeList" :key="index"> |
|
|
|
|
<view :class="{'timeItem':true,'active':active==index}" @click="setTime(index)"> |
|
|
|
|
<view class="time">{{ item.time }}</view> |
|
|
|
|
<view class="state">{{ item.state }}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
<view class="" v-for="(item, index) in timeList" :key="index"> |
|
|
|
|
<view class 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 :is-day="false" :tip-text="'距结束仅剩 '" :day-text="''" :hour-text="' : '" :minute-text="' : '" |
|
|
|
|
:second-text="''" :datatime="datatime" v-if="item.status === 1"></count-down> |
|
|
|
|
<count-down |
|
|
|
|
:is-day="false" |
|
|
|
|
:tip-text="'距结束仅剩 '" |
|
|
|
|
:day-text="''" |
|
|
|
|
:hour-text="' : '" |
|
|
|
|
:minute-text="' : '" |
|
|
|
|
:second-text="''" |
|
|
|
|
: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="item acea-row row-between-wrapper" |
|
|
|
|
v-for="(itemSeckill, indexSeckill) in seckillList" |
|
|
|
|
:key="indexSeckill" |
|
|
|
|
> |
|
|
|
|
<view class="pictrue"> |
|
|
|
|
<image :src="itemSeckill.image" /> |
|
|
|
|
</view> |
|
|
|
|
@ -37,13 +49,21 @@
|
|
|
|
|
<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)">马上抢</view> |
|
|
|
|
<view |
|
|
|
|
class="grab bg-color-red" |
|
|
|
|
v-if="item.status === 1 && itemSeckill.stock > 0" |
|
|
|
|
@click="goDetail(itemSeckill.id)" |
|
|
|
|
>马上抢</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> |
|
|
|
|
</view> |
|
|
|
|
<view class="noCommodity" style="background-color: #fff;" v-if="seckillList.length === 0 && page > 1"> |
|
|
|
|
<view |
|
|
|
|
class="noCommodity" |
|
|
|
|
style="background-color: #fff;" |
|
|
|
|
v-if="seckillList.length === 0 && page > 1" |
|
|
|
|
> |
|
|
|
|
<view class="noPictrue"> |
|
|
|
|
<image src="@/static/images/noGood.png" class="image" /> |
|
|
|
|
</view> |
|
|
|
|
@ -55,27 +75,24 @@
|
|
|
|
|
<vant-tab :ellipsis="false" :title="[title[index]]"> |
|
|
|
|
|
|
|
|
|
</vant-tab> |
|
|
|
|
</vant-tabs> --> |
|
|
|
|
</vant-tabs>--> |
|
|
|
|
</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'; |
|
|
|
|
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', |
|
|
|
|
export default { |
|
|
|
|
name: "GoodsSeckill", |
|
|
|
|
components: { |
|
|
|
|
CountDown |
|
|
|
|
}, |
|
|
|
|
props: {}, |
|
|
|
|
data: function() { |
|
|
|
|
return { |
|
|
|
|
headerImg: '', |
|
|
|
|
headerImg: "", |
|
|
|
|
timeList: [], |
|
|
|
|
sticky: false, |
|
|
|
|
loading: false, |
|
|
|
|
@ -86,7 +103,7 @@
|
|
|
|
|
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成 |
|
|
|
|
page: 1, //页码 |
|
|
|
|
limit: 5, //数量 |
|
|
|
|
title: [], |
|
|
|
|
title: [] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
mounted: function() { |
|
|
|
|
@ -97,47 +114,54 @@
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
changeTime: function(index) { |
|
|
|
|
this.active = index |
|
|
|
|
console.log(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); |
|
|
|
|
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', |
|
|
|
|
name: "div", |
|
|
|
|
attrs: { |
|
|
|
|
class: 'timeItem' |
|
|
|
|
class: "timeItem" |
|
|
|
|
}, |
|
|
|
|
children: [{ |
|
|
|
|
name: 'div', |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
name: "div", |
|
|
|
|
attrs: { |
|
|
|
|
class: 'time' |
|
|
|
|
class: "time" |
|
|
|
|
}, |
|
|
|
|
children: [{ |
|
|
|
|
type: 'text', |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
type: "text", |
|
|
|
|
text: item.time |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: 'div', |
|
|
|
|
name: "div", |
|
|
|
|
attrs: { |
|
|
|
|
class: 'state' |
|
|
|
|
class: "state" |
|
|
|
|
}, |
|
|
|
|
children: [{ |
|
|
|
|
type: 'text', |
|
|
|
|
children: [ |
|
|
|
|
{ |
|
|
|
|
type: "text", |
|
|
|
|
text: item.state |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
that.$set(that, 'title', title); |
|
|
|
|
that.$set(that, "title", title); |
|
|
|
|
that.datatime = that.timeList[that.active].stop; |
|
|
|
|
that.getSeckillList(); |
|
|
|
|
that.$nextTick(function() { |
|
|
|
|
@ -146,9 +170,12 @@
|
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
setTime: function(event) { |
|
|
|
|
setTime: function(index) { |
|
|
|
|
var that = this; |
|
|
|
|
that.active = event.mp.detail.index; |
|
|
|
|
that.page = 1; |
|
|
|
|
that.loadingList = false; |
|
|
|
|
that.status = false; |
|
|
|
|
that.active = index; |
|
|
|
|
that.datatime = that.timeList[that.active].stop; |
|
|
|
|
that.getSeckillList(); |
|
|
|
|
}, |
|
|
|
|
@ -171,7 +198,7 @@
|
|
|
|
|
var that = this; |
|
|
|
|
var time = that.timeList[that.active].stop; |
|
|
|
|
this.$yrouter.push({ |
|
|
|
|
path: '/pages/activity/SeckillDetails/index', |
|
|
|
|
path: "/pages/activity/SeckillDetails/index", |
|
|
|
|
query: { |
|
|
|
|
id, |
|
|
|
|
time |
|
|
|
|
@ -179,16 +206,16 @@
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style scoped lang="less"> |
|
|
|
|
.timeScroll { |
|
|
|
|
.timeScroll { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
flex-direction: row; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.timeItem { |
|
|
|
|
.timeItem { |
|
|
|
|
font-size: 0.22 * 100rpx; |
|
|
|
|
color: #282828; |
|
|
|
|
width: 150rpx; |
|
|
|
|
@ -197,9 +224,8 @@
|
|
|
|
|
background-color: none; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
|
|
|
|
|
.time { |
|
|
|
|
color: #00c17b |
|
|
|
|
color: #00c17b; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.state { |
|
|
|
|
@ -207,32 +233,31 @@
|
|
|
|
|
color: #fff; |
|
|
|
|
opacity: 1; |
|
|
|
|
border-radius: 30rpx; |
|
|
|
|
padding: 0 .2*100rpx; |
|
|
|
|
padding: 0 0.2 * 100rpx; |
|
|
|
|
font-weight: 800; |
|
|
|
|
height: .3*100rpx; |
|
|
|
|
line-height: .3*100rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
height: 0.37 * 100rpx; |
|
|
|
|
line-height: 0.37 * 100rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.timeItem .time { |
|
|
|
|
.timeItem .time { |
|
|
|
|
font-size: 0.32 * 100rpx; |
|
|
|
|
font-weight: bold; |
|
|
|
|
height: 0.37 * 100rpx; |
|
|
|
|
line-height: 0.37 * 100rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.timeItem .state { |
|
|
|
|
.timeItem .state { |
|
|
|
|
height: 0.37 * 100rpx; |
|
|
|
|
line-height: 0.37 * 100rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.activity { |
|
|
|
|
.activity { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.flash-sale .list .item .grab { |
|
|
|
|
.flash-sale .list .item .grab { |
|
|
|
|
background-color: #999; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
Gao xiaosong
5 years ago