138 lines
2.9 KiB
Vue
138 lines
2.9 KiB
Vue
<template>
|
|
<view class="date-range-selector">
|
|
<view class="date-item">
|
|
<view class="date-label">{{ resolvedStartLabel }}</view>
|
|
<picker mode="date" @change="onStartChange">
|
|
<view class="date-input" :class="{ 'is-empty': !start }">
|
|
{{ start || resolvedStartPlaceholder }}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="date-divider">{{ t('dateDivider') }}</view>
|
|
<view class="date-item">
|
|
<view class="date-label">{{ resolvedEndLabel }}</view>
|
|
<picker mode="date" @change="onEndChange">
|
|
<view class="date-input" :class="{ 'is-empty': !end }">
|
|
{{ end || resolvedEndPlaceholder }}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DateRangeSelector',
|
|
i18n: {
|
|
zh: {
|
|
startLabel: '预计入住',
|
|
endLabel: '预计离开',
|
|
startPlaceholder: '请选择入住日期',
|
|
endPlaceholder: '请选择离开日期',
|
|
dateDivider: '至'
|
|
},
|
|
en: {
|
|
startLabel: 'Expected Check-in',
|
|
endLabel: 'Expected Check-out',
|
|
startPlaceholder: 'Select check-in date',
|
|
endPlaceholder: 'Select check-out date',
|
|
dateDivider: 'to'
|
|
}
|
|
},
|
|
props: {
|
|
start: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
end: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
startLabel: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
endLabel: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
startPlaceholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
endPlaceholder: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
resolvedStartLabel() {
|
|
return this.startLabel || this.t('startLabel')
|
|
},
|
|
resolvedEndLabel() {
|
|
return this.endLabel || this.t('endLabel')
|
|
},
|
|
resolvedStartPlaceholder() {
|
|
return this.startPlaceholder || this.t('startPlaceholder')
|
|
},
|
|
resolvedEndPlaceholder() {
|
|
return this.endPlaceholder || this.t('endPlaceholder')
|
|
}
|
|
},
|
|
methods: {
|
|
t(key) {
|
|
return this.$tm('pkgService.submit_request.components.DateRangeSelector', key)
|
|
},
|
|
onStartChange(e) {
|
|
this.$emit('update:start', e.detail.value)
|
|
},
|
|
onEndChange(e) {
|
|
this.$emit('update:end', e.detail.value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.date-range-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: 24rpx;
|
|
padding: 24rpx 32rpx;
|
|
border: 2rpx solid rgba(226, 232, 240, 0.8);
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.date-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.date-divider {
|
|
margin: 0 24rpx;
|
|
color: #94A3B8;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.date-label {
|
|
font-size: 22rpx;
|
|
color: #64748B;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.date-input {
|
|
font-size: 28rpx;
|
|
color: #1A2B4C;
|
|
font-weight: 600;
|
|
|
|
&.is-empty {
|
|
color: #CBD5E1;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
</style>
|