zhibo/pages_shop/store.vue

<template>
	<!-- v-show="liveId" -->
	<view class="content">
		<view class="uni-nav-bar" style="background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);">
			<view :style="{height: statusBarHeight + 'px',width: '100%'}"></view>
			<view class="uni-nav-barbox">
				<view class="uni-nav-back">
					<u-icon name="arrow-left" color="#ffffff" size="20" @click="rightClick"></u-icon>
				</view>
				<view class="uni-nav-title">
					<view class="inputbox" style="background: rgba(255, 255, 255, 0.4);width:70%;" @click="toSearch">
						<image class="icon-search" src="/static/images/search_white.png"></image>
						<input placeholder="搜索本店" placeholder-style="color: #ffffff;" v-model="inputInfo"
							@input="handleSearchInput" />
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bg"></view> -->
		<!-- <image class="bg" src="/static/images/chu_query.png" mode="widthFix"></image> -->
		<view class="content-body">
			<view class="store-head" v-show="storeInfo.storeName">
				<view class="store-head-top">
					<view class="store-head-logo">
						<u-image shape="square" :src="storeInfo?.logoUrl" width="100rpx" height="100rpx"
							radius="6"></u-image>
					</view>
					<view class="store-head-name">{{storeInfo.storeName || ''}}</view>
				</view>
				<view class="store-head-desc">
					<view>销售{{storeInfo.salesCount }}</view>
					<view>24小时营业</view>
					<view>支持预订</view>
				</view>
			</view>
			<view class="storebox">
				<!-- 商品 -->
				<view class="medic-box">
					<!-- <view class="cate-list">
						<view v-for="(item,index) in cates" :key="index" :class="cateSelect == item.cateId?'item active':'item'" @click="choseCate(item)">
							{{item.cateName }}</view>
					</view> -->
					<view class="medic">

						<!-- <u-tabs :list="tabList" lineColor="linear-gradient( 90deg, #FE8227 0%, #FE4E12 100%)"
								:activeStyle="{
						             color: '#222222',
						             fontWeight: '600',
						             fontSize: '28rpx'
						         }" :inactiveStyle="{
						             color: '#757575',
									 fontSize: '28rpx',
						           fontWeight: '400'
						         }" @click="selectTabList"></u-tabs> -->

						<!-- 轮播图 -->
						<!-- <view class="banner-box">
							<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true"
								:interval="3000" :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)"
								indicator-active-color="#ffffff">
								<swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index" @click="handleAdvClick(item)">
									<image :src="item.imageUrl" mode=""></image>
								</swiper-item>
							</swiper>
						</view> -->
						<!-- 商品列表 -->
						<view class="medic-list">
							<view class="inner-list">
								<view class="definite" v-for="(subItem,index) in products" :key="index"
									@click="showProductList(subItem)">
									<view class="img-box">
										<image :src="subItem.imgUrl" mode="widthFix"></image>
									</view>
									<view class="name ellipsis2">{{subItem.productName}}</view>
									<view class="price">
										<text class="red"><text style="font-size: 20rpx;">￥</text><text
												style="font-size: 36rpx;">{{Math.trunc(subItem.price)}}</text>.{{getPureDecimal(subItem.price)?getPureDecimal(subItem.price):'00'}}</text>
										<text class="del">￥19.80</text>
									</view>
								</view>

								<!-- 加载状态提示 -->
								<view class="load-more" v-if="page > 1">
									<text v-if="isLoading">加载中...</text>
									<text v-else-if="!hasMore">没有更多数据了</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 商家信息 -->
				<!-- <view class="storebox-info" :style="{height: divHeight}" v-show="current == 1">
					<view class="storebox-map">
						<u-icon name="map" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">{{storeInfo.address || "--"}}</view>
					</view>
					<view class="storebox-map" v-if="storeInfo.phone">
						<u-icon name="phone" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">{{storeInfo.phone || "--"}}</view>
					</view>
					<view class="storebox-qualifications" v-if="storeInfo.descs">
						<u-icon name="volume" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">{{storeInfo.descs || "--"}}</view>
					</view>
					<view class="storebox-qualifications">
						<u-icon name="file-text" color="#ccc" size="18"></u-icon>
						<view style="margin-left: 10rpx;">商家资质</view>
					</view>
					<view class="qualifications">
						<view v-for="(img,i) in licenseImagesList" :key="i">
							<u-image shape="square" lazyLoad :src="img" width="100%" mode="widthFix" radius="6"
								@click="previewImage(i)"></u-image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryStore, //查询店铺
		store // 小黄车查询店铺,
	} from '@/api/live'
	// import {getProductCate} from '@/api/product';
	// import {getAdv} from '@/api/adv';
	// import { getStoreById } from "@/api/store.js";

	export default {
		data() {
			return {
				page: 1, // 当前页码，初始为1
				pageSize: 6, // 每页条数（和之前保持一致）
				isLoading: false, // 是否正在加载数据，防止重复请求
				hasMore: true, // 是否还有更多数据


				inputInfo: '',
				searchTimer: null,
				tabList: [{
					name: '推荐',
				}, {
					name: '分类',
				}],
				products: [],
				liveId: null,
				storeId: null,
				statusBarHeight: uni.getWindowInfo().statusBarHeight,
				// 右侧的胶囊距离右侧屏幕距离-px
				menuRight: uni.getStorageSync('menuInfo').menuRight,
				// 右侧的胶囊宽度-px
				menuWidth: uni.getStorageSync('menuInfo').menuWidth,
				opacity: 0,
				opacityTxt: 0,
				tabbar: [{
					name: '商品',
				}, {
					name: '商家',
				}],
				current: 0,
				storeInfo: {},
				// logoUrl: "/static/images/adfd21c004854c9b8997d371d7a0ce8c.jpg",
				// 商家资质图片
				// licenseImagesList: ["/static/images/sjzz.jpg"],
				divHeight: '0px',
				allCates: [],
				cates: [],
				subCates: [],
				// 选中药品分类
				cateSelect: 0,
				// 轮播图
				advs: [],
				// 'company'表示销售管理的进来的
				from: ""
			}
		},
		onLoad(options) {
			console.log("接收到的options:", options);
			if (options.liveId) {
				this.liveId = options.liveId;
				// this.getliveStore() // 获取小黄车 店铺展示
				console.log("接收到的liveId:", this.liveId);
			}

			if (options.storeId) {
				this.storeId = options.storeId || ""

			} else {
				uni.showToast({
					title: "storeId不存在~",
					icon: "none"
				})
			}
		},
		mounted() {
			this.queryStore() //查询店铺
			this.queryCollect()
		},
		onShow() {
			this.divHeight = `calc(100vh - 44px - 88rpx - ${this.statusBarHeight}px)`
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.opacityTxt = 0
				this.opacity = e.scrollTop > this.statusBarHeight ? 0.6 : 0
			} else if (e.scrollTop > 50) {
				this.opacity = 1
				this.opacityTxt = 1
			}
			// 监听滚动到底部（核心逻辑）
			if (this.isLoading || !this.hasMore) return; // 过滤无效状态

			// 获取页面可滚动高度、当前滚动位置、窗口高度
			const {
				scrollHeight,
				scrollTop,
				windowHeight
			} = uni.getSystemInfoSync();
			// 计算距离底部的距离（单位：px，1rpx ≈ 0.5px，这里按300rpx判断）
			const distanceToBottom = scrollHeight - scrollTop - windowHeight;

			// 当距离底部小于300rpx时，加载下一页
			if (distanceToBottom < 300) {
				this.page++; // 页码+1
				this.queryStore(); // 触发下一页请求
			}
		},
		methods: {
			handleSearchInput() {
				// 搜索时重置分页（关键词变了，重新从第1页加载）
				clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.page = 1; // 重置页码为1
					this.hasMore = true; // 重置是否有更多数据
					this.queryStore(); // 重新请求第一页
				}, 500);
			},
			getPureDecimal(num, precision = 6) {
				const decimalPart = Math.abs(num).toFixed(precision).split('.')[1];
				return decimalPart?.replace(/0+$/, '') || ''; // 移除末尾多余的0
			},
			// // 店铺商品展示（支持分页）
			// getliveStore() {
			// 	// 如果正在加载或没有更多数据，直接返回
			// 	if (this.isLoading || !this.hasMore) return;

			// 	this.isLoading = true; // 标记为加载中
			// 	const data = {
			// 		pageSize: this.pageSize,
			// 		page: this.page // 使用当前页码
			// 	};

			// 	liveStore(this.liveId, this.inputInfo, data)
			// 		.then(res => {
			// 			this.isLoading = false; // 结束加载状态
			// 			if (res.code === 200) {
			// 				const newProducts = res.data || [];
			// 				// 如果是第一页，直接替换数据；否则合并数据
			// 				if (this.page === 1) {
			// 					this.products = newProducts;
			// 				} else {
			// 					this.products = [...this.products, ...newProducts];
			// 				}
			// 				// 判断是否还有更多数据（如果返回的数量小于每页条数，说明没有更多了）
			// 				this.hasMore = newProducts.length >= this.pageSize;
			// 			} else {
			// 				uni.showToast({
			// 					title: res.msg,
			// 					icon: 'none'
			// 				});
			// 			}
			// 		})
			// 		.catch(rej => {
			// 			this.isLoading = false; // 异常时也要结束加载状态
			// 			uni.showToast({
			// 				title: '加载失败',
			// 				icon: 'none'
			// 			});
			// 		});
			// },
			//查询店铺
			queryStore() {
				if (!this.storeId) return;
				if (this.isLoading || !this.hasMore) return;
				this.isLoading = true; // 标记为加载中
				queryStore(this.storeId, this.pageSize, this.page,this.inputInfo).then(res => {
						this.isLoading = false; // 结束加载状态
						if (res.code == 200) {
							const newProducts = res.rows || [];
							// 如果是第一页，直接替换数据；否则合并数据
							if (this.page === 1) {
								this.products = newProducts;
							} else {
								this.products = [...this.products, ...newProducts];
							}
							// 判断是否还有更多数据（如果返回的数量小于每页条数，说明没有更多了）
							this.hasMore = newProducts.length >= this.pageSize;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			// 小黄车查询店铺
			queryCollect() {
				if (!this.storeId) return;
				store(this.storeId, '').then(res => {
						if (res.code == 200) {
							console.log("查询店铺>>", res)
							this.storeInfo = res.data
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},

			rightClick() {
				// 获取页面栈
				const pages = getCurrentPages();
				// 如果页面栈长度大于1，说明有上一页可以返回
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					// 如果没有上一页，跳转到默认页面（比如首页）
					uni.redirectTo({
						url: '/pages/home/living' // 替换为你的首页路径
					});

				}
			},
			clickTab(item) {
				this.current = item.index
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.licenseImagesList
				});
			},
			// getStoreInfo() {
			// 	getStoreById({
			// 		storeId: this.storeId
			// 	}).then(
			// 		res => {
			// 			if (res.code == 200) {
			// 				this.storeInfo = res.data || {}
			// 				// this.licenseImagesList = this.storeInfo.licenseImages ? this.storeInfo.licenseImages.split(',') : []

			// 			} else {
			// 				uni.showToast({
			// 					icon: 'none',
			// 					title: res.msg,
			// 				});
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },

			handleAdvClick(item) {
				if (item.showType == 1) {
					uni.setStorageSync('url', item.advUrl);
					uni.navigateTo({
						url: "/pages/home/h5?storeId=" + this.storeId || ""
					})
				} else if (item.showType == 2) {
					uni.navigateTo({
						url: item.advUrl
					})
				} else if (item.showType == 3) {
					uni.setStorageSync('content', item.content);
					uni.navigateTo({
						url: "/pages/home/content?storeId=" + this.storeId || ""
					})
				}

			},
			// getAdv() {
			// 	let data = {
			// 		advType: 2
			// 	};
			// 	getAdv(data).then(
			// 		res => {
			// 			if (res.code == 200) {
			// 				this.advs = res.data;
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },
			// getProductCate() {
			// 	let data = {};
			// 	getProductCate(data).then(
			// 		res => {
			// 			if (res.code == 200) {
			// 				this.allCates = res.data;
			// 				this.cates = this.allCates.filter(function(item) {
			// 					return item.pid == 0
			// 				});
			// 				if (this.cates != null && this.cates.length > 0) {
			// 					this.cateSelect = this.cates[0].cateId;
			// 					this.getSubCate()
			// 				}
			// 			} else {
			// 				uni.showToast({
			// 					icon: 'none',
			// 					title: "请求失败",
			// 				});
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },
			// 药品分类选择
			choseCate(item) {
				this.cateSelect = item.cateId;
				this.getSubCate()

			},
			getSubCate() {
				var that = this;
				this.subCates = this.allCates.filter(function(item) {
					// let subList = that.allCates.filter(child => {
					// 	//返回每一项的子级数组
					// 	return child.pid === item.cateId
					// });
					// subList.length > 0 ? item.children = subList : [];
					return item.pid == that.cateSelect
				});

			},
			// 查看药品详情
			showProductList(item) {
				uni.navigateTo({
					url: '/pages_shop/goods?productId=' + item.productId + '&liveId=' + this.liveId + '&goodsId=' +
						item.goodsId + '&storeId=' + this.storeId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	:deep(.u-tabs__wrapper__nav) {
		margin: 0 auto;
	}

	.load-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 26rpx;
	}

	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.inputbox {
		height: 60rpx;
		padding: 0 20rpx;
		@include u-flex(row, center, flex-start);
		border-radius: 40rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #ffffff;

		.icon-search {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
	}

	.uni-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		overflow: hidden;
		font-weight: 500;

		.uni-nav-barbox {
			width: 100%;
			height: 88rpx;
			@include u-flex(row, center, flex-start);
			position: relative;
			font-size: 24rpx;
		}

		.uni-nav-title {
			/* #ifdef APP-PLUS */
			font-size: 34rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 14px;
			/* #endif */
			overflow: hidden;
			white-space: nowrap;
			width: 100%;
			text-overflow: ellipsis;
		}

		.uni-nav-back {
			margin-left: 20rpx;
			margin-right: 20rpx;
			height: 88rpx;
			@include u-flex(row, center, flex-start);
		}
	}

	.content {
		width: 100%;
		position: relative;
		// .bg {
		// 	width: 100%;
		// 	height: auto;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	height: 388rpx;
		// 	background: #3A1101;

		// }

		&-body {
			position: relative;
			padding-top: calc(var(--status-bar-height) + 88rpx);
		}
	}

	.store-head {
		margin-top: 40rpx;
		padding: 32rpx;
		background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
		color: #ffffff;


		&-top {
			display: flex;
			align-items: center;
		}

		&-logo {
			flex-shrink: 0;
			margin-right: 24rpx;
		}

		&-name {
			font-weight: 600;
			font-size: 32rpx;
		}

		&-desc {
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 20rpx;
			position: relative;
			z-index: 2;

			view {
				padding-right: 20rpx;
				font-size: 26rpx;
				position: relative;

				&::after {
					content: "";
					width: 0;
					height: 28rpx;
					border-right: 1rpx solid #eee;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
				}

				&:last-child::after {
					border: none;
				}
			}
		}
	}

	.border_bottom_line {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			border-bottom: 1px solid #F5F7FA;
			width: 100%;
			transform: scaleY(0.5);
			border-top-color: #F5F7FA;
			border-right-color: #F5F7FA;
			border-left-color: #F5F7FA;
		}
	}

	.storebox {
		width: 100%;
		position: relative;
		z-index: 1;

		&-info {
			padding: 24rpx 24rpx 0 24rpx;
			background-color: #fff;
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #333333;
			position: relative;
			border-top: 4px solid #F5F7FA;
		}

		&-map {
			display: flex;
			align-items: center;
			word-break: break-all;
			padding: 24rpx 0;
		}

		&-qualifications {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
		}

		.qualifications {
			padding: 24rpx 0;
		}
	}

	.medic-box {
		display: flex;

		.medic {
			box-sizing: border-box;
			height: 100%;

			// .banner-box {
			// 	margin-top: 30rpx;
			// 	width: 100%;
			// 	height: 160upx;
			// 	border-radius: 10upx;
			// 	overflow: hidden;

			// 	.swiper,
			// 	.swiper-item,
			// 	.swiper-item image {
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }


			.medic-list {
				width: 100%;
				padding: 20upx 24upx;
				box-sizing: border-box;
				overflow-y: auto;
				height: calc(100% - 220upx);
				position: relative;

				.inner-list {
					display: flex;
					flex-wrap: wrap;

					.definite {
						width: 342rpx;
						margin-right: 18upx;
						margin-bottom: 30upx;
						background: #ffffff;
						border-radius: 16rpx;

						.img-box {
							width: 100%;
							height: 343upx;
							border-radius: 16rpx 16rpx 0rpx 0rpx;
							overflow: hidden;
							display: flex;
							align-items: center;

							image {
								width: 100%;
							}
						}

						.name {
							width: 100%;
							margin-top: 12upx;
							font-size: 28rpx;
							color: #222222;
							padding: 0 20rpx;
							box-sizing: border-box;
						}

						.price {
							padding: 0 20rpx 32rpx;
							box-sizing: border-box;
							margin-top: 12rpx;

							.red {
								font-weight: bold;
								font-size: 26rpx;
								color: #FF5C03;
							}

							.del {
								margin-left: 16rpx;
								text-decoration: line-through;
								font-size: 24rpx;
								color: #999999;
							}
						}

						&:nth-child(2n) {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>