zyejMAll-mobile/pages/index/components/second-second.vue

<!-- 分类展示：second-one 风格  -->
<template>
	<view>
		<view class="top_class">
			<scroll-view scroll-x class="scroll">
				<view @click="onFilterItem(item.id,index)" class="list"
					:class="[
					  { 'on': index == state.currItem && props.vl == '' },
					  { [props.vl + 'v']: index == state.currItem && props.vl }
					]"
					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"
									:class="[
									  { [props.vl + 'v']: props.vl }
									]"
								> 去购买</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],
		vl: {
			type: String,
			default:''
		},
	});

	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: '',
		currItem:0
	});

	// 清空列表
	function emptyList() {
		state.pagination.list = [];
	}
	const onFilterItem = (id,index) => {
		console.log(index,"indexindex")
		state.currItem = index
		// 清空 + 加载数据
		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>
	
	.lvv{
		background:rgba(72,204,82) !important;
		color:white !important;
	}
	.bluev{
		background:rgba(28,165,233) !important;
		color:white !important;
	}
	.pinkv{
		background:#ff448f !important;
		color:white !important;
	}
	.orangev{
		background:#fe5c2d !important;
		color:white !important;
	}
	
	//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>