chore: initial import

pkgService/submit_request/components/DateRangeSelector.vue

@@ -0,0 +1,137 @@
+<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>