purchase-let/pages/product/product.vue

<template>

	<view class="page-box1">
		<up-sticky offset-top="5">
			<up-subsection :list="list1" :current="where.type" @change="sectionChange"></up-subsection>
			<view style="margin: 0 20rpx; background-color: white;">

				<up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
					:showAction="false"></up-search>
			</view>
		</up-sticky>
		<u-list @scrolltolower="loadMoreGood" :enableFlex="enable_flex">
			<view v-if="frequentlyList.length>0" class="list">
				<view class="shop-item" v-for="(item, index) in frequentlyList" :key="index" >
					<image class="shop-img" :src="item.image"></image>
					<view class="shop-content" style="width: 490rpx;">
						<view class="title">
							<view class="name u-line-2">{{item.store_name}}</view>
							<view class="name u-line-2" style="color: red;">价格:￥{{item.price}}</view>

							<!-- <view class="tip u-line-1">{{item.spec}}</view> -->
							<view class="tip u-line-1">单位:{{item.unit_name}}</view>
							<view class="tip u-line-1">规格:{{item.store_info}}</view>
							<view class="tip u-line-1" style="justify-content: space-between;" v-if="item.batch">
								<view style="display: flex;">
									<view class="shop-content-li-l">起批量</view>
									<view class="shop-content-li-r">{{ item.batch }}{{ item.unit_name }}起卖</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<view v-else style="margin-top: 100rpx;">
				<up-empty :text="text"
					icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
				</up-empty>
			</view>
		</u-list>

	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		watch
	} from 'vue';
	import {
		storeProductListApi
	} from "@/api/good.js"

	const frequentlyList = ref([]);
	let text = '没有商品'
	let status = ref('loadmore')
	let list1 = ['零售', '商户', '会员']
	let keyword = ref('');
	let enable_flex=ref(true)
	const where = ref({
		page_no: 1,
		page_size: 15,
		type: 0,
		name: '',
		store_name: '',
	})
	const getProductList = (loadmore = false) => {
		if (loadmore) where.value.page_no++;
		else where.value.page_no = 1;
		storeProductListApi(where.value).then(res => {
			if (res.data.lists.length == 0) {
				status.value = 'nomore'
			} else {
				status.value = 'loadmore'
			}
			if (loadmore) {
				frequentlyList.value.push(...res.data.lists);
			} else {
				frequentlyList.value = res.data.lists;
			}
		})
	}
	const sectionChange = (item) => {
		where.value.type = item
		getProductList()
	}
	const searchKeyword = () => {
		where.value.name = keyword.value;
		where.value.store_name = keyword.value;
		getProductList();
	}
	// 商品列表触底
	const loadMoreGood = () => {
		status.value = 'loading'
		getProductList(true)
	}
	getProductList()
</script>

<style lang="scss">
	.tabs {
		color: #444444;
		font-size: 32rpx;
		margin-right: 30rpx;
	}

	.tabs-active {
		color: #20B128;
		// font-size: 34rpx;
		transition: 300ms;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #f6f6f6;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box1 {
		position: relative;

		.total {
			// margin-top: 10rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			// position: sticky;
			// top: var(--window-top);
			// left: 0;
			// right: 0;
			z-index: 100000 !important;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			color: #444;
		}

		.list {
			margin: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.shop-item {
				padding: 20rpx;
				border-bottom: 1rpx solid #f6f6f6;
				background-color: #fff;
				display: flex;

				.shop-check {
					width: 60rpx;
					height: 120rpx;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.shop-img {
					height: 164rpx;
					width: 164rpx;
					margin-right: 20rpx;
					border-radius: 14rpx;
				}

				.shop-content {
					width: 430rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						.name {
							font-size: 28rpx;
						}

						.tip {
							color: #999;
							font-size: 24rpx;
							margin: 12rpx 0;
						}
					}

					.price {
						font-size: 30rpx;
						font-weight: bold;
						color: #F55726;
					}

					.price-btn {
						display: flex;
						justify-content: space-between;

						.btn {
							display: flex;
							align-items: center;

							.num {
								margin: 0 20rpx;
								text-align: center;
							}
						}
					}
				}
			}

		}
	}

	.cart-btn {

		.cart-check {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin: 0 10rpx;
			}
		}

		.btn-boxs {
			display: flex;

			.all-price {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.price {
					color: #20B128;
					display: table-cell;
					vertical-align: bottom;
					font-weight: bold;
				}
			}

		}
	}
</style>