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.
139 lines
3.2 KiB
139 lines
3.2 KiB
<template>
|
|
<div class="classify app_content">
|
|
<!-- 导航栏 -->
|
|
<div class="header_body">
|
|
<header-nav :leftArrow="false" titelText="分类"> </header-nav>
|
|
</div>
|
|
|
|
<!-- 中间 -->
|
|
<div class="warp_body">
|
|
<lodding-card :isLodding="isLodding">
|
|
<div class="warp_left" v-if="classifyList.length">
|
|
<van-sidebar v-model="classifyActive">
|
|
<van-sidebar-item v-for="(item, index) in classifyList" :key="index" :title="item.classifyName"
|
|
@click="chioceClassify(item)" />
|
|
</van-sidebar>
|
|
</div>
|
|
<div class="warp_right">
|
|
<refresh-list v-model:freshMap="freshMap" :classMap="classMap" @refresh="onRefresh" @onLoad="onLoad"
|
|
:resetScroll="resetScroll">
|
|
<div>
|
|
<goodsCard :goodsList="goodsList" :cardAttr="cardAttr"></goodsCard>
|
|
</div>
|
|
<van-empty v-if="goodsList.length == 0" class="no_data" description="暂无数据" />
|
|
</refresh-list>
|
|
</div>
|
|
</lodding-card>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="footer_body">
|
|
<footer-nav></footer-nav>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Classify">
|
|
|
|
const { useClassify } = $globalStore
|
|
|
|
let classifyId = ref(""); // 分类id
|
|
let classifyActive = ref(0); // 是否是选择中分类
|
|
let resetScroll = ref(0); // 滚动记录
|
|
let isLodding = ref(true); // 是否加载中
|
|
let classifyList = reactive([]); // 分类列表
|
|
let goodsList = reactive([]); // 商品列表
|
|
let freshMap = reactive({
|
|
refreshLoad: false, // 是否刷新
|
|
listLoading: false, // 是否加载中
|
|
listFinished: false, // 是否加载完成标识
|
|
});
|
|
|
|
const cardAttr = reactive({
|
|
columnNum: 2,
|
|
gutter: 10,
|
|
itemClass: "recommend_item",
|
|
}); // 商品卡片参数
|
|
|
|
const classMap = reactive({
|
|
refreshClass: "classify_refresh_box",
|
|
}); // 分类样式
|
|
|
|
//下拉刷新
|
|
const onRefresh = () => {
|
|
freshMap.listFinished = false;
|
|
freshMap.listLoading = true;
|
|
getGoodslist();
|
|
};
|
|
|
|
// 触底加载
|
|
const onLoad = () => {
|
|
freshMap.listFinished = true;
|
|
getGoodslist(true);
|
|
};
|
|
|
|
// 点击分类
|
|
const chioceClassify = (item) => {
|
|
classifyId = item?.id;
|
|
resetScroll.value += 1;
|
|
getGoodslist();
|
|
};
|
|
|
|
// 获取分类数据
|
|
const getClassify = async () => {
|
|
const res = await useClassify.getClassify();
|
|
if (res?.code === 20000) {
|
|
classifyList.push(...res?.data);
|
|
return res.data
|
|
} else {
|
|
return ""
|
|
}
|
|
};
|
|
|
|
//获取分类下的商品列表
|
|
const getGoodslist = async (onLoad) => {
|
|
const res = await useClassify.classifyGoods();
|
|
if (res?.code === 20000) {
|
|
goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
|
|
freshMap.refreshLoad = false;
|
|
freshMap.listLoading = false;
|
|
freshMap.listFinished = res?.listFinished;
|
|
if (goodsList.length > 50) {
|
|
freshMap.listFinished = true;
|
|
}
|
|
}
|
|
isLodding.value = false;
|
|
};
|
|
|
|
onMounted(async () => {
|
|
let res = await getClassify();
|
|
if (res && res?.length) {
|
|
classifyId = res?.[0]?.id;
|
|
classifyId && getGoodslist();
|
|
} else {
|
|
isLodding.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.classify {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #f4f4f4;
|
|
|
|
.warp_body {
|
|
display: flex;
|
|
|
|
.warp_left {
|
|
overflow-y: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.warp_right {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|