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.
556 lines
12 KiB
556 lines
12 KiB
<template>
|
|
<view class="newGoods">
|
|
<view>
|
|
<u-navbar title="" back-icon-color="#fff" :border-bottom="false" title-color="#fff"
|
|
:background="background"></u-navbar>
|
|
</view>
|
|
<view class="main">
|
|
<view class="head">
|
|
<view class="ranking">
|
|
-好物排行榜-
|
|
</view>
|
|
<view class="headTitle">
|
|
{{name}}热销榜
|
|
</view>
|
|
<view class="ques">
|
|
根据商品销量等级排序|每日更新
|
|
</view>
|
|
</view>
|
|
<view class="rule" @click="openPage(1)">入选规则</view>
|
|
<view class="all" @click="openPage(2)">全部榜单</view>
|
|
<view class="hb">
|
|
<view class="goodsList" v-for="(item,index) in jingList.slice(0,sliceIndex)" :key="index"
|
|
@click="goDetail(item.goods_id)">
|
|
<view class="goodsDetail">
|
|
<image :src="$picUrl+'/static/rank/topOne.png'" mode="" v-if="index==0" class="topOne"></image>
|
|
<image :src="$picUrl+'/static/rank/topTwo.png'" mode="" v-if="index==1" class="topOne"></image>
|
|
<image :src="$picUrl+'/static/rank/topThree.png'" mode="" v-if="index==2" class="topOne">
|
|
</image>
|
|
<view class="goodsInfo">
|
|
<image :src="item.goods_image" mode="widthFix" class="goodsImg"></image>
|
|
<view class="goodsName">
|
|
<view class="name">
|
|
{{item.goods_name}}
|
|
</view>
|
|
<view class="hot">
|
|
<text class="hotTitle">HOT</text>
|
|
<text class="zs">综合热卖指数{{item.remaizhishu}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="opera">
|
|
<view class="price">
|
|
￥<text>{{item.goods_price_min?Number(item.goods_price_min):''}}</text>
|
|
</view>
|
|
<view class="look">
|
|
去看看
|
|
<u-icon name="arrow-right" color="#fff" size="32"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods_more" @click="toggleList" v-if="jingList.length>0">
|
|
<text>查看更多商品</text>
|
|
<u-icon name="arrow-down" color="#fff" size="26"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="paihang">
|
|
<view class="goodsRecommend-title">
|
|
<image src="/static/ranking/rank_left.png"></image>更多榜单<image src="/static/ranking/rank_right.png">
|
|
</image>
|
|
</view>
|
|
<view class="rank_content" v-if="rankList.length>0">
|
|
<view class="rank_box" @click="toBack(item)" v-for="(item,index) in rankList"
|
|
:style="{ backgroundImage: 'url(' + (item.rankimage!=null?item.rankimage.external_url:'') + ')', }">
|
|
<view class="rank_name">
|
|
{{item.name}}榜
|
|
</view>
|
|
<view class="rank_go">
|
|
<text>GO</text>
|
|
<u-icon name="arrow-right" color="#fff" size="23"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="toTop" v-if="isTop" @click="openScrollTo()">
|
|
<image :src="$picUrl+'/static/toTop.png?=1'"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from '@/api/activity'
|
|
import * as GoodsApi from '@/api/home/index.js';
|
|
export default {
|
|
data() {
|
|
let img = 'https://www.royaum.com.cn/static/rank/top.png'
|
|
return {
|
|
background: {
|
|
background: 'url(' + img + ') center top no-repeat',
|
|
backgroundSize: '100% auto',
|
|
},
|
|
chosed: 0,
|
|
backgroundImg: '',
|
|
jingList: [],
|
|
categoryId: '',
|
|
name: '',
|
|
rankList: [],
|
|
sliceIndex: 4,
|
|
isTop: false,
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
this.categoryId = op.categoryId;
|
|
this.name = decodeURIComponent(op.name)
|
|
},
|
|
onShow() {
|
|
this.getListJingData(this.categoryId)
|
|
this.getServeList()
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
|
|
this.isTop = false
|
|
} else {
|
|
this.isTop = true
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取服务列表
|
|
*/
|
|
async getServeList() {
|
|
const {
|
|
status,
|
|
message,
|
|
data
|
|
} = await GoodsApi.typeList({
|
|
is_in_store: ''
|
|
});
|
|
if (status == 200) {
|
|
this.rankList = data.list
|
|
}
|
|
},
|
|
toBack(item) {
|
|
// let pages = getCurrentPages();
|
|
// let beforePage = pages[pages.length - 2]
|
|
// console.log(this.removeAfter(pages, 'pages/activity/ranking'))
|
|
// uni.redirectTo({
|
|
// url: '/pages/activity/ranking'
|
|
// })
|
|
uni.navigateTo({
|
|
url: '/pages/activity/charts?categoryId=' + item.category_id + '&name=' + item.name
|
|
})
|
|
},
|
|
removeAfter(arr, value) {
|
|
arr.forEach(function(item, index) {
|
|
if (item.route == value) {
|
|
arr.splice(index + 1); // 移除指定元素之后的所有元素
|
|
}
|
|
});
|
|
return arr
|
|
},
|
|
toggleList(index) {
|
|
let len = this.jingList.length
|
|
if (this.sliceIndex >= len) {
|
|
this.$toast('已展示全部数据')
|
|
} else {
|
|
this.sliceIndex += 3;
|
|
}
|
|
},
|
|
getListJingData(categoryId) {
|
|
let app = this;
|
|
let pamars = {
|
|
// store_id: 10001,
|
|
categoryId: categoryId,
|
|
}
|
|
Api.chartsGoodsList(pamars)
|
|
.then(result => {
|
|
app.jingList = result.data.data || [];
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
goDetail(orderId) {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/detail?goodsId=' + orderId
|
|
})
|
|
},
|
|
openPage(index) {
|
|
if (index == 1) {
|
|
uni.navigateTo({
|
|
url: '/pages/activity/presaleRule?type=6'
|
|
})
|
|
} else {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.newGoods {
|
|
width: 100%;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
background: #251a16 url(https://www.royaum.com.cn/static/rank/top.png) center top no-repeat;
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
.toTop {
|
|
position: fixed;
|
|
bottom: 80rpx;
|
|
right: 16rpx;
|
|
width: 99rpx;
|
|
height: 99rpx;
|
|
border-radius: 50%;
|
|
opacity: 1;
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
.paihang {
|
|
.rank_content {
|
|
overflow: hidden;
|
|
padding: 18rpx 30rpx 50rpx 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rank_box {
|
|
width: 336rpx;
|
|
height: 200rpx;
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
/* 不重复平铺背景图片 */
|
|
background-position: center;
|
|
/* 居中显示背景图片 */
|
|
background-size: cover;
|
|
/* 拉伸并填充至元素内部 */
|
|
margin-bottom: 16rpx;
|
|
|
|
.rank_name {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
color: #FFF;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: 50rpx 0 12rpx 18rpx;
|
|
}
|
|
|
|
.rank_go {
|
|
width: 90rpx;
|
|
height: 42rpx;
|
|
padding: 0 6rpx;
|
|
background: rgba(255, 255, 255, 0.22);
|
|
border-radius: 130rpx;
|
|
border: 1rpx solid #FFF;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-left: 18rpx;
|
|
|
|
text {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsRecommend-title {
|
|
padding: 20rpx 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 39rpx;
|
|
height: 41rpx;
|
|
margin: 0 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.rule {
|
|
width: 130rpx;
|
|
height: 60rpx;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 60rpx;
|
|
z-index: 22;
|
|
border-radius: 50rpx 0 0 50rpx;
|
|
}
|
|
|
|
.all {
|
|
width: 130rpx;
|
|
height: 60rpx;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 140rpx;
|
|
border-radius: 50rpx 0 0 50rpx;
|
|
z-index: 22;
|
|
}
|
|
|
|
.bgImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -10;
|
|
}
|
|
|
|
.head {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-top: 58rpx;
|
|
width: 128rpx;
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
line-height: 44rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.headTitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 98rpx;
|
|
font-size: 60rpx;
|
|
color: #FFFFFF;
|
|
line-height: 98rpx;
|
|
margin-top: -20rpx;
|
|
}
|
|
|
|
.ranking {
|
|
width: 430rpx;
|
|
height: 120rpx;
|
|
background: url('https://www.royaum.com.cn/static/rank/timeRank.png') center top no-repeat;
|
|
background-size: 100% auto;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin: 0 auto;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.ques {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.hb {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 70rpx;
|
|
|
|
.goods_more {
|
|
margin-bottom: 40rpx;
|
|
width: 276rpx;
|
|
height: 78rpx;
|
|
background: rgba(255, 255, 255, 0.22);
|
|
border-radius: 130rpx;
|
|
border: 1rpx solid #FFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFF;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
|
|
text {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.goodsList {
|
|
width: 700rpx;
|
|
height: 440rpx;
|
|
background: #FCE5C6;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
margin-bottom: 42rpx;
|
|
|
|
.goodsDetail {
|
|
width: 700rpx;
|
|
height: 336rpx;
|
|
padding: 54rpx 0 0 52rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
opacity: 1;
|
|
position: relative;
|
|
|
|
.topOne {
|
|
width: 73rpx;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
left: 36rpx;
|
|
top: -8rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
.goodsInfo {
|
|
display: flex;
|
|
|
|
.goodsImg {
|
|
width: 224rpx;
|
|
height: 224rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.goodsName {
|
|
.name {
|
|
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;
|
|
}
|
|
|
|
.hot {
|
|
width: 336rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(90deg, #FCE5C6 0%, #FFFFFF 100%);
|
|
border-radius: 70rpx;
|
|
opacity: 1;
|
|
margin-top: 26rpx;
|
|
padding: 0 8rpx;
|
|
|
|
.hotTitle {
|
|
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;
|
|
}
|
|
|
|
.zs {
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #9F6516;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.opera {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: 104rpx;
|
|
|
|
.price {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.look {
|
|
width: 160rpx;
|
|
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;
|
|
|
|
.right {
|
|
width: 18rpx;
|
|
height: 27rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|