cashier_app/pageWorkControl/setting/components/add-banci.vue

<template>
	<my-model ref="model" :borderRadius="18" :title="title" iconColor="#000" @close="resetForm">
		<template #desc>
			<view class="u-text-left u-p-30 ">
				<view class="u-m-t-40  ">
					<view>班名次</view>
					<view class="u-p-l-32 border u-m-t-24 u-flex-1">
						<uni-easyinput   paddingNone :inputBorder="false" v-model="form.name"
							placeholder="请输入班次名称"></uni-easyinput>
					</view>
				</view>
				<template v-if="active!=1">
					<view class="u-m-t-40  " @tap="timePickerShow(form.start,'start')">
						<view>开始时间</view>
						<view class="u-p-l-32 border  lh35 u-flex u-m-t-24 u-flex-1">
							<view class="u-flex">
								<image src="/pageWorkControl/static/images/icon-time.svg" class="icon-time" mode=""></image>
							</view>
							<view class="u-m-l-12">
								<text v-if="!form.start" class="color-666">请选择开始时间</text>
								<text v-else>{{form.start}}</text>
							</view>
						</view>
					</view>
					<view class="u-m-t-40  " @tap="timePickerShow(form.end,'end')">
						<view>结束时间</view>
						<view class="u-p-l-32 border  lh35 u-flex u-m-t-24 u-flex-1">
							<view class="u-flex">
								<image src="/pageWorkControl/static/images/icon-time.svg" class="icon-time" mode=""></image>
							</view>
							<view class="u-m-l-12">
								<text v-if="!form.end" class="color-666">请选择结束时间</text>
								<text v-else>{{form.end}}</text>
							</view>
						</view>
					</view>
				</template>
				
				
			</view>
		</template>
		<template #btn>
			<view class="u-p-30">
				<view class="u-m-t-10">
					<my-button @tap="confirm" shape="circle" showShadow>{{props.title==='添加'?'添加':'提交'}}</my-button>
					<my-button type="cancel" bgColor="#fff" @tap="close">取消</my-button>
				</view>
			</view>
		</template>
	</my-model>
	
	<my-pickerview autoClear :isLink="false" mode="time"  @confirm="timeConfirm"  :showTitle="false" ref="timePicker"
	:defaultIndex="times.defaultIndex"
	></my-pickerview>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		ref
	} from 'vue';
	import myPickerview from '@/components/my-components/my-pickerview'
	import myModel from '@/components/my-components/my-model.vue'
	import myButton from '@/components/my-components/my-button.vue'
	const props = defineProps({
		active:{
			type:[String,Number],
			default:1
		},
		mode:{
			//time none
			type:String,
			default:'none'
		},
		title: {
			type: String,
			default: ''
		},
		data: {
			type: Array,
			default: []
		}
	})
	
	function timeConfirm(e){
		form[times.selType]=e.join(':')
	}
	
	const times=reactive({
		defaultIndex:[0,0],
		selType:'',
	})
	

	
	const timePicker = ref(null)
	function timePickerShow(time,timeshowKey){
		times.selType=timeshowKey
		const date=new Date()
		if(time===''){
			times.defaultIndex=[date.getHours(),date.getMinutes()]
		}else{
			console.log(time.split(':').map(v=>parseInt(v)));
			times.defaultIndex=time.split(':').map(v=>parseInt(v))
		}
		timePicker.value.open()
	}
	
	function currentPriceChange(newval){
		nextTick(()=>{
			form.discount=(newval*100/form.price).toFixed()
		})
	}
	function discountChange(newval){
		nextTick(()=>{
			form.currentPrice=(form.price*newval/100).toFixed(2)
		})
	}

	const $form = {
		name:'',
		start:'',
		end:'',
	}
	const form = reactive({
		...$form
	})

	function resetForm() {
		Object.assign(form, {
			...$form
		})
	}

	const model = ref(null)

	function open(item) {
		if(item){
			Object.assign(form,item)
		}
		model.value.open()
		emits('open')
	}

	function close() {
		model.value.close()
		resetForm()
		emits('close')
	}
	const emits = defineEmits(['confirm','close','open'])

	function confirm() {
		const {
			name,start,end
		} = form
		if(!name){
			return uni.showToast({
				title:'请输入班次名',
				icon:'none'
			})
		}
		if(props.active==0){
			if(!start){
				return uni.showToast({
					title:'请选择开始时间',
					icon:'none'
				})
			}
			if(!end){
				return uni.showToast({
					title:'请选择结束时间',
					icon:'none'
				})
			}
		}
		emits('confirm',{...form})
		close()
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.lh35{
		line-height: 35px;
	}
	.icon-time{
		width: 28rpx;
		height: 28rpx;
	}
	.border{
		border-radius: 8rpx;
	}
	.lh34 {
		line-height: 34rpx;
	}

	.tag {
		background-color: #fff;
		border: 1px solid #E5E5E5;
		line-height: inherit;
		font-size: 24rpx;
		color: #666666;
		padding: 6rpx 20rpx;
		border-radius: 8rpx;

		&.active {
			border-color: #E6F0FF;
			color: $my-main-color;
		}
	}

	.hover-class {
		background-color: #E5E5E5;
	}

	.discount {
		.u-absolute {
			top: 0;
			bottom: 0;
			right: 0;
		}
	}

	.bg1 {
		background: #F7F7FA;
	}

	.tab {
		padding: 0 80rpx;
	}

	.border {
		border: 1px solid #E5E5E5;
		border-radius: 4rpx;
	}

	.input-box {
		padding: 22rpx 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.placeholder-class {
		font-size: 28rpx;
	}
</style>