328 lines
6.8 KiB
Vue
328 lines
6.8 KiB
Vue
|
<!-- 分类展示：second-one 风格 -->
|
|||
|
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="top_class">
|
|||
|
|
<scroll-view scroll-x class="scroll">
|
|||
|
|
<view @click="onFilterItem(item.id)" class="list on"
|
|||
|
|
v-for="(item, index) in props.data[activeMenu].children" :key="index">
|
|||
|
|
{{item.name}}
|
|||
|
|
</view>
|
|||
|
|
<!-- 为了不让标按钮覆盖按钮 -->
|
|||
|
|
<view v-if="props.data[activeMenu].children.length > 5" class="list" style="width:0;"> </view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view class="rit" v-if="props.data[activeMenu].children.length > 5">
|
|||
|
|
<image
|
|||
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/475ffa1c11d2bdb4997efb0ba4dfab0b971630ca9e140fa90686c7206db53c82.png"
|
|||
|
|
class="img"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="" v-for="data in state.pagination.list" :key="data.id">
|
|||
|
|
<!-- <s-goods-column class="" size="lg" :data="data" :topRadius="10" :bottomRadius="10"
|
|||
|
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" /> -->
|
|||
|
|
<view class="ss-goods-wrap">
|
|||
|
|
<view class="lg-goods-card ss-flex ss-col-stretch" style=""
|
|||
|
|
@click="sheep.$router.go('/pages/goods/index', { id: data.id })">
|
|||
|
|
<image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
|
|||
|
|
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-p-b-10 ">
|
|||
|
|
<view class="b">
|
|||
|
|
<view class="lg-goods-title ss-line-2">
|
|||
|
|
{{ data.title || data.name }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pppp">
|
|||
|
|
<view class="ss-flex ss-col-bottom font-OPPOSANS">
|
|||
|
|
<view class="sl-goods-price ss-m-r-12">
|
|||
|
|
<!-- 活动价格 -->
|
|||
|
|
<text class="price-unit ss-font-24">￥</text>
|
|||
|
|
<text class="price">
|
|||
|
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<slot name="cart">
|
|||
|
|
<view class="buy-box ss-flex ss-col-center ss-row-center"> 去购买</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
|||
|
|
contentdown: '上拉加载更多',
|
|||
|
|
}" @tap="loadMore" />
|
|||
|
|
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
fen2yuan,
|
|||
|
|
formatExchange,
|
|||
|
|
formatSales,
|
|||
|
|
formatStock,
|
|||
|
|
getRewardActivityRuleItemDescriptions,
|
|||
|
|
} from '@/sheep/hooks/useGoods';
|
|||
|
|
import {
|
|||
|
|
isArray
|
|||
|
|
} from 'lodash-es';
|
|||
|
|
import {
|
|||
|
|
onLoad,
|
|||
|
|
onReachBottom
|
|||
|
|
} from '@dcloudio/uni-app';
|
|||
|
|
import sheep from '@/sheep';
|
|||
|
|
import SpuApi from '@/sheep/api/product/spu';
|
|||
|
|
import {
|
|||
|
|
reactive,
|
|||
|
|
defineExpose
|
|||
|
|
} from 'vue';
|
|||
|
|
import _ from 'lodash';
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
data: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({}),
|
|||
|
|
},
|
|||
|
|
activeMenu: [Number, String],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const state = reactive({
|
|||
|
|
pagination: {
|
|||
|
|
list: [],
|
|||
|
|
total: 0,
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 6,
|
|||
|
|
},
|
|||
|
|
currentSort: undefined,
|
|||
|
|
currentOrder: undefined,
|
|||
|
|
currentTab: 0, // 当前选中的 tab
|
|||
|
|
curFilter: 0, // 当前选中的 list 筛选项
|
|||
|
|
showFilter: false,
|
|||
|
|
iconStatus: false, // true - 单列布局；false - 双列布局
|
|||
|
|
keyword: '',
|
|||
|
|
categoryId: 0,
|
|||
|
|
loadStatus: ''
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 清空列表
|
|||
|
|
function emptyList() {
|
|||
|
|
state.pagination.list = [];
|
|||
|
|
}
|
|||
|
|
const onFilterItem = (id) => {
|
|||
|
|
// 清空 + 加载数据
|
|||
|
|
emptyList();
|
|||
|
|
getList(id);
|
|||
|
|
};
|
|||
|
|
async function getList(id) {
|
|||
|
|
console.log(id)
|
|||
|
|
state.loadStatus = 'loading';
|
|||
|
|
const {
|
|||
|
|
code,
|
|||
|
|
data
|
|||
|
|
} = await SpuApi.getSpuPage({
|
|||
|
|
pageNo: state.pagination.pageNo,
|
|||
|
|
pageSize: state.pagination.pageSize,
|
|||
|
|
sortField: state.currentSort,
|
|||
|
|
sortAsc: state.currentOrder,
|
|||
|
|
categoryId: id,
|
|||
|
|
keyword: state.keyword,
|
|||
|
|
});
|
|||
|
|
if (code !== 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
state.pagination.list = _.concat(state.pagination.list, data.list);
|
|||
|
|
state.pagination.total = data.total;
|
|||
|
|
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 加载更多
|
|||
|
|
function loadMore() {
|
|||
|
|
if (state.loadStatus === 'noMore') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
state.pagination.pageNo++;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
console.log(props.data[props.activeMenu].id, "state.pagination.list")
|
|||
|
|
getList(props.data[props.activeMenu].id);
|
|||
|
|
// onLoad((options) => {
|
|||
|
|
// // state.categoryId = options.categoryId;
|
|||
|
|
// // state.keyword = options.keyword;
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// 上拉加载更多
|
|||
|
|
onReachBottom(() => {
|
|||
|
|
loadMore();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
onFilterItem
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
//lg
|
|||
|
|
.lg-goods-card {
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
background-color: $white;
|
|||
|
|
// height: 280rpx;
|
|||
|
|
border-radius: 10px !important;
|
|||
|
|
padding: 10px;
|
|||
|
|
.price-unit{
|
|||
|
|
color:#df2f29;
|
|||
|
|
font-weight:700;
|
|||
|
|
}
|
|||
|
|
.lg-img-box {
|
|||
|
|
width: 150rpx;
|
|||
|
|
height: 150rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.price{
|
|||
|
|
color:#df2f29;
|
|||
|
|
font-weight:700;
|
|||
|
|
}
|
|||
|
|
.lg-goods-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
// margin-top:7px;
|
|||
|
|
// line-height: 36rpx;
|
|||
|
|
// width: 410rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lg-goods-subtitle {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999999;
|
|||
|
|
// line-height: 30rpx;
|
|||
|
|
// width: 410rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lg-goods-price {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: $red;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.tag-box {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.top_class {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
|
|||
|
|
.scroll {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
padding: 3px 15px;
|
|||
|
|
background: rgba(248, 248, 248);
|
|||
|
|
color: rgba(179, 179, 179);
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 13px;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
|
|||
|
|
&.on {
|
|||
|
|
background: rgba(255, 235, 234);
|
|||
|
|
color: rgba(223, 47, 41);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rit {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 40px;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: white;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
text-align: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 15px;
|
|||
|
|
height: 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-box {
|
|||
|
|
|
|||
|
|
.title-line-left,
|
|||
|
|
.title-line-right {
|
|||
|
|
width: 15px;
|
|||
|
|
height: 1px;
|
|||
|
|
background: #d2d2d2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-item {
|
|||
|
|
width: calc((100% - 20px) / 3);
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
&:nth-of-type(3n) {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-img {
|
|||
|
|
width: calc((100vw - 140px) / 3);
|
|||
|
|
height: calc((100vw - 140px) / 3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-title {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-price {
|
|||
|
|
color: $red;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.lg-goods-content{
|
|||
|
|
.b{
|
|||
|
|
min-height: 37px;
|
|||
|
|
display:flex;
|
|||
|
|
align-items:center;
|
|||
|
|
}
|
|||
|
|
.pppp{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
// padding-right: 10px;
|
|||
|
|
.buy-box {
|
|||
|
|
bottom: 20rpx;
|
|||
|
|
right: 20rpx;
|
|||
|
|
z-index: 2;
|
|||
|
|
width: 58px;
|
|||
|
|
padding:3px 0;
|
|||
|
|
// background: linear-gradient(90deg, #fe8900, #ff5e00);
|
|||
|
|
background: #df2f29;
|
|||
|
|
border-radius: 25rpx;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|