cashier_app/pageProduct/add-Product/timer.vue

<template>
	<view class="u-p-30 min-page u-font-28">
		<view class="list u-m-t-20" v-if="list.length">
			<view class="block" v-for="(item,index) in list" :key="index">
				<view class="u-flex  u-row-between">
					<view>周期</view>
					<view class="color-main" @click="selectAllClick(index)">
						{{isAllChecked?'取消全选':'全选'}}
					</view>
				</view>
				<view class="u-m-t-24">
					<uni-data-checkbox :selectedColor="$utils.ColorMain" multiple v-model="item.cycleChecked"
						:localdata="cycle"></uni-data-checkbox>
				</view>
				<view class="u-m-t-24">
					<view class="u-flex">
						<view>上架时间:</view>
						<view class="u-flex-1 u-m-l-10">
							<picker mode="multiSelector" @change="startTimeChange($event,index)"
								:value="item.startTime.index" :range="times">
								<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
									{{item.startTime.value}}
								</view>
							</picker>
						</view>
					</view>
					<view class="u-flex u-m-t-16">
						<view>下架时间:</view>
						<view class="u-flex-1 u-m-l-10">
							<picker mode="multiSelector" @change="endTimeChange($event,index)"
								:value="item.endTime.index" :range="times">
								<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
									{{item.endTime.value}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="u-flex u-row-center u-m-t-60">
			<my-button width="580" shape="circle" @click="emitTimerSave">保存</my-button>
		</view>

	</view>
</template>

<script setup>
	import { onLoad, onReady } from '@dcloudio/uni-app';
	import { computed, ref } from 'vue';
	import go from '@/commons/utils/go.js';
	import { getProductDetail } from '@/http/api/product.js'
	
	
	const cycle = [{
			value: 'Monday',
			text: '星期一'
		},
		{
			value: 'Tuesday',
			text: '星期二'
		},
		{
			value: 'Wednesday',
			text: '星期三'
		},
		{
			value: 'Thursday',
			text: '星期四'
		},
		{
			value: 'Friday',
			text: '星期五'
		},
		{
			value: 'Saturday',
			text: '星期六'
		},
		{
			value: 'Sunday',
			text: '星期日'
		}
	]
	const ListDataconstructor = {
		cycleChecked: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
	}
	let goodsDetail = ref({})
	onLoad(async (opt) => {
		console.log(opt)
		const arr = opt ? returnTimer(opt) : [];
		console.log(arr);
		if (arr.length) {
			list.value = arr
		}
	})
	
	function returnTimer(res) {
		return [{
			cycleChecked: res.days ? res.days.split(',').filter(v => v) : [],
			startTime: res.startTime ? {
				value: res.startTime,
				index: returnTimeIndex(res.startTime)
			} : returnBasicTimeConstructor.startTime,
			endTime: res.endTime ? {
				value: res.endTime,
				index: returnTimeIndex(res.endTime)
			} : returnBasicTimeConstructor.endTime
		}]
	}
	
	function returnTimeIndex(time) {
		return time.split(':').map(v => {
			return v * 1
		})
	}
	const times = ref(returnDayTime())
	//返回一天的时间 时分格式
	function returnDayTime() {
		return new Array(3).fill(1).map((v, index) => {
			if (index === 0) {
				return new Array(24).fill(1).map((hour, index) => {
					return `0${index}`.slice(-2)
				})
			}
			if (index === 1 || index === 2) {
				return new Array(60).fill(1).map((hour, index) => {
					return `0${index}`.slice(-2)
				})
			}
		})
	}
	let defaultTimeIndex = ref(0)
	function getTime(indexArr) {
		const hour = times.value[0][indexArr[0]]
		const month = times.value[1][indexArr[1]]
		const s = times.value[2][indexArr[2]]
		// return `${hour}:${month}:${s}`
		return `${hour}:${month}:${s}`
	}
	
	//获取$event.detail.value
	function getEnentDetailValue(e) {
		return e.detail.value
	}

	function setListTimeValue(index, key, time) {
		list.value[index][key].value = time
	}

	function startTimeChange(e, index) {
		const indexArr = getEnentDetailValue(e)
		const time = getTime(indexArr)
		setListTimeValue(index, 'startTime', time)
	}

	function endTimeChange(e, index) {
		const indexArr = getEnentDetailValue(e)
		const time = getTime(indexArr)
		setListTimeValue(index, 'endTime', time)
	}

	function returnBasicTimeConstructor() {
		return {
			startTime: {
				value: '00:00:00',
				index: [0, 0, 0]
			},
			endTime: {
				value: '23:59:59',
				index: [0, 0, 0]
			}
		}
	}
	const list = ref([returnBasicDataConstructor()])

	function returnBasicDataConstructor() {
		return {
			...ListDataconstructor,
			...returnBasicTimeConstructor()
		}
	}

	function addTimer() {
		list.value.push(returnBasicDataConstructor())
	}

	function delTimer(index) {
		list.value.splice(index, 1)
	}
	const isAllChecked = computed(() => {
		return list.value[0].cycleChecked.length == cycle.length ? true : false
	})

	function selectAllClick(index) {
		if (isAllChecked.value) {
			list.value[index].cycleChecked = []
		} else {
			list.value[index].cycleChecked = ListDataconstructor.cycleChecked
		}
	}
	// 触发定时器保存事件将数据给到添加商品页面
	function emitTimerSave() {
		const par = {
			days: list.value[0].cycleChecked.join(','),
			startTime: list.value[0].startTime.value,
			endTime: list.value[0].endTime.value
		}
		console.log(par);
		uni.$emit('timerSave', par)
		go.back()
	}



	
</script>

<style lang="scss">
	.min-page {
		background-color: #F9F9F9;
	}

	.block {
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		padding: 32rpx 28rpx;
		margin-bottom: 32rpx;
	}
</style>