diff --git a/pages/goods/list.vue b/pages/goods/list.vue
index 8ebcfd0..6fae623 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 40a9cec..33ffce0 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 },
// 商品介绍（旧）