You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
517 lines
11 KiB
517 lines
11 KiB
<template>
|
|
<view class="newGoods" :id="`rank${styleIndex}`">
|
|
<!-- :style="{backgroundImage:'url('+backgroundImg+')'}" -->
|
|
<!-- <view class="rule" @click="openPage()">规则</view> -->
|
|
<view>
|
|
<u-navbar title="排行榜" back-icon-color="#fff" :border-bottom="false" title-color="#fff"
|
|
:background="background"></u-navbar>
|
|
</view>
|
|
<!-- <image :src="$picUrl+'/static/rank/rangkImg.png'" mode="" class="bgImg"></image> -->
|
|
<view class="headTitle">
|
|
{{ styleIndex > 0 ? '' : '全站好物热榜' }}
|
|
</view>
|
|
<view class="ranking">
|
|
{{ styleIndex > 0 ? '' : '- 跟榜买错不了 -' }}
|
|
</view>
|
|
<view class="menuList">
|
|
<scroll-view scroll-x="true" class="list">
|
|
<view class="menuItem" v-for="(item,index) in menuList" :key="index" @click="onChosed(item,index)">
|
|
<view class="menuName">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="line" v-if="chosed==index"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="rankList" v-if="chosed==0" v-for="(item,index) in jingList" :key="index"
|
|
style="background-color: #fff;padding: 32rpx;">
|
|
<view class="firLine" @click="goDetailMore(item.category_id,item.name)">
|
|
<view class="hotTitle">{{item.name}}热销榜</view>
|
|
<view class="opera">
|
|
<text>更多上榜好物</text>
|
|
<image :src="$picUrl+'/static/order/left.png'" mode="" class="more"></image>
|
|
</view>
|
|
</view>
|
|
<view class="goodsList">
|
|
<view class="goodsItem" v-for="(item_1,index) in item.goods_list" :key="index" v-if="index < 3"
|
|
@click="goDetail(item_1.goods_id)">
|
|
<image :src="$picUrl+'/static/rank/topOne.png'" class="topOne" v-if="index==0"></image>
|
|
<image :src="$picUrl+'/static/rank/topTwo.png'" class="topOne" v-if="index==1"></image>
|
|
<image :src="$picUrl+'/static/rank/topThree.png'" class="topOne" v-if="index==2"></image>
|
|
<image :src="item_1.goods_image" mode="widthFix" class="goodsImg"></image>
|
|
<view class="goodsName">
|
|
{{item_1.goods_name}}
|
|
</view>
|
|
<view class="goodsPrice">
|
|
￥<text>{{item_1.goods_price_min?Number(item_1.goods_price_min):''}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品 -->
|
|
<view class="rankList" v-if="chosed>0">
|
|
<view class="goodsList1" v-for="(item,index) in goodList" :key="index">
|
|
<view class="goodsDetail1">
|
|
<image :src="$picUrl+'/static/rank/topOne.png'" class="topOne1" v-if="index==0"></image>
|
|
<image :src="$picUrl+'/static/rank/topTwo.png'" class="topOne1" v-if="index==1"></image>
|
|
<image :src="$picUrl+'/static/rank/topThree.png'" class="topOne1" v-if="index==2"></image>
|
|
<view class="goodsInfo1">
|
|
<image :src="item.goods_image" class="goodsImg1"></image>
|
|
<view class="goodsName1">
|
|
<view class="name1">
|
|
{{item.goods_name}}
|
|
</view>
|
|
<view class="hot1">
|
|
<text class="hotTitle1">HOT</text>
|
|
<text class="zs1">综合热卖指数{{item.remaizhishu}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="opera1">
|
|
<view class="price1">
|
|
￥<text>{{item.goods_price_min}}</text>
|
|
</view>
|
|
<view class="look1" @click="goDetail(item.goods_id)">
|
|
去看看
|
|
<u-icon name="arrow-right" color="#fff" size="30" class="right1"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from '@/api/activity'
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center bottom no-repeat',
|
|
backgroundSize: '100% auto',
|
|
},
|
|
category_id: "",
|
|
chosed: 0,
|
|
menuList: [],
|
|
backgroundImg: '',
|
|
jingList: [],
|
|
goodList: [],
|
|
}
|
|
},
|
|
computed: {
|
|
styleIndex() {
|
|
const index = uni.getStorageSync('styleIndex') || '';
|
|
return index;
|
|
},
|
|
},
|
|
watch: {
|
|
styleIndex: {
|
|
immediate: true,
|
|
handler() {
|
|
this.background.background = `url(https://www.royaum.com.cn/static/rank/rank-bg${this.styleIndex}.png) center top no-repeat`;
|
|
},
|
|
},
|
|
},
|
|
onShow() {
|
|
this.getListCharts()
|
|
},
|
|
methods: {
|
|
openPage() {
|
|
uni.navigateTo({
|
|
url: '/pages/activity/presaleRule?type=6'
|
|
})
|
|
},
|
|
// 获取背景图
|
|
getCarouselList(category_id) {
|
|
const app = this;
|
|
Api.getImage({
|
|
type: 3
|
|
})
|
|
.then(result => {
|
|
app.backgroundImg = result.data.imgurl;
|
|
if (app.chosed == 0) {
|
|
app.getListJingData()
|
|
} else {
|
|
app.getListgoodData(category_id)
|
|
}
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
getListJingData() {
|
|
let app = this;
|
|
let pamars = {
|
|
// store_id: 10001,
|
|
}
|
|
Api.chartsGoodsJing(pamars)
|
|
.then(result => {
|
|
result.data.forEach(item => {
|
|
item.goods_list.forEach(item1 => {
|
|
item1.goods_price_min = Number(item1.goods_price_min);
|
|
})
|
|
});
|
|
app.jingList = result.data;
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
getListgoodData(categoryId) {
|
|
let app = this;
|
|
let pamars = {
|
|
// store_id: 10001,
|
|
categoryId: categoryId,
|
|
}
|
|
Api.chartsGoodsList(pamars)
|
|
.then(result => {
|
|
app.goodList = result.data.data || [];
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
onChosed(item, index) {
|
|
let app = this;
|
|
app.chosed = index;
|
|
app.getListgoodData(item.category_id)
|
|
},
|
|
// 分类
|
|
getListCharts() {
|
|
let app = this
|
|
app.menuList = []
|
|
let pamars = {
|
|
// store_id: 10001
|
|
}
|
|
Api.charts(pamars)
|
|
.then(result => {
|
|
let obj = {
|
|
name: '精品'
|
|
}
|
|
result.data.unshift(obj)
|
|
app.menuList = result.data;
|
|
app.getListJingData()
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
goDetail(orderId) {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/detail?goodsId=' + orderId
|
|
})
|
|
},
|
|
goDetailMore(categoryId, name) {
|
|
uni.navigateTo({
|
|
url: '/pages/activity/charts?categoryId=' + categoryId + '&name=' + name
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './rankingStyle.scss';
|
|
.newGoods {
|
|
width: 100%;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
padding-bottom: 30rpx;
|
|
background: #F34A40 url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat;
|
|
background-size: 100% auto;
|
|
::v-deep {
|
|
.u-navbar-inner {
|
|
height: 80rpx!important;
|
|
}
|
|
}
|
|
|
|
.bgImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -10;
|
|
}
|
|
}
|
|
|
|
.headTitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 98rpx;
|
|
font-size: 76rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 98rpx;
|
|
text-shadow: 8px 2px 15px #FF5F4C;
|
|
margin-top: 60rpx;
|
|
}
|
|
|
|
.ranking {
|
|
width: 430rpx;
|
|
height: 150rpx;
|
|
background: url('https://www.royaum.com.cn/static/rank/timeRank.png') center top no-repeat;
|
|
background-size: contain;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin: 0 auto;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.menuList {
|
|
margin-top: 34rpx;
|
|
width: 100%;
|
|
padding-left: 50rpx;
|
|
|
|
.list {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.menuItem {
|
|
display: inline-block;
|
|
margin-right: 62rpx;
|
|
|
|
.menuName {
|
|
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.line {
|
|
width: 70rpx;
|
|
height: 10rpx;
|
|
background: #FFE4C3;
|
|
border-radius: 72rpx 72rpx 72rpx 72rpx;
|
|
opacity: 1;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rankList {
|
|
width: 702rpx;
|
|
border-radius: 18rpx;
|
|
margin: 28rpx auto;
|
|
|
|
.firLine {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.hotTitle {
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #0E0E0E;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.opera {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #9F9F9F;
|
|
line-height: 44rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.more {
|
|
width: 12rpx;
|
|
height: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsList {
|
|
display: flex;
|
|
margin-top: 86rpx;
|
|
margin-left: 18rpx;
|
|
|
|
.goodsItem {
|
|
position: relative;
|
|
width: 33.3%;
|
|
|
|
.topOne {
|
|
width: 48rpx;
|
|
height: 66rpx;
|
|
position: absolute;
|
|
top: -38rpx;
|
|
left: -28rpx;
|
|
}
|
|
|
|
.goodsImg {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.goodsName {
|
|
width: 150rpx;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
line-height: 40rpx;
|
|
margin: 8rpx 0 4rpx 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.goodsPrice {
|
|
height: 50rpx;
|
|
font-size: 24rpx;
|
|
color: #DE041C;
|
|
line-height: 50rpx;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsList1 {
|
|
width: 700rpx;
|
|
height: 440rpx;
|
|
background: #FCE5C6;
|
|
border-radius: 18rpx;
|
|
margin-bottom: 42rpx;
|
|
|
|
.goodsDetail1 {
|
|
width: 700rpx;
|
|
height: 336rpx;
|
|
padding: 54rpx 0 0 52rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx;
|
|
position: relative;
|
|
|
|
.topOne1 {
|
|
width: 73rpx;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
left: 36rpx;
|
|
top: -8rpx;
|
|
z-index: 999;
|
|
}
|
|
|
|
.goodsInfo1 {
|
|
display: flex;
|
|
|
|
.goodsImg1 {
|
|
width: 224rpx;
|
|
height: 224rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.goodsName1 {
|
|
.name1 {
|
|
width: 396rpx;
|
|
height: 132rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #0E0E0E;
|
|
line-height: 44rpx;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hot1 {
|
|
width: 336rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(90deg, #FCE5C6 0%, #FFFFFF 100%);
|
|
border-radius: 70rpx;
|
|
opacity: 1;
|
|
margin-top: 26rpx;
|
|
padding: 0 8rpx;
|
|
.hotTitle1 {
|
|
margin-right: 8rpx;
|
|
width: 68rpx;
|
|
height: 42rpx;
|
|
font-size: 32rpx;
|
|
line-height: 60rpx;
|
|
margin-left: 8rpx;
|
|
background: -webkit-linear-gradient(180deg, #FFA621 0%, #F34A40 100%);
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
}
|
|
|
|
.zs1 {
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #9F6516;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.opera1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: 104rpx;
|
|
|
|
.price1 {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #301F14;
|
|
line-height: 44rpx;
|
|
margin-left: 30rpx;
|
|
|
|
text {
|
|
font-size: 48rpx;
|
|
font-weight: 600;
|
|
color: #301F14;
|
|
line-height: 68rpx;
|
|
}
|
|
}
|
|
|
|
.look1 {
|
|
width: 202rpx;
|
|
height: 60rpx;
|
|
background: #F9BD6C;
|
|
border-radius: 70rpx;
|
|
margin-right: 22rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.right1 {
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
width: 100rpx;
|
|
height: 60rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 150rpx;
|
|
z-index: 19;
|
|
background-color: #FFFFFF;
|
|
color: #0E0E0E;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
border-radius: 50rpx 0 0 50rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
</style>
|
|
|