.
This commit is contained in:
杨鹏
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<s-layout title="聊天" tabbar="/pages/index/chat" navbar="custom" :bgStyle="{ color: '#fff' }">
|
||||
聊天
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/list" title="商品列表" :leftIcon="''">
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view style="width: calc(100% - 180rpx)">
|
||||
<su-tabs :list="categoryState.categoryList" :current="categoryState.curCategory" />
|
||||
</view>
|
||||
<view
|
||||
style="width: 180rpx; flex-shrink: 0; text-align: center"
|
||||
@click="
|
||||
() => {
|
||||
sortState.showFilter = true;
|
||||
}
|
||||
"
|
||||
>综合排序</view
|
||||
>
|
||||
</view>
|
||||
</su-sticky>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<su-popup
|
||||
:show="sortState.showFilter"
|
||||
type="top"
|
||||
round="10"
|
||||
:space="sys_navBar + 38"
|
||||
backgroundColor="#F6F6F6"
|
||||
:zIndex="10"
|
||||
@close="sortState.showFilter = false"
|
||||
>
|
||||
<view class="filter-list-box">
|
||||
<view
|
||||
class="filter-item"
|
||||
v-for="(item, index) in sortState.sortList[sortState.curSortTab].list"
|
||||
:key="item.value"
|
||||
:class="[{ 'filter-item-active': index === sortState.curFilter }]"
|
||||
@tap="onFilterItem(index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
|
||||
<view
|
||||
v-if="goodsState.pagination.total > 0"
|
||||
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top"
|
||||
>
|
||||
<view class="goods-list-box">
|
||||
<view class="left-list" v-for="item in goodsState.leftGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:data="item"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'left')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" />
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list-box">
|
||||
<view class="right-list" v-for="item in goodsState.rightGoodsList" :key="item.id">
|
||||
<s-goods-column
|
||||
class="goods-md-box"
|
||||
size="md"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
:data="item"
|
||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
@getHeight="mountMasonry($event, 'right')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" />
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad } 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 sheep from '@/sheep';
|
||||
import { resetPagination } from '@/sheep/helper/utils';
|
||||
import _ from 'lodash-es';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
||||
onLoad(async (params) => {
|
||||
await getCategoryList();
|
||||
getList();
|
||||
});
|
||||
|
||||
const categoryState = reactive({
|
||||
curCategory: 0,
|
||||
categoryList: [],
|
||||
});
|
||||
// 加载商品分类
|
||||
async function getCategoryList() {
|
||||
const { code, data } = await CategoryApi.getCategoryList();
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
categoryState.categoryList =
|
||||
handleTree(data)[0]?.children?.map((item) => ({
|
||||
...item,
|
||||
sort: item.id,
|
||||
order: false,
|
||||
})) || [];
|
||||
categoryState.categoryList.unshift({
|
||||
name: '全部',
|
||||
sort: 'all',
|
||||
order: false,
|
||||
});
|
||||
}
|
||||
|
||||
const sortState = reactive({
|
||||
curSortTab: 0,
|
||||
sortList: [
|
||||
{
|
||||
name: '综合推荐',
|
||||
list: [
|
||||
{
|
||||
label: '综合推荐',
|
||||
},
|
||||
{
|
||||
label: '价格升序',
|
||||
sort: 'price',
|
||||
order: true,
|
||||
},
|
||||
{
|
||||
label: '价格降序',
|
||||
sort: 'price',
|
||||
order: false,
|
||||
},
|
||||
{
|
||||
label: '销量',
|
||||
sort: 'salesCount',
|
||||
order: false,
|
||||
},
|
||||
{
|
||||
label: '新品优先',
|
||||
sort: 'createTime',
|
||||
order: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
showFilter: false,
|
||||
curOrder: undefined,
|
||||
curSort: undefined,
|
||||
});
|
||||
// 点击 tab 的 list 筛选项
|
||||
const onFilterItem = (val) => {
|
||||
// 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
|
||||
// 这里选择 tabList[0] 的原因，是目前只有它有 list
|
||||
if (
|
||||
sortState.curSort === sortState.sortList[0].list[val].sort &&
|
||||
sortState.curOrder === sortState.sortList[0].list[val].order
|
||||
) {
|
||||
sortState.showFilter = false;
|
||||
return;
|
||||
}
|
||||
sortState.showFilter = false;
|
||||
|
||||
// 设置筛选条件
|
||||
sortState.curFilter = val;
|
||||
sortState.sortList[0].name = sortState.sortList[0].list[val].label;
|
||||
sortState.curSort = sortState.sortList[0].list[val].sort;
|
||||
sortState.curOrder = sortState.sortList[0].list[val].order;
|
||||
// 清空 + 加载数据
|
||||
emptyList();
|
||||
getList();
|
||||
};
|
||||
|
||||
const goodsState = reactive({
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
},
|
||||
leftGoodsList: [],
|
||||
rightGoodsList: [],
|
||||
});
|
||||
|
||||
// 加载瀑布流
|
||||
let count = 0;
|
||||
let leftHeight = 0;
|
||||
let rightHeight = 0;
|
||||
|
||||
// 处理双列布局 leftGoodsList + rightGoodsList
|
||||
function mountMasonry(height = 0, where = 'left') {
|
||||
if (where === 'left') {
|
||||
leftHeight += height;
|
||||
} else {
|
||||
rightHeight += height;
|
||||
}
|
||||
if (!goodsState.pagination.list[count]) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (leftHeight <= rightHeight) {
|
||||
goodsState.leftGoodsList.push(goodsState.pagination.list[count]);
|
||||
} else {
|
||||
goodsState.rightGoodsList.push(goodsState.pagination.list[count]);
|
||||
}
|
||||
count++;
|
||||
}
|
||||
|
||||
// 清空列表
|
||||
function emptyList() {
|
||||
resetPagination(goodsState.pagination);
|
||||
goodsState.leftGoodsList = [];
|
||||
goodsState.rightGoodsList = [];
|
||||
count = 0;
|
||||
leftHeight = 0;
|
||||
rightHeight = 0;
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
// state.loadStatus = 'loading';
|
||||
const { code, data } = await SpuApi.getSpuPage({
|
||||
pageNo: goodsState.pagination.pageNo,
|
||||
pageSize: goodsState.pagination.pageSize,
|
||||
sortField: sortState.curSort,
|
||||
sortAsc: sortState.curOrder,
|
||||
categoryId: categoryState.curCategory,
|
||||
keyword: '',
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
// 拼接结算信息（营销）
|
||||
// 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';
|
||||
mountMasonry();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filter-list-box {
|
||||
padding: 28rpx 52rpx;
|
||||
|
||||
.filter-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-item-active {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<s-layout title="试衣间" tabbar="/pages/index/room" navbar="custom" :bgStyle="{ color: '#fff' }">
|
||||
试衣间
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user