LocalLivingServicesUniapp/pages/groupMeal/goods/form-day.vue

<template>
	<view class="page-container">
		<u-navbar title="新建团餐" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="content">
			<view class="title">
				售卖时间
			</view>
			<view class="tips">
				商品售卖周天(可多选)
				<span>*</span>
			</view>
			<view class="day-list">
				<view class="day-item" v-for="item in dayList" :key="item.code" @click="selectDay(item)"
					:class="{ 'selected': isDaySelected(item) }">
					{{item.name}}
				</view>
			</view>
			<view class="footer-bar">
				<u-button :custom-style="{
					width: '324rpx',
					fontWeight: '400',
					fontSize: '28rpx',
					color: '#449AFF',
					border: '1rpx solid #449AFF',
					background: '#fff',
					marginRight: '24rpx'
				}" @click="goBack">上一步</u-button>
				<u-button :custom-style="{
					width: '324rpx',
					fontWeight: '400',
					fontSize: '28rpx',
					color: '#449AFF',
					border: '1rpx solid #449AFF',
					background: '#fff',
					marginRight: '24rpx'
				}" @click="goNextStep">下一步</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					dayCodes: []
				},
				dayList: [],
				selectedDayCodes: []
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getDayList() {
				const res = await this.$http.get('/groupmeal/gmMerchantPackage/getSaleDay')
				if (res.data.code === 200 && res.data.result) {
					this.dayList = res.data.result
				}
			},
			normalizeDayCodes(codes) {
				const dayCodes = Array.isArray(codes) ? codes : String(codes || '').split(',');
				return dayCodes.map(code => String(code).trim()).filter(Boolean);
			},
			isDaySelected(item) {
				return this.selectedDayCodes.includes(String(item.code));
			},
			selectDay(item) {
				const code = String(item.code);
				const index = this.selectedDayCodes.indexOf(code);
				if (index > -1) {
					this.selectedDayCodes.splice(index, 1);
				} else {
					this.selectedDayCodes.push(code);
				}
				this.form.dayCodes = [...this.selectedDayCodes];
			},
			goNextStep() {
				const dayCodes = this.normalizeDayCodes(this.selectedDayCodes);
				if (!dayCodes.length) {
					this.$u.toast('请选择日期');
					return;
				}
				this.selectedDayCodes = dayCodes;
				this.form.dayCodes = [...dayCodes];
				const goods = uni.getStorageSync('gm_goods') || {};
				goods.saleDays = dayCodes.join(',');
				uni.setStorageSync('gm_goods', goods);
				uni.navigateTo({
					url: '/pages/groupMeal/goods/form-step2'
				});
			}
		},
		async onShow() {
			await this.getDayList()
			const goods = uni.getStorageSync('gm_goods') || {}
			if (goods.saleDays) {
				this.selectedDayCodes = this.normalizeDayCodes(goods.saleDays)
				this.form.dayCodes = [...this.selectedDayCodes]
			} else if (goods.dayCodes?.length) {
				this.selectedDayCodes = this.normalizeDayCodes(goods.dayCodes)
				this.form.dayCodes = [...this.selectedDayCodes]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #f5f5f5;

		.content {
			margin: 24rpx;
			padding: 16rpx;
			.title{
				font-weight: 600;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 18rpx;
				height: 44rpx;
				line-height: 44rpx;
			}
			.tips{
				height: 40rpx;
				line-height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				span{
					color: red;
				}
			}
		}
	}

	.day-list {
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx;
		.day-item {
			margin: 0 38rpx 16rpx 0;
			width: 132rpx;
			height: 58rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			&:nth-child(4n) {
				margin-right: 0;
			}
			&.selected {
				color: #2983EC;
				font-weight: bold;
				border: 1rpx solid #2983EC;
				background: rgba(68,154,255,0.1);
				border-radius: 8rpx;
			}
		}
	}

	.footer-bar {
		::v-deep .u-btn {
			width: 324rpx;
			height: 76rpx;
			border-radius: 54rpx;

			&::after {
				display: none;
			}
		}
	}
</style>