<template>
|
<view v-if="lists?.length>1">
|
<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.id" :key="'key'+item.id"
|
:data-current="index" :class="TabCur==item.id?'textlight':'textan'" :data-index="index"
|
@click="TabClick(item.id)">
|
{{item.name}}
|
<view v-if="title=='整点秒杀'" :class="TabCur==item.id?'textClick':'textunClick'">
|
{{
|
item.status==0?'已开抢':item.status==2?'即将开始':'疯抢中'
|
}}
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<!-- <swiper :class="lists.length>1?'swiperall':'swiperall2'" :current="Cur" @change="switchTab">
|
<swiper-item class="swiper-item" v-for="(item,index) in lists"> -->
|
<scroll-view class="scroll-v list" :class="lists.length>1?'scroll-v':'scroll-v2'" lower-threshold='180'
|
enableBackToTop="true" scroll-y='true' @scrolltolower="loadMore()">
|
<view class="goodCards2" v-if="title=='整点秒杀'">
|
<view style="margin: 12rpx;" v-for="(item2,index) in goodsList" :key="item2.goodsId">
|
<view class="card2">
|
<view class="cardImg2">
|
<image style="width: 100%;height: 100%;" :src='item2?.mainPic' alt="" />
|
</view>
|
<view class="cardDetail2">
|
<view class="cardTitle2">
|
{{item2.dtitle}}
|
</view>
|
<view class="cardTip2">
|
{{item2.tip}}
|
</view>
|
<view class="">
|
<view class="cardCoupon">
|
<view>
|
<text
|
style="color: white;margin-right: 12rpx;padding: 0 8rpx;border-right: 1px dashed;">券</text>{{item2.couponPrice}}元
|
</view>
|
|
</view>
|
</view>
|
|
<view class="cardBottom">
|
<view class="cardBottom_left">
|
<view class="cardBottom_price">
|
￥{{item2.actualPrice}} <text
|
style="text-decoration:line-through;color: gray;">￥{{item2.originalPrice}}</text>
|
</view>
|
<view class="">
|
<image style="width: 30rpx;height: 30rpx;"
|
src="../../../static/homeimg/pinkFire.png" />
|
|
已抢<text style="color: #ff5351;">{{getNumData(item2.monthSales)}}+</text> 件
|
</view>
|
</view>
|
<view class="cardBottom_right" v-if="curstatus!=2"
|
@click="gotogoodDetail(1,item2.goodsId,item2)">
|
马上抢
|
</view>
|
<view class="cardBottom_right2" v-if='curstatus==2'>
|
即将开枪
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="goodCards" v-else>
|
<view class="goodCardLeft">
|
<view v-for="(item,index) in goodsList1" class="card" :key="item.goodsId"
|
@click="gotogoodDetail(1,item.goodsId,item)">
|
<view class="cardImg">
|
<image mode="widthFix" style="width: 100%;" :src='item.mainPic' alt="" />
|
</view>
|
<view style="display: flex;background-color: white;margin-left: 12px;">
|
<view v-if="item.shopType==0||item.shopType==1" style="padding-top: 2px;margin-left: 6px;">
|
<img style="width:16px;height: 16px;"
|
:src="item.shopType==0?'https://img.alicdn.com/imgextra/i4/751308485/O1CN01ppfg8j2CYBRpPtb51_!!751308485.png':'https://img.alicdn.com/imgextra/i4/751308485/O1CN01mKVp3U2CYBRzeHVcG_!!751308485.png'"
|
alt="">
|
</view>
|
<text class="cardTitle">{{item.dtitle}}</text>
|
</view>
|
|
<text class="cardDetail">￥{{item.actualPrice=='0'?item.originalPrice:item.actualPrice}}</text>
|
<view
|
v-if="item.actualPrice!='0'&&(Number(item.originalPrice)-Number(item.actualPrice)>0||(item.couponPrice!==''&&item.couponPrice!=='0'))"
|
style="background-color: white; margin-left: 12px;padding-left: 12rpx;">
|
<view class="topcard_coupon">
|
<view>
|
<text
|
style="color: white;margin-right: 12rpx;padding: 0 8rpx;border-right: 1px dashed;">券</text>{{
|
item.originalPrice?(mathf.subtract(Number(item.originalPrice),Number(item.actualPrice))):item.couponPrice
|
}}元
|
</view>
|
|
</view>
|
</view>
|
<text class="cardCount">已售
|
{{item.allsale?
|
(item.allsale>0?item.allsale:0)
|
:
|
((getNumData(item.monthSales??item.monthsale))+(getNumData(item.monthSales??item.monthsale)>0?'+':''))
|
}}
|
</text>
|
</view>
|
</view>
|
<view class="goodCardRight">
|
<view v-for="(item,index) in goodsList2" class="card" :key="item.goodsId"
|
@click="gotogoodDetail(1,item.goodsId,item)">
|
<view class="cardImg">
|
<image style="width: 100%;height: 100%;" :src='item.mainPic' alt="" />
|
</view>
|
<view style="display: flex;background-color: white;margin-left: 12px;">
|
<view v-if="item.shopType==0||item.shopType==1" style="padding-top: 2px;margin-left: 6px;">
|
<img style="width:16px;height: 16px;"
|
:src="item.shopType==0?'https://img.alicdn.com/imgextra/i4/751308485/O1CN01ppfg8j2CYBRpPtb51_!!751308485.png':'https://img.alicdn.com/imgextra/i4/751308485/O1CN01mKVp3U2CYBRzeHVcG_!!751308485.png'"
|
alt="">
|
</view>
|
<text class="cardTitle">{{item.dtitle}}</text>
|
</view>
|
<text class="cardDetail">￥{{item.actualPrice=='0'?item.originalPrice:item.actualPrice}}</text>
|
<view
|
v-if="item.actualPrice!='0'&&(Number(item.originalPrice)-Number(item.actualPrice)>0||(item.couponPrice!==''&&item.couponPrice!=='0'))"
|
style="background-color: white; margin-left: 12px;padding-left: 12rpx;">
|
<view class="topcard_coupon">
|
<view>
|
<text
|
style="color: white;margin-right: 12rpx;padding: 0 8rpx;border-right: 1px dashed;">券</text>{{
|
item.originalPrice?(mathf.subtract(Number(item.originalPrice),Number(item.actualPrice))):item.couponPrice
|
}}元
|
</view>
|
</view>
|
</view>
|
<text class="cardCount">已售
|
{{item.allsale?item.allsale:(getNumData(item.monthSales??item.monthsale))+(getNumData(item.monthSales??item.monthsale)>0?'+':'')}}
|
</text>
|
</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>
|
<!-- </swiper-item>
|
</swiper> -->
|
</template>
|
|
<script>
|
import {
|
getNumData,
|
mathf,
|
} from "../../../common/util.js"
|
export default {
|
|
data() {
|
return {
|
getNumData,
|
mathf,
|
scrollInto: '',
|
newsList: [],
|
list: [],
|
title: '',
|
TabCur: -1,
|
Cur: 0,
|
loadingMore: true,
|
currentGoodsPage: 1,
|
lists: [],
|
goodsList: [],
|
goodsList1: [],
|
goodsList2: [],
|
nomore: false,
|
nodata: false,
|
curstatus: 1,
|
}
|
},
|
onShareAppMessage: function() {
|
return {
|
title: '淘券获取',
|
path: '/pages/index/index',
|
// promise
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '淘券获取',
|
query: '/pages/index/index',
|
}
|
},
|
onLoad(option) {
|
// console.log(option)
|
// debugger
|
uni.setNavigationBarTitle({
|
title: option.title
|
});
|
this.title = option.title
|
this.setTabbar(option.title)
|
this.GetRankingGoodsList(1, option.title, option.title == '整点秒杀' ? "" : -1)
|
},
|
methods: {
|
|
gotogoodDetail(type, id, record) {
|
//商品详情
|
if (type == 1) {
|
let t = this.title == '京东' ? 2 : this.title == '抖音' ? 3 : this.title == '拼多多' ? 4 : ''
|
uni.navigateTo({
|
url: '/pages/goodDetail/index?id=' + id + '&type=' + t + '&info=' +
|
encodeURIComponent(JSON.stringify(record))
|
})
|
}
|
|
},
|
GetRankingGoodsList(cur, title, id) {
|
let url = ''
|
let param = {
|
pageNo: cur,
|
pageSize: 20,
|
// nineCid: id,
|
}
|
if (title == '9块9包邮') {
|
url = 'https://h.ushopvip.com/api/TkProduct/GetOpGoodsList'
|
param.nineCid = id
|
} else if (title == '折上折') {
|
url = 'https://h.ushopvip.com/api/TkProduct/GetSupperDiscountGoodsList'
|
} else if (title == '每日爆款') {
|
url = 'https://h.ushopvip.com/api/TkProduct/GetExplosiveGoodsList'
|
} else if (title == '整点秒杀') {
|
url = 'https://h.ushopvip.com/api/TkProduct/GetDdqGoodList'
|
param = {
|
roundTime: id
|
}
|
} else if (title == '京东') {
|
url = 'https://h.ushopvip.com/api/TkJdProduct/GetSearchGoodsList'
|
} else if (title == '抖音') {
|
url = 'https://h.ushopvip.com/api/TkTiktokProduct/GetSxSearchGoodsList'
|
} else if (title == '拼多多') {
|
url = 'https://h.ushopvip.com/api/TkPddProduct/GetPddSearchGoodsList'
|
} else if (title == '历史最低') {
|
url = 'https://h.ushopvip.com/api/TkProduct/GetHistoryLowGoodList'
|
} else if (title == '捡漏爆款') {
|
url = 'https://h.ushopvip.com/api/TkProduct/GetHeightCommissionGoodList'
|
}
|
let me = this
|
uni.request({
|
url: url,
|
method: 'POST',
|
data: param,
|
success(res) {
|
if (res.data?.success) {
|
me.nodata = false
|
if (title == '整点秒杀') {
|
|
let data = res.data.result.data.roundsList.map(item => {
|
let date = item.ddqTime.slice(11, 16)
|
if (item.ddqTime == res.data.result.data.ddqTime) {
|
me.curstatus = item.status
|
}
|
return {
|
...item,
|
id: item.ddqTime.replace(' ', ''),
|
name: date
|
}
|
})
|
me.nomore = true;
|
me.lists = data
|
me.TabCur = res.data.result.data.ddqTime.replace(' ', '')
|
if (cur === 1) {
|
me.goodsList = res.data.result.data.goodsList
|
me.currentGoodsPage = cur
|
me.loadingMore = true
|
|
} else {
|
let data = me.goodsList
|
me.goodsList = data.concat(res.data.result.data.goodsList)
|
me.currentGoodsPage = cur
|
me.loadingMore = true
|
}
|
} else {
|
if (res.data.result.length < 20) {
|
me.nomore = true;
|
}
|
let data = res.data.result
|
let data1 = data.filter((i, index) => {
|
return index % 2 == 0
|
})
|
let data2 = data.filter((i, index) => {
|
return index % 2 != 0
|
})
|
// debugger
|
if (cur === 1) {
|
me.goodsList1 = data1
|
me.goodsList2 = data2
|
me.currentGoodsPage = cur
|
me.loadingMore = true
|
|
} else {
|
me.goodsList1 = me.goodsList1.concat(data1)
|
me.goodsList2 = me.goodsList2.concat(data2)
|
// me.goodsList = me.goodsList.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);
|
}
|
})
|
},
|
TabClick(id) {
|
// debugger
|
for (let i = 0; i < this.lists.length; ++i) {
|
if (id === this.lists[i].id) {
|
this.TabCur = id
|
this.Cur = i
|
this.scrollInto = id
|
this.GetRankingGoodsList(1, this.title, this.lists[i]?.ddqTime ?? id)
|
}
|
}
|
},
|
|
loadMore() {
|
if (this.title == '整点秒杀') {
|
this.nomore = true;
|
return;
|
}
|
this.loadingMore = false
|
this.GetRankingGoodsList(this.currentGoodsPage + 1, this.title)
|
},
|
setTabbar(title) {
|
// let data = ''
|
if (title == '9块9包邮') {
|
this.lists = [{
|
id: -1,
|
name: "推荐"
|
},
|
{
|
id: 1,
|
name: "3.9元区"
|
},
|
{
|
id: 2,
|
name: "9.9元区"
|
},
|
{
|
id: 3,
|
name: "19.9元区"
|
}
|
]
|
} else if (title == '折上折') {
|
this.lists = [{
|
id: -1,
|
name: "推荐"
|
}]
|
} else if (title == '每日爆款') {
|
this.lists = [{
|
id: -1,
|
name: "推荐"
|
}]
|
} else if (title == '整点秒杀') {
|
// this.lists = [{
|
// id: -1,
|
// name: "推荐"
|
// }]
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.topcard_coupon {
|
background: rgb(238, 51, 53);
|
padding: 6rpx 12rpx 6rpx 6rpx;
|
/* width: 120rpx; */
|
color: white;
|
border-radius: 8rpx;
|
font-size: 22rpx;
|
display: inline-block;
|
}
|
|
.cardCount {
|
color: gray;
|
background-color: white;
|
margin-left: 12px;
|
font-size: 24rpx;
|
padding-left: 12rpx;
|
}
|
|
.scroll-h {
|
/* width: 750rpx; */
|
width: 100%;
|
height: 106rpx;
|
font-size: 14px;
|
flex-direction: row;
|
white-space: nowrap;
|
text-align: center;
|
}
|
|
.navbarstyle {
|
display: flex;
|
justify-content: space-evenly;
|
flex-direction: row;
|
/* color: #4169e1; */
|
font-size: 14px;
|
}
|
|
.textlight {
|
/* color: palevioletred; */
|
border-bottom: 2px solid #f92a54;
|
color: #f92a54;
|
/* font-weight: 600; */
|
padding: 14px 6px 6px 6px;
|
}
|
|
.textan {
|
padding: 14px 6px 6px 6px;
|
}
|
|
.swiperall {
|
height: calc(100vh - 100rpx);
|
/* flex: 1; */
|
}
|
|
.swiperall2 {
|
height: calc(100vh - 10rpx);
|
/* 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: row;
|
/* flex-wrap: wrap; */
|
background-color: #f5f5f5;
|
padding-bottom: 20px;
|
/* column-count: 2; */
|
/* column-gap: 2px; */
|
}
|
|
.card {
|
display: flex;
|
flex-direction: column;
|
/* width: 50%; */
|
}
|
|
.cardImg {
|
padding: 12px 0 0 12px;
|
height: 196px;
|
}
|
|
.cardTitle {
|
/* background-color: white; */
|
/* margin-left: 12px; */
|
font-size: 14px;
|
padding-left: 4px;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
overflow: hidden;
|
}
|
|
.cardDetail {
|
background-color: white;
|
margin-left: 12px;
|
font-size: 14px;
|
color: #eb0000;
|
padding-left: 12rpx;
|
}
|
|
.cardCount {
|
color: gray;
|
}
|
|
.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: 90vh;
|
flex: 1;
|
/* #ifndef MP-ALIPAY */
|
flex-direction: column;
|
/* #endif */
|
width: 100%;
|
}
|
|
.scroll-v2 {
|
height: 99vh;
|
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;
|
}
|
|
.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;
|
}
|
|
.card2 {
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
background-color: white;
|
padding: 12rpx 0;
|
border-radius: 12rpx;
|
}
|
|
.cardImg2 {
|
padding: 12px 0 0 12px;
|
height: 180rpx;
|
width: 180rpx;
|
}
|
|
.cardTitle2 {
|
background-color: white;
|
/* margin-left: 12px; */
|
font-size: 28rpx;
|
overflow: hidden;
|
font-weight: 600;
|
/* text-overflow: ellipsis; */
|
/* white-space: nowrap; */
|
}
|
|
.cardTip2 {
|
color: #ff3f3e;
|
font-size: 24rpx;
|
}
|
|
.cardDetail2 {
|
background-color: white;
|
margin-left: 12px;
|
font-size: 14px;
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
/* color: #eb0000; */
|
}
|
|
.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;
|
}
|
|
.cardCoupon {
|
background: rgb(238, 51, 53);
|
padding: 6rpx 12rpx 6rpx 6rpx;
|
/* width: 120rpx; */
|
color: white;
|
border-radius: 8rpx;
|
font-size: 22rpx;
|
display: inline-block;
|
}
|
|
.goodCards2 {
|
display: flex;
|
flex-direction: column;
|
flex-wrap: wrap;
|
background-color: #f5f5f5;
|
padding-bottom: 20px;
|
padding: 12rpx;
|
}
|
|
.goodCardLeft {
|
width: 50%;
|
}
|
|
.goodCardRight {
|
width: 50%;
|
}
|
</style>
|
