<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 refresher-enabled='true' :refresher-triggered="isRefresher"
|
@refresherrefresh='GetRankingGoodsList(1,1)' 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 style="display: flex;">
|
<view v-if="i?.shopType==0||i?.shopType==1" style="padding-top: 2px;margin-right: 4px;">
|
<img style="width:16px;height: 16px;"
|
:src="i?.shopType==0?'https://img.alicdn.com/imgextra/i4/751308485/O1CN01ppfg8j2CYBRpPtb51_!!751308485.png':'https://img.alicdn.com/imgextra/i4/751308485/O1CN01mKVp3U2CYBRzeHVcG_!!751308485.png'"
|
alt="">
|
</view>
|
<view class="topcard_title">{{i?.dtitle}}</view>
|
</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 requestx from '../../common/request.js'
|
import {
|
getNumData,
|
} from "../../common/util.js"
|
export default {
|
|
data() {
|
return {
|
getNumData,
|
requestx,
|
list: [],
|
loadingMore: true,
|
currentGoodsPage: 1,
|
nomore: false,
|
nodata: false,
|
isRefresher: false,
|
baseUrl: '',
|
}
|
},
|
onShow() {
|
this.GetRankingGoodsList(1)
|
},
|
onShareAppMessage: function() {
|
return {
|
title: '淘券获取',
|
path: '/pages/index/index',
|
// promise
|
}
|
},
|
onShareTimeline() {
|
return {
|
title: '淘券获取',
|
query: '/pages/index/index',
|
}
|
},
|
methods: {
|
GetRankingGoodsList(cur, t) {
|
// debugger
|
if (t) {
|
this.isRefresher = true
|
}
|
this.requestx({
|
url: '/TkProduct/GetRankingGoodsList',
|
method: 'POST',
|
data: {
|
pageNo: cur,
|
pageSize: 100,
|
hasCoupon: true,
|
},
|
}).then((res) => {
|
// debugger
|
if (res.success) {
|
|
this.list = res.result
|
this.currentGoodsPage = cur
|
this.loadingMore = true
|
if (t) {
|
this.isRefresher = false
|
}
|
}
|
|
})
|
|
|
},
|
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>
|
