分类排行榜页面书写就接口逻辑处理

version/0412
fanfan 9 months ago
parent 1a7caf468b
commit c2847648e8
  1. 244
      pages/activity/charts.vue
  2. 1
      pages/activity/newGoods.vue
  3. 5
      pages/activity/newsshop.vue
  4. 2
      pages/activity/seckill.vue
  5. 155
      pages/index/index.vue
  6. BIN
      static/ranking/rank_left.png
  7. BIN
      static/ranking/rank_right.png

@ -1,7 +1,8 @@
<template>
<view class="newGoods">
<view>
<u-navbar title="排行榜" back-icon-color="#fff" :border-bottom="false" title-color="#fff" :background="background"></u-navbar>
<u-navbar title="排行榜" back-icon-color="#fff" :border-bottom="false" title-color="#fff"
:background="background"></u-navbar>
</view>
<view class="main">
<view class="head">
@ -18,11 +19,13 @@
<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" :key="index" @click="goDetail(item.goods_id)">
<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>
<image :src="$picUrl+'/static/rank/topThree.png'" mode="" v-if="index==2" class="topOne">
</image>
<view class="goodsInfo">
<image :src="item.goods_image" mode="" class="goodsImg"></image>
<view class="goodsName">
@ -42,17 +45,43 @@
</view>
<view class="look">
去看看
<image :src="$picUrl+'/static/rank/right.png'" mode="" class="right"></image>
<image :src="$picUrl+'/static/rank/right.png'" mode="" class="right"></image>
</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">
<view class="rank_box" v-for="(item,index) in rankList"
:style="{ backgroundImage: 'url(' + item.image + ')', }">
<view class="rank_name">
{{item.name}}
</view>
<view class="rank_go" @click="toBack(item.path)">
<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'
@ -65,30 +94,65 @@
backgroundImg: '',
jingList: [],
categoryId: '',
name:''
name: '',
rankList: [],
sliceIndex: 4,
isTop: false,
}
},
onLoad(op) {
this.categoryId = op.categoryId;
this.name= decodeURIComponent(op.name)
this.name = decodeURIComponent(op.name)
},
onShow() {
// this.getCarouselList()
this.getListJingData(this.categoryId)
this.getServeList()
},
onPageScroll(e) {
if (e.scrollTop <= 200) { // true
this.isTop = false
} else {
this.isTop = true
}
},
methods: {
// //
// getCarouselList(category_id) {
// const app = this;
// Api.getImage({
// type: 3
// })
// .then(result => {
// app.backgroundImg = result.data.imgurl;
//
// })
// .finally(() => app.isLoading = false)
// },
/**
* 获取服务列表
*/
async getServeList() {
const {
status,
message,
data
} = await GoodsApi.typeList({is_in_store: 0});
if (status == 200) {
this.rankList = data.list
}
},
toBack() {
// let pages = getCurrentPages();
// let beforePage = pages[pages.length - 2]
// console.log(this.removeAfter(pages, 'pages/activity/ranking'))
uni.redirectTo({
url: '/pages/activity/ranking'
})
},
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 = {
@ -97,10 +161,14 @@
}
Api.chartsGoodsList(pamars)
.then(result => {
result.data.data.forEach(item => {
item.goods_price_min = Number(item.goods_price_min);
});
app.jingList = result.data.data;
if (result.data.data.length > 0) {
result.data.data.forEach(item => {
item.goods_price_min = Number(item.goods_price_min);
});
app.jingList = result.data.data;
} else {
app.jingList = []
}
})
.finally(() => app.isLoading = false)
},
@ -110,13 +178,13 @@
})
},
openPage(index) {
if(index == 1){
if (index == 1) {
uni.navigateTo({
url: '/pages/activity/presaleRule?type=6'
})
}else{
} else {
uni.navigateBack({
delta:1
delta: 1
})
}
},
@ -133,10 +201,97 @@
background-size: 100% auto;
}
.toTop {
position: fixed;
bottom: 120rpx;
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-size: 100% 100%;
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{
.rule {
width: 130rpx;
height: 50rpx;
background-color: rgba(0, 0, 0, 0.3);
@ -151,7 +306,8 @@
z-index: 22;
border-radius: 50rpx 0 0 50rpx;
}
.all{
.all {
width: 130rpx;
height: 50rpx;
background-color: rgba(0, 0, 0, 0.3);
@ -166,6 +322,7 @@
border-radius: 50rpx 0 0 50rpx;
z-index: 22;
}
.bgImg {
width: 100%;
height: 100%;
@ -233,13 +390,35 @@
}
.hb {
background-image: url('https://www.royaum.com.cn/static/rank/mainbg.png');
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding-top: 30rpx;
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;
@ -263,6 +442,7 @@
position: absolute;
left: 36rpx;
top: -8rpx;
z-index: 2;
}
.goodsInfo {
@ -298,7 +478,7 @@
border-radius: 70rpx;
opacity: 1;
margin-top: 26rpx;
padding: 0 8rpx;
.hotTitle {
margin-right: 8rpx;
@ -337,6 +517,7 @@
color: #301F14;
line-height: 44rpx;
margin-left: 30rpx;
text {
font-size: 48rpx;
font-weight: 600;
@ -358,6 +539,7 @@
display: flex;
align-items: center;
justify-content: center;
.right {
width: 18rpx;
height: 27rpx;

@ -75,7 +75,6 @@
getBrandList() {
const app = this;
let pamars = {
store_id: 10001,
page: 1,
is_brand: 0,
is_new: 1,

@ -55,12 +55,11 @@
},
toggleList(index) {
let len = this.shopList[index].goods_list.length
if (this.shopList[index].sliceIndex >= len) {
if (this.shopList.sliceIndex >= len) {
this.$toast('已展示全部数据')
} else {
this.shopList[index].sliceIndex += 6;
}
},
//
getInfo() {
@ -84,7 +83,7 @@
item.sliceIndex = 6;
item.goods_price_min = Number(item.goods_price_min);
});
this.shopList = result.data.col;
this.shopList = result.data.col.length>0?result.data.col:[];
})
.finally()
},

@ -125,7 +125,7 @@
background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat',
backgroundSize: '100% auto',
},
backgroundImg:''
backgroundImg:'',
}
},
/**

@ -72,7 +72,7 @@
</view>
</view>
<view class="firstContent" @click="goNewUser">
<image :src="$picUrl+'/static/index/new.png?t=1'" class="firstBg"></image>
<image :src="$picUrl+'/static/index/new.png?t='+timestamp" class="firstBg"></image>
<view class="firstInfo">
<view class="fTitle">
<image :src="$picUrl+'/static/index/xinren.png'" class="firstTitle"></image>
@ -112,8 +112,7 @@
</view>
<view class="dapaiContent" @click="goBigGoods" v-if="dapaiList.length>0">
<template v-for="(item,index) in dapaiList" :key="index">
<view class="dapaiItem"
v-if="index <= 9"
<view class="dapaiItem" v-if="index <= 9"
@click="goJump('/pages/goods/detail?goodsId=' + item.goods_id)">
<view class="picContent">
<image :src="item.goods_image"></image>
@ -177,7 +176,7 @@
</view>
<view class="activity">
<view class="left" @click="goNews">
<image :src="$picUrl+'/static/index/activity.png?t=2'" mode="widthFix"></image>
<image :src="$picUrl+'/static/index/activity.png?t='+timestamp" mode="widthFix"></image>
</view>
<view class="right">
<!-- <view class="rightContent"> -->
@ -212,12 +211,12 @@
</view>
<view class="right1Good">
<template v-for="(item,index) in paihangList" :key="index">
<view class="right1Item"
v-if="index <=2"
<view class="right1Item" v-if="index <=2"
@click="goJump('/pages/goods/detail?goodsId=' + item.goods_id)">
<image :src="item.goods_image"></image>
<view class="priceBox">
<image :src="$picUrl+'/static/index/price.png'" mode="heightFix"></image>
<image :src="$picUrl+'/static/index/price.png'" mode="heightFix">
</image>
<view><text></text>{{item.goods_price_min}}</view>
</view>
</view>
@ -467,6 +466,7 @@
isLogin: false,
isTop: false,
logoImage: '',
timestamp: new Date().getTime(),
// background: {
// backgroundColor: 'transparent',
// },
@ -484,31 +484,31 @@
tabCurrent: 0,
swiperList: [`${this.$picUrl}/static/index/guanggao.png`],
gridList: [{
image: `${this.$picUrl}/static/index/g1.png?n=1`,
image: `${this.$picUrl}/static/index/g1.png?n=` + new Date().getTime(),
text: "预售专区",
path: '/pages/activity/presale',
type: 2
},
{
image: `${this.$picUrl}/static/index/g2.png?n=1`,
image: `${this.$picUrl}/static/index/g2.png?n=` + new Date().getTime(),
text: "邀请有礼",
path: '/pages/invite/index',
type: 1
},
{
image: `${this.$picUrl}/static/index/g3.png?n=1`,
image: `${this.$picUrl}/static/index/g3.png?n=` + new Date().getTime(),
text: "领券中心",
path: '/pages/news/coupon/index',
type: 2
},
{
image: `${this.$picUrl}/static/index/g4.png?n=1`,
image: `${this.$picUrl}/static/index/g4.png?n=` + new Date().getTime(),
text: "安装报修",
path: '/pages/serve/index',
type: 3
},
{
image: `${this.$picUrl}/static/index/g5.png?n=1`,
image: `${this.$picUrl}/static/index/g5.png?n=` + new Date().getTime(),
text: "上门回收",
path: '/pages/news/recycling/index',
type: 2
@ -524,100 +524,6 @@
//
count: 4,
value: 2,
tagsList: [
'手机选购', '电脑选购', '配件选购', '旧机回收'
],
dianneiList: [{
image: `${this.$picUrl}/static/index/goods.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GBiphone13 绿色 128GBiphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 1
},
{
image: `${this.$picUrl}/static/index/goods1.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 0
},
{
image: `${this.$picUrl}/static/index/goods.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 0
},
{
image: `${this.$picUrl}/static/index/goods1.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 1
},
{
image: `${this.$picUrl}/static/index/goods.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 0
},
{
image: `${this.$picUrl}/static/index/goods1.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 1
},
{
image: `${this.$picUrl}/static/index/goods.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 1
},
{
image: `${this.$picUrl}/static/index/goods1.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 1
},
{
image: `${this.$picUrl}/static/index/goods.png`,
price: "7599",
linePrice: '7089',
name: 'iphone13 绿色 128GB',
comment: '200+',
rate: '99',
isOwn: true,
isExperss: 1
},
],
weixiuList: [],
commentList: [],
bannerList: [],
@ -727,16 +633,18 @@
},
getTypeList() {
GoodsApi.typeList({
is_in_store: this.current==0?0:1
is_in_store: this.current == 0 ? 0 : 1
}).then(res => {
if (res.status == 200) {
this.tabList = res.data.list;
this.catagoryList = res.data.list[0].children
if(this.current==0){
this.getRankingList(this.tabList[0].category_id)
this.getNewGoods(this.tabList[0].category_id)
if (this.current == 0) {
this.getRankingList(this.tabList[0].category_id)
// this.getNewGoods(this.tabList[0].category_id)
this.getNewGoods()
}
this.getBigList(this.tabList[0].category_id)
this.getBigList()
// this.getBigList(this.tabList[0].category_id)
}
})
},
@ -766,13 +674,14 @@
this.tabCurrent = index;
this.catagoryList = this.tabList[index].children;
this.getRankingList(this.tabList[index].category_id)
this.getNewGoods(this.tabList[index].category_id)
this.getBigList(this.tabList[index].category_id)
// this.getNewGoods(this.tabList[index].category_id)
this.getNewGoods()
// this.getBigList(this.tabList[index].category_id)
this.getBigList()
},
getRankingList(val) {
//
GoodsApi.chartsGoodsJing().then(result => {
let arr = result.data;
let finalArr = arr.filter(item => {
return item.category_id == val
@ -839,11 +748,11 @@
let param = {
page: 1,
per_page: 100,
categoryId: val,
categoryId: '',
is_brand: '',
is_new: 1,
order: 1,
is_in_store:0
is_in_store: 0
}
GoodsApi.brandList(param).then(res => {
let arr = res.data.data
@ -869,11 +778,11 @@
let param = {
page: 1,
per_page: 100,
categoryId: val,
is_brand: this.current==0?1:'',
categoryId: '',
is_brand: this.current == 0 ? 1 : '',
is_new: '',
order: 1,
is_in_store: this.current==0?0:1
is_in_store: this.current == 0 ? 0 : 1
}
GoodsApi.brandList(param).then(res => {
let arr = res.data.data;
@ -937,7 +846,6 @@
changeHome(val) {
this.current = val;
this.getTypeList()
// this.getBigList(this.tabList[this.tabCurrent].category_id)
},
getCityInfo() {
const that = this
@ -1166,7 +1074,8 @@
height: 196rpx;
width: 695rpx;
}
::v-deep .u-swiper-image{
::v-deep .u-swiper-image {
width: 100% !important;
}
}
@ -1281,7 +1190,7 @@
display: flex;
// justify-content: space-between;
align-items: center;
margin-top: 15rpx;
margin-top: 25rpx;
.left {
width: 67%;
@ -2280,4 +2189,4 @@
// height:10px;
// width:10px;
// }
</style>
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 970 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 966 B

Loading…
Cancel
Save