商品列表
This commit is contained in:
杨鹏
+80
-19
@@ -3,18 +3,34 @@
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view style="width: calc(100% - 180rpx)">
|
||||
<su-tabs :list="categoryState.categoryList" :current="categoryState.curCategory" />
|
||||
<view style="width: calc(100% - 210rpx)">
|
||||
<su-tabs
|
||||
:list="categoryState.categoryList"
|
||||
:current="categoryState.curCategoryTab"
|
||||
@change="onCategoryTabsChange"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
style="width: 180rpx; flex-shrink: 0; text-align: center"
|
||||
style="
|
||||
width: 210rpx;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
@click="
|
||||
() => {
|
||||
sortState.showFilter = true;
|
||||
}
|
||||
"
|
||||
>综合排序</view
|
||||
>
|
||||
{{ sortState.sortList[0].name }}
|
||||
<image
|
||||
src="https://3d.aidigitalfield.com/imgs/down-icon.png"
|
||||
style="width: 36rpx; height: 36rpx"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</su-sticky>
|
||||
|
||||
@@ -47,7 +63,8 @@
|
||||
>
|
||||
<view class="goods-list-box">
|
||||
<view class="left-list" v-for="item in goodsState.leftGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
<!-- 很多地方都引入了s-goods-column组件，为了不影响其他页面，这里用s-goods-column-another组件 -->
|
||||
<s-goods-column-another
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:data="item"
|
||||
@@ -59,12 +76,12 @@
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" />
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</s-goods-column-another>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list-box">
|
||||
<view class="right-list" v-for="item in goodsState.rightGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
<s-goods-column-another
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:topRadius="10"
|
||||
@@ -76,22 +93,37 @@
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" />
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</s-goods-column-another>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="goodsState.pagination.total > 0"
|
||||
:status="goodsState.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
<s-empty
|
||||
v-if="goodsState.pagination.total === 0"
|
||||
icon="/static/soldout-empty.png"
|
||||
text="暂无商品"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { handleTree } from '@/sheep/helper/utils';
|
||||
import CategoryApi from '@/sheep/api/product/category';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import sheep from '@/sheep';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
import _ from 'lodash-es';
|
||||
import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
||||
@@ -101,6 +133,7 @@
|
||||
});
|
||||
|
||||
const categoryState = reactive({
|
||||
curCategoryTab: 0,
|
||||
curCategory: 0,
|
||||
categoryList: [],
|
||||
});
|
||||
@@ -117,14 +150,16 @@
|
||||
order: false,
|
||||
})) || [];
|
||||
categoryState.categoryList.unshift({
|
||||
id: 0,
|
||||
name: '全部',
|
||||
sort: 'all',
|
||||
sort: 0,
|
||||
order: false,
|
||||
});
|
||||
}
|
||||
|
||||
const sortState = reactive({
|
||||
curSortTab: 0,
|
||||
curFilter: 0,
|
||||
sortList: [
|
||||
{
|
||||
name: '综合推荐',
|
||||
@@ -159,7 +194,17 @@
|
||||
curOrder: undefined,
|
||||
curSort: undefined,
|
||||
});
|
||||
// 点击 tab 的 list 筛选项
|
||||
|
||||
// 选择分类
|
||||
function onCategoryTabsChange(e) {
|
||||
if (e.index === categoryState.curCategoryTab) return;
|
||||
categoryState.curCategoryTab = e.index;
|
||||
categoryState.curCategory = e.id;
|
||||
emptyList();
|
||||
getList();
|
||||
}
|
||||
|
||||
// 排序规则
|
||||
const onFilterItem = (val) => {
|
||||
// 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
|
||||
// 这里选择 tabList[0] 的原因，是目前只有它有 list
|
||||
@@ -189,6 +234,7 @@
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
},
|
||||
loadStatus: '',
|
||||
leftGoodsList: [],
|
||||
rightGoodsList: [],
|
||||
});
|
||||
@@ -228,7 +274,7 @@
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
// state.loadStatus = 'loading';
|
||||
goodsState.loadStatus = 'loading';
|
||||
const { code, data } = await SpuApi.getSpuPage({
|
||||
pageNo: goodsState.pagination.pageNo,
|
||||
pageSize: goodsState.pagination.pageSize,
|
||||
@@ -241,17 +287,32 @@
|
||||
return;
|
||||
}
|
||||
// 拼接结算信息（营销）
|
||||
// await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
|
||||
// if (res.code !== 0) {
|
||||
// return;
|
||||
// }
|
||||
// appendSettlementProduct(data.list, res.data);
|
||||
// });
|
||||
await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
appendSettlementProduct(data.list, res.data);
|
||||
});
|
||||
goodsState.pagination.list = _.concat(goodsState.pagination.list, data.list);
|
||||
goodsState.pagination.total = data.total;
|
||||
// state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
goodsState.loadStatus =
|
||||
goodsState.pagination.list.length < goodsState.pagination.total ? 'more' : 'noMore';
|
||||
mountMasonry();
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (goodsState.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
goodsState.pagination.pageNo++;
|
||||
getList();
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user