<template>
|
<view class="hotSale-wrapper wrapperLayer">
|
<titleBar :titleText='"限时秒杀"'></titleBar>
|
<view class="fixed-navbar-container">
|
<view class="topbarbox"></view>
|
<scroll-view class="nav-scroll" scroll-x scroll-with-animation>
|
<block v-for="(items,index) in navList" :key='index'>
|
<view class="nav-items-content" @tap="navTap(index)">
|
<view class="flex-content colCenCen" :class="navCurrent==index?'nav-active':''">
|
<view class="nav-maintit">
|
{{index==0?'热抢中':items.startTimeStr}}
|
</view>
|
<view class="nav-subtit rowCenCen">
|
<view>{{index==0?hour+ ':' + minutes + ':' +secondtrue:items.tomorrow==0?'即将开抢':'明日开抢'}}</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
</scroll-view>
|
</view>
|
|
<view class="pageContent-container borderBox">
|
<view class="goods-list-content colCen">
|
<block v-for="(items,index) in goodsList" :key='index'>
|
<view class="goods-items colCen borderBox" @tap="goDetails(items)">
|
<view class="items-title">
|
{{items.seckillShopDealInfoVO.shopName}}
|
</view>
|
<view class="syns-bar rowCenBet">
|
<view class="left-star-content rowCen">
|
<view class="avgScore-text">
|
{{items.seckillShopDealInfoVO.avgScore}}
|
</view>
|
<block v-for="(star,index) in 5" :key="index" >
|
<image class="star" v-if="(index+1)<(items.seckillShopDealInfoVO.avgScore) || (index+1)==(items.seckillShopDealInfoVO.avgScore)" src="../../static/images/community/redStar.png" mode=""></image>
|
<image class="star" v-else-if="(index+1)>(items.seckillShopDealInfoVO.avgScore) && (index+1 - (items.seckillShopDealInfoVO.avgScore)<0.5)" src="../../static/images/community/harfstar.png" mode=""></image>
|
<image class="star" v-else src="../../static/images/community/empstar.png" mode=""></image>
|
</block>
|
</view>
|
<view class="right-distance rowCen">
|
{{items.seckillShopDealInfoVO.bareaName}} {{items.seckillShopDealInfoVO.distance}}m
|
</view>
|
</view>
|
|
<view class="foods-bar-content rowCen">
|
<view class="picContent">
|
<image class="itms-pic" :src="items.seckillShopDealInfoVO.dealList[0].imgUrl" mode="aspectFill" lazy-load></image>
|
</view>
|
<view class="dealInfo">
|
<view class="deal-title">
|
{{items.seckillShopDealInfoVO.dealList[0].title}}
|
</view>
|
|
<view class="coupons-back-bar rowCen" v-if="items.apiCouponInfoVO.discountPrice != 0">
|
<view class="coupons-box rowCenCen">
|
券￥{{items.apiCouponInfoVO.discountPrice/100}}
|
</view>
|
</view>
|
|
<view class="progressbar">
|
<view class="progress-relative rowCen">
|
<view class="text-tips">
|
正在疯抢 已抢{{items.seckillShopDealInfoVO.dealList[0].campaignConsume}}件
|
</view>
|
<view class="progess-abs" :style="'width:'+items.seckillShopDealInfoVO.dealList[0].soldPercent+'%;'"></view>
|
</view>
|
</view>
|
|
<view class="botm-price-content rowCenBet">
|
<view class="leftPrice-area rowCen">
|
<view class="rmb">
|
￥
|
</view>
|
<view class="truePrice">
|
{{items.seckillShopDealInfoVO.dealList[0].finalPrice/100}}
|
</view>
|
<view class="org-price">
|
￥{{items.seckillShopDealInfoVO.dealList[0].marketPrice/100}}
|
</view>
|
</view>
|
|
<view class="btn-content rowCenCen">
|
<view>马上抢</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
<aLoadMore :status="loadstatus" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import titleBar from '../../components/backTitlebar.vue'
|
export default {
|
components: {
|
titleBar
|
},
|
data() {
|
return {
|
navCurrent: 0,
|
navList: [],
|
showId: '',
|
type: '',
|
cityId: '',
|
locationInfo:'',
|
|
goodsList: [],
|
pageNumber: 1,
|
canload: false,
|
loadstatus: 'loading',
|
|
leftTime:'',
|
timer: null,
|
hour: '',
|
minutes: '',
|
secondtrue: ''
|
}
|
},
|
onLoad() {
|
this.cityId = uni.getStorageSync('cityInfo').value
|
this.locationInfo = uni.getStorageSync('locationInfo')
|
this.getNavList()
|
},
|
watch: {
|
leftTime(nval) {
|
if(nval<1){
|
this.getNavList()
|
clearInterval(this.timer)
|
}else{
|
this.handlecount();
|
this.$nextTick(() => {
|
// this.addzero();
|
});
|
}
|
}
|
},
|
onReachBottom() {
|
if (this.canload) {
|
this.getGoodslist()
|
}
|
},
|
onPullDownRefresh() {
|
this.getNavList()
|
},
|
methods: {
|
getNavList() {
|
var that = this;
|
this.$u.api.seckillShowinfo({cityId: this.cityId}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
that.navList = res
|
var timestamp = Date.parse(new Date());
|
that.leftTime = (that.navList[0].endTime - timestamp) / 1000
|
|
that.timer = setInterval(() => {
|
that.leftTime--
|
}, 1000)
|
|
console.log(that.navList);
|
that.showId = res[that.navCurrent].showId
|
that.getGoodslist()
|
}).catch(function (err) {
|
})
|
},
|
|
addzero() {
|
if (this.minutes < 10) {
|
this.minutes = '0' + this.minutes;
|
}
|
if (this.hour < 10) {
|
this.hour = '0' + this.hour;
|
}
|
if (this.secondtrue < 10) {
|
this.secondtrue = '0' + this.secondtrue;
|
}
|
},
|
|
handlecount() {
|
if (this.leftTime < 3600) {
|
this.hour = 0;
|
if (this.leftTime < 60) {
|
this.minutes = 0;
|
this.secondtrue = this.leftTime;
|
} else {
|
this.minutes = Math.floor(this.leftTime / 60);
|
this.secondtrue = this.leftTime - this.minutes * 60;
|
}
|
} else {
|
this.hour = Math.floor(this.leftTime / 3600);
|
if (this.leftTime - this.hour * 3600 < 60) {
|
this.minutes = 0;
|
this.secondtrue = this.leftTime - this.hour * 3600;
|
} else {
|
this.minutes = Math.floor((this.leftTime - this.hour * 3600) / 60);
|
this.secondtrue = this.leftTime - this.hour * 3600 - this.minutes * 60;
|
}
|
}
|
},
|
|
navTap(idx) {
|
if (this.navCurrent != idx) {
|
this.canload = false
|
this.loadstatus = 'loading'
|
this.pageNumber = 1
|
this.goodsList = []
|
this.navCurrent = idx
|
this.showId = this.navList[idx].showId
|
this.getGoodslist()
|
}
|
},
|
getGoodslist() {
|
var that = this;
|
console.log({
|
cityId:this.cityId,
|
page: this.pageNumber,
|
showId: this.showId,
|
lng:this.locationInfo.longitude,
|
lat:this.locationInfo.latitude
|
})
|
this.$u.api.seckillList({
|
cityId:this.cityId,
|
page: this.pageNumber,
|
showId: this.showId,
|
lng:this.locationInfo.longitude,
|
lat:this.locationInfo.latitude
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
uni.stopPullDownRefresh()
|
if (res.length < 20) {
|
that.canload = false
|
that.loadstatus = 'nomore'
|
} else {
|
that.canload = true
|
that.pageNumber++
|
that.loadstatus = 'loading'
|
}
|
that.goodsList = that.goodsList.concat(res)
|
}).catch(function (err) {
|
})
|
},
|
goDetails(item) {
|
console.log(item);
|
// 1拉起微信小程序 0 不拉
|
var isAppletJump = getApp().globalData.appinfo.isAppletJump;
|
if(isAppletJump){
|
plus.share.getServices(function(res) {
|
var sweixin = null;
|
for (var i = 0; i < res.length; i++) {
|
var t = res[i];
|
if (t.id == 'weixin') {
|
sweixin = t;
|
}
|
}
|
if (sweixin) {
|
sweixin.launchMiniProgram({
|
id: 'gh_870576f3c6f9',
|
type: 0, //0 正式 1 测试 2 体验 小程序的版本
|
path: item.seckillShopDealInfoVO.dealList[0].miniProgramUrl //这里你要跳的路径，可以传值
|
});
|
}
|
}, function(res) {
|
console.log(JSON.stringify(res));
|
});
|
}else{
|
uni.navigateTo({
|
url: '../webView/webView?url=' + encodeURIComponent(item.seckillShopDealInfoVO.dealList[0].couponPageUrl)
|
})
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.hotSale-wrapper {
|
width: 100%;
|
|
.fixed-navbar-container {
|
width: 100%;
|
height: 108rpx;
|
position: fixed;
|
top: 90rpx;
|
left: 0;
|
z-index: 20;
|
|
.nav-scroll {
|
width: 100%;
|
height: 100%;
|
background: #FFFFFF;
|
white-space: nowrap;
|
|
.nav-items-content {
|
height: 100%;
|
margin: 0 23rpx;
|
display: inline-block;
|
|
.flex-content {
|
height: 100%;
|
|
.nav-maintit {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.nav-subtit {
|
margin-top: 10rpx;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #999999;
|
height: 34rpx;
|
background: transparent;
|
border-radius: 17rpx;
|
padding: 0 12rpx;
|
}
|
}
|
|
.nav-active {
|
.nav-maintit {
|
color: #FD8200;
|
}
|
|
.nav-subtit {
|
color: #FFFFFF;
|
background: #FD8200;
|
}
|
}
|
}
|
}
|
}
|
|
.pageContent-container {
|
width: 100%;
|
margin-top: 128rpx;
|
padding: 0 26rpx;
|
|
.goods-list-content {
|
width: 100%;
|
|
.goods-items {
|
width: 100%;
|
height: 360rpx;
|
background-color: #FFFFFF;
|
border-radius: 16rpx;
|
padding: 0 20rpx;
|
margin-bottom: 20rpx;
|
|
.items-title {
|
width: 100%;
|
font-weight: bold;
|
color: #222222;
|
font-size: 28rpx;
|
margin-top: 30rpx;
|
}
|
|
.syns-bar{
|
width: 100%;
|
margin-top: 15rpx;
|
.left-star-content{
|
.star{
|
width: 22rpx;
|
height: 22rpx;
|
margin-right: 5rpx;
|
}
|
.avgScore-text{
|
color: #F03636;
|
font-size: 26rpx;
|
font-weight: bold;
|
margin-right: 10rpx;
|
}
|
}
|
|
.right-distance{
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #222222;
|
}
|
}
|
|
.foods-bar-content{
|
width: 100%;
|
margin-top: 35rpx;
|
.picContent{
|
width: 176rpx;
|
height: 176rpx;
|
.itms-pic{
|
width: 176rpx;
|
height: 176rpx;
|
border-radius: 12rpx;
|
}
|
}
|
.dealInfo{
|
width: 440rpx;
|
min-height: 176rpx;
|
margin-left: 20rpx;
|
.deal-title {
|
width: 100%;
|
font-weight: bold;
|
color: #222222;
|
font-size: 28rpx;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
margin-bottom: 15rpx;
|
}
|
|
.coupons-back-bar{
|
width: 100%;
|
margin-bottom: 15rpx;
|
.coupons-box{
|
height: 30rpx;
|
padding: 0 8rpx;
|
border: 1rpx solid #E47B1A;
|
border-radius: 8rpx;
|
font-size: 26rpx;
|
color: #E1962C;
|
font-weight: 500;
|
}
|
}
|
|
.progressbar{
|
width: 100%;
|
margin-bottom: 10rpx;
|
.progress-relative{
|
width: 330rpx;
|
height: 30rpx;
|
border-radius: 15rpx;
|
background-color: #FCCEBE;
|
position: relative;
|
.progess-abs{
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 0;
|
height: 30rpx;
|
border-radius: 15rpx;
|
background-color: #FE5C09;
|
}
|
.text-tips{
|
color: #FFFFFF;
|
z-index: 10;
|
font-size: 22rpx;
|
font-weight: 10rpx;
|
margin-left: 10rpx;
|
}
|
}
|
}
|
|
.botm-price-content{
|
width: 100%;
|
.leftPrice-area{
|
.rmb{
|
font-size: 24rpx;
|
font-weight: 500;
|
color:#DD3320;
|
}
|
.truePrice{
|
font-size: 32rpx;
|
font-weight: bold;
|
color:#DD3320;
|
}
|
.org-price{
|
font-size: 24rpx;
|
font-weight: 500;
|
color:#999999;
|
text-decoration:line-through;
|
margin-left: 20rpx;
|
}
|
}
|
|
.btn-content{
|
width:90rpx;
|
height: 50rpx;
|
border-radius: 8rpx;
|
color: #FFFFFF;
|
font-size: 24rpx;
|
font-weight: 500;
|
background-color: #FF7B00;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
