.
This commit is contained in:
杨鹏
+33
@@ -32,6 +32,39 @@
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品列表"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "商品列表",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/room",
|
||||
"style": {
|
||||
"navigationBarTitleText": "试衣间"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "试衣间",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/chat",
|
||||
"style": {
|
||||
"navigationBarTitleText": "聊天"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "聊天",
|
||||
"group": "商城"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/category",
|
||||
"style": {
|
||||
|
||||
@@ -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>
|
||||
@@ -14,6 +14,7 @@
|
||||
:opacityBgUi="opacityBgUi"
|
||||
@search="(e) => emits('search', e)"
|
||||
:defaultSearch="defaultSearch"
|
||||
:leftIcon="leftIcon"
|
||||
/>
|
||||
|
||||
<!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
|
||||
@@ -135,6 +136,10 @@
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['search']);
|
||||
|
||||
@@ -213,11 +218,11 @@
|
||||
// #endif
|
||||
|
||||
// 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
if (!isEmpty(shareInfo.value)) {
|
||||
sheep.$platform.share.updateShareInfo(shareInfo.value);
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -195,6 +195,40 @@ const adaptTemplate = async (appTemplate, templateId) => {
|
||||
// appTemplate.basic.tabbar.badgeStyle = {
|
||||
// backgroundColor: '#882222',
|
||||
// }
|
||||
|
||||
appTemplate.basic.tabbar.items = [
|
||||
{
|
||||
activeIconUrl: "https://3d.aidigitalfield.com/imgs/home.png",
|
||||
iconUrl: "https://3d.aidigitalfield.com/imgs/home.png",
|
||||
text: "首页",
|
||||
url: "/pages/index/index",
|
||||
},
|
||||
{
|
||||
activeIconUrl: "https://3d.aidigitalfield.com/imgs/list.png",
|
||||
iconUrl: "https://3d.aidigitalfield.com/imgs/list.png",
|
||||
text: "商品列表",
|
||||
url: "/pages/index/list",
|
||||
},
|
||||
{
|
||||
activeIconUrl: "https://3d.aidigitalfield.com/imgs/room.png",
|
||||
iconUrl: "https://3d.aidigitalfield.com/imgs/room.png",
|
||||
text: "试衣间",
|
||||
url: "/pages/index/room",
|
||||
},
|
||||
{
|
||||
activeIconUrl: "https://3d.aidigitalfield.com/imgs/chat.png",
|
||||
iconUrl: "https://3d.aidigitalfield.com/imgs/chat.png",
|
||||
text: "聊天",
|
||||
url: "/pages/index/chat",
|
||||
},
|
||||
{
|
||||
activeIconUrl: "https://3d.aidigitalfield.com/imgs/my.png",
|
||||
iconUrl: "https://3d.aidigitalfield.com/imgs/my.png",
|
||||
text: "我的",
|
||||
url: "/pages/index/user",
|
||||
},
|
||||
];
|
||||
|
||||
if (tabBar?.theme) {
|
||||
appTemplate.basic.theme = tabBar?.theme;
|
||||
}
|
||||
|
||||
@@ -212,8 +212,8 @@
|
||||
});
|
||||
|
||||
const searchModel = computed(() => {
|
||||
return props.defaultSearch
|
||||
})
|
||||
return props.defaultSearch;
|
||||
});
|
||||
|
||||
const themeBgColor = computed(() => {
|
||||
if (props.dark) {
|
||||
|
||||
@@ -89,7 +89,8 @@
|
||||
const titleStyle = computed(() => uiTabProvide?.props?.titleStyle);
|
||||
|
||||
const computedQuery = () => {
|
||||
uni.createSelectorQuery()
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(vm)
|
||||
.select('#tab-' + props.index)
|
||||
.boundingClientRect((data) => {
|
||||
|
||||
@@ -24,9 +24,22 @@
|
||||
<slot v-else name="inactive-icon" />
|
||||
</block>
|
||||
</uni-badge>
|
||||
</view>
|
||||
|
||||
<slot name="text">
|
||||
<!-- 选中的当前tabbar加上下横线 -->
|
||||
<view
|
||||
:style="{
|
||||
width: '20rpx',
|
||||
height: '1rpx',
|
||||
background: '#000',
|
||||
position: 'absolute',
|
||||
left: 'calc(50% - 10rpx)',
|
||||
bottom: '-5rpx',
|
||||
display: isActive ? 'inline-block' : 'none',
|
||||
}"
|
||||
/>
|
||||
</view>
|
||||
<!-- 底部tabbar不要文字 -->
|
||||
<!-- <slot name="text">
|
||||
<text
|
||||
class="u-tabbar-item__text"
|
||||
:style="{
|
||||
@@ -35,7 +48,7 @@
|
||||
>
|
||||
{{ text }}
|
||||
</text>
|
||||
</slot>
|
||||
</slot> -->
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
@@ -104,7 +117,7 @@
|
||||
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
|
||||
badgeStyle: {
|
||||
type: Object,
|
||||
default: ()=>{},
|
||||
default: () => {},
|
||||
},
|
||||
isCenter: {
|
||||
type: Boolean,
|
||||
|
||||
Reference in New Issue
Block a user