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-11 10:43:26 +08:00
parent 1a1bbec15c
commit a0f751c2c0
4 changed files with 1212 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/home.vue
+94
View File
@@ -0,0 +1,94 @@
<!-- 这里是模板原来的首页代码 -->
<!-- 首页，支持店铺装修 -->
<template>
<view v-if="template">
<s-layout
title="首页"
navbar="custom"
tabbar="/pages/index/index"
:bgStyle="template.page"
:navbarStyle="template.navigationBar"
onShareAppMessage
>
<s-block
v-for="(item, index) in template.components"
:key="index"
:styles="item.property.style"
>
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block>
</s-layout>
</view>
</template>
<script setup>
import { computed } from 'vue';
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
// 隐藏原生tabBar
uni.hideTabBar({
fail: () => {},
});
const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
// (async function() {
// console.log('原代码首页定制化数据',template)
// let {
// data
// } = await index2Api.decorate();
// console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
// 改变首页底部数据 但是没有通过数组id获取商品数据接口
// let {
// data: datas
// } = await index2Api.spids();
// template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
// template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
// return {
// src: item.picUrl,
// url: item.url,
// title: item.name,
// type: "image"
// }
// })
// }())
onLoad((options) => {
// #ifdef MP
// 小程序识别二维码
if (options.scene) {
const sceneParams = decodeURIComponent(options.scene).split('=');
console.log('sceneParams=>', sceneParams);
options[sceneParams[0]] = sceneParams[1];
}
// #endif
// 预览模板
if (options.templateId) {
sheep.$store('app').init(options.templateId);
}
// 解析分享信息
if (options.spm) {
$share.decryptSpm(options.spm);
}
// 进入指定页面(完整页面路径)
if (options.page) {
sheep.$router.go(decodeURIComponent(options.page));
}
});
// 下拉刷新
onPullDownRefresh(() => {
sheep.$store('app').init();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 800);
});
onPageScroll(() => {});
</script>
<style></style>
pages/index/index.vue
+5 -87
View File
@@ -1,93 +1,11 @@
<!-- 首页，支持店铺装修 -->
<template>
<view v-if="template">
<s-layout
title="首页"
navbar="custom"
tabbar="/pages/index/index"
:bgStyle="template.page"
:navbarStyle="template.navigationBar"
onShareAppMessage
>
<s-block
v-for="(item, index) in template.components"
:key="index"
:styles="item.property.style"
>
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block>
<view>
<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="{ color: '#fff' }">
首页
</s-layout>
</view>
</template>
<script setup>
import { computed } from 'vue';
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
// 隐藏原生tabBar
uni.hideTabBar({
fail: () => {},
});
<script setup></script>
const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
// (async function() {
// console.log('原代码首页定制化数据',template)
// let {
// data
// } = await index2Api.decorate();
// console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
// 改变首页底部数据 但是没有通过数组id获取商品数据接口
// let {
// data: datas
// } = await index2Api.spids();
// template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
// template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
// return {
// src: item.picUrl,
// url: item.url,
// title: item.name,
// type: "image"
// }
// })
// }())
onLoad((options) => {
// #ifdef MP
// 小程序识别二维码
if (options.scene) {
const sceneParams = decodeURIComponent(options.scene).split('=');
console.log('sceneParams=>', sceneParams);
options[sceneParams[0]] = sceneParams[1];
}
// #endif
// 预览模板
if (options.templateId) {
sheep.$store('app').init(options.templateId);
}
// 解析分享信息
if (options.spm) {
$share.decryptSpm(options.spm);
}
// 进入指定页面(完整页面路径)
if (options.page) {
sheep.$router.go(decodeURIComponent(options.page));
}
});
// 下拉刷新
onPullDownRefresh(() => {
sheep.$store('app').init();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 800);
});
onPageScroll(() => {});
</script>
<style></style>
<style lang="scss" scoped></style>
pages/index/list.vue
+80 -19
View File
@@ -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>