✨ 商品列表：已完成
YunaiV
parent
4c5ca70b15
commit
b235cb0d8d
|
|
@ -20,7 +20,7 @@
|
|||
:zIndex="10" @close="state.showFilter = false">
|
||||
<view class="filter-list-box">
|
||||
<view class="filter-item" v-for="(item, index) in state.tabList[state.currentTab].list"
|
||||
:key="item.value" :class="[{ 'filter-item-active': index == state.curFilter }]"
|
||||
:key="item.value" :class="[{ 'filter-item-active': index === state.curFilter }]"
|
||||
@tap="onFilterItem(index)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
|
|
@ -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')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn"> </button>
|
||||
<button class="ss-reset-button cart-btn" />
|
||||
</template>
|
||||
</s-goods-column>
|
||||
</view>
|
||||
|
|
@ -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')"
|
||||
>
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" />
|
||||
</template>
|
||||
|
|
@ -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,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
:style="[{ color: goodsFields.price.color }]"
|
||||
>
|
||||
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? data.price[0] : data.price }}
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
:style="[{ color: goodsFields.price.color }]"
|
||||
>
|
||||
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? data.price[0] : data.price }}
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
:style="[{ color: goodsFields.price.color }]"
|
||||
>
|
||||
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? data.price[0] : data.price }}
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
|
||||
<view
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
:style="[{ color: originPriceColor }]"
|
||||
>
|
||||
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||
<view class="ss-m-l-8">{{ data.original_price||data.marketPrice }}</view>
|
||||
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
|
||||
<slot name="cart">
|
||||
<view class="cart-box ss-flex ss-col-center ss-row-center">
|
||||
<image class="cart-icon" src="/static/img/shop/tabbar/category2.png" mode=""></image>
|
||||
<image class="cart-icon" src="/static/img/shop/tabbar/category2.png" mode="" />
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
:style="[{ color: goodsFields.price.color }]"
|
||||
>
|
||||
<text class="ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? data.price[0] : data.price }}
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
<view
|
||||
v-if="(goodsFields.original_price?.show||goodsFields.marketPrice?.show) &&( data.original_price > 0|| data.marketPrice > 0)"
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
:style="[{ color: originPriceColor }]"
|
||||
>
|
||||
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||
<view class="ss-m-l-8">{{ data.original_price||data.marketPrice }}</view>
|
||||
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
||||
|
|
@ -191,11 +191,11 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<slot name="cart"
|
||||
><view class="buy-box ss-flex ss-col-center ss-row-center" v-if="buttonShow"
|
||||
>去购买</view
|
||||
></slot
|
||||
>
|
||||
<slot name="cart">
|
||||
<view class="buy-box ss-flex ss-col-center ss-row-center" v-if="buttonShow">
|
||||
去购买
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
||||
<!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
|
||||
<view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
|
||||
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? data.price[0] : data.price }}
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
<view
|
||||
v-if="(goodsFields.original_price?.show||goodsFields.marketPrice?.show) &&( data.original_price > 0|| data.marketPrice > 0)"
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
:style="[{ color: originPriceColor }]"
|
||||
>
|
||||
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||
<view class="ss-m-l-8">{{ data.original_price||data.marketPrice }}</view>
|
||||
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-m-t-16 ss-flex ss-flex-wrap">
|
||||
|
|
@ -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 },
|
||||
// 商品介绍（旧）
|
||||
|
|
|
|||
Loading…
Reference in New Issue