cashier_admin_app/pageProduct/add-Product/timer.vue

<template>
	<view class="u-p-30 min-page">
		<view class="u-flex">
			<view style="width: 210rpx;">
				<my-button shape="circle" @click="addTimer">添加定时器</my-button>
			</view>
		</view>
		<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>定时器{{index+1}}</view>
					<uni-icons @click="delTimer(index)" type="trash"></uni-icons>
				</view>
				<view class="u-flex u-m-t-20 u-row-between">
					<view>周期</view>
					<view @click="selectAllClick(index)">全选</view>
				</view>
				<view class="u-m-t-20">
					<uni-data-checkbox multiple v-model="item.cycleChecked" :localdata="cycle"></uni-data-checkbox>
				</view>
				<view class="u-m-t-20">
					<view class="u-flex">
						<view>上架时间:</view>
						<view class="u-flex-1 u-m-l-10">
							<picker mode="multiSelector" @change="listingTimeChange($event,index)"
								:value="item.listingTime.index" :range="times">
								<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
									{{item.listingTime.value}}
								</view>
							</picker>
						</view>
					</view>
					<view class="u-flex u-m-t-20">
						<view>下架时间:</view>
						<view class="u-flex-1 u-m-l-10">
							<picker mode="multiSelector" @change="offShelfChange($event,index)"
								:value="item.offShelf.index" :range="times">
								<view class="bg-gray u-p-l-20 u-p-t-6 u-p-b-6 u-p-r-20 ">
									{{item.offShelf.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="save">保存</my-button>
		</view>

	</view>
</template>

<script setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import go from '@/commons/utils/go.js';
	import myButton from '@/components/my-components/my-button.vue'
	//返回一天的时间 时分格式
	function returnDayTime() {
		return new Array(2).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) {
				return new Array(60).fill(1).map((hour, index) => {
					return `0${index}`.slice(-2)
				})
			}
		})
	}
	const times = ref(returnDayTime())
	let defaultTimeIndex = ref(0)

	function getTime(indexArr) {
		const hour = times.value[0][indexArr[0]]
		const month = times.value[1][indexArr[1]]
		return `${hour}:${month}`
	}
	//获取$event.detail.value
	function getEnentDetailValue(e) {
		return e.detail.value
	}

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

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

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



	const cycle = [{
			value: 0,
			text: '星期一'
		},
		{
			value: 1,
			text: '星期二'
		},
		{
			value: 2,
			text: '星期三'
		},
		{
			value: 3,
			text: '星期四'
		},
		{
			value: 4,
			text: '星期五'
		},
		{
			value: 5,
			text: '星期六'
		},
		{
			value: 6,
			text: '星期日'
		}
	]
	const ListDataconstructor = {
		cycleChecked: [0, 1, 2, 3, 4, 5, 6],
	}

	function returnBasicTimeConstructor() {
		return {
			listingTime: {
				value: '09:00',
				index: [9, 0]
			},
			offShelf: {
				value: '18:00',
				index: [18, 0]
			}
		}
	}
	const list = ref([returnBasicDataConstructor()])
	function returnBasicDataConstructor() {
		return {
			...ListDataconstructor,
			...returnBasicTimeConstructor()
		}
	}

	function addTimer() {
		list.value.push(returnBasicDataConstructor())
	}
	function delTimer(index) {
		list.value.splice(index,1)
	}
	function selectAllClick(index){
		list.value[index].cycleChecked=ListDataconstructor.cycleChecked
	}
	// 触发定时器保存事件将数据给到添加商品页面
	function emitTimerSave(){
		uni.$emit('timerSave',list.value)
		go.back()
	}
	function save(){
		console.log(list.value);
		emitTimerSave()
	}
	onLoad(()=>{
		const arr=uni.getStorageSync('timer')
		if(arr.length){
			list.value=arr
		}
	})
</script>

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

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