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.
shop-app/pages/goods/category.vue

231 lines
5.3 KiB

<template>
<view class="container">
<!-- 搜索框 -->
<UiPageHeader :back="false" class="search">
<u--input slot="custom" class="search--input" prefixIconStyle="font-size:48rpx;color:#ccc"
prefixIcon="search" placeholderClass="search--input__placeholder" clearable
placeholder="请输入您想要搜索的商品名称"
@focus="$Router.push('/search')"/>
</UiPageHeader>
<view class="cate-content" v-if="categoryData.length > 0">
<!-- 左侧 一级分类 -->
<scroll-view class="cate-left" :scroll-y="true">
<text class="type-nav" :class="{ selected: curIndex == index }"
v-for="(item, index) in categoryData" @click="handleSelectNav(index)"
:key="index" >{{ item.name }}</text>
</scroll-view>
<!-- 右侧 二级分类 -->
<scroll-view class="cate-right" @scrolltolower="reachBottom" :scroll-top="scrollTop" :scroll-y="true">
<image class="cate-tow-img" src="@/static/goods/category_banner.jpg"></image>
<!-- <view @click="onTargetGoodsList(item.id)"> -->
<view class="cate-tow-group" :class="idx === categoryData[curIndex].children.length - 1 ? 'cate-tow-group__last' :''"
v-for="(item, idx) in categoryData[curIndex].children" :key="idx">
<text class="cate-tow-group--title">{{item.name}}</text>
<view class="cate-tow-group--item" v-for="i in item.productList" :key="i.id"
@click="$Router.push(`/goodsDetail?id=${i.id}`)">
<image class="cate-tow-group--img" mode="scaleToFill"
:src="i.mainPicture"></image>
<text class="cate-tow-group--name">{{i.name}}</text>
</view>
</view>
<!-- </view> -->
<BsEmpty class="empty" v-if="!categoryData[curIndex].children.length && !categoryData[curIndex].isLoading"
:icon="require('@/static/common/empty_goods.png')" />
<u-loadmore status="loading" v-if="categoryData[curIndex].isLoading" />
</scroll-view>
</view>
<BsEmpty v-if="!categoryData.length && !isLoading" />
<u-loadmore status="loading" v-if="isLoading" />
</view>
</template>
<script>
import {ApiGetCategoryOneList, ApiGetCategoryTwoAndGoods} from '@/common/api/goods';
import BsEmpty from "@/components/BsEmpty";
import UiPageHeader from '../../components/UiPageHeader.vue';
export default {
components: { BsEmpty, UiPageHeader },
data() {
return {
// 一级分类:指针
curIndex: 0,
// 内容区竖向滚动条位置
scrollTop: 0,
// 分类列表
categoryData: [],
// 正在加载中
isLoading: true,
};
},
onLoad() {
// 加载页面数据
this.getCategoryData();
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// this.getCategoryData();
},
methods: {
// 一级分类:选中分类
handleSelectNav(index) {
this.curIndex = index;
this.scrollTop = 0;
},
reachBottom(){
if(this.curIndex >= this.categoryData.length){
return false
}
this.handleSelectNav(this.curIndex+1);
},
/**
* 获取分类数据
*/
async getCategoryData() {
this.isLoading = true;
// 初始化分类列表数据
const {error, result } = await ApiGetCategoryOneList();
this.categoryData = result.map((item) => {
item.children = [];
item.isLoading = true;
this.getTwoCategoryData(item);
return item;
});
this.isLoading = false;
},
/**
* 初始化分类列表数据
* @param {Object} result
*/
async getTwoCategoryData(item) {
const {error, result} = await ApiGetCategoryTwoAndGoods({categoryId : item.id});
this.$set(item, 'children', result);
this.$set(item, 'isLoading', false);
}
},
};
</script>
<style lang="scss">
page {
background: $color-grey0;
}
</style>
<style lang="scss" scoped>
.search{
/* #ifdef H5 */
height: 88rpx;
padding: 0 30rpx;
/* #endif */
/* #ifndef H5 */
height: 176rpx;
padding: 88rpx 30rpx 0;
/* #endif */
background: $color-grey0;
}
.search--input{
display: block;
height: 70rpx;
border:none;
box-sizing: border-box;
background: $color-grey1;
&__placeholder{
font-size: $font-size-base;
color: $color-grey5;
}
}
.cate-content {
background: $color-grey0;
height: calc(100vh - 180rpx);
display: flex;
}
.cate-left {
width: 190rpx;
color: #444;
height: 100%;
background: $color-grey1;
}
.cate-right {
height: 100%;
padding: 30rpx 0 0;
overflow: hidden;
box-sizing: border-box;
}
.type-nav {
display: block;
width: 190rpx;
height: 100rpx;
line-height: 100rpx;
font-size: $font-size-base;
text-align: center;
color: $color-grey4;
}
.type-nav.selected {
background: $color-grey0;
color: $color-yellow3;
font-size: $font-size-base;
font-weight: bold;
}
.cate-tow-img{
width:480rpx;
margin: 0 40rpx 20rpx;
height: 164rpx;
background: $color-grey3;
border-radius: 16rpx;
}
.cate-tow-group{
display: flex;
flex-wrap: wrap;
// margin-bottom: 20rpx;
&--title{
padding: 20rpx 40rpx;
display: block;
width: 100%;
font-size: 30rpx;
line-height: 30rpx;
font-weight: bold;
color: $color-grey6;
}
&--item{
margin-left: 40rpx;
}
&--img{
display: block;
width: 130rpx;
height: 130rpx;
}
&--name{
display: block;
width: 130rpx;
text-align: center;
font-size: $font-size-sm;
line-height: 30rpx;
margin: 14rpx 0 20rpx;
color: $color-grey6;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
&__last{
padding-bottom: 200rpx;
}
}
.empty{
margin-top: 100rpx;
}
</style>