1.首页代码
<template>
<view>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item,i) in swiperList" :key="i">
<navigator class="swiper-item" :url="'../../subpkg/productDetail/productDetail?id='+item.id">
<image :src="item.imageSrc" mode="scaleToFill"></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.imageSrc" mode="scaleToFill"></image>{{item.name}}
</view>
</view>
<view class="floor-list">
<view class="floor-item" v-for="(item,i) in floorList" :key="i">
<image :src="item.imageSrc" class="floor-title"></image>
<view class="floor-img-box">
<navigator class="left-img-box" :url="item.products[0].url">
<image src="../../static/home/floor/imgbox/优质服饰.png" mode="widthFix" style="width: 232rpx;">
</image>
</navigator>
<view class="right-img-box">
<navigator :url="item.products[0].url" class="right-img-item" v-for="(item2,i2) in item.products" :key="i2" v-if="i2!==0">
<image :src="item2.imageSrc" mode="widthFix" style="width: 232rpx;"></image>
</navigator>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: [],
navList: [],
floorList: []
}
},
onLoad() {
this.getSwiperList()
this.getNavList()
this.getFloorList()
},
methods: {
getSwiperList() {
uni.request({
url: uni.$baseUrl + '/api/Home/GetSwiperList',
})
.then((res) => {
if (res.data.code != 200) return uni.$showMsg();
this.swiperList = res.data.data;
});
},
getNavList() {
uni.request({
url: uni.$baseUrl + '/api/Home/GetNavList',
})
.then((res) => {
if (res.data.code != 200) return uni.$showMsg();
this.navList = res.data.data;
});
},
getFloorList() {
uni.request({
url: uni.$baseUrl + '/api/Home/GetFloorList',
})
.then((res) => {
if (res.data.code != 200) return uni.$showMsg();
res.data.data.forEach(floor=>{
floor.products.forEach(prod=>{
prod.url='/subpkg/goods_list/goods_list?'+prod.name
})
})
this.floorList = res.data.data;
});
},
navClickHandler(item) {
if (item.name == '全部分类')
uni.switchTab({
url: '/pages/cate/cate'
})
}
}
}
</script>
<style lang="scss">
swiper {
width: 100%;
.swiper-item image {
width: 100%;
}
}
.nav-list {
display: flex;
justify-content: space-around;
margin: 10rpx;
font-size: 14px;
text-align: center;
.nav-item image {
display: flex;
justify-content: center;
width: 110rpx;
height: 110rpx;
}
}
.floor-title {
width: 100%;
height: 60rpx;
}
.floor-img-box {
display: flex;
padding-left: 10rpx;
}
.right-img-box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
2.效果示例