<template>
|
<!-- <view style="text-align: center;">
|
<scroll-view id="tab-bar" class="scroll-h" scroll-x="true" show-scrollbar="false"
|
:scroll-into-view="'id'+scrollInto">
|
<view v-for="(item, index) in lists" class="uni-tab-item " :id="'id'+item" :data-current="index"
|
:class="item<TabCur?'passed':item>TabCur?'willcome':'doing'" :data-index="index"
|
@click="TabClick(item)">
|
{{item}}:00
|
<view :class="item==TabCur?'textClick':'textunClick'">
|
{{
|
item<curHour?'已开抢':item>curHour?'即将开始':'疯抢中'
|
}}
|
</view>
|
</view>
|
|
</scroll-view>
|
</view> -->
|
|
<scroll-view class="scroll-v list" lower-threshold='180' enableBackToTop="true" scroll-y='true'
|
@scrolltolower="loadMore()">
|
<view class="goodCards">
|
<view style="margin: 12rpx;" v-for="(item2,index) in goodsList" :key="item2.goodsId">
|
<view class="card">
|
<view class="cardImg">
|
<image style="width: 100%;height: 100%;" :src='item2?.mainPic' alt="" />
|
</view>
|
<view class="cardDetail">
|
<view class="cardTitle">
|
{{item2.dtitle}}
|
</view>
|
<view class="cardTip">
|
{{item2.tip}}
|
</view>
|
<view class="cardCoupon">
|
<text
|
style="background-color: white;color: #ff5351;margin-right: 12rpx;padding: 0 8rpx;">券</text>{{item2.couponPrice}}元
|
</view>
|
<view class="cardBottom">
|
<view class="cardBottom_left">
|
<view class="cardBottom_price">
|
￥{{item2.actualPrice}} <text
|
style="text-decoration:line-through;color: gray;">￥{{item2.yprice}}</text>
|
</view>
|
<view class="">
|
<img style="width: 30rpx;height: 30rpx;" src="../../static/homeimg/pinkFire.png"
|
alt="" />
|
|
已抢<text style="color: #ff5351;">{{getNumData(item2.monthsale)}}+</text> 件
|
</view>
|
</view>
|
<view class="cardBottom_right" @click="gotogoodDetail(1,item2.goodsId)">
|
马上抢
|
</view>
|
<!-- <view class="cardBottom_right2" v-if='TabCur>curHour'>
|
即将开枪
|
</view> -->
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
<view class="loading-more">
|
<text class="loading-more-text" v-if="nodata">暂无数据~</text>
|
<text class="loading-more-text" v-else-if="nomore">已经到底啦~</text>
|
<text class="loading-more-text" v-else-if="loadingMore&&!nomore">加载更多...</text>
|
<text class="loading-more-text" v-else-if="loadingMore==false&&!nomore">加载中...</text>
|
</view>
|
</scroll-view>
|
</template>
|
|
<script>
|
import {
|
getNumData,
|
} from "../../common/util.js"
|
export default {
|
|
data() {
|
return {
|
getNumData,
|
scrollInto: '',
|
newsList: [],
|
list: [],
|
title: 'Hello',
|
TabCur: 9,
|
Cur: 0,
|
loadingMore: true,
|
lists: [9, 12, 15, 17, 20],
|
goodsList: [],
|
curHour: 9,
|
currentGoodsPage: 1,
|
loadingMore: true,
|
nomore: false,
|
nodata: false,
|
}
|
},
|
created() {
|
this.GetExplosiveGoodsList(1)
|
},
|
onLoad(option) {
|
let now = new Date()
|
let curH = now.getHours()
|
this.curHour = curH
|
let index = this.lists.findIndex(i => {
|
return i > curH
|
})
|
this.TabCur = this.lists[index]
|
this.Cur = index
|
// uni.setNavigationBarTitle({
|
// title: option.title
|
// });
|
},
|
onShareAppMessage: function() {
|
return {
|
title: '淘券获取',
|
path:' /pages/index/index',
|
// promise
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '淘券获取',
|
query: '/pages/index/index',
|
}
|
},
|
methods: {
|
|
GetExplosiveGoodsList(cur) {
|
// debugger
|
let me = this
|
uni.request({
|
url: 'https://h.ushopvip.com/api/TkProduct/GetExplosiveGoodsList',
|
method: 'POST',
|
data: {
|
pageNo: cur,
|
pageSize: 100,
|
hasCoupon: true,
|
},
|
success(res) {
|
if (res.data?.success) {
|
me.nodata = false
|
if (res.data.result.length < 100) {
|
me.nomore = true
|
}
|
if (cur === 1) {
|
me.goodsList = res.data.result
|
me.currentGoodsPage = cur
|
me.loadingMore = true
|
|
} else {
|
let data = me.goodsList
|
me.goodsList = data.concat(res.data.result)
|
me.currentGoodsPage = cur
|
me.loadingMore = true
|
}
|
|
} else {
|
if (cur === 1) {
|
me.nodata = true
|
|
} else {
|
me.nodata = false
|
}
|
}
|
|
},
|
fail(err) {
|
console.log('获取openid失败：', err);
|
}
|
})
|
},
|
gotogoodDetail(type, id) {
|
//商品详情
|
if (type == 1) {
|
uni.navigateTo({
|
url: '/pages/goodDetail/index?id=' + id
|
})
|
}
|
|
},
|
TabClick(id) {
|
|
for (let i = 0; i < this.lists.length; ++i) {
|
if (id === this.lists[i]) {
|
// debugger
|
this.TabCur = this.lists[i]
|
this.Cur = i
|
this.scrollInto = this.lists[i]
|
}
|
}
|
},
|
|
loadMore() {
|
|
this.loadingMore = false
|
this.GetExplosiveGoodsList(this.currentGoodsPage + 1)
|
|
},
|
|
switchTab(e) {
|
let cur = e.target.current
|
for (let i = 0; i < this.lists.length; ++i) {
|
if (cur === i) {
|
this.TabCur = this.lists[i]
|
this.Cur = i
|
this.scrollInto = this.lists[i]
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.scroll-h {
|
/* width: 750rpx; */
|
width: 100%;
|
height: 106rpx;
|
font-size: 14px;
|
flex-direction: row;
|
white-space: nowrap;
|
}
|
|
.navbarstyle {
|
display: flex;
|
justify-content: space-evenly;
|
flex-direction: row;
|
/* color: #4169e1; */
|
font-size: 14px;
|
}
|
|
.doing {
|
/* color: palevioletred; */
|
/* border-bottom: 2px solid #f92a54; */
|
color: #f92a54;
|
/* font-weight: 600; */
|
padding: 14px 6px 6px 6px;
|
}
|
|
.willcome {
|
padding: 14px 6px 6px 6px;
|
}
|
|
.passed {
|
padding: 14px 6px 6px 6px;
|
}
|
|
.textClick {
|
background: linear-gradient(90deg, #ff2c76, #ff3f3e);
|
color: white;
|
border-radius: 24rpx;
|
padding: 0 12rpx;
|
font-size: 24rpx;
|
}
|
|
.textunClick {
|
border-radius: 24rpx;
|
padding: 0 12rpx;
|
font-size: 24rpx;
|
}
|
|
.swiperall {
|
height: calc(100vh - 100rpx);
|
/* flex: 1; */
|
}
|
|
.swiper-item {
|
/* flex: 1; */
|
/* flex-direction: row; */
|
height: 95vh;
|
overflow: auto;
|
}
|
|
.title {
|
width: 60px;
|
font-size: 12px;
|
text-align: center;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
line-height: 20px;
|
}
|
|
.speendItem {
|
width: 20%;
|
padding: 0 5px;
|
box-sizing: border-box;
|
height: 75px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.speed {
|
font-size: 12px;
|
margin-top: 15px;
|
padding-left: 5px;
|
padding-right: 5px;
|
padding-bottom: 17px;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
height: auto;
|
}
|
|
|
.indexBody {
|
box-sizing: border-box;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
position: relative;
|
/* padding-bottom: 20px; */
|
}
|
|
.swiper {
|
height: 220px;
|
background-color: #f5f5f5;
|
}
|
|
.goodCards {
|
display: flex;
|
flex-direction: column;
|
flex-wrap: wrap;
|
background-color: #f5f5f5;
|
padding-bottom: 20px;
|
padding: 12rpx;
|
}
|
|
.card {
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
background-color: white;
|
padding: 12rpx 0;
|
border-radius: 12rpx;
|
}
|
|
.cardImg {
|
padding: 12px 0 0 12px;
|
height: 180rpx;
|
width: 180rpx;
|
}
|
|
.cardTitle {
|
background-color: white;
|
/* margin-left: 12px; */
|
font-size: 28rpx;
|
overflow: hidden;
|
font-weight: 600;
|
/* text-overflow: ellipsis; */
|
/* white-space: nowrap; */
|
}
|
|
.cardTip {
|
color: #ff3f3e;
|
font-size: 24rpx;
|
}
|
|
.cardDetail {
|
background-color: white;
|
margin-left: 12px;
|
font-size: 14px;
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
/* color: #eb0000; */
|
}
|
|
.cardCoupon {
|
background: linear-gradient(90deg, #ff8873, #ff4f4f);
|
padding: 6rpx;
|
width: 120rpx;
|
color: white;
|
border-radius: 8rpx;
|
font-size: 20rpx;
|
}
|
|
.cardBottom {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-direction: row;
|
}
|
|
.cardBottom_price {
|
color: #fe3738;
|
}
|
|
.cardCount {
|
color: gray;
|
}
|
|
.cardBottom_right {
|
background: linear-gradient(90deg, #ff2c76, #ff3f3e);
|
color: white;
|
margin-right: 24rpx;
|
padding: 6rpx 24rpx;
|
border-radius: 12rpx;
|
}
|
|
.cardBottom_right2 {
|
background: linear-gradient(90deg, #2eb751, #3bae59);
|
color: white;
|
margin-right: 24rpx;
|
padding: 6rpx 24rpx;
|
border-radius: 12rpx;
|
}
|
|
.loading-more {
|
align-items: center;
|
justify-content: center;
|
padding-top: 10px;
|
padding-bottom: 10px;
|
text-align: center;
|
}
|
|
.loading-more-text {
|
font-size: 28rpx;
|
color: #999;
|
}
|
|
.scroll-v {
|
height: 100vh;
|
flex: 1;
|
/* #ifndef MP-ALIPAY */
|
flex-direction: column;
|
/* #endif */
|
width: 100%;
|
}
|
|
.uni-tab-item {
|
/* #ifndef APP-PLUS */
|
display: inline-block;
|
/* #endif */
|
flex-wrap: nowrap;
|
padding-left: 34rpx;
|
padding-right: 34rpx;
|
}
|
</style>
|
