LocalLivingServicesUniapp/pages/merchantDish/dish/spec-detail.vue

<template>
	<view class="page">
		<u-navbar title="规格明细" :autoBack="true" :placeholder="true">
			<view slot="right" class="nav-right" @click="toggleBatch">{{ batchMode ? '取消' : '批量操作' }}</view>
		</u-navbar>

		<scroll-view scroll-y class="list" :style="{ paddingBottom: batchMode ? '140rpx' : '160rpx' }">
			<view class="card" v-for="(item, index) in combos" :key="index" @click="toggleSelect(index)">
				<view class="check" v-if="batchMode">
					<view :class="['dot', selected.includes(index) ? 'on' : '']"></view>
				</view>
				<view class="body">
					<view class="title">{{ item.label }}</view>
					<view class="row">
						<text class="label required">售价 (元)</text>
						<input v-model="item.price" type="digit" placeholder="请输入" :disabled="batchMode" />
					</view>
					<view class="row">
						<text class="label required">原价 (元)</text>
						<input v-model="item.sellingPrice" type="digit" placeholder="请输入" :disabled="batchMode" />
					</view>
					<view class="row">
						<text class="label required">每日库存</text>
						<input v-model="item.stock" type="number" placeholder="请输入" :disabled="batchMode" />
					</view>
					<view class="row">
						<text class="label">成本价 (元)</text>
						<input v-model="item.costPrice" type="digit" placeholder="选填" :disabled="batchMode" />
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="footer" v-if="!batchMode">
			<u-button type="primary" shape="circle" :disabled="!canNext" @click="goNext">下一步</u-button>
		</view>
		<view class="batch-footer" v-else>
			<view class="all" @click="toggleAll">
				<view :class="['dot', isAll ? 'on' : '']"></view>
				全选
			</view>
			<view class="b-btn" @click="openBatchEdit">批量修改</view>
		</view>

		<u-popup v-model="batchShow" mode="bottom" border-radius="24">
			<view class="batch-sheet">
				<view class="bs-title">批量设置</view>
				<view class="row">
					<text class="label required">售价 (元)</text>
					<input v-model="batchForm.price" type="digit" placeholder="请输入" />
				</view>
				<view class="row">
					<text class="label required">原价 (元)</text>
					<input v-model="batchForm.sellingPrice" type="digit" placeholder="请输入" />
				</view>
				<view class="row">
					<text class="label required">每日库存</text>
					<input v-model="batchForm.stock" type="number" placeholder="请输入" />
				</view>
				<view class="row">
					<text class="label">成本价 (元)</text>
					<input v-model="batchForm.costPrice" type="digit" placeholder="选填" />
				</view>
				<view class="bs-btn" @click="applyBatch">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import session from '../session.js';

export default {
	data() {
		return {
			combos: [],
			batchMode: false,
			selected: [],
			batchShow: false,
			batchForm: { price: '', sellingPrice: '', stock: '', costPrice: '' }
		};
	},
	computed: {
		isAll() {
			return this.combos.length > 0 && this.selected.length === this.combos.length;
		},
		canNext() {
			return this.combos.every((i) => i.price !== '' && i.sellingPrice !== '' && i.stock !== '');
		}
	},
	onLoad() {
		const draft = session.getDishDraft() || {};
		this.combos = (draft.combos || []).map((i) => ({
			...i,
			sellingPrice: i.sellingPrice != null && i.sellingPrice !== '' ? i.sellingPrice : i.originPrice || ''
		}));
		if (!this.combos.length) {
			uni.showToast({ title: '请先选择规格', icon: 'none' });
			setTimeout(() => uni.navigateBack(), 500);
		}
	},
	methods: {
		toggleBatch() {
			this.batchMode = !this.batchMode;
			this.selected = [];
		},
		toggleSelect(index) {
			if (!this.batchMode) return;
			const i = this.selected.indexOf(index);
			if (i >= 0) this.selected.splice(i, 1);
			else this.selected.push(index);
		},
		toggleAll() {
			if (this.isAll) this.selected = [];
			else this.selected = this.combos.map((_, i) => i);
		},
		openBatchEdit() {
			if (!this.selected.length) {
				uni.showToast({ title: '请先选择规格', icon: 'none' });
				return;
			}
			this.batchForm = { price: '', sellingPrice: '', stock: '', costPrice: '' };
			this.batchShow = true;
		},
		applyBatch() {
			const { price, sellingPrice, stock, costPrice } = this.batchForm;
			if (price === '' || sellingPrice === '' || stock === '') {
				uni.showToast({ title: '请完善必填项', icon: 'none' });
				return;
			}
			this.selected.forEach((i) => {
				this.combos[i].price = price;
				this.combos[i].sellingPrice = sellingPrice;
				this.combos[i].stock = stock;
				this.combos[i].costPrice = costPrice;
			});
			this.batchShow = false;
			this.batchMode = false;
			this.selected = [];
		},
		goNext() {
			if (!this.canNext) {
				uni.showToast({ title: '请完善规格价格库存', icon: 'none' });
				return;
			}
			const draft = session.getDishDraft() || {};
			draft.combos = this.combos;
			session.setDishDraft(draft);
			uni.navigateTo({ url: '/pages/merchantDish/dish/sale-time?from=multi' });
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #f7f8fc;
}
.nav-right {
	padding-right: 24rpx;
	font-size: 28rpx;
	color: #333;
}
.list {
	height: calc(100vh - 100rpx);
	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: #449aff;
			border-color: #449aff;
		}
	}
	.body {
		flex: 1;
	}
	.title {
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
	}
	.row {
		display: flex;
		align-items: center;
		min-height: 72rpx;
		.label {
			width: 180rpx;
			font-size: 26rpx;
			&.required::before {
				content: '*';
				color: #ff4d4f;
			}
		}
		input {
			flex: 1;
			text-align: right;
			font-size: 26rpx;
		}
	}
}
.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;
	.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: #449aff;
				border-color: #449aff;
			}
		}
	}
	.b-btn {
		flex: 1;
		text-align: center;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 36rpx;
		background: linear-gradient( 89deg, #10ABFE 0%, #2260F6 100%);
		color: #fff;
		font-size: 28rpx;
	}
}
.batch-sheet {
	padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
	.bs-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}
	.row {
		display: flex;
		align-items: center;
		min-height: 88rpx;
		border-bottom: 1rpx solid #f0f0f0;
		.label {
			width: 180rpx;
			&.required::before {
				content: '*';
				color: #ff4d4f;
			}
		}
		input {
			flex: 1;
			text-align: right;
		}
	}
	.bs-btn {
		margin-top: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #449aff;
		color: #fff;
		border-radius: 40rpx;
	}
}
</style>