zhibo/pages_shop/store.vue

<template>
	<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%;">
						<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="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="medic">
						<!-- 使用mescroll-body实现分页和刷新 -->
						<mescroll-body :top="`calc(${statusBarHeight}px + 88rpx + 240rpx)`" bottom="0" ref="mescrollRef"
							@init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
							:up="upOption">
							<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>
								<!-- 空数据提示 -->
								<view v-if="products.length === 0 && !loading" class="empty-data">
									<image
										src="https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png"
										mode="aspectFit" class="empty-icon"></image>
									<text class="empty-text">暂无商品数据</text>
								</view>
							</view>
						</mescroll-body>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载提示 -->
		<view v-if="loading" class="loading-mask">
			<u-loading mode="circle" size="40" color="#FF5C03"></u-loading>
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	import {
		queryStore, //查询店铺
		store // 小黄车查询店铺,
	} from '@/api/live'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 分页相关配置
				page: 1, // 当前页码
				pageSize: 6, // 每页条数
				total: 0, // 总数据量
				loading: false, // 加载状态

				// mescroll配置
				mescroll: null,
				downOption: {
					use: true,
					auto: true, // 改为true，进入页面自动刷新
					offset: 80,
					textinoffset: '下拉刷新',
					textoutoffset: '释放更新',
					textloading: '加载中...'
				},
				upOption: {
					use: true, // 启用上拉加载
					auto: true, // 进入页面自动加载
					page: {
						num: 0, // 初始页码
						size: 6 // 每页数量
					},
					noMoreSize: 6, // 小于6条时显示无更多
					textLoading: '加载中...',
					textNoMore: '-- 没有更多数据了 --',
					empty: {
						use: false, // 不使用mescroll的空布局，使用自定义的
						icon: '',
						tip: ''
					}
				},

				inputInfo: '',
				searchTimer: null,
				products: [],
				liveId: null,
				storeId: '',
				statusBarHeight: uni.getWindowInfo().statusBarHeight,
				storeInfo: {},
			}
		},
		onLoad(options) {
			console.log("接收到的options:", options);
			if (options.liveId) {
				this.liveId = options.liveId;
			}
			if (options.storeId) {
				this.storeId = options.storeId || ""
				// 加载店铺信息
				this.queryCollect();
			} else {
				uni.showToast({
					title: "storeId不存在~",
					icon: "none"
				})
			}
		},
		mounted() {
			// 初始化时不手动调用，由mescroll触发
		},
		onShow() {
			this.divHeight = `calc(100vh - 44px - 88rpx - ${this.statusBarHeight}px)`
		},
		methods: {
			// 初始化mescroll
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				console.log('mescroll初始化完成');
			},

			// 下拉刷新回调
			async downCallback(mescroll) {
				this.loading = true;
				try {
					// 重置页码，重新加载数据
					this.page = 1;
					await this.queryStore();

					// 结束下拉刷新
					mescroll.endSuccess();

					// 重置上拉加载状态
					mescroll.resetUpScroll();
				} catch (error) {
					console.error('下拉刷新失败:', error);
					mescroll.endErr();
				} finally {
					this.loading = false;
				}
			},

			// 上拉加载回调
			async upCallback(page) {
				this.loading = true;
				try {
					const pageNum = page.num;
					const pageSize = page.size;

					const res = await this.queryStore(pageNum, pageSize);

					// 当前页数据
					const curPageData = res.rows || [];
					// 设置列表数据
					if (pageNum == 1) {
						this.products = []; // 如果是第一页需手动置空列表
					}

					// 追加新数据
					this.products = this.products.concat(curPageData);

					// 方法一(推荐): 后台接口有返回列表的总数据量 total
					this.mescroll.endBySize(curPageData.length, res.total);

					// 方法二(推荐): 后台接口有返回列表的总页数 pageCount
					// this.mescroll.endByPage(curPageData.length, res.pageCount);

				} catch (error) {
					console.error('上拉加载失败:', error);
					this.mescroll.endErr();
				} finally {
					this.loading = false;
				}
			},

			handleSearchInput() {
				// 搜索时重置分页
				clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					// 重置mescroll，重新加载第一页
					this.page = 1;
					this.mescroll.resetUpScroll(true);
				}, 500);
			},

			getPureDecimal(num, precision = 6) {
				if (!num && num !== 0) return '00';
				const decimalPart = Math.abs(num).toFixed(precision).split('.')[1];
				return decimalPart?.replace(/0+$/, '') || '00';
			},

			// 查询店铺商品
			async queryStore(pageNum = 1, pageSize = 6) {
				return new Promise((resolve, reject) => {
					if (!this.storeId) {
						reject('storeId不存在');
						return;
					}

					queryStore(this.storeId, pageSize, pageNum, this.inputInfo)
						.then(res => {
							if (res.code == 200) {
								resolve(res);
							} else {
								uni.showToast({
									title: res.msg || '加载失败',
									icon: 'none'
								});
								reject(res.msg);
							}
						})
						.catch(rej => {
							uni.showToast({
								title: '加载失败',
								icon: 'none'
							});
							reject(rej);
						});
				});
			},

			// 小黄车查询店铺
			queryCollect() {
				if (!this.storeId) return;
				let key = ''
				store(this.storeId, key).then(res => {
					if (res.code == 200) {
						console.log("查询店铺>>", res)
						this.storeInfo = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('查询店铺信息失败:', err);
				});
			},


			rightClick() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.redirectTo({
						url: '/pages/home/living'
					});
				}
			},

			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-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>