<template>
|
<view class="rangkingList">
|
<view class="homefixed" @click="goHome">
|
<img style="width: 20px;height: 20px;" src="https://img.alicdn.com/imgextra/i3/751308485/O1CN015ERutn2CYBRz71V8F_!!751308485.png" alt="">
|
</view>
|
<scroll-view class="scroll-v list" lower-threshold='180' enableBackToTop="true" scroll-y='true' >
|
<view class="toptop">
|
<view class="cardSecond" @click="gotogoodDetail(1,list[1].goodsId)">
|
<image class="topSecond_img" src="../../static/homeimg/top2.png" />
|
<img style="width: 180rpx;height: 180rpx;padding: 0 16rpx;" :src="list[1].mainPic" alt="">
|
<view class="cardSecond_hotCount">
|
2小时热度值{{getNumData(list[1].monthsale)}}
|
</view>
|
<view class="cardSecond_title">
|
{{list[1].dtitle}}
|
</view>
|
<view class="cardSecond_price">
|
￥{{list[1].actualPrice}}券后
|
</view>
|
</view>
|
<view class="cardFirst" @click="gotogoodDetail(1,list[0].goodsId)">
|
<image class="topFirst_img" src="../../static/homeimg/top1.png" />
|
<img style="width: 220rpx;height: 200rpx;padding: 0 6rpx;" :src="list[0].mainPic" alt="">
|
<view class="cardSecond_hotCount">
|
2小时热度值{{getNumData(list[0].monthsale)}}
|
</view>
|
<view class="cardSecond_title">
|
{{list[0].dtitle}}
|
</view>
|
<view class="cardSecond_price">
|
￥{{list[0].actualPrice}}券后
|
</view>
|
</view>
|
<view class="cardSecond" @click="gotogoodDetail(1,list[2].goodsId)">
|
<image class="topSecond_img" src="../../static/homeimg/top3.png" />
|
<img style="width: 180rpx;height: 180rpx;padding: 0 16rpx;" :src="list[2].mainPic" alt="">
|
<view class="cardSecond_hotCount">
|
2小时热度值{{getNumData(list[2].monthsale)}}
|
</view>
|
<view class="cardSecond_title">
|
{{list[2].dtitle}}
|
</view>
|
<view class="cardSecond_price">
|
￥{{list[2].actualPrice}}券后
|
</view>
|
</view>
|
</view>
|
<view class="topnCard" v-for="(i,ind) in list" :key="i.goodsId">
|
<view class="topnCard_signal" v-if="ind>2">
|
<view class="topcard_topn">
|
<view>
|
top
|
</view>
|
<view>
|
{{ind>8?(ind+1):('0'+(ind+1))}}
|
</view>
|
</view>
|
<view class="">
|
<image style="width: 200rpx;height: 200rpx;margin-left: 12rpx;" :src="i.mainPic" alt="" />
|
</view>
|
|
<view class="topcard_detail">
|
<view class="topcard_title">{{i.dtitle}}</view>
|
<view class="topcard_coupon"><text
|
style="background-color: white;color: #ff5351;margin-right: 12rpx;padding: 0 8rpx;">券</text>{{i.couponPrice}}元
|
</view>
|
<view class="topcard_price">
|
￥{{i.actualPrice}}券后
|
<text class="topcard_oldprice">￥{{Number(i.actualPrice)+Number(i.couponPrice)}}</text>
|
</view>
|
<view class="topcard_bottom">
|
<view class="topcard_bottomleft">
|
近2小时热度值{{getNumData(i.monthsale)}}
|
</view>
|
<view class="topcard_bottomright" @click="gotogoodDetail(1,i.goodsId)">
|
立即抢
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
<!-- <view class="loading-more" v-if="list.length>0">
|
<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>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getNumData,
|
} from "../../common/util.js"
|
export default {
|
|
data() {
|
return {
|
getNumData,
|
list: [],
|
loadingMore: true,
|
currentGoodsPage: 1,
|
nomore: false,
|
nodata: false,
|
}
|
},
|
onShow() {
|
this.GetRankingGoodsList(1)
|
},
|
onShareAppMessage:function() {
|
return {
|
title: '淘券获取',
|
path: '/pages/index/index',
|
// promise
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '淘券获取',
|
query: '/pages/index/index',
|
}
|
},
|
methods: {
|
GetRankingGoodsList(cur) {
|
// debugger
|
let me = this
|
uni.request({
|
url: 'https://h.ushopvip.com/api/TkProduct/GetRankingGoodsList',
|
method: 'POST',
|
data: {
|
pageNo: cur,
|
pageSize: 100,
|
hasCoupon: true,
|
},
|
success(res) {
|
if (res.data?.success) {
|
if (res.data.result.length < 20) {
|
me.nomore = true
|
}
|
if (cur === 1) {
|
me.list = res.data.result
|
me.currentGoodsPage = cur
|
me.loadingMore = true
|
|
} else {
|
let data = me.list
|
me.list = 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('GetRankingGoodsList失败：', err);
|
}
|
})
|
},
|
gotogoodDetail(type, id) {
|
//商品详情
|
if (type == 1) {
|
uni.navigateTo({
|
url: '/pages/goodDetail/index?id=' + id
|
})
|
}
|
|
},
|
loadMore() {
|
this.loadingMore = false
|
this.GetRankingGoodsList(this.currentGoodsPage + 1)
|
|
},
|
goHome(){
|
uni.switchTab({
|
url: '/pages/index/index'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.rangkingList {
|
background-color: rgb(255, 72, 19);
|
/* height: 1000rpx; */
|
padding: 0 12rpx;
|
}
|
|
.toptop {
|
display: flex;
|
justify-content: space-between;
|
padding: 24rpx 0;
|
width: 100%;
|
}
|
|
.cardSecond {
|
margin-top: 40rpx;
|
width: 210rpx;
|
background-color: white;
|
height: 342rpx;
|
position: relative;
|
border-radius: 20rpx;
|
padding: 12rpx;
|
}
|
|
.cardFirst {
|
width: 230rpx;
|
background-color: white;
|
height: 384rpx;
|
margin: 0 12rpx;
|
position: relative;
|
border-radius: 20rpx;
|
padding: 12rpx;
|
}
|
|
.topFirst_img {
|
width: 40rpx;
|
height: 50rpx;
|
position: absolute;
|
top: -4rpx;
|
left: 10rpx;
|
}
|
|
.topSecond_img {
|
width: 40rpx;
|
height: 50rpx;
|
position: absolute;
|
top: -4rpx;
|
left: 10rpx;
|
}
|
|
.cardSecond_hotCount {
|
font-size: 26rpx;
|
text-align: center;
|
background: linear-gradient(270deg, #ffa700, #ff4728);
|
color: white;
|
border-radius: 16rpx;
|
}
|
|
.cardSecond_title {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin: 12rpx 0;
|
}
|
|
.cardSecond_price {
|
color: #ff4728;
|
font-size: 34rpx;
|
font-weight: 550;
|
}
|
|
.topnCard {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.topnCard_signal {
|
display: flex;
|
position: relative;
|
background-color: white;
|
width: 100%;
|
margin-bottom: 12rpx;
|
border-radius: 24rpx;
|
/* margin: 12rpx; */
|
padding: 12rpx 0;
|
align-items: center;
|
}
|
|
.topcard_topn {
|
background: url('../../static/homeimg/topn.png') no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 0;
|
left: 12rpx;
|
font-size: 22rpx;
|
text-align: center;
|
padding: 6rpx;
|
color: white;
|
}
|
|
.topcard_detail {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 480rpx;
|
margin-left: 24rpx;
|
}
|
|
.topcard_title {
|
font-size: 30rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.topcard_coupon {
|
background: linear-gradient(90deg, #ff8873, #ff4f4f);
|
padding: 6rpx;
|
width: 120rpx;
|
color: white;
|
border-radius: 8rpx;
|
font-size: 22rpx;
|
}
|
|
.topcard_price {
|
color: #ff4728;
|
font-size: 30rpx;
|
}
|
|
.topcard_oldprice {
|
text-decoration: line-through;
|
color: #cdd2d8;
|
}
|
|
.topcard_bottom {
|
display: flex;
|
background-color: #ffeee6;
|
color: #893c11;
|
display: flex;
|
width: 400rpx;
|
position: relative;
|
}
|
|
.topcard_bottomleft {
|
padding: 8rpx 24rpx;
|
}
|
|
.topcard_bottomright {
|
background: url('../../static/homeimg/lijiqiang.png') no-repeat;
|
background-size: 100% 100%;
|
width: 100rpx;
|
color: white;
|
padding: 12rpx 24rpx;
|
position: absolute;
|
top: 0;
|
right: -50rpx;
|
}
|
.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%;
|
}
|
.homefixed{
|
position: fixed;
|
top: 3px;
|
left: 6px;
|
background-color: white;
|
border-radius: 50%;
|
border: 1px solid #707070;
|
padding: 2px 3px 0 3px;
|
z-index: 9999;
|
}
|
</style>
|
