From b235cb0d8d07c39b33db6546304b60eb7284b8c7 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Fri, 15 Dec 2023 23:46:24 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E5=95=86=E5=93=81=E5=88=97?= =?UTF-8?q?=E8=A1=A8=EF=BC=9A=E5=B7=B2=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/goods/list.vue | 75 ++++++++++--------- .../s-goods-column/s-goods-column.vue | 31 ++++---- 2 files changed, 56 insertions(+), 50 deletions(-) diff --git a/pages/goods/list.vue b/pages/goods/list.vue index 8ebcfd0e..6fae6231 100644 --- a/pages/goods/list.vue +++ b/pages/goods/list.vue @@ -20,7 +20,7 @@ :zIndex="10" @close="state.showFilter = false"> {{ item.label }} @@ -52,9 +52,10 @@ :topRadius="10" :bottomRadius="10" @click="sheep.$router.go('/pages/goods/index', { id: item.id })" - @getHeight="mountMasonry($event, 'left')"> + @getHeight="mountMasonry($event, 'left')" + > @@ -68,7 +69,8 @@ :bottomRadius="10" :data="item" @click="sheep.$router.go('/pages/goods/index', { id: item.id })" - @getHeight="mountMasonry($event, 'right')"> + @getHeight="mountMasonry($event, 'right')" + > @@ -103,20 +105,18 @@ pageNo: 1, pageSize: 6, }, - // currentSort: 'weigh', - // currentOrder: 'desc', - currentTab: 0, - curFilter: 0, + currentSort: undefined, + currentOrder: undefined, + currentTab: 0, // 当前选中的 tab + curFilter: 0, // 当前选中的 list 筛选项 showFilter: false, iconStatus: false, // true - 单列布局；false - 双列布局 - categoryId: 0, + keyword: '', + categoryId: 0, tabList: [{ name: '综合推荐', - // value: '', list: [{ - label: '综合推荐', - // sort: '', - // order: true, + label: '综合推荐' }, { label: '价格升序', @@ -133,16 +133,15 @@ { name: '销量', sort: 'salesCount', - order: false, - // value: 'salesCount', + order: false }, { name: '新品优先', - // value: 'create_time', + value: 'createTime', + order: false }, ], loadStatus: '', - keyword: '', leftGoodsList: [], // 双列布局 - 左侧商品 rightGoodsList: [], // 双列布局 - 右侧商品 }); @@ -152,6 +151,7 @@ let leftHeight = 0; let rightHeight = 0; + // 处理双列布局 leftGoodsList + rightGoodsList function mountMasonry(height = 0, where = 'left') { if (!state.pagination.list[count]) { return; @@ -189,49 +189,54 @@ // 点击 function onTabsChange(e) { + // 如果点击的是【综合推荐】，则直接展开或者收起筛选项 if (state.tabList[e.index].list) { state.currentTab = e.index; state.showFilter = !state.showFilter; return; - } else { - state.showFilter = false; } + state.showFilter = false; + + // 如果点击的是【销量】或者【新品优先】，则直接切换 tab if (e.index === state.currentTab) { return; - } else { - state.currentTab = e.index; } + + state.currentTab = e.index; + state.currentSort = e.sort; + state.currentOrder = e.order; emptyList(); - console.log(e, '6666') getList(e.sort, e.order); } - // 点击筛选项 + // 点击 tab 的 list 筛选项 const onFilterItem = (val) => { - console.log(val) - if ( - state.currentSort === state.tabList[0].list[val].sort && - state.currentOrder === state.tabList[0].list[val].order - ) { + // 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据 + // 这里选择 tabList[0] 的原因，是目前只有它有 list + if (state.currentSort === state.tabList[0].list[val].sort + && state.currentOrder === state.tabList[0].list[val].order) { state.showFilter = false; return; } + state.showFilter = false; + + // 设置筛选条件 state.curFilter = val; state.tabList[0].name = state.tabList[0].list[val].label; state.currentSort = state.tabList[0].list[val].sort; state.currentOrder = state.tabList[0].list[val].order; - emptyList(); - getList(state.currentSort, state.currentOrder); - state.showFilter = false; - }; + // 清空 + 加载数据 + emptyList(); + getList(); + } - async function getList(Sort, Order) { + async function getList() { state.loadStatus = 'loading'; const { code, data } = await sheep.$api.goods.list({ pageNo: state.pagination.pageNo, pageSize: state.pagination.pageSize, - sortField: Sort, - sortAsc: Order, + sortField: state.currentSort, + sortAsc: state.currentOrder, categoryId: state.categoryId, keyword: state.keyword, }); diff --git a/sheep/components/s-goods-column/s-goods-column.vue b/sheep/components/s-goods-column/s-goods-column.vue index 40a9cec9..33ffce0c 100644 --- a/sheep/components/s-goods-column/s-goods-column.vue +++ b/sheep/components/s-goods-column/s-goods-column.vue @@ -29,7 +29,7 @@ :style="[{ color: goodsFields.price.color }]" > {{ priceUnit }} - {{ isArray(data.price) ? data.price[0] : data.price }} + {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} @@ -55,7 +55,7 @@ :style="[{ color: goodsFields.price.color }]" > {{ priceUnit }} - {{ isArray(data.price) ? data.price[0] : data.price }} + {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} @@ -102,7 +102,7 @@ :style="[{ color: goodsFields.price.color }]" > {{ priceUnit }} - {{ isArray(data.price) ? data.price[0] : data.price }} + {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ priceUnit }} - {{ data.original_price||data.marketPrice }} + {{ fen2yuan(data.marketPrice) }} @@ -122,7 +122,7 @@ - + @@ -174,7 +174,7 @@ :style="[{ color: goodsFields.price.color }]" > {{ priceUnit }} - {{ isArray(data.price) ? data.price[0] : data.price }} + {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ priceUnit }} - {{ data.original_price||data.marketPrice }} + {{ fen2yuan(data.marketPrice) }} @@ -191,11 +191,11 @@ - 去购买 + + + 去购买 + + @@ -238,7 +238,7 @@ {{ priceUnit }} - {{ isArray(data.price) ? data.price[0] : data.price }} + {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ priceUnit }} - {{ data.original_price||data.marketPrice }} + {{ fen2yuan(data.marketPrice) }} @@ -293,7 +293,7 @@ */ import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue'; import sheep from '@/sheep'; - import { formatSales } from '@/sheep/hooks/useGoods'; + import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods'; import { formatStock } from '@/sheep/hooks/useGoods'; import goodsCollectVue from '@/pages/user/goods-collect.vue'; import { isArray } from 'lodash'; @@ -307,6 +307,7 @@ type: [Array, Object], default() { return { + // TODO @疯狂：旧的要不剔除掉，后续都用新的 // 商品名称（旧） title: { show: true }, // 商品介绍（旧）