first

pageReserveSeat/index/components/add-unpredictable-date.vue

@@ -0,0 +1,189 @@
+<template>
+	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
+		<template #desc>
+			<view class="u-p-30 u-text-left">
+				<view>
+					<view>开始日期</view>
+					<view class="u-m-t-24 u-flex border">
+						<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
+							mode="">
+						</image>
+						<view class="u-flex u-flex-1" @tap="startDateToggle">
+							<view class="color-666" v-if="form.start===''">请选择开始日期</view>
+							<view v-else>
+								<uni-dateformat format="yyyy-MM-dd" :date="form.start"></uni-dateformat>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="u-m-t-32">
+					<view>结束日期</view>
+					<view class="u-m-t-24 u-flex border">
+						<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
+							mode="">
+						</image>
+						<view class="u-flex-1 u-flex" @tap="endDateToggle">
+							<view class="color-666" v-if="form.end===''">请选择结束日期</view>
+							<view v-else>
+								<uni-dateformat format="yyyy-MM-dd" :date="form.end"></uni-dateformat>
+							</view>
+						</view>
+						
+					</view>
+				</view>
+			</view>
+		</template>
+		<template #btn>
+			<view class="u-p-30">
+				<view class="u-m-t-10">
+					<my-button @tap="confirm" shape="circle" showShadow>保存并添加</my-button>
+					<my-button type="cancel" bgColor="#fff" @tap="close">取消</my-button>
+				</view>
+			</view>
+		</template>
+	</my-model>
+	
+	
+	<!-- 开始时间 -->
+	<my-date-pickerview @confirm="startDateConfirm" :selTime="form.start" 
+	:isArea="false" mode="date" ref="startDatePicker"></my-date-pickerview>
+	
+	<!-- 结束时间 -->
+	<my-date-pickerview @confirm="endDateConfirm" :selTime="form.end"
+	:isArea="false" mode="date" ref="endDatePicker"></my-date-pickerview>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		nextTick,
+		ref
+	} from 'vue';
+	import myModel from '@/components/my-components/my-model.vue'
+	import myButton from '@/components/my-components/my-button.vue'
+	import myDatePickerview from '@/components/my-components/my-date-pickerview'
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		}
+	})
+	
+	const startDatePicker=ref(null)
+	const endDatePicker=ref(null)
+	function startDateToggle() {
+		startDatePicker.value.toggle()
+	}
+	function endDateToggle() {
+		endDatePicker.value.toggle()
+	}
+	function startDateConfirm(e) {
+		form.start=e
+	}
+	function endDateConfirm(e) {
+		form.end=e
+	}
+
+	function changeCauses(item) {
+		let prve = form.remark.length ? ',' : ''
+		form.remark += prve + item.name
+	}
+
+
+
+	function setForm(key, val) {
+		form[key] = val
+	}
+
+
+
+
+	const $form = {
+		start: '',
+		end: ''
+	}
+	const form = reactive({
+		...$form
+	})
+
+	function resetForm() {
+		Object.assign(form, {
+			...$form
+		})
+	}
+
+	const model = ref(null)
+
+	function open() {
+		model.value.open()
+	}
+
+	function close() {
+		model.value.close()
+	}
+	const emits = defineEmits(['confirm'])
+
+	function confirm() {
+		const {
+			start,end
+		} = form
+		if(start===''){
+			return uni.showToast({
+				icon:'none',
+				title:'请选择开始日期'
+			})
+		}
+		if(end===''){
+			return uni.showToast({
+				icon:'none',
+				title:'请选择结束日期'
+			})
+		}
+		close()
+		emits('confirm',{start,end})
+	}
+	defineExpose({
+		open,
+		close
+	})
+</script>
+
+<style lang="scss">
+	.border {
+		border-radius: 8rpx 8rpx 8rpx 8rpx;
+		padding: 22rpx;
+	}
+
+	.lh34 {
+		line-height: 34rpx;
+	}
+
+
+	.hover-class {
+		background-color: #E5E5E5;
+	}
+
+
+	.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>