数据排行榜列表展示，用于排行页面展示

<template> <view class="wrap"> <image class="recimg" src="https://api.ezhuchina.com/images/wechat/2024/recaibj.png" mode=""></image> <view class="u-page" style="height: 100%;"> <view style="width: 100%;position: fixed;left: 0;top: 0;z-index: 100;"> <view class="zhaob"> <image src="../../../static/index/fanhui2.png" mode="" @click="gateTo()"></image> </view> </view> <view class="commodity"> <view class="commodity-ul"> <view class="commodity-li" v-for="(item,i) in shoplist" :key="i" @click="particularstap(item)"> <image class="image-top" :src="item.PreviewImagePath" mode=""></image> <image class="phimg" v-if="i==0" src="https://api.ezhuchina.com/images/wechat/2024/paihang1.png" mode=""></image> <image class="phimg" v-if="i==1" src="https://api.ezhuchina.com/images/wechat/2024/paihang2.png" mode=""></image> <image class="phimg" v-if="i==2" src="https://api.ezhuchina.com/images/wechat/2024/paihang3.png" mode=""></image> <view class="commodity-rig"> <view class="title-top"> {{item.Name}} </view> <view class="title-top2"> <view class=""> {{item.SecondaryName}} </view> </view> <view class="title-top5" v-if="i==0||i==1"> 推荐指数 <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> </view> <view class="title-top5" v-if="i==2||i==3"> 推荐指数 <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao2.png" mode=""></image> </view> <view class="title-top5" v-if="i==4||i==5"> 推荐指数 <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao3.png" mode=""></image> </view> <view class="title-top5" v-if="i==6||i==7"> 推荐指数 <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao2.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao3.png" mode=""></image> </view> <view class="title-top5" v-if="i==8||i==9"> 推荐指数 <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao1.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao3.png" mode=""></image> <image src="https://api.ezhuchina.com/images/wechat/2024/huomiao3.png" mode=""></image> </view> <view class="title-top3"> <span>￥</span>{{item.PriceMin}}~{{item.PriceMax}} </view> </view> </view> </view> </view> </view> </view> </template> <script> import utiliy from '@/utiliy/utiliy.js' import { getMallgoodscategory, getMallgoodsList } from '@/utiliy/api.js' export default { mixins: [utiliy], data() { return { keyword: '', classifylist: [], fltype: 0, shoplist: [], //商品列表 pageQueryDatalShop: { PageInfo: { PageIndex: 1, PageSize: 10, OrderBy: "IsHot desc" //返回的data中任意字段都可以用来排序，desc降序，asc升序，多组逗号分隔，例如按置顶并热门："IsTop desc,IsHot desc" }, CategoryFullId: '' }, }; }, computed: {}, onLoad() { this.getMallgory() }, onShow() {}, methods: { particularstap(item) { uni.navigateTo({ url: '/pagesC/shop/particulars/index?id=' + item.GoodsId, animationType: 'pop-in', animationDuration: 300 }); }, gateTo() { uni.navigateBack({ delta: 1 }); }, fltap(item, i) { this.fltype = i this.getMallList(item.FullId) }, getMallgory() { var data = { pid: 0 } getMallgoodscategory(data).then(res => { if (res.code == 200) { this.classifylist = res.data var obj = { Name: '热门推荐', FullId: '10000' } this.classifylist.unshift(obj) this.getMallList(this.classifylist[0].FullId) } }) }, getMallList(FullId) { if (FullId == '10000') { this.pageQueryDatalShop.CategoryFullId = '' } else { this.pageQueryDatalShop.CategoryFullId = FullId } getMallgoodsList(this.pageQueryDatalShop).then(res => { if (res.code == 200) { this.shoplist = res.data } }) }, //搜索 searchFun(e) { uni.navigateTo({ url: '/pagesC/shop/search/index?name=' + e, animationType: 'pop-in', animationDuration: 300 }); }, searchClick(e) {}, //客服 searchtap() { }, } }; </script> <style lang="scss" scoped> @import 'index.scss' </style> <style lang="scss" scoped> .wrap { display: flex; flex-direction: column; width: 100%; background: #1C1C1C; border-bottom: 1px solid #1C1C1C; } </style>