6e721ccc7e
将组件级 i18n 对象重构为统一由全局 locales/messages.js 管理，确保中英文语言切换时正确显示对应文本。 - 新增 utils/i18n.js 国际化工具函数 - 更新 store/$t.mixin.js 翻译混入逻辑 - 迁移 pkgService、pkgBooking、pkgAccount、pkgExplore、pages 等共 58 个组件的中英文文本至全局消息表
119 lines
2.4 KiB
Vue
119 lines
2.4 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">{{ $tr('至') }}</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',
|
|
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.$tr('预计入住')
|
|
},
|
|
resolvedEndLabel() {
|
|
return this.endLabel || this.$tr('预计离开')
|
|
},
|
|
resolvedStartPlaceholder() {
|
|
return this.startPlaceholder || this.$tr('请选择入住日期')
|
|
},
|
|
resolvedEndPlaceholder() {
|
|
return this.endPlaceholder || this.$tr('请选择离开日期')
|
|
}
|
|
},
|
|
methods: {
|
|
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>
|