<template>
|
<div>
|
<view class="flash-sale">
|
<view class="header" :style="'padding-top:' + statusBarTop + 'px;height:'+statusBarHeight+'px'">
|
<view class="header_content">
|
<view v-if="returnShow" class="return iconfont icon-xiangzuo" @click.stop="goback"></view>
|
</view>
|
</view>
|
<view class="topBg"></view>
|
<view class="slideBox" v-if="timeList.length">
|
<swiper indicator-dots="true" autoplay="true" :circular="circular" interval="3000" duration="1500"
|
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
<block v-for="(items,index) in timeList[active].slide" :key="index">
|
<swiper-item>
|
<image :src="items.sattDir" class="slide-image " lazy-load></image>
|
</swiper-item>
|
</block>
|
</swiper>
|
|
</view>
|
<div class="seckillListWrapper">
|
<view class="seckillListBox">
|
<view class="timeList cf" v-if="timeListLen>0">
|
<block v-for="(item,index) in timeList" :key='index'>
|
<view @tap='settimeList(item,index)' class="item"
|
:style="'width:'+(timeListLen<=1?50:100/timeListLen)+'%'" :class="(active == index?' active':'')+(index==0?' first':'')+(index==timeListLen-1&&timeListLen!==1?' last':'')">
|
<block v-if="item.status==2">
|
<view class='time'>正在秒杀</view>
|
<view class="countBox">
|
<countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '"
|
:minute-text="' : '" :second-text="' '" :datatime="item.timeSwap"
|
:is-col="false" :bgColor="bgColor"></countDown>
|
</view>
|
</block>
|
<block v-else>
|
<view class='time'>{{changeTime(item.time)}}</view>
|
<view class="state">即将开抢</view>
|
</block>
|
</view>
|
</block>
|
</view>
|
<view class='list pad20' v-if='seckillList.length>0'>
|
<block v-for="(item,index) in seckillList" :key='index'>
|
<view class='item acea-row row-between-wrapper' @tap='goDetails(item)' :class="timeList[active].status==2?'':'disable'">
|
<view class='pictrue'>
|
<image :src='item.image'></image>
|
</view>
|
<view class='text acea-row row-column-around'>
|
<view class="name line1">{{item.storeProduct.storeName}}</view>
|
<!-- <view class="info line1">{{item.storeProduct.storeInfo}}</view> -->
|
<view class='money'>
|
<view class="price">
|
<text>优惠前</text>
|
<text class="numBox">{{item.storeProduct.payWay==3?'':'¥'}}<text class="num">{{ item.storeProduct.payWay==3?item.maxCareBeanNumber:item.storeProduct.price }}</text>{{item.storeProduct.payWay==3?'悦养豆':''}}</text>
|
</view>
|
<view class="price">
|
<text>会员秒杀价</text>
|
<view class="numBox" v-if="item.storeProduct.payWay==3">
|
<text class="num">{{getUserLvPrice(item)}}</text><text>悦养豆</text>
|
</view>
|
<view class="numBox" v-else-if="item.storeProduct.payWay==2">
|
|
<block>¥<text class="num">{{getUserLvPrice(item)}}</text></block>
|
|
</view>
|
<view class="numBox" style="white-space: normal;" v-else>
|
<text style="display: inline-block;" v-if="item.maxCareBeanNumber>0"><text class="num">{{item.maxCareBeanNumber}}</text>悦养豆</text>
|
<text style="display: inline-block;" v-if="getSelectPrice(item)>0&&item.maxCareBeanNumber>0">+</text>
|
<text style="display: inline-block;" v-if="getSelectPrice(item)>0">¥<text class="num">{{getSelectPrice(item)}}</text></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="itemMask"></view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</div>
|
</view>
|
<view class='noCommodity' v-if="seckillList.length == 0 && (page != 1 || active== 0)">
|
<view class='pictrue'>
|
<image src='https://ossacmall.bluedeer.com.cn/app/static/images/noShopper.png'></image>
|
</view>
|
</view>
|
<home></home>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getSeckillHeaderApi,
|
getSeckillList
|
} from '../../../api/activity.js';
|
import home from '@/components/home/index.vue';
|
import countDown from "@/components/countDown";
|
import BigNumber from 'bignumber.js';
|
let app = getApp();
|
export default {
|
components: {
|
home,
|
countDown
|
},
|
props:{
|
careBeanRate: {
|
type: Number,
|
default: 0
|
},
|
},
|
data() {
|
return {
|
bgColor: {
|
'bgColor': '#FF780D',
|
'Color': '#ffffff',
|
'width': '45rpx',
|
'timeTxtwidth': '27rpx',
|
'isDay': true
|
},
|
circular: true,
|
autoplay: true,
|
topImage: '',
|
seckillList: [],
|
timeList: [],
|
timeListLen: 0,
|
active: 0,
|
scrollLeft: 0,
|
status: 1,
|
page: 1,
|
limit: 4,
|
loading: false,
|
loadend: false,
|
pageloading: false,
|
statusBarTop: 0,
|
statusBarHeight: 0,
|
returnShow: true,
|
navH: '',
|
isPageShow: false
|
}
|
},
|
onLoad(options) {
|
let that = this;
|
var pages = getCurrentPages();
|
this.returnShow = pages.length === 1 ? false : true;
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
that.statusBarTop = menuButtonInfo.top;
|
that.statusBarHeight = menuButtonInfo.height;
|
if (that.$store.getters.careBeanRate) {
|
that.$nextTick(() => {
|
that.$set(that, 'careBeanRate', that.$store.getters.careBeanRate)
|
})
|
}
|
uni.$once('updateCareBeanRate', () => {
|
that.$nextTick(() => {
|
that.$set(that, 'careBeanRate', that.$store.getters.careBeanRate)
|
console.log('get updateCareBeanRate', that.$store.getters.careBeanRate, that
|
.careBeanRate)
|
})
|
});
|
},
|
onHide() {
|
let that = this;
|
if (that.$store.getters.isSystemHide) {
|
console.log('系统事件触发了onshow事件');
|
return false;
|
}
|
this.isPageShow = false;
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
},
|
onShow() {
|
let that = this;
|
if (that.$store.getters.isSystemHide) {
|
console.log('系统事件触发了onshow事件');
|
return false;
|
}
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
that.isPageShow = true;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
console.log('------------------page onShow start-----------------');
|
console.log('route', currPage.route);
|
console.log('options', currPage.options);
|
console.log('------------------page onShow end-----------------');
|
|
if (that.$store.getters.isBelong) {
|
that.belongInfoReadyFn({
|
isRegister: false
|
})
|
} else {
|
uni.$once('BELONG_READY', that.belongInfoReadyFn);
|
}
|
},
|
methods: {
|
getUserLvPrice(item) {
|
let that = this;
|
let number = 0;
|
let storeInfo=item.storeProduct;
|
if (storeInfo.zoneId) {
|
number = storeInfo.zhenXiangPrice;
|
} else if (storeInfo.userLv == 0) {
|
number = storeInfo.puTongPrice;
|
} else if (storeInfo.userLv == 1) {
|
number = storeInfo.changXiangPrice;
|
} else if (storeInfo.userLv == 2) {
|
number = storeInfo.yueXiangPrice;
|
} else {
|
number = storeInfo.zhenXiangPrice;
|
}
|
if (storeInfo.payWay == 3) {
|
return BigNumber(number).toFixed(0);
|
} else {
|
return number;
|
}
|
},
|
getSelectPrice(item) {
|
let price=this.getUserLvPrice(item);
|
let careBeanNumber=item.maxCareBeanNumber;
|
return BigNumber(price).minus(BigNumber(careBeanNumber).div(this.careBeanRate)).toFixed(2);
|
},
|
changeTime(timeStr) {
|
console.log(timeStr);
|
let sTime = timeStr.split(',')[0];
|
let arr = sTime.split(':');
|
arr.pop();
|
return arr.join(':');
|
},
|
belongInfoReadyFn(data) {
|
let that = this;
|
if (!data.isRegister) {
|
that.checkLoginFn();
|
}
|
},
|
checkLoginFn() {
|
console.log('checkLoginFn')
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
that.addTrack('yy_pageView', {
|
pageTitle_var: '秒杀',
|
pagePath_var: currPage.$page.fullPath,
|
pageType_var: '秒杀'
|
});
|
this.getSeckillConfig();
|
},
|
goback() {
|
// #ifdef H5
|
return history.back();
|
// #endif
|
// #ifndef H5
|
return uni.navigateBack({
|
delta: 1,
|
})
|
// #endif
|
},
|
getSeckillConfig: function() {
|
let that = this;
|
getSeckillHeaderApi().then(res => {
|
res.data.map(item => {
|
item.slide = JSON.parse(item.slide)
|
|
})
|
that.timeList = res.data;
|
that.timeListLen = that.timeList.length;
|
|
that.loading=false;
|
that.loadend=false;
|
that.pageloading=false;
|
that.seckillList = [];
|
that.page = 1;
|
that.status = that.timeList[that.active].status;
|
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.active].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
|
});
|
},
|
settimeList: function(item, index) {
|
var that = this;
|
this.active = index
|
|
that.status = that.timeList[that.active].status;
|
that.loadend = false;
|
that.page = 1;
|
that.seckillList = [];
|
// wxh.time(e.currentTarget.dataset.stop, that);
|
that.getSeckillList();
|
},
|
goDetails(item) {
|
if(this.timeList[this.active].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
|
})
|
}
|
},
|
/**
|
* 页面上拉触底事件的处理函数
|
*/
|
onReachBottom: function() {
|
this.getSeckillList();
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F5F5F5 !important;
|
}
|
</style>
|
<style scoped lang="scss">
|
.header {
|
padding-top: 88rpx;
|
height: 64rpx;
|
position: relative;
|
z-index: 3;
|
box-sizing: content-box;
|
background: linear-gradient(to bottom, #ff5e1e, #ff5e1e 20%, #fff1ec);
|
padding-bottom: 30rpx;
|
|
.header_content {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_title.png) center center/auto 60% no-repeat;
|
}
|
|
.return {
|
font-size: 40rpx;
|
position: absolute;
|
left: 32rpx;
|
top: 50%;
|
transform: translate(0, -50%);
|
}
|
}
|
|
.topBg {
|
width: 750rpx;
|
height: 50rpx;
|
margin-top: -1px;
|
box-sizing: content-box;
|
position: relative;
|
background: linear-gradient(to bottom, rgba(255, 241, 236, 1), rgba(255, 241, 236, 0));
|
z-index: 2;
|
}
|
|
.flash-sale .slideBox {
|
width: 100%;
|
height: 750rpx;
|
margin: 0 auto;
|
margin-top: -50rpx;
|
overflow: hidden;
|
|
swiper {
|
height: 750rpx !important;
|
overflow: hidden;
|
}
|
}
|
|
.flash-sale .slideBox image {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
.flash-sale .seckillListWrapper{
|
margin-top: -140rpx;
|
min-height: calc(100vh - 750rpx);
|
position: relative;
|
padding-bottom: 30rpx;
|
z-index: 3;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_bg.png) center top/cover no-repeat;
|
}
|
.flash-sale .seckillListBox {
|
width: 710rpx;
|
margin: 0 auto;
|
border-radius: 30rpx;
|
overflow: hidden;
|
background: linear-gradient(to right, #fee00a 0%, #ff5e1e 100%);
|
}
|
|
.flash-sale .timeList {
|
width: 100%;
|
white-space: nowrap;
|
position: relative;
|
z-index: 2;
|
.countBox {
|
width: max-content;
|
padding-right: 15rpx;
|
margin: 0 auto;
|
position: relative;
|
z-index: 2;
|
}
|
.item {
|
height: 120rpx;
|
text-align: center;
|
box-sizing: border-box;
|
color: #ffffff;
|
display: block;
|
float: left;
|
vertical-align: middle;
|
position: relative;
|
}
|
|
.item .time {
|
font-size: 27rpx;
|
line-height: 34rpx;
|
font-weight: bold;
|
padding-top: 30rpx;
|
position: relative;
|
z-index: 2;
|
}
|
|
.item.active {
|
color: #000000;
|
}
|
.item.active:before{
|
content:'';
|
display: block;
|
position: absolute;
|
left: 0;
|
bottom: -34rpx;
|
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;
|
}
|
.item.active:after{
|
content:'';
|
display: block;
|
position: absolute;
|
padding-right: 50rpx;
|
right: -50rpx;
|
bottom: -34rpx;
|
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;
|
}
|
.item.active.first:before{
|
background-image: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_timeBg2.png)
|
}
|
.item.active.last:after{
|
right: 0;
|
background-image: url(https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_timeBg2.png)
|
}
|
.item.active .time {
|
font-weight: normal;
|
}
|
|
.item .state {
|
font-size: 22rpx;
|
line-height: 34rpx;
|
position: relative;
|
z-index: 2;
|
}
|
}
|
.flash-sale .list{
|
background: linear-gradient(to bottom,#ffeedc 0%,#ffeedc 50rpx,#ffc1a7 100%);
|
border:4rpx solid #ffffff;
|
border-radius: 30rpx;
|
padding-top: 30rpx;
|
.item {
|
height: 213rpx;
|
position: relative;
|
/* width: 710rpx; */
|
margin: 0 auto 20rpx auto;
|
background-color: #fff;
|
border-radius: 38rpx;
|
overflow: hidden;
|
&.disable{
|
.itemMask{
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
background: rgba(0,0,0,.3);
|
}
|
}
|
}
|
|
.item .pictrue {
|
width: 168rpx;
|
height: 168rpx;
|
border-radius: 10rpx;
|
overflow: hidden;
|
position: absolute;
|
left: 20rpx;
|
top: 20rpx;
|
}
|
|
.item .pictrue image {
|
width: 100%;
|
height: 100%;
|
}
|
.item .text{
|
width: 437rpx;
|
position: absolute;
|
left: 210rpx;
|
top: 20rpx;
|
}
|
.item .text .name {
|
width: 100%;
|
font-size: 27rpx;
|
line-height: 34rpx;
|
color: #000000;
|
overflow: hidden;
|
}
|
.item .text .info {
|
width: 100%;
|
font-size: 23rpx;
|
line-height: 34rpx;
|
padding-bottom: 30rpx;
|
color: #979797;
|
overflow: hidden;
|
}
|
.item .text .money {
|
width: 100%;
|
position: relative;
|
height:80rpx;
|
margin-top: 40rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/aseckill_go.png") center top/contain no-repeat;
|
}
|
.item .text .price {
|
width: 400rpx;
|
font-size: 19rpx;
|
padding-top: 13rpx;
|
box-sizing: border-box;
|
text-align: center;
|
line-height: 28rpx;
|
color: #8C8C8C;
|
position: absolute;
|
left: 0;
|
top: -44rpx;
|
white-space: nowrap;
|
text-align: left;
|
.numBox{
|
line-height: 22rpx;
|
}
|
.num{
|
font-weight: bold;
|
font-size: 1.25em;
|
}
|
&:nth-child(2){
|
color: #FF0000;
|
left: 15rpx;
|
top: 0;
|
.numBox{
|
display: block;
|
}
|
}
|
}
|
|
}
|
|
|
.flash-sale .saleBox {
|
width: 100%;
|
height: 298rpx;
|
/* #ifdef MP */
|
height: 300rpx;
|
/* #endif */
|
background: rgba(233, 51, 35, 1);
|
border-radius: 0 0 50rpx 50rpx;
|
}
|
</style>
|
