LocalLivingServicesUniapp/pages/merchantDish/dish/list.vue

<template>
	<view class="page">
		<u-navbar :placeholder="true" :border-bottom="false" :custom-back="goBack">
			<view class="nav-title">菜品列表</view>
			<view slot="right" class="nav-right">
				<template v-if="!batchMode">
					<u-icon name="search" size="40" color="#333" @click="showSearch = !showSearch"></u-icon>
					<u-icon name="list-dot" size="40" color="#333" style="margin-left: 24rpx" @click="enterBatch"></u-icon>
				</template>
				<text v-else class="cancel-btn" @click="exitBatch">取消</text>
			</view>
		</u-navbar>

		<view class="search-bar" v-if="showSearch && !batchMode">
			<u-search
				v-model="keyword"
				placeholder="请输入菜品/套餐名称"
				:show-action="true"
				action-text="搜索"
				@search="onSearch"
				@custom="onSearch"
			></u-search>
		</view>

		<view class="filters">
			<view class="filter-item" @click="openPicker('status')">
				{{ statusLabel }} <u-icon name="arrow-down" size="22" color="#666"></u-icon>
			</view>
			<view class="filter-item" @click="openPicker('type')">
				{{ typeLabel }} <u-icon name="arrow-down" size="22" color="#666"></u-icon>
			</view>
			<view class="filter-item" @click="openPicker('category')">
				{{ categoryLabel }} <u-icon name="arrow-down" size="22" color="#666"></u-icon>
			</view>
		</view>

		<!-- 团餐报名提示条 -->
		<view class="banner" v-if="bannerVisible" @click="onBannerClick">
			<text>{{ bannerText }}</text>
		</view>

		<view class="list-wrap" :style="{ paddingBottom: batchMode ? '140rpx' : '160rpx' }">
			<ListScrollView
				ref="listScroll"
				:api="api"
				:init="initParams"
				:pageSize="20"
				emptyText="暂无菜品"
				@afterFetch="afterFetch"
			>
				<template v-slot:list="{ data }">
					<view class="list">
						<view class="card" v-for="item in data" :key="item.id" @click="toggleSelect(item)">
							<view class="check" v-if="batchMode">
								<view :class="['dot', selectedIds.includes(item.id) ? 'on' : '']"></view>
							</view>
							<view class="thumb-wrap">
								<image class="thumb" :src="item.image" mode="aspectFill"></image>
								<view class="tag" :class="item.belong">{{ item.belong === 'group' ? '团餐' : '门店' }}</view>
							</view>
							<view class="info">
								<view class="row-top">
									<text class="name">{{ item.name }}</text>
									<text class="status">{{ statusText[item.status] || item.statusName }}</text>
								</view>
								<view class="desc">{{ item.desc }}</view>
								<view class="price-line">
									<text class="price">¥{{ item.price }}</text>
									<text class="sub">原价¥{{ item.originPrice }}</text>
									<text class="sub">库存{{ item.stock }}</text>
								</view>
								<view class="row-bottom">
									<text class="sales">合计销量: {{ item.sales }}</text>
									<view class="actions" v-if="!batchMode" @click.stop>
										<template v-if="item.status === 'selling' || item.status === 'soldout'">
											<view class="btn primary" @click="onOffShelf(item)">下架</view>
										</template>
										<template v-else-if="item.status === 'pending'">
											<view class="btn" @click="onDelete(item)">删除</view>
											<view class="btn" @click="goEdit(item)">编辑</view>
											<view class="btn primary" @click="onOnShelf(item)">上架</view>
										</template>
										<template v-else-if="item.status === 'rejected'">
											<view class="btn" @click="onDelete(item)">删除</view>
											<view class="btn" @click="goEdit(item)">编辑</view>
										</template>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</ListScrollView>
		</view>

		<!-- 底部：新建 / 批量操作 -->
		<view class="footer" v-if="!batchMode">
			<u-button type="primary" shape="circle" @click="goCreate">新建菜品</u-button>
		</view>
		<view class="batch-footer" v-else>
			<view class="all" @click="toggleAll">
				<view :class="['dot', isAllSelected ? 'on' : '']"></view>
				全选
			</view>
			<view class="batch-btns">
				<template v-if="filterStatus === '' || filterStatus === 'reviewing'">
					<view class="b-btn disabled">批量删除</view>
					<view class="b-btn disabled">批量下架</view>
					<view class="b-btn disabled">批量上架</view>
				</template>
				<template v-else-if="filterStatus === 'selling' || filterStatus === 'soldout'">
					<view class="b-btn danger" @click="batchOff">批量下架</view>
				</template>
				<template v-else-if="filterStatus === 'pending'">
					<view class="b-btn outline" @click="batchDelete">批量删除</view>
					<view class="b-btn danger" @click="batchOn">批量上架</view>
				</template>
				<template v-else-if="filterStatus === 'rejected'">
					<view class="b-btn danger" @click="batchDelete">批量删除</view>
				</template>
			</view>
		</view>

		<u-action-sheet :list="pickerList" v-model="pickerShow" @click="onPick"></u-action-sheet>
	</view>
