feat: 增加使用日期组件

src/components/Stepper/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="stepper-wrapper border-box flex flex-items-center rounded-8">
     <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
-    <text class="stepper-text text-center font-size-14 font-500 color-000">
+    <text class="stepper-text text-center font-size-14 font-500 color-000 ml-4 mr-4">
       {{ value }} {{ unit }}
     </text>
     <uni-icons type="plus" size="24" color="#198CFF" @click="increase" />

src/components/UseDateRange/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <view class="bg-white rounded-12 overflow-hidden mb-12">
+    <view
+      class="border-box font-size-16 font-500 color-000 line-height-24 p-12"
+      >使用日期</view
+    >
+    <view class="flex flex-items-center border-box ">
+      <scroll-view class="date-scroll" scroll-x>
+        <view class="date-list">
+          <block v-for="(item) in dates" :key="item.date">
+            <view
+              class="date-item"
+              :class="{ selected: isSameDate(selectedDate, item.date) }"
+              @click="onDateClick(item)"
+            >
+              <view class="label font-size-12">{{ item.label }}</view>
+              <view class="md font-size-16 font-600">{{ formatMD(item.date) }}</view>
+              <view class="status font-size-12">可订</view>
+              <view v-if="isSameDate(selectedDate, item.date)" class="check">✔</view>
+            </view>
+          </block>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+const props = defineProps({
+  selectedDate: { type: String, default: null },
+  days: { type: Number, default: 14 }
+});
+const emit = defineEmits(['update:selectedDate']);
+
+const dates = ref([]);
+const selectedDate = ref(props.selectedDate);
+
+watch(() => props.selectedDate, (v) => {
+  selectedDate.value = v;
+});
+
+const initDates = (days = props.days) => {
+  const arr = [];
+  const today = new Date();
+  for (let i = 0; i < days; i++) {
+    const d = new Date(today);
+    d.setDate(today.getDate() + i);
+    const iso = d.toISOString().slice(0, 10);
+    arr.push({ date: iso, day: i, disabled: false, label: getLabel(i, d) });
+  }
+  dates.value = arr;
+}
+
+const getLabel = (i, d) => {
+  if (i === 0) return '今天';
+  if (i === 1) return '明天';
+  const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+  return week[d.getDay()];
+}
+
+const formatMD = (dateStr) => {
+  const d = new Date(dateStr);
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  return `${mm}-${dd}`;
+}
+
+const isSameDate = (a, b) => {
+  if (!a || !b) return false;
+  return a === b;
+}
+
+const onDateClick = (item) => {
+  const date = item.date;
+  if (selectedDate.value === date) {
+    selectedDate.value = null;
+  } else {
+    selectedDate.value = date;
+  }
+  emit('update:selectedDate', selectedDate.value);
+}
+onMounted(() => initDates());
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

src/components/UseDateRange/styles/index.scss

@@ -0,0 +1,62 @@
+.date-scroll {
+  width: 100%;
+}
+.date-list {
+  display: flex;
+  padding: 8px 12px 12px;
+}
+.date-item {
+  width: 76px;
+  min-width: 76px;
+  height: 86px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
+  margin-right: 12px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.date-item .label { 
+  margin-bottom: 6px; 
+  color: #999; 
+}
+.date-item .md { 
+  margin-bottom: 6px; 
+  color: #000; 
+}
+.date-item .status { 
+  font-size: 12px; 
+  color: #999; }
+.date-item.selected {
+  border: 1px solid $theme-color-500;
+  background: $theme-color-50;
+}
+.date-item.selected .label,
+.date-item.selected .md,
+.date-item.selected .status {
+  color: $theme-color-500;
+}
+.date-item.disabled {
+  opacity: 0.45;
+}
+.date-item .check {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background: $theme-color-500;
+  color: #fff;
+  width: 18px;
+  height: 18px;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+}