12 changed files with 12168 additions and 2764 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,199 @@ |
|||||||
|
<template> |
||||||
|
<view class="tui-goods__item" :class="{ 'tui-full__item': isList }" @tap="detail"> |
||||||
|
<view class="tui-image__box" :class="{ 'tui-full__imgbox': isList }"> |
||||||
|
<image class="tui-goods__img" :class="{ 'tui-full__img': isList }" :src="item.image" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="tui-goods__content" :class="{ 'tui-full__content': isList }"> |
||||||
|
<view class="tui-goods__title">{{ item.title || '' }}</view> |
||||||
|
<view class="progress cart-color"> |
||||||
|
<view class="bg-red" :style="{ width: loading ? item.percent + '%' : '' }"></view> |
||||||
|
<view class="piece font-color-red" v-text="'仅剩' + item.stock + '件'"></view> |
||||||
|
</view> |
||||||
|
<view class="tui-tag__box"><tui-tag plain size="24rpx" type="red" padding="8rpx 12rpx">限时价</tui-tag></view> |
||||||
|
<view class="tui-box__bottom"> |
||||||
|
<view class="tui-price__box"> |
||||||
|
<view class="tui-price"> |
||||||
|
<view class="tui-price__small">¥</view> |
||||||
|
<view class="tui-price__large">{{ item.price || '' }}</view> |
||||||
|
<!-- <view class="tui-price__small">.{{ decimalPrice }}</view> --> |
||||||
|
</view> |
||||||
|
<!-- <view class="tui-price__original">¥{{ item.factory || '0.00' }}</view> --> |
||||||
|
</view> |
||||||
|
<view> |
||||||
|
<!-- <tui-button :width="status == 3 ? '146rpx' : '144rpx'" :height="status == 3 ? '60rpx' : '50rpx'" :size="status == 3 ? 26 : 24" :type="status == 1 ? 'gray' : 'danger'" :disabled="status == 1" :plain="status == 3"> |
||||||
|
{{ status | getBtnText(item.subscribe) }} |
||||||
|
</tui-button> --> |
||||||
|
<view class="grab bg-color-red" v-if="item.status === 1 && item.stock > 0" @click="goDetail()">马上抢</view> |
||||||
|
<view class="grab" v-if="item.status === 1 && item.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> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'tGoodsItem', |
||||||
|
props: { |
||||||
|
item: { |
||||||
|
type: Object, |
||||||
|
default() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
}, |
||||||
|
//是否为列表展示 |
||||||
|
isList: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
//status:1-已结束,2-正在进行,3-即将开枪 |
||||||
|
status: { |
||||||
|
type: Number, |
||||||
|
default: 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
getBtnText(status, subscribe) { |
||||||
|
status = status || 1 |
||||||
|
let text = ['活动已结束', '立即抢购', '立即预约'][status - 1] |
||||||
|
if (status == 3 && subscribe) { |
||||||
|
text = '取消预约' |
||||||
|
} |
||||||
|
return text |
||||||
|
}, |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
integerPrice: function() { |
||||||
|
let price = this.item.sale || '0.00' |
||||||
|
if (~price.indexOf('.')) { |
||||||
|
return price.split('.')[0] |
||||||
|
} |
||||||
|
return price |
||||||
|
}, |
||||||
|
decimalPrice: function() { |
||||||
|
let price = this.item.sale || '0.00' |
||||||
|
if (~price.indexOf('.')) { |
||||||
|
return price.split('.')[1] |
||||||
|
} |
||||||
|
return '00' |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// detail() { |
||||||
|
// //项目中应该传id |
||||||
|
// this.tui.href(`../seckillDetail/seckillDetail?status=${this.status}`) |
||||||
|
// }, |
||||||
|
goDetail: function() { |
||||||
|
this.$emit('goDetail', item) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.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> |
@ -1,277 +1,479 @@ |
|||||||
<template> |
<template> |
||||||
<view class="flash-sale" ref="container"> |
<view class="container"> |
||||||
<view class="header" v-if="headerImg"> |
<view class="tui-bg__box"> |
||||||
<image :src="headerImg" /> |
<image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix" :style="{ opacity: opacity }"></image> |
||||||
</view> |
</view> |
||||||
<scroll-view scroll-y="false" scroll-x="true"> |
<view class="tui-header__bg"> |
||||||
<view class="timeScroll"> |
<image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix"></image> |
||||||
<div class="logoPic"> |
<scroll-view class="tui-time-slot" scroll-x> |
||||||
<image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png"></image> |
<view class="tui-time__list" :class="{ 'tui-flex__between': timeList.length < 6 }"> |
||||||
</div> |
<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 v-for="(item, index) in timeList" :key="index"> |
<view class="tui-time">{{ item.time }}</view> |
||||||
<view v-if="active==index" class="timeItem active" @click="setTime(index)"> |
<view class="tui-status">{{ item.state }}</view> |
||||||
<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> |
</view> |
||||||
</view> |
</scroll-view> |
||||||
</scroll-view> |
</view> |
||||||
<view v-for="(item, index) in timeList" :key="index"> |
<view class="tui-body"> |
||||||
<view v-if="active == index"> |
<block v-for="(item, index) in timeList" :key="index"> |
||||||
<!-- <view class="countDown font-color-red acea-row row-center-wrapper"> |
<view class="tui-status__box" v-if="active == index"> |
||||||
<view v-if="item.status === 0" class="activity">活动已结束</view> |
<view class="tui-full__width" v-if="item.status == 0"> |
||||||
<count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '" |
<tui-divider gradual width="80%" backgroundColor="#fff" :height="34"> |
||||||
:secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down> |
<view class="tui-divider__status"> |
||||||
<view v-if="item.status === 2" class="activity">活动即将开始</view> |
<image src="@/static/images/img_seckill.png" mode="widthFix"></image> |
||||||
</view> --> |
<text class="tui-color__red">{{ item.time }}</text> |
||||||
<view class="list"> |
<text>{{ item.state }}</text> |
||||||
<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> |
||||||
<view class="progress cart-color"> |
</tui-divider> |
||||||
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view> |
</view> |
||||||
<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></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="@/static/images/img_seckill.png" mode="widthFix"></image> |
||||||
|
<text class="tui-color__red">{{ item.time }}</text> |
||||||
|
<text>{{ item.state }}</text> |
||||||
</view> |
</view> |
||||||
</view> |
</tui-divider> |
||||||
<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> |
<view class="tui-countdown__box" v-if="item.status == 1"> |
||||||
<view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1"> |
<text>距离{{ item.status == 2 ? '结束还剩' : '开始还有' }}</text> |
||||||
<view class="noPictrue"> |
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="datatime / 1000"></count-down> |
||||||
<image src="@/static/images/noGood.png" class="image" /> |
|
||||||
</view> |
</view> |
||||||
</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" :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" :isList="false" @goDetail="goDetail"></t-goods-item> |
||||||
|
</block> |
||||||
|
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import { |
import { getSeckillConfig, getSeckillList } from '@/api/activity' |
||||||
getSeckillConfig, |
import CountDown from '@/components/CountDown' |
||||||
getSeckillList |
|
||||||
} from "@/api/activity"; |
|
||||||
import CountDown from "@/components/CountDown"; |
|
||||||
// import { Tab, Tabs } from "vant-weapp"; |
|
||||||
import Loading from "@/components/Loading"; |
|
||||||
|
|
||||||
export default { |
// import { Tab, Tabs } from "vant-weapp"; |
||||||
name: "GoodsSeckill", |
import Loading from '@/components/Loading' |
||||||
components: { |
|
||||||
CountDown |
export default { |
||||||
}, |
name: 'GoodsSeckill', |
||||||
props: {}, |
components: { |
||||||
data: function () { |
CountDown, |
||||||
return { |
}, |
||||||
headerImg: "", |
props: {}, |
||||||
timeList: [], |
data: function() { |
||||||
sticky: false, |
return { |
||||||
loading: false, |
headerImg: '', |
||||||
datatime: 0, |
timeList: [], |
||||||
active: 0, |
sticky: false, |
||||||
seckillList: [], |
loading: false, |
||||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
datatime: 0, |
||||||
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成 |
active: 0, |
||||||
page: 1, //页码 |
seckillList: [], |
||||||
limit: 5, //数量 |
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
||||||
title: [] |
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成 |
||||||
}; |
page: 1, //页码 |
||||||
}, |
limit: 5, //数量 |
||||||
mounted: function () { |
title: [], |
||||||
this.mountedStart(); |
opacity: 1, |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted: function() { |
||||||
|
this.mountedStart() |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
!this.loadingList && this.getSeckillList() |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
getStatusText(status) { |
||||||
|
let text = ['活动已结束', '正在疯抢', '即将开抢'][status - 1] |
||||||
|
return text |
||||||
}, |
}, |
||||||
onReachBottom() { |
}, |
||||||
!this.loadingList && this.getSeckillList(); |
methods: { |
||||||
|
changeTime: function(index) { |
||||||
|
this.active = index |
||||||
|
this.getSeckillList() |
||||||
}, |
}, |
||||||
methods: { |
mountedStart: function() { |
||||||
changeTime: function (index) { |
var that = this |
||||||
this.active = index; |
uni.showLoading() |
||||||
this.getSeckillList(); |
getSeckillConfig().then(res => { |
||||||
}, |
that.$set(that, 'headerImg', res.data.lovely) |
||||||
mountedStart: function () { |
that.$set(that, 'timeList', res.data.seckillTime) |
||||||
var that = this; |
that.$set(that, 'active', res.data.seckillTimeIndex) |
||||||
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 = []; |
let title = [] |
||||||
title = res.data.seckillTime.map((item, index) => { |
title = res.data.seckillTime.map((item, index) => { |
||||||
return { |
return { |
||||||
name: "div", |
name: 'div', |
||||||
attrs: { |
attrs: { |
||||||
class: "timeItem" |
class: 'timeItem', |
||||||
}, |
}, |
||||||
children: [{ |
children: [ |
||||||
name: "div", |
{ |
||||||
attrs: { |
name: 'div', |
||||||
class: "time" |
attrs: { |
||||||
|
class: 'time', |
||||||
|
}, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
type: 'text', |
||||||
|
text: item.time, |
||||||
}, |
}, |
||||||
children: [{ |
], |
||||||
type: "text", |
}, |
||||||
text: item.time |
{ |
||||||
}] |
name: 'div', |
||||||
|
attrs: { |
||||||
|
class: 'state', |
||||||
}, |
}, |
||||||
{ |
children: [ |
||||||
name: "div", |
{ |
||||||
attrs: { |
type: 'text', |
||||||
class: "state" |
text: item.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 |
|
||||||
} |
} |
||||||
}); |
}) |
||||||
|
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: item.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> |
</script> |
||||||
<style scoped lang="less"> |
<style scoped lang="less"> |
||||||
.flash-sale { |
.tui-bg__box { |
||||||
background: #f5f5f5 !important; |
width: 100%; |
||||||
height: 100%; |
height: 210rpx; |
||||||
} |
position: fixed; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
.timeScroll { |
.tui-header__bg { |
||||||
display: flex; |
width: 100%; |
||||||
align-items: center; |
height: 120rpx; |
||||||
flex-direction: row; |
position: fixed; |
||||||
} |
left: 0; |
||||||
|
top: 0; |
||||||
|
z-index: 3; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
.list { |
.tui-bg__img { |
||||||
padding: 0 20rpx; |
width: 100%; |
||||||
|
height: 210rpx; |
||||||
|
display: block; |
||||||
|
transition: opacity 0.1s linear; |
||||||
|
} |
||||||
|
|
||||||
.item { |
.tui-body { |
||||||
padding: .25*100rpx; |
width: 100%; |
||||||
border-bottom: 1px solid #f0f0f0; |
position: relative; |
||||||
height: auto; |
margin-top: 120rpx; |
||||||
position: relative; |
z-index: 2; |
||||||
background: #fff; |
padding: 0 25rpx; |
||||||
margin-bottom: .2*100rpx; |
box-sizing: border-box; |
||||||
border-radius: .2*100rpx; |
} |
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.logoPic { |
.tui-time-slot { |
||||||
width: 75rpx; |
width: 100%; |
||||||
height: 70rpx; |
height: 120rpx; |
||||||
margin-left: 20rpx; |
position: absolute; |
||||||
margin-right: 20rpx; |
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
image { |
.tui-time__list { |
||||||
width: 75rpx; |
min-width: 100%; |
||||||
height: 70rpx; |
height: 120rpx; |
||||||
} |
display: flex; |
||||||
} |
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
.timeItem { |
.tui-flex__between { |
||||||
font-size: 0.22 * 100rpx; |
justify-content: space-between; |
||||||
color: #282828; |
} |
||||||
width: 150rpx; |
|
||||||
text-align: center; |
|
||||||
padding: 20rpx 0; |
|
||||||
background-color: none; |
|
||||||
|
|
||||||
&.active { |
.tui-time__item { |
||||||
.time { |
flex-shrink: 0; |
||||||
color: #eb3729; |
display: flex; |
||||||
} |
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
color: #ffb2b2; |
||||||
|
} |
||||||
|
|
||||||
.state { |
.tui-flex__1 { |
||||||
background: linear-gradient(90deg, #00c17b, #00c17b); |
flex: 1 !important; |
||||||
color: #fff; |
} |
||||||
opacity: 1; |
|
||||||
border-radius: 30rpx; |
.tui-width__min { |
||||||
padding: 0 0.2 * 100rpx; |
min-width: 150rpx; |
||||||
font-weight: 800; |
} |
||||||
height: 0.37 * 100rpx; |
|
||||||
line-height: 0.37 * 100rpx; |
.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; |
||||||
|
} |
||||||
|
|
||||||
.timeItem .time { |
.tui-goods__left, |
||||||
font-size: 0.32 * 100rpx; |
.tui-goods__right { |
||||||
font-weight: bold; |
width: 49%; |
||||||
height: .5 * 100rpx; |
} |
||||||
line-height: .5 * 100rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.timeItem .state { |
.tui-full__width { |
||||||
height: 0.37 * 100rpx; |
width: 100% !important; |
||||||
line-height: 0.37 * 100rpx; |
} |
||||||
} |
|
||||||
|
|
||||||
.activity { |
/*======商品列表 end=======*/ |
||||||
color: #333; |
|
||||||
} |
|
||||||
|
|
||||||
.flash-sale .list .item .grab { |
.tui-goods__item { |
||||||
background-color: #999; |
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> |
</style> |
||||||
|
@ -0,0 +1,278 @@ |
|||||||
|
<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="@/static/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> |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 936 B |
Loading…
Reference in new issue