LocalLivingServicesUniapp/pages/groupMeal/goods/list.vue

<template>
	<view class="page-container">
		<!-- 导航栏 -->
		<u-navbar :autoBack="true" :placeholder="true" :border-bottom="false">
			<view class="navbar-title">团餐商品列表</view>
			<view slot="right" class="navbar-right">
				<text class="nav-btn" @click="addGoods">添加商品</text>
				<text class="nav-btn manage-btn" @click="toggleManageMode">{{ isManaging ? '退出管理' : '批量管理' }}</text>
			</view>
		</u-navbar>

		<!-- 搜索框 -->
		<view class="search-bar">
			<u-search bg-color="#F7F8FC" placeholder="请输入商品名称" search-icon-color="#999"
				:showAction="true" actionText="搜索"
				:actionStyle="{
					width: 'auto',
					color: '#333',
					padding: '0 20rpx',
					borderLeft: '1rpx solid #DDDDDD'
				}"
				@search="onSearch" @custom="onSearch"
			></u-search>
		</view>

		<!-- 一级分类Tabs -->
		<u-tabs :list="statusTabs" 
			:current="currentStatusTab" 
			font-size="30"
			inactive-color="#666666"
			:bar-style="{
				bottom: '20rpx',
				background: 'linear-gradient(90deg, #82BCFF 0%, rgba(130,188,255,0) 100%)'
			}"
			:active-item-style="{
				fontWeight: '500',
				fontSize: '32rpx',
				color: '#000000',
			}"		
			@change="onTabChange"
		></u-tabs>
		
		<!-- 主内容区 -->
		<view class="main-content">
			<!-- 左侧二级分类 -->
			<view class="category-list">
				<view v-for="(category, index) in categoryTabs" :key="index">
					<view 
						:class="['category-item', currentCategoryTab === index ? 'active' : '']"
						@click="onCategoryTabChange(index)"
					>
						{{ category.name }}
					</view>
				</view>
			</view>

			<!-- 右侧商品列表 -->
			<scroll-view scroll-y class="goods-scroll-view" 
				:style="{ paddingBottom: isManaging ? '120rpx' : '0' }"
				:scroll-into-view="scrollIntoViewId"  
				:scroll-with-animation="true"
				@scroll="onScroll"  
			>
				<view class="goods-category-section" :id="category.scrollId" v-for="category in filteredGoods" :key="category.id">
					<view class="category-title">{{ category.name }}</view>
					<u-checkbox-group v-model="selectedGoods" placement="column">
						<view class="goods-card" v-for="goods in category.items" :key="goods.id">
							<!-- <image class="goods-image" :src="goods.image" mode="aspectFill"></image> -->
							<u-image width="120rpx" height="120rpx" border-radius="12rpx" :src="goods.image" mode="aspectFill"></u-image>
							<view class="goods-info">
								<view class="goods-name">{{ goods.name }}</view>
								<view class="goods-desc">{{ goods.dishName || goods.description }}</view>
								<view class="goods-sales">销量：{{ goods.sales }}</view>
								<view class="goods-price-line">
									<text class="price"><text class="unit">¥</text>{{ goods.price }}</text>
									<text class="original-price">¥{{ goods.sellingPrice }}</text>
								</view>
							</view>
							<!-- 根据模式和状态显示不同操作 -->
							<view class="goods-actions">
								<u-button 
									v-if="!isManaging && currentStatusTab === 2" 
									type="primary" plain
									@click="editGoods(goods)"
								>编辑</u-button>
								<u-checkbox v-if="isManaging" :name="goods.id" shape="circle" v-model="goods.checked" @change="onSelect"></u-checkbox>
							</view>
						</view>
					</u-checkbox-group>
				</view>
			</scroll-view>
		</view>

		<!-- <ListScrollView ref="listScroll0" 
			:api="api"
			:init="{
				...initParams,
			}">
			<template v-slot:list="{ data }"></template>
		</ListScrollView> -->

		<!-- 批量管理底部操作栏 -->
		<view class="footer-bar" v-if="isManaging">
			<u-checkbox-group v-model="isAllSelected" placement="row">
				<u-checkbox name="all" shape="circle" v-model="isAllSelected" @change="onSelectAll">全选</u-checkbox>
			</u-checkbox-group>
			
			<view class="action-buttons">
				<template v-if="currentStatusTab === 0 || currentStatusTab === 1">
					<u-button type="primary" @click="handleBatchAction('unpublish')">下架</u-button>
				</template>
				<template v-if="currentStatusTab === 2">
					<u-button type="primary" @click="handleBatchAction('publish')">上架</u-button>
					<u-button type="error" @click="handleBatchAction('delete')">删除</u-button>
				</template>
			</view>
		</view>

		<Tabbar />
		<Modal ref="myModal"
			:title="modalText.title" 
			:content="modalText.content" 
		/>
	</view>
