189 lines
3.7 KiB
Vue
189 lines
3.7 KiB
Vue
<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> |