xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
杨鹏
2025-09-09 22:07:09 +08:00
parent 4e5d687c18
commit 1a1bbec15c
9 changed files with 404 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages.json
+33
View File
@@ -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": {
pages/index/chat.vue
+9
View File
@@ -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>
pages/index/list.vue
+291
View File
@@ -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>
pages/index/room.vue
+9
View File
@@ -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>
sheep/components/s-layout/s-layout.vue
+7 -2
View File
@@ -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>
sheep/store/app.js
+34
View File
@@ -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;
}
sheep/ui/su-navbar/su-navbar.vue
+2 -2
View File
@@ -212,8 +212,8 @@
});
const searchModel = computed(() => {
return props.defaultSearch
})
return props.defaultSearch;
});
const themeBgColor = computed(() => {
if (props.dark) {
sheep/ui/su-tab-item/su-tab-item.vue
+2 -1
View File
@@ -89,7 +89,8 @@
const titleStyle = computed(() => uiTabProvide?.props?.titleStyle);
const computedQuery = () => {
uni.createSelectorQuery()
uni
.createSelectorQuery()
.in(vm)
.select('#tab-' + props.index)
.boundingClientRect((data) => {
sheep/ui/su-tabbar-item/su-tabbar-item.vue
+17 -4
View File
@@ -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,