</template>

<script>
import Modal from '@/components/modal/index.vue';
import Tabbar from '@/pages/groupMeal/tabbar/index.vue';
import configService from '@/common/service/config.service';
import ListScrollView from '@/components/list-scroll-view/index.vue';
export default {
	components: {
		Modal,
		Tabbar,
		ListScrollView
	},
	data() {
		return {
			api: {
				url: '/groupmeal/gmMerchantPackage/pageList',
				method: 'POST',
			},
			// 是否处于批量管理模式
			isManaging: false, 
			// 一级分类
			statusTabs: [{ name: '售卖中' }, { name: '审核中' }, { name: '未上架' }],
			currentStatusTab: 0,
			// 二级分类
			categoryTabs: [{ name: '早餐' }, { name: '午餐' }, { name: '晚餐' }],
			currentCategoryTab: 0,
			// 所有商品数据
			allGoods: [],
			selectedGoods: [], // 已选中的商品ID
			isAllSelected: false, // 用于全选checkbox的状态绑定
			// 联动功能相关数据
			scrollIntoViewId: '', // 滚动到指定视图的 ID
			categoryOffsetTops: [], // 每个分类区域到 scroll-view 顶部的距离
			isScrolling: false, // 标记是否正在进行点击滚动
			// 弹窗
			modalText: {
				title: '提示',
				btntext: '确定',
				// 所选商品有未通过审核商品无法批量操作上架
				content: '是否将所选商品上架？'
			},
		};
	},
	computed: {
		// 根据一、二级分类筛选商品
		filteredGoods() {
			const filteredByCategory = this.allGoods;
			const grouped = [];
			this.categoryTabs.forEach((category, index) => {
				const items = filteredByCategory.filter(goods => goods.category == (index + 1));
				if (items.length > 0) {
					grouped.push({
						id: index,
						name: category.name,
						items: items,
						scrollId: `category_${index}` // 滚动目标 ID
					});
				}
			});
			// 每次 filteredGoods 数据变化后，重新计算 offset
			this.$nextTick(() => {
				// 确保在数据渲染完成后再计算
				this.calculateCategoryOffsets();
			});
			return grouped;
		},
		// 数据参数
		initParams() {
			let params = {
				// 商品状态: 0 未上架, 1 已上架
				status: 0,
				// 审核状态: 0 审核中, 1 已审核
				// reviewStatus: 0,
			}
			// 售卖中
			if (this.currentStatusTab == 0) {
				params = {
					status: 1,
					reviewStatus: 1,
				}
			}
			// 审核中 
			else if (this.currentStatusTab == 1) {
				params = {
					status: 0,
					reviewStatus: 0,
				}
			}
			// 未上架
			else if (this.currentStatusTab == 2) {
				params = {
					status: 0,
				}
			}
			return params;
		}
	},
	onLoad() {
		// 获取商品数据
		this.getData();
		// 获取餐品分类
		this.getClassData();
	},
	methods: {
		// 商品数据
		getData() {
			let params = {
				pageNo: 1,
				pageSize: 10,
				...this.initParams
			};
			this.$http.post('/groupmeal/gmMerchantPackage/pageList', params).then(res => {
				if (res.data.code === 200) {
					this.allGoods = res.data.result.records.map(item => {
						return {
							...item,
							image: configService.apiUrl + '/' + item.productImage.split(',')[0]
						}
					});
				}
			});
		},
		// 餐品分类
		getClassData() {
			this.$http.get('/groupmeal/gmMerchantPackage/getGroupMealCategory', {}).then(res => {
				if (res.data.code === 200) {}
			});
		},
		// 操作模式
		toggleManageMode() {
			this.isManaging = !this.isManaging;
			this.selectedGoods = []; // 切换模式时清空选择
			this.isAllSelected = false;
			if (!this.isManaging) {
				this.filteredGoods.flatMap(category => category.items.forEach(item => {
					item.checked = false;
				}));
			}
		},
		onSearch(value) {
			this.$refs[`listScroll`].reloadList({
				queryName: value,
			});
		},
		// 主分类事件
		onTabChange(e) {
			this.currentStatusTab = e;
			this.selectedGoods = []; // 切换Tab时清空选择
			this.isAllSelected = false;
			// 列表数据
			this.getData();
			// 切换 Tab 后，重置左侧分类高亮到第一个
			// this.currentCategoryTab = 0; 
			// this.$nextTick(() => {
			// 	// 确保在新数据渲染后，滚动到第一个分类
			// 	this.scrollIntoViewId = this.filteredGoods[0]?.scrollId || '';
			// });
		},
		// 添加商品
		addGoods() {
			uni.navigateTo({
				url: '/pages/groupMeal/goods/form-step1'
			});
		},
		// 编辑商品
		editGoods(goods) {
			uni.navigateTo({
				url: '/pages/groupMeal/goods/form-step1?id=' + goods.id
			});
		},
		// 单选
		onSelect(e) {
			if (e.value) {
				this.selectedGoods.push(e.name);
			} else {
				let i = this.selectedGoods.indexOf(e.name);
				this.selectedGoods.splice(i, 1);
			}
			this.isAllSelected = this.selectedGoods.length === this.allGoods.length;
		},
		// 全选事件
		onSelectAll(e) {
			if (e.value) {
				// 全选
				this.selectedGoods = this.filteredGoods.flatMap(category => category.items.map(item => item.id));
			} else {
				// 取消全选
				this.selectedGoods = [];
			}
			this.filteredGoods.flatMap(category => category.items.forEach(item => {
				item.checked = e.value;
			}));
		},
		// 操作提交事件
		handleBatchAction(action) {
			if (this.selectedGoods.length === 0) {
				uni.showToast({ title: '请先选择商品', icon: 'none' });
				return;
			}
			let content = '';
			if (action === 'delete') {
				content = '是否将所选商品删除？';
			} else {
				content = `是否将所选商品${action === 'publish' ? '上架' : '下架'}？`;
			}
			this.modalText.content = content;
			this.$refs.myModal.onOpen(false, () => {
				this.onConfirm(action);
			});
			console.log(`执行批量操作: ${action}`, this.selectedGoods);
		},
		// 弹窗确认事件
		onConfirm(action) {
			if (action === 'delete') {
				// 单删接口
				// this.$http.get('/groupmeal/gmMerchantPackage/delete');
				// 多删接口
				this.$http.delete('/groupmeal/gmMerchantPackage/deleteBatch', {}, {
					params: { ids: this.selectedGoods.join() }
				}).then(res => {
					if (res.data.code === 200) {}
					this.$tip.toast(res.data.message);
				});
			} else {
				// 单个接口
				// this.$http.post('/groupmeal/gmMerchantPackage/launch');
				// 多选接口
				this.$http.post('/groupmeal/gmMerchantPackage/batchLaunch', {
					ids: this.selectedGoods,
					status: this.currentStatusTab == 2 ? 1 : 0 
				}).then(res => {
					if (res.data.code === 200) {}
					this.$tip.toast(res.data.message);
				});
			}
		},
		// 核心功能 1: 点击左侧二级分类，右侧商品列表滚动到对应位置
		onCategoryTabChange(index) {
			this.currentCategoryTab = index;
			
			// 1. 设置标记，在滚动动画期间忽略 onGoodsScroll，防止快速切换闪烁
			this.isScrolling = true; 
			
			// 2. 找到对应的 scrollId 并设置给 scroll-view
			const targetCategory = this.filteredGoods.find(c => c.id === index);
			if (targetCategory) {
				this.scrollIntoViewId = targetCategory.scrollId;
			}
			
			// 3. 延迟清除标记，等待滚动动画结束 (通常 300ms)
			setTimeout(() => {
				this.isScrolling = false;
			}, 300); 
		},
		// 核心功能 2: 滚动商品列表时，左侧二级分类高亮联动
		onGoodsScroll(e) {
			// 如果是点击左侧分类触发的滚动，则忽略联动
			if (this.isScrolling) {
				return;
			}
			
			const scrollTop = e.detail.scrollTop;
			const threshold = 10; // 切换阈值，避免刚好在边缘时闪烁

			// 遍历所有分类的 offset，找到当前位于视图顶部的分类
			for (let i = 0; i < this.categoryOffsetTops.length; i++) {
				const current = this.categoryOffsetTops[i];
				const next = this.categoryOffsetTops[i + 1];

				// 检查条件：
				// 1. 当前分类的 top 已经小于或等于 scrollTop (即分类标题已经经过视图顶部)
				// 2. 并且 (如果存在下一个分类) 下一个分类的 top 还没有经过视图顶部
				if (current.top <= scrollTop + threshold && (!next || next.top > scrollTop + threshold)) {
					// 确保左侧分类的索引是正确的
					if (this.currentCategoryTab !== current.id) {
						 this.currentCategoryTab = current.id;
					}
					break; 
				}
			}
		},
		// 核心功能 3: 计算所有分类区块的顶部偏移量
		calculateCategoryOffsets() {
			if (this.filteredGoods.length === 0) {
				this.categoryOffsetTops = [];
				return;
			}
			
			// 必须使用 $nextTick 确保 DOM 已经渲染
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				let scrollRectTop = 0;
				
				// 1. 获取 scroll-view 顶部到页面的距离 (作为基准点)
				query.select('.goods-scroll-view').boundingClientRect(rect => {
					scrollRectTop = rect.top;
				}).exec();
				
				// 2. 获取所有分类 section 的位置信息
				query.selectAll('.goods-category-section').boundingClientRect(data => {
					if (!data.length) return;

					this.categoryOffsetTops = data.map(item => ({
						id: parseInt(item.dataset.categoryIndex), // 从 data-category-index 获取 categoryId
						top: item.top - scrollRectTop // 计算相对于 scroll-view 顶部的距离 (即 scrollTop 的值)
					}));
				}).exec();
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	.navbar-title {
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
	}
	.navbar-right {
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		.nav-btn {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.manage-btn {
			margin-left: 24rpx;
		}
	}

	.search-bar {
		padding: 12rpx 32rpx;
		background-color: #fff;
		.u-search {
			border-radius: 8rpx;
			background-color: #F7F8FC;
		}
	}
}
.main-content {
	flex: 1;
	display: flex;
	overflow: hidden;
	.category-list {
		width: 160rpx;
		height: 100%;
		background-color: #F7F8FC;
		.category-item {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			text-align: left;
			padding: 24rpx 32rpx;
			&.active {
				background-color: #fff;
				font-weight: 500;
				color: #2983EC;
			}
		}
	}
	.goods-scroll-view {
		flex: 1;
		height: 100%;
		background-color: #fff;
		padding: 0 24rpx 20rpx;
		.category-title {
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
			padding-top: 20rpx;
		}
		.u-checkbox-group {
			width: 100%;
		}
	}
	.goods-card {
		width: 100%;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: flex-start;
		position: relative;
		.goods-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			flex-shrink: 0;
			background-color: #eee;
		}
		.goods-info {
			flex: 1;
			margin-left: 20rpx;
			.goods-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.goods-sales, .goods-desc {
				font-size: 22rpx;
				font-weight: 400;
				color: #8A91A8;
				margin-top: 4rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.goods-price-line {
				margin-top: 8rpx;
				.price {
					font-size: 32rpx;
					font-weight: 500;
					color: #FD4912;
					.unit {
						font-size: 22rpx;
						margin-right: 2rpx;
					}
				}
				.original-price {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					text-decoration: line-through;
					margin-left: 10rpx;
				}
			}
		}
		.goods-actions {
			position: absolute;
			right: 0;
			bottom: 20rpx;
			::v-deep .u-btn {
				height: 46rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #2D88F4;
				padding: 0 24rpx;
				// background: rgba(45,136,244,0.05);
				border-radius: 61rpx;
				border: 1rpx solid #2D88F4;
				&::after {
					display: none;
				}
			}
		}
	}
}
.footer-bar {
	bottom: 50px;
	padding-bottom: 20px;
	.action-buttons {
		display: flex;
		gap: 20rpx;
		::v-deep .u-btn {
			height: 69rpx;
			border-radius: 49rpx;
		}
	}
}
</style>