调整ui

components/DatePicker/DateFilter.vue

@@ -0,0 +1,105 @@
+<template>
+  <view class="date-filter">
+
+    <!-- 开始日期 -->
+    <view class="filter-item" @click="$refs.startPicker.open(startDate)">
+      <text class="label">开始日期</text>
+      <text class="value">{{ startDate || '请选择' }}</text>
+    </view>
+
+    <view class="divider"></view>
+
+    <!-- 结束日期 -->
+    <view class="filter-item" @click="$refs.endPicker.open(endDate)">
+      <text class="label">结束日期</text>
+      <text class="value">{{ endDate || '请选择' }}</text>
+    </view>
+
+    <!-- 开始日期选择器 -->
+    <DatePicker 
+      v-model="startDate"
+      ref="startPicker"
+      @confirm="selectStart"
+    />
+
+    <!-- 结束日期选择器 -->
+    <DatePicker 
+      v-model="endDate"
+      ref="endPicker"
+      @confirm="selectEnd"
+    />
+
+  </view>
+</template>
+
+<script>
+import DatePicker from './DatePicker.vue';
+
+export default {
+  name: 'DateFilter',
+  components: { DatePicker },
+
+  props: {
+    start: { type: String, default: '' },
+    end: { type: String, default: '' }
+  },
+
+  data() {
+    return {
+      startDate: this.start,
+      endDate: this.end
+    };
+  },
+
+  methods: {
+    /** 选择开始日期 */
+    selectStart(e) {
+      this.startDate = e;
+      this.$emit('update:start', e);
+      this.$emit('change', { start: this.startDate, end: this.endDate });
+    },
+
+    /** 选择结束日期 */
+    selectEnd(e) {
+      this.endDate = e;
+      this.$emit('update:end', e);
+      this.$emit('change', { start: this.startDate, end: this.endDate });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.date-filter {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  background: #ffffff;
+  border-radius: 12rpx;
+}
+
+.filter-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  font-size: 24rpx;
+  color: #888;
+}
+
+.value {
+  font-size: 28rpx;
+  padding-left: 30rpx;
+  color: #333;
+  margin-top: 6rpx;
+}
+
+.divider {
+  width: 2rpx;
+  height: 40rpx;
+  background: #e5e5e5;
+  margin: 0 20rpx;
+}
+</style>