文章目录
- 前言
- 一、楼层区域
- 1.获取楼层数据
- 2.完整代码
- 3.效果
前言
讲楼层之前需要了解商品分类，商品分类是指根据一定的管理目的，为满足商品生产、流通、消费活动的全部或部分需要，将管理范围内的商品集合总体，以所选择的适当的商品基本特征作为分类标志，逐次归纳为若干个范围更小、特质更趋一致的子集合体（类目），例如大类、中类、小类、细类，直至品种、细目等，从而使该范围内所有商品得以明确区分与体系化的过程。 商品种类繁多，据不完全统计，在市场上流通的商品有25万种以上。为了方便消费者购买，有利于商业部门组织商品流通，提高企业经营管理水平，须对众多的商品进行科学分类。商品分类是指为了一定目的，选择适当的分类标志，将商品集合总体科学地、系统地逐级划分为门类、大类、中类、小类、品类以至品种、花色、规格的过程称为商品分类。
楼层主要是基于商品分类推荐的商品展示，摆在首页，主要是向用户展示商品，可以引流用户到相应的商品类别页面。
一、楼层区域
1.获取楼层数据
实现思路：
定义 data 数据
在 onLoad 中调用获取数据的方法
在 methods 中定义获取数据的方法
2.完整代码
代码语言：javascript复制<template>
<view>
<!-- 轮播图的区域 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item, i) in swiperList" :key="i">
<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' item.goods_id">
<image :src="item.image_src"></image>
</navigator>
</swiper-item>
</swiper>
<!-- 分类导航区域 -->
<view class="nav-list">
<view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
<image :src="item.image_src" class="nav-img"></image>
</view>
</view>
<!-- 楼层区域 -->
<view class="floor-list">
<!-- 楼层 item 项 -->
<view class="floor-item" v-for="(item, i) in floorList" :key="i">
<!-- 楼层标题 -->
<image :src="item.floor_title.image_src" class="floor-title"></image>
<!-- 楼层图片区域 -->
<view class="floor-img-box">
<!-- 左侧大图片的盒子 -->
<view class="left-img-box">
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width 'rpx'}"
mode="widthFix"></image>
</view>
<!-- 右侧 4 个小图片的盒子 -->
<view class="right-img-box">
<view class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-show="i2 !== 1">
<image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width 'rpx'}"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 这是轮播图的数据列表
swiperList: [],
// 分类导航的数据列表
navList: [],
floorList: [],
};
},
onLoad() {
// 调用方法，获取轮播图的数据
this.getSwiperList()
this.getNavList()
this.getFloorList()
},
methods: {
async getSwiperList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/swiperdata')
// 请求失败
if (res.meta.status !== 200) return uni.$showMsg()
this.swiperList = res.message
},
async getNavList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/catitems')
if (res.meta.status !== 200) return uni.$showMsg()
this.navList = res.message
},
navClickHandler(item) {
if (item.name === '分类') {
uni.switchTab({
url: '/pages/cate/cate'
})
}
},
async getFloorList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
if (res.meta.status !== 200) return uni.$showMsg()
this.floorList = res.message
},
}
}
</script>
<style lang="scss">
swiper {
height: 330rpx;
.swiper-item,
image {
width: 100%;
height: 100%;
}
}
.nav-list {
display: flex;
justify-content: space-around;
margin: 15px 0;
.nav-img {
width: 128rpx;
height: 140rpx;
}
}
.floor-title {
height: 60rpx;
width: 100%;
display: flex;
}
.right-img-box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.floor-img-box {
display: flex;
padding-left: 10rpx;
}
</style>3.效果