</template>

<script>
import ListScrollView from '@/components/list-scroll-view/index.vue';
import merchantDishApi, {
	STATUS_KEY_TO_TYPE,
	STATUS_TEXT,
	mapPackageToListItem,
	belongingToApi,
	getMerchantId
} from '@/api/merchantDish.js';

const STATUS_OPTIONS = [
	{ label: '全部', value: '' },
	{ label: '销售中', value: 'selling' },
	{ label: '已售完', value: 'soldout' },
	{ label: '待上架', value: 'pending' },
	{ label: '审核中', value: 'reviewing' },
	{ label: '未通过', value: 'rejected' }
];

const TYPE_OPTIONS = [
	{ label: '全部商品', value: '' },
	{ label: '团餐', value: 'group' },
	{ label: '门店', value: 'store' }
];

export default {
	components: {
		ListScrollView
	},
	data() {
		return {
			api: {
				url: '/groupmeal/gmMerchantPackage/pageListV2',
				method: 'POST'
			},
			keyword: '',
			showSearch: false,
			batchMode: false,
			selectedIds: [],
			filterStatus: '',
			filterType: '',
			filterCategory: '',
			categoryOptions: [{ label: '全部品类', value: '' }],
			pickerShow: false,
			pickerType: '',
			pickerList: [],
			statusText: STATUS_TEXT,
			applyStatus: 0,
			listVersion: 0,
			listReady: false
		};
	},
	computed: {
		statusLabel() {
			return (STATUS_OPTIONS.find((i) => i.value === this.filterStatus) || {}).label || '全部';
		},
		typeLabel() {
			return (TYPE_OPTIONS.find((i) => i.value === this.filterType) || {}).label || '全部商品';
		},
		categoryLabel() {
			return (this.categoryOptions.find((i) => i.value === this.filterCategory) || {}).label || '全部品类';
		},
		initParams() {
			const params = {
				merchantId: getMerchantId(),
				statusType: this.filterStatus ? STATUS_KEY_TO_TYPE[this.filterStatus] : ''
			};
			if (this.keyword) params.name = this.keyword;
			if (this.filterType) params.productBelonging = belongingToApi(this.filterType);
			if (this.filterCategory) params.specialCategoryIds = [this.filterCategory];
			return params;
		},
		currentList() {
			// listVersion 用于操作后触发重新读取
			void this.listVersion;
			const scroll = this.$refs.listScroll;
			return (scroll && scroll.dataList) || [];
		},
		isAllSelected() {
			const list = this.currentList;
			const ids = list.map((i) => i.id);
			return ids.length > 0 && ids.every((id) => this.selectedIds.includes(id));
		},
		bannerVisible() {
			return this.applyStatus !== 1;
		},
		bannerText() {
			if (this.applyStatus === 0) return '提示：平台现已增加团餐活动，如您需要，点击报名参与';
			if (this.applyStatus === 3) return '提示：团餐活动报名审核中，请耐心等待';
			if (this.applyStatus === 2) return '提示：团餐报名未通过，点击重新报名';
			return '';
		}
	},
	onLoad() {
		this.loadSpecialCategories();
	},
	onShow() {
		// 首次进入交给 ListScrollView 自动加载，避免重复请求；返回本页时再刷新
		if (this.listReady) {
			this.reloadList();
		} else {
			this.listReady = true;
		}
		this.fetchApplyStatus();
	},
	methods: {
		goBack() {
			uni.navigateBack({ delta: 1 });
		},
		fetchApplyStatus() {
			const cache = uni.getStorageSync('merchantDish_applyStatus');
			if (cache !== '' && cache !== undefined && cache !== null) {
				this.applyStatus = Number(cache);
			}
			merchantDishApi.isApply().then((res) => {
				if (res.data.code !== 200) return;
				const result = res.data.result;
				let localStatus = 0;
				if (result) {
					const apiStatus = result.status;
					if (apiStatus == 0) localStatus = 3;
					else if (apiStatus == 1) localStatus = 1;
					else if (apiStatus == 2) localStatus = 2;
				}
				this.applyStatus = localStatus;
				uni.setStorageSync('merchantDish_applyStatus', localStatus);
			});
		},
		loadSpecialCategories() {
			merchantDishApi.specialCategoryList().then((res) => {
				if (res.data.code !== 200) return;
				const rows = res.data.result || [];
				this.categoryOptions = [
					{ label: '全部品类', value: '' },
					...rows.map((i) => ({
						label: i.categoryName,
						value: String(i.id)
					}))
				];
			});
		},
		afterFetch(result) {
			const records = Array.isArray(result.records) ? result.records : [];
			records.forEach((item) => {
				Object.assign(item, mapPackageToListItem(item));
			});
			this.listVersion += 1;
		},
		reloadList() {
			this.$nextTick(() => {
				const scroll = this.$refs.listScroll;
				if (scroll && scroll.mescroll) {
					scroll.reloadList(this.initParams);
				}
			});
		},
		onSearch() {
			this.reloadList();
		},
		openPicker(type) {
			if (this.batchMode) return;
			this.pickerType = type;
			const map = {
				status: STATUS_OPTIONS,
				type: TYPE_OPTIONS,
				category: this.categoryOptions
			};
			this.pickerList = (map[type] || []).map((i) => ({ text: i.label, value: i.value }));
			this.pickerShow = true;
		},
		onPick(e) {
			const value = e && e.value !== undefined ? e.value : '';
			if (this.pickerType === 'status') this.filterStatus = value;
			if (this.pickerType === 'type') this.filterType = value;
			if (this.pickerType === 'category') this.filterCategory = value;
			this.selectedIds = [];
			this.reloadList();
		},
		enterBatch() {
			this.batchMode = true;
			this.selectedIds = [];
		},
		exitBatch() {
			this.batchMode = false;
			this.selectedIds = [];
		},
		toggleSelect(item) {
			if (!this.batchMode) return;
			const i = this.selectedIds.indexOf(item.id);
			if (i >= 0) this.selectedIds.splice(i, 1);
			else this.selectedIds.push(item.id);
		},
		toggleAll() {
			if (this.isAllSelected) this.selectedIds = [];
			else this.selectedIds = this.currentList.map((i) => i.id);
		},
		goCreate() {
			uni.navigateTo({ url: '/pages/merchantDish/dish/form' });
		},
		goEdit(item) {
			uni.navigateTo({ url: `/pages/merchantDish/dish/form?id=${item.id}` });
		},
		onBannerClick() {
			if (this.applyStatus === 3) {
				uni.showToast({ title: '审核中，请耐心等待', icon: 'none' });
				return;
			}
			uni.navigateTo({ url: '/pages/merchantDish/apply/index' });
		},
		confirmModal(content) {
			return new Promise((resolve) => {
				uni.showModal({
					title: '',
					content,
					confirmColor: '#449AFF',
					success: (res) => resolve(!!res.confirm)
				});
			});
		},
		async onOffShelf(item) {
			let content = '确定下架当前商品';
			if (item.belong === 'group' && item.hasInProgressOrder) {
				content = '该商品当前有进行中的团餐订单，是否确定下架';
			}
			if (!(await this.confirmModal(content))) return;
			merchantDishApi.packageLaunch(item.id, 0).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '已下架' : '操作失败'));
				if (res.data.code === 200) this.reloadList();
			});
		},
		async onOnShelf(item) {
			if (!(await this.confirmModal('确定上架当前商品'))) return;
			merchantDishApi.packageLaunch(item.id, 1).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '已上架' : '操作失败'));
				if (res.data.code === 200) this.reloadList();
			});
		},
		async onDelete(item) {
			if (!(await this.confirmModal('确定删除当前商品'))) return;
			merchantDishApi.packageDelete(item.id).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '已删除' : '操作失败'));
				if (res.data.code === 200) this.reloadList();
			});
		},
		ensureSelected() {
			if (!this.selectedIds.length) {
				uni.showToast({ title: '请先选择菜品', icon: 'none' });
				return false;
			}
			return true;
		},
		async batchOff() {
			if (!this.ensureSelected()) return;
			if (!(await this.confirmModal('确定批量下架选中商品？'))) return;
			merchantDishApi.packageBatchLaunch(this.selectedIds, 0).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '批量下架成功' : '操作失败'));
				if (res.data.code === 200) {
					this.exitBatch();
					this.reloadList();
				}
			});
		},
		async batchOn() {
			if (!this.ensureSelected()) return;
			if (!(await this.confirmModal('确定批量上架选中商品？'))) return;
			merchantDishApi.packageBatchLaunch(this.selectedIds, 1).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '批量上架成功' : '操作失败'));
				if (res.data.code === 200) {
					this.exitBatch();
					this.reloadList();
				}
			});
		},
		async batchDelete() {
			if (!this.ensureSelected()) return;
			if (!(await this.confirmModal('确定批量删除选中商品？'))) return;
			merchantDishApi.packageDeleteBatch(this.selectedIds).then((res) => {
				this.$tip.toast(res.data.message || (res.data.code === 200 ? '批量删除成功' : '操作失败'));
				if (res.data.code === 200) {
					this.exitBatch();
					this.reloadList();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	background: #f7f8fc;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.nav-title {
	font-size: 40rpx;
	font-weight: 600;
	color: #222;
}
.nav-right {
	display: flex;
	align-items: center;
	padding-right: 24rpx;
}
.cancel-btn {
	font-size: 28rpx;
	color: #333;
	padding-right: 8rpx;
}
.search-bar {
	padding: 12rpx 24rpx;
	background: #fff;
	flex-shrink: 0;
}
.filters {
	display: flex;
	background: #fff;
	padding: 16rpx 24rpx 20rpx;
	flex-shrink: 0;
	.filter-item {
		margin-right: 36rpx;
		font-size: 26rpx;
		color: #333;
		display: flex;
		align-items: center;
		gap: 6rpx;
	}
}
.banner {
	margin: 16rpx 24rpx 0;
	background: #fff8e6;
	color: #b8860b;
	font-size: 24rpx;
	padding: 16rpx 20rpx;
	border-radius: 8rpx;
	flex-shrink: 0;
}
.list-wrap {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
}
.list {
	padding: 16rpx 24rpx;
	box-sizing: border-box;
}
.card {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 16rpx;
	.check {
		display: flex;
		align-items: center;
		margin-right: 16rpx;
	}
	.dot {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		&.on {
			background: #ff4d4f;
			border-color: #ff4d4f;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 10rpx;
				top: 4rpx;
				width: 10rpx;
				height: 18rpx;
				border: 3rpx solid #fff;
				border-top: 0;
				border-left: 0;
				transform: rotate(45deg);
			}
		}
	}
	.thumb-wrap {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		flex-shrink: 0;
		.thumb {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
			background: #eee;
		}
		.tag {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 18rpx;
			color: #fff;
			padding: 2rpx 10rpx;
			border-radius: 12rpx 0 12rpx 0;
			&.group {
				background: #ff6b35;
			}
			&.store {
				background: #449aff;
			}
		}
	}
	.info {
		flex: 1;
		margin-left: 16rpx;
		min-width: 0;
	}
	.row-top {
		display: flex;
		justify-content: space-between;
		.name {
			font-size: 30rpx;
			font-weight: 600;
			color: #222;
		}
		.status {
			font-size: 24rpx;
			color: #449aff;
			flex-shrink: 0;
			margin-left: 12rpx;
		}
	}
	.desc {
		font-size: 22rpx;
		color: #999;
		margin-top: 6rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.price-line {
		margin-top: 8rpx;
		.price {
			color: #ff4d4f;
			font-size: 30rpx;
			font-weight: 600;
			margin-right: 12rpx;
		}
		.sub {
			font-size: 22rpx;
			color: #999;
			margin-right: 12rpx;
		}
	}
	.row-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 12rpx;
		.sales {
			font-size: 22rpx;
			color: #999;
		}
		.actions {
			display: flex;
			gap: 12rpx;
		}
		.btn {
			font-size: 22rpx;
			padding: 6rpx 18rpx;
			border: 1rpx solid #ddd;
			border-radius: 28rpx;
			color: #333;
			&.primary {
				background: #449aff;
				border-color: #449aff;
				color: #fff;
			}
		}
	}
}
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
	background: #fff;
}
.batch-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
	.all {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-right: 20rpx;
		.dot {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 2rpx solid #ccc;
			margin-right: 10rpx;
			&.on {
				background: #ff4d4f;
				border-color: #ff4d4f;
			}
		}
	}
	.batch-btns {
		flex: 1;
		display: flex;
		gap: 12rpx;
		justify-content: flex-end;
	}
	.b-btn {
		flex: 1;
		text-align: center;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 36rpx;
		font-size: 26rpx;
		&.danger {
			background: #ff4d4f;
			color: #fff;
		}
		&.outline {
			border: 1rpx solid #ff4d4f;
			color: #ff4d4f;
		}
		&.disabled {
			background: #f0f0f0;
			color: #bbb;
			pointer-events: none;
		}
	}
}
</style>