<template>
|
<!-- 秒杀 -->
|
<view class="seckill" v-if="timeListLen>0">
|
<view class="nextBox cf">
|
<view class="nextItem" v-for="(seItem,seIndex) in timeList" :key="seIndex" :class="activeIndex==seIndex?'active':''"
|
:style="'width:'+(seIndex==0?'60':(40/(timeListLen-1)))+'%'">
|
<block >
|
<text class="time">{{changeTime(seItem.time)}}{{seIndex==0?'场':''}} </text><br>
|
<view class="countBox acea-row row-middle" v-if="seItem.status==2">
|
<countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '"
|
:second-text="' '" :datatime="seItem['timeSwap']" :is-col="false" :bgColor="bgColor"></countDown>
|
</view>
|
<text v-else>即将开抢</text>
|
</block>
|
</view>
|
</view>
|
<navigator url="/pages/activity/goods_seckill/index" hover-class="none" class="more"></navigator>
|
<view class="conter">
|
<scroll-view scroll-x="true" show-scrollbar="false">
|
<view class="itemBox">
|
<view class="item" v-for="(item, index) in seckillList" :key="index" @click="goDetail(item)">
|
<image class="picture" :src="item.storeProduct.image"></image>
|
<view class="name line2">{{item.storeProduct.storeName}}</view>
|
<block v-if="item.storeProduct.payWay==3">
|
<view class="o_price">优惠前：<text class="num">{{ item.maxCareBeanNumber }}</text>悦养豆</view>
|
</block>
|
<block v-else>
|
<view class="o_price">优惠前：¥<text class="num">{{ item.storeProduct.price }}</text></view>
|
</block>
|
<view class="price" v-if="item.storeProduct.payWay==3">
|
<view class="price_inner"><text class="num">{{getUserLvPrice(item.storeProduct)}}</text><text style="display: block;"></text>悦养豆</view>
|
</view>
|
<view class="price" style="white-space: nowrap; vertical-align: middle;" v-else-if="item.storeProduct.payWay==2">
|
<view class="price_inner">
|
<block>¥<text class="num">{{getUserLvPrice(item.storeProduct)}}</text></block>
|
</view>
|
</view>
|
<view class="price" v-else>
|
<view class="price_inner">
|
<block v-if="item.maxCareBeanNumber>0">{{item.maxCareBeanNumber}}<text v-if="!(getSelectPrice(item)>0)" style="display: block;"></text>悦养豆</block>
|
<block v-if="getSelectPrice(item)>0&&item.maxCareBeanNumber>0"><text style="display: block;"></text>+</block>
|
<block v-if="getSelectPrice(item)>0">¥<text class="num">{{getSelectPrice(item)}}</text></block></view>
|
</view>
|
<view class="itemMask" v-if="timeList[activeIndex].status!==2"></view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
let app = getApp();
|
import countDown from "@/components/countDown";
|
import BigNumber from 'bignumber.js';
|
import {
|
getSeckillList,
|
getSeckillHeaderApi
|
} from '@/api/activity.js';
|
export default {
|
name: 'a_seckill',
|
components: {
|
countDown
|
},
|
props:{
|
careBeanRate: {
|
type: Number,
|
default: 0
|
},
|
},
|
data() {
|
return {
|
bgColor: {
|
'bgColor': '#FF0401',
|
'Color': '#ffffff',
|
'width': '42rpx',
|
'timeTxtwidth': '16rpx',
|
'isDay': true
|
},
|
timeList:[],
|
timeListLen:0,
|
seckillList: [], // 秒杀产品列表
|
point: '',
|
datatime: 0,
|
status: 0,
|
hasSeckill:false,
|
activeIndex:0,
|
page: 1,
|
limit: 10,
|
loading: false,
|
loadend: false,
|
pageloading: false,
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
changeTime(timeStr){
|
let sTime=timeStr.split(',')[0];
|
let arr=sTime.split(':');
|
arr.pop();
|
return arr.join(':');
|
},
|
getSeckillIndexTime() {
|
let that = this;
|
getSeckillHeaderApi().then(res => {
|
that.timeList = res.data;
|
that.timeListLen = that.timeList.length;
|
if(that.timeList.length>0){
|
that.loadend=false;
|
that.pageloading=false;
|
that.page=1;
|
that.seckillList=[];
|
that.getSeckillList();
|
}
|
});
|
},
|
getSeckillList: function() {
|
var that = this;
|
var data = {
|
page: that.page,
|
limit: that.limit
|
};
|
if (that.loadend) return;
|
if (that.pageloading) return;
|
this.pageloading = true
|
getSeckillList(that.timeList[that.activeIndex].id, data).then(res => {
|
res.data.list.map(item => {
|
item.storeProduct.userLv = item.userLv
|
|
});
|
var seckillList = res.data.list;
|
var loadend = seckillList.length < that.limit;
|
that.page++;
|
that.seckillList = that.seckillList.concat(seckillList);
|
that.page = that.page;
|
that.pageloading = false;
|
that.loadend = loadend;
|
}).catch(err => {
|
that.pageloading = false
|
});
|
},
|
goDetail(item) {
|
if(this.timeList[this.activeIndex].status!==2){
|
return false;
|
}
|
uni.navigateTo({
|
//url: '/pages/activity/goods_seckill_details/index?id=' + item.id
|
url: '/pages/goods_details/index?id=' + item.storeProduct.id+'&seckillId='+item.id
|
})
|
},
|
getUserLvPrice(item) {
|
let that = this;
|
let number = 0;
|
if (item.zoneId) {
|
number = item.zhenXiangPrice;
|
} else if (item.userLv == 0) {
|
number = item.puTongPrice;
|
} else if (item.userLv == 1) {
|
number = item.changXiangPrice;
|
} else if (item.userLv == 2) {
|
number = item.yueXiangPrice;
|
} else {
|
number = item.zhenXiangPrice;
|
}
|
if (item.payWay == 3) {
|
return BigNumber(number).toFixed(0);
|
} else {
|
return number;
|
}
|
},
|
getSelectPrice(item) {
|
let price=this.getUserLvPrice(item.storeProduct);
|
let careBeanNumber=item.maxCareBeanNumber;
|
return BigNumber(price).minus(BigNumber(careBeanNumber).div(this.careBeanRate)).toFixed(2);
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.seckill {
|
width: 690rpx;
|
height: 390rpx;
|
position: relative;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/index_seckillBg.png") center top/contain no-repeat;
|
margin: 30rpx auto 0 auto;
|
box-sizing: border-box;
|
overflow: hidden;
|
|
.point {
|
width: 190rpx;
|
text-align: center;
|
font-size: 22rpx;
|
line-height: 30rpx;
|
font-weight: bold;
|
position: absolute;
|
left: 150rpx;
|
top: 20rpx;
|
}
|
|
.countBox {
|
position: absolute;
|
left: 150rpx;
|
top: 60rpx;
|
}
|
|
.nextBox {
|
width: 93%;
|
text-align: center;
|
position: absolute;
|
left: 0;
|
top: 0;
|
color: #ffffff;
|
font-size: 23rpx;
|
line-height: 34rpx;
|
justify-content: space-evenly;
|
|
.nextItem {
|
padding-top: 15rpx;
|
position: relative;
|
width: 50%;
|
float: left;
|
.time {
|
font-size: 27rpx;
|
font-weight: bold;
|
}
|
&.active {
|
color: #000000;
|
width: 50%;
|
box-sizing: border-box;
|
padding-left: 100rpx;
|
}
|
// &.active:before{
|
// content:'';
|
// display: block;
|
// position: absolute;
|
// left: 0;
|
// bottom: 0;
|
// width: 51%;
|
// height: 140rpx;
|
// background: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_timeBg.png) left bottom/auto 100% no-repeat;
|
// z-index: 1;
|
// }
|
// &.active:nth-child(1):before{
|
// background-image: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_timeBg2.png)
|
// }
|
// &.active:after{
|
// content:'';
|
// display: block;
|
// position: absolute;
|
// right: 0;
|
// bottom: 0;
|
// width: 51%;
|
// height: 140rpx;
|
// transform: scaleX(-1);
|
// background: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_timeBg.png) left bottom/auto 100% no-repeat;
|
// z-index: 1;
|
// }
|
// &.active:last-child:after{
|
// background-image: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_timeBg2.png)
|
// }
|
}
|
}
|
|
.more {
|
width: 300rpx;
|
height: 100rpx;
|
position: absolute;
|
right: 0;
|
top: 0;
|
}
|
|
.conter {
|
width: 650rpx;
|
position: absolute;
|
left: 20rpx;
|
top: 150rpx;
|
height: 180rpx;
|
.itemBox{
|
width: max-content;
|
}
|
.item {
|
display: inline-block;
|
width: 420rpx;
|
height: 188rpx;
|
margin-right: 20rpx;
|
box-sizing: border-box;
|
padding-left: 195rpx;
|
padding-top: 10rpx;
|
position: relative;
|
border-radius: 10rpx;
|
overflow: hidden;
|
.itemMask{
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
background: rgba(0,0,0,.3);
|
}
|
&:last-child{
|
margin-right: 0;
|
}
|
.picture {
|
width: 168rpx;
|
height: 168rpx;
|
border-radius: 10rpx;
|
overflow: hidden;
|
position: absolute;
|
left: 10rpx;
|
top: 10rpx;
|
}
|
|
.name {
|
width: 210rpx;
|
font-size: 27rpx;
|
line-height: 30rpx;
|
height: 60rpx;
|
overflow: hidden;
|
white-space: normal;
|
}
|
|
.o_price {
|
width: 210rpx;
|
font-size: 19rpx;
|
box-sizing: border-box;
|
line-height: 22rpx;
|
color: #979797;
|
position: absolute;
|
right: 10rpx;
|
bottom: 94rpx;
|
transform: translate(0,50%);
|
.num{
|
font-size: 1.25em;
|
}
|
}
|
|
.price {
|
width: 230rpx;
|
height: 68rpx;
|
font-size: 19rpx;
|
line-height: 1.25em;
|
box-sizing: border-box;
|
font-weight: bold;
|
color: #FF0000;
|
position: absolute;
|
right: 10rpx;
|
bottom: 10rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/index_aseckill_go.png") center top/contain no-repeat;
|
.num{
|
font-size: 1.25em;
|
}
|
.price_inner{
|
width: 180rpx;
|
position: absolute;
|
left: 15rpx;
|
top: 50%;
|
transform: translate(0,-50%);
|
text-align: left;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
