.
This commit is contained in:
杨鹏
+33
@@ -32,6 +32,39 @@
|
|||||||
"group": "商城"
|
"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",
|
"path": "pages/index/category",
|
||||||
"style": {
|
"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"
|
:opacityBgUi="opacityBgUi"
|
||||||
@search="(e) => emits('search', e)"
|
@search="(e) => emits('search', e)"
|
||||||
:defaultSearch="defaultSearch"
|
:defaultSearch="defaultSearch"
|
||||||
|
:leftIcon="leftIcon"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
|
<!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
|
||||||
@@ -135,6 +136,10 @@
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
leftIcon: {
|
||||||
|
type: String,
|
||||||
|
default: 'left',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const emits = defineEmits(['search']);
|
const emits = defineEmits(['search']);
|
||||||
|
|
||||||
@@ -213,11 +218,11 @@
|
|||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
|
// 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
|
||||||
onMounted(()=>{
|
onMounted(() => {
|
||||||
if (!isEmpty(shareInfo.value)) {
|
if (!isEmpty(shareInfo.value)) {
|
||||||
sheep.$platform.share.updateShareInfo(shareInfo.value);
|
sheep.$platform.share.updateShareInfo(shareInfo.value);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -195,6 +195,40 @@ const adaptTemplate = async (appTemplate, templateId) => {
|
|||||||
// appTemplate.basic.tabbar.badgeStyle = {
|
// appTemplate.basic.tabbar.badgeStyle = {
|
||||||
// backgroundColor: '#882222',
|
// 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) {
|
if (tabBar?.theme) {
|
||||||
appTemplate.basic.theme = tabBar?.theme;
|
appTemplate.basic.theme = tabBar?.theme;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -212,8 +212,8 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
const searchModel = computed(() => {
|
const searchModel = computed(() => {
|
||||||
return props.defaultSearch
|
return props.defaultSearch;
|
||||||
})
|
});
|
||||||
|
|
||||||
const themeBgColor = computed(() => {
|
const themeBgColor = computed(() => {
|
||||||
if (props.dark) {
|
if (props.dark) {
|
||||||
|
|||||||
@@ -89,7 +89,8 @@
|
|||||||
const titleStyle = computed(() => uiTabProvide?.props?.titleStyle);
|
const titleStyle = computed(() => uiTabProvide?.props?.titleStyle);
|
||||||
|
|
||||||
const computedQuery = () => {
|
const computedQuery = () => {
|
||||||
uni.createSelectorQuery()
|
uni
|
||||||
|
.createSelectorQuery()
|
||||||
.in(vm)
|
.in(vm)
|
||||||
.select('#tab-' + props.index)
|
.select('#tab-' + props.index)
|
||||||
.boundingClientRect((data) => {
|
.boundingClientRect((data) => {
|
||||||
|
|||||||
@@ -24,9 +24,22 @@
|
|||||||
<slot v-else name="inactive-icon" />
|
<slot v-else name="inactive-icon" />
|
||||||
</block>
|
</block>
|
||||||
</uni-badge>
|
</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
|
<text
|
||||||
class="u-tabbar-item__text"
|
class="u-tabbar-item__text"
|
||||||
:style="{
|
:style="{
|
||||||
@@ -35,7 +48,7 @@
|
|||||||
>
|
>
|
||||||
{{ text }}
|
{{ text }}
|
||||||
</text>
|
</text>
|
||||||
</slot>
|
</slot> -->
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -104,7 +117,7 @@
|
|||||||
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
|
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
|
||||||
badgeStyle: {
|
badgeStyle: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: ()=>{},
|
default: () => {},
|
||||||
},
|
},
|
||||||
isCenter: {
|
isCenter: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|||||||
Reference in New Issue
Block a user