@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

package/components/dd-bill-detail/dd-bill-detail.vue

@@ -0,0 +1,265 @@
+<template>
+  <view class="dd-bill-detail">
+    <view v-if="header || $slots.header" class="dd-bill-detail__header">
+      <slot name="header">{{ header }}</slot>
+    </view>
+
+    <view v-if="items.length" class="dd-bill-detail__goods">
+      <view
+        v-for="(item, idx) in items"
+        :key="idx"
+        class="dd-bill-detail__row dd-bill-detail__row--goods"
+        hover-class="dd-bill-detail__row--press"
+        :hover-stay-time="40"
+        @click="onClick(item, idx)"
+      >
+        <view class="dd-bill-detail__gname dd-col">
+          <text class="dd-bill-detail__name">{{ item.name }}</text>
+          <text v-if="item.price" class="dd-bill-detail__price">{{ item.price }}</text>
+        </view>
+        <view class="dd-bill-detail__gcount dd-col">
+          <text v-if="item.count" class="dd-bill-detail__count">×{{ item.count }}</text>
+        </view>
+        <view class="dd-bill-detail__gamount dd-col dd-col--right">
+          <text class="dd-bill-detail__amount">{{ item.amount }}</text>
+        </view>
+      </view>
+    </view>
+    <view v-else class="dd-bill-detail__empty">
+      <slot name="empty"><text class="dd-bill-detail__empty-text">暂无商品</text></slot>
+    </view>
+
+    <view v-if="subtotal || deliveryFee || total" class="dd-bill-detail__summary">
+      <view v-if="subtotal" class="dd-bill-detail__sum-row">
+        <text class="dd-bill-detail__sum-label">小计</text>
+        <text class="dd-bill-detail__sum-value">{{ subtotal }}</text>
+      </view>
+      <view v-if="deliveryFee" class="dd-bill-detail__sum-row">
+        <text class="dd-bill-detail__sum-label">服务/配送费</text>
+        <text class="dd-bill-detail__sum-value">{{ deliveryFee }}</text>
+      </view>
+      <view v-if="total" class="dd-bill-detail__sum-row dd-bill-detail__sum-row--total">
+        <view class="dd-bill-detail__total-left">
+          <text class="dd-bill-detail__total-label">合计</text>
+          <text v-if="status" class="dd-bill-detail__status" :class="`dd-bill-detail__status--${status}`">{{ statusText }}</text>
+        </view>
+        <text class="dd-bill-detail__total">{{ total }}</text>
+      </view>
+    </view>
+
+    <view v-if="$slots.actions" class="dd-bill-detail__actions">
+      <slot name="actions" />
+    </view>
+    <view v-if="$slots.footer" class="dd-bill-detail__footer">
+      <slot name="footer" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface BillItem {
+  name: string
+  price?: string
+  count?: number
+  amount: string
+}
+
+interface Props {
+  items: BillItem[]
+  total?: string
+  subtotal?: string
+  deliveryFee?: string
+  status?: 'unpaid' | 'paid' | 'refunding' | 'refunded' | 'cancelled'
+  header?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  total: '',
+  subtotal: '',
+  deliveryFee: '',
+  status: undefined,
+  header: '',
+})
+
+const emit = defineEmits<{ (e: 'click', val: { item: BillItem; index: number }): void }>()
+
+const statusMap: Record<string, string> = {
+  unpaid: '待支付',
+  paid: '已支付',
+  refunding: '退款中',
+  refunded: '已退款',
+  cancelled: '已取消',
+}
+
+const statusText = computed(() => statusMap[props.status || ''] || '')
+
+function onClick(item: BillItem, index: number) {
+  emit('click', { item, index })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-bill-detail {
+  @include dd-glass(sm);
+  border-radius: $dd-radius-xl;
+  overflow: hidden;
+}
+
+.dd-bill-detail__header {
+  padding: $dd-space-3 $dd-space-4;
+  font-size: $dd-font-size-body;
+  font-weight: $dd-font-weight-lead;
+  color: $dd-text-primary;
+  border-bottom: 1px solid $dd-border-subtle;
+}
+
+.dd-bill-detail__goods {
+  padding: $dd-space-2 $dd-space-4;
+}
+
+.dd-bill-detail__row {
+  display: flex;
+  align-items: center;
+  gap: $dd-space-2;
+  padding: $dd-space-2 0;
+
+  &--press {
+    background: $dd-interactive-hover;
+  }
+}
+
+.dd-col {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+
+  &--right {
+    align-items: flex-end;
+    margin-left: auto;
+  }
+}
+
+.dd-bill-detail__gname {
+  flex: 1;
+  min-width: 0;
+}
+
+.dd-bill-detail__name {
+  font-size: $dd-font-size-body;
+  color: $dd-text-primary;
+  @include dd-ellipsis(1);
+}
+
+.dd-bill-detail__price {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-tertiary;
+}
+
+.dd-bill-detail__gcount {
+  flex-shrink: 0;
+}
+
+.dd-bill-detail__count {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-secondary;
+}
+
+.dd-bill-detail__gamount {
+  flex-shrink: 0;
+}
+
+.dd-bill-detail__amount {
+  font-size: $dd-font-size-body;
+  font-weight: $dd-font-weight-lead;
+  color: $dd-text-primary;
+  font-family: $dd-font-mono;
+}
+
+.dd-bill-detail__empty {
+  padding: $dd-space-6 $dd-space-4;
+  text-align: center;
+
+  &-text {
+    font-size: $dd-font-size-body;
+    color: $dd-text-tertiary;
+  }
+}
+
+.dd-bill-detail__summary {
+  border-top: 1px solid $dd-border-subtle;
+  padding: $dd-space-2 $dd-space-4 $dd-space-3;
+}
+
+.dd-bill-detail__sum-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6rpx 0;
+
+  &--total {
+    margin-top: $dd-space-1;
+    padding-top: $dd-space-2;
+    border-top: 1px solid $dd-border-subtle;
+  }
+}
+
+.dd-bill-detail__sum-label {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-tertiary;
+}
+
+.dd-bill-detail__sum-value {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-secondary;
+  font-family: $dd-font-mono;
+}
+
+.dd-bill-detail__total-left {
+  display: flex;
+  align-items: center;
+  gap: $dd-space-2;
+}
+
+.dd-bill-detail__total-label {
+  font-size: $dd-font-size-body;
+  font-weight: $dd-font-weight-lead;
+  color: $dd-text-primary;
+}
+
+.dd-bill-detail__total {
+  font-size: $dd-font-size-h4;
+  font-weight: $dd-font-weight-h3;
+  color: $dd-primary-400;
+  font-family: $dd-font-mono;
+}
+
+.dd-bill-detail__status {
+  font-size: 20rpx;
+  padding: 2rpx 12rpx;
+  border-radius: $dd-radius-sm;
+
+  &--unpaid { color: $dd-warning-400; background: rgba(249, 168, 37, 0.12); }
+  &--paid { color: $dd-success-400; background: rgba(76, 175, 80, 0.12); }
+  &--refunding { color: $dd-info-400; background: rgba(0, 188, 212, 0.12); }
+  &--refunded { color: $dd-warning-400; background: rgba(249, 168, 37, 0.12); }
+  &--cancelled { color: $dd-text-tertiary; background: rgba(255, 255, 255, 0.08); }
+}
+
+.dd-bill-detail__actions {
+  padding: $dd-space-3 $dd-space-4;
+  border-top: 1px solid $dd-border-subtle;
+  display: flex;
+  justify-content: flex-end;
+  gap: $dd-space-3;
+}
+
+.dd-bill-detail__footer {
+  padding: $dd-space-2 $dd-space-4 $dd-space-3;
+}
+</style>

package/components/dd-button/dd-button.vue

@@ -70,21 +70,21 @@ function onClick(e: Event) {
 .dd-btn {
   @include dd-flex-center;
   @include dd-transition(background 0.2s, box-shadow 0.2s, opacity 0.2s);
-  gap: 8rpx;
+  gap: $dd-space-1;
   box-sizing: border-box;
   border: 1px solid transparent;
   border-radius: $dd-radius-md;
   font-family: $dd-font-body;
   white-space: nowrap;
   user-select: none;
-  height: 88rpx;
-  padding: 0 32rpx;
-  font-size: 28rpx;
+  height: $dd-size-button-md;
+  padding: 0 $dd-space-4;
+  font-size: $dd-font-size-body;
   font-weight: 600;
   line-height: 1;
 
   &__icon {
-    font-size: 32rpx;
+    font-size: $dd-font-size-h4;
     line-height: 1;
   }
 
@@ -103,7 +103,7 @@ function onClick(e: Event) {
 
   .dd-btn--icon-only {
     padding: 0;
-    width: 88rpx;
+    width: $dd-size-button-md;
     gap: 0;
   }
 
@@ -124,11 +124,11 @@ function onClick(e: Event) {
 }
 
 .dd-btn--sm {
-  height: 64rpx;
-  padding: 0 24rpx;
-  font-size: 24rpx;
+  height: $dd-size-button-sm;
+  padding: 0 $dd-space-3;
+  font-size: $dd-font-size-caption;
   &.dd-btn--icon-only {
-    width: 64rpx;
+    width: $dd-size-button-sm;
   }
   .dd-btn__loading {
     width: 22rpx;
@@ -137,11 +137,11 @@ function onClick(e: Event) {
 }
 
 .dd-btn--lg {
-  height: 100rpx;
-  padding: 0 48rpx;
-  font-size: 32rpx;
+  height: $dd-size-button-lg;
+  padding: 0 $dd-space-5;
+  font-size: $dd-font-size-h4;
   &.dd-btn--icon-only {
-    width: 100rpx;
+    width: $dd-size-button-lg;
   }
   .dd-btn__loading {
     width: 34rpx;
@@ -168,9 +168,9 @@ function onClick(e: Event) {
   border-color: transparent;
   border-radius: 0;
   height: auto;
-  min-height: 48rpx;
-  padding: 0 16rpx;
-  font-size: 24rpx;
+  min-height: $dd-space-5;
+  padding: 0 $dd-space-2;
+  font-size: $dd-font-size-caption;
   font-weight: 500;
   &.dd-btn--icon-only {
     width: auto;

package/components/dd-calendar/dd-calendar.vue

@@ -0,0 +1,357 @@
+<template>
+  <view class="dd-calendar">
+    <view class="dd-calendar__head">
+      <view class="dd-calendar__nav" hover-class="dd-calendar__nav--press" @click="prevMonth">‹</view>
+      <text class="dd-calendar__title">{{ currentYear }}年{{ currentMonth + 1 }}月</text>
+      <view class="dd-calendar__nav" hover-class="dd-calendar__nav--press" @click="nextMonth">›</view>
+    </view>
+
+    <view class="dd-calendar__week">
+      <text v-for="w in weekLabels" :key="w" class="dd-calendar__week-item">{{ w }}</text>
+    </view>
+
+    <view class="dd-calendar__grid">
+      <view
+        v-for="cell in dayCells"
+        :key="cell.key"
+        class="dd-calendar__cell"
+        :class="{
+          'dd-calendar__cell--blank': cell.blank,
+          'dd-calendar__cell--disabled': cell.disabled,
+          'dd-calendar__cell--selected': cell.selected,
+          'dd-calendar__cell--in-range': cell.inRange,
+          'dd-calendar__cell--today': cell.today,
+        }"
+        hover-class="dd-calendar__cell--press"
+        @click="cell.disabled || cell.blank ? undefined : onClickDay(cell)"
+      >
+        <text class="dd-calendar__day">{{ cell.day }}</text>
+      </view>
+    </view>
+
+    <view v-if="timeSlots && timeSlots.length && selectedDate" class="dd-calendar__slots">
+      <view class="dd-calendar__slots-title">
+        <text>时段（{{ selectedDate }}）</text>
+      </view>
+      <view class="dd-calendar__slots-body">
+        <text
+          v-for="t in timeSlots"
+          :key="selectedDate + t"
+          class="dd-calendar__slot"
+          :class="{ 'dd-calendar__slot--active': activeSlot === t }"
+          hover-class="dd-calendar__slot--press"
+          @click="onSlot(t)"
+        >{{ t }}</text>
+      </view>
+    </view>
+
+    <view class="dd-calendar__footer">
+      <text class="dd-calendar__footer-btn" hover-class="dd-calendar__footer-btn--press" @click="onCancel">取消</text>
+      <text class="dd-calendar__footer-btn dd-calendar__footer-btn--primary" hover-class="dd-calendar__footer-btn--press" @click="onConfirm">确定</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { daysInMonth, firstDayOfMonth, dateFormat, pad2 } from '../../libs/utils'
+
+interface DayCell {
+  key: string
+  day: number
+  date: string
+  blank: boolean
+  disabled: boolean
+  selected: boolean
+  inRange: boolean
+  today: boolean
+}
+
+interface Props {
+  modelValue?: string[]
+  range?: boolean
+  minDate?: string
+  maxDate?: string
+  disabledDate?: (date: string) => boolean
+  timeSlots?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  range: false,
+  minDate: '',
+  maxDate: '',
+  disabledDate: () => false,
+  timeSlots: () => [],
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string[]): void
+  (e: 'confirm', val: string | string[]): void
+  (e: 'change', val: string | string[]): void
+  (e: 'slot-click', val: { date: string; time: string }): void
+}>()
+
+const now = new Date()
+const currentYear = ref(now.getFullYear())
+const currentMonth = ref(now.getMonth())
+const activeSlot = ref<string>('')
+
+const weekLabels = ['日', '一', '二', '三', '四', '五', '六']
+const todayStr = dateFormat(now)
+
+const selected = computed<string[]>(() => props.modelValue.slice().sort())
+
+const selection = computed<string | string[]>(() => {
+  if (!props.range) return selected.value[selected.value.length - 1] || ''
+  if (selected.value.length < 2) return selected.value[0] || ''
+  return [selected.value[0], selected.value[selected.value.length - 1]]
+})
+
+const selectedDate = computed(() => {
+  if (props.range) return Array.isArray(selection.value) ? selection.value.join(' ~ ') : ''
+  return selection.value as string
+})
+
+const dayCells = computed<DayCell[]>(() => {
+  const today = new Date()
+  const prevOffset = firstDayOfMonth(currentYear.value, currentMonth.value)
+  const dim = daysInMonth(currentYear.value, currentMonth.value)
+  const cells: DayCell[] = []
+  for (let i = 0; i < prevOffset; i++) {
+    cells.push({ key: 'b' + i, day: 0, date: '', blank: true, disabled: false, selected: false, inRange: false, today: false })
+  }
+  const [selStart, selEnd] = selected.value.length >= 2 ? [selected.value[0], selected.value[selected.value.length - 1]] : [null, null]
+  for (let d = 1; d <= dim; d++) {
+    const date = `${currentYear.value}-${pad2(currentMonth.value + 1)}-${pad2(d)}`
+    const disabled =
+      (props.minDate && date < props.minDate) ||
+      (props.maxDate && date > props.maxDate) ||
+      props.disabledDate(date)
+    const selectedFlag = selected.value.includes(date)
+    const inRange = !selectedFlag && selStart && selEnd && date > selStart && date < selEnd
+    cells.push({
+      key: date,
+      day: d,
+      date,
+      blank: false,
+      disabled,
+      selected: selectedFlag,
+      inRange: !!inRange,
+      today: date === todayStr,
+    })
+  }
+  return cells
+})
+
+function onClickDay(cell: DayCell) {
+  let next: string[]
+  if (!props.range) {
+    next = selected.value.includes(cell.date) ? [] : [cell.date]
+  } else if (selected.value.length === 0) {
+    next = [cell.date]
+  } else {
+    // 第二个选择点：若在已选区间内则重置，否则与首点组成区间
+    const first = selected.value[0]
+    if (cell.date < first) next = [cell.date, first]
+    else if (selected.value.length === 1) next = [first, cell.date]
+    else next = [cell.date] // 再次点击重置为新起点
+  }
+  next.sort()
+  emit('update:modelValue', next)
+  const payload: string | string[] = props.range ? (next.length >= 2 ? [next[0], next[next.length - 1]] : next[0] || '') : next[0] || ''
+  emit('change', payload)
+}
+
+function nextMonth() {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0
+    currentYear.value++
+  } else {
+    currentMonth.value++
+  }
+}
+
+function prevMonth() {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11
+    currentYear.value--
+  } else {
+    currentMonth.value--
+  }
+}
+
+function onSlot(t: string) {
+  activeSlot.value = t
+  const date = props.range ? (Array.isArray(selection.value) ? selection.value[0] : selection.value) : (selection.value as string)
+  emit('slot-click', { date: date || '', time: t })
+}
+
+function onCancel() {
+  emit('change', props.range ? '' : '')
+}
+
+function onConfirm() {
+  emit('confirm', selection.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-calendar {
+  @include dd-glass(sm);
+  border-radius: $dd-radius-xl;
+  padding: $dd-space-3;
+}
+
+.dd-calendar__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $dd-space-2 $dd-space-2;
+}
+
+.dd-calendar__nav {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: $dd-radius-md;
+  background: $dd-surface-container-high;
+  @include dd-flex-center;
+  color: $dd-text-secondary;
+  font-size: $dd-font-size-h4;
+
+  &--press {
+    background: $dd-surface-press;
+  }
+}
+
+.dd-calendar__title {
+  font-size: $dd-font-size-body;
+  font-weight: $dd-font-weight-lead;
+  color: $dd-text-primary;
+}
+
+.dd-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: $dd-space-1 0;
+}
+
+.dd-calendar__week-item {
+  text-align: center;
+  font-size: $dd-font-size-caption;
+  color: $dd-text-tertiary;
+}
+
+.dd-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  row-gap: 4rpx;
+}
+
+.dd-calendar__cell {
+  height: 72rpx;
+  @include dd-flex-center;
+  border-radius: $dd-radius-md;
+
+  &--press:not(.dd-calendar__cell--disabled, .dd-calendar__cell--blank) {
+    background: $dd-surface-hover;
+  }
+}
+
+.dd-calendar__day {
+  font-size: $dd-font-size-body;
+  color: $dd-text-primary;
+}
+
+.dd-calendar__cell--blank .dd-calendar__day {
+  color: transparent;
+}
+
+.dd-calendar__cell--disabled .dd-calendar__day {
+  color: $dd-text-tertiary;
+  opacity: 0.4;
+}
+
+.dd-calendar__cell--today .dd-calendar__day {
+  color: $dd-primary-400;
+  font-weight: 700;
+}
+
+.dd-calendar__cell--selected {
+  background: $dd-gradient-primary;
+  .dd-calendar__day {
+    color: $dd-neutral-900;
+    font-weight: 700;
+  }
+}
+
+.dd-calendar__cell--in-range {
+  background: rgba(245, 166, 35, 0.18);
+  border-radius: 0;
+}
+
+.dd-calendar__slots {
+  margin-top: $dd-space-3;
+  border-top: 1px solid $dd-border-subtle;
+  padding-top: $dd-space-3;
+}
+
+.dd-calendar__slots-title {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-tertiary;
+  margin-bottom: $dd-space-2;
+}
+
+.dd-calendar__slots-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $dd-space-2;
+}
+
+.dd-calendar__slot {
+  padding: $dd-space-1 $dd-space-3;
+  font-size: $dd-font-size-caption;
+  color: $dd-text-secondary;
+  background: $dd-surface-container-high;
+  border-radius: $dd-radius-md;
+
+  &--active {
+    color: $dd-neutral-900;
+    background: $dd-gradient-primary;
+    font-weight: 700;
+  }
+
+  &--press {
+    opacity: 0.75;
+  }
+}
+
+.dd-calendar__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: $dd-space-3;
+  margin-top: $dd-space-3;
+  border-top: 1px solid $dd-border-subtle;
+  padding-top: $dd-space-3;
+}
+
+.dd-calendar__footer-btn {
+  padding: $dd-space-2 $dd-space-4;
+  font-size: $dd-font-size-body;
+  color: $dd-text-secondary;
+  border-radius: $dd-radius-md;
+
+  &--primary {
+    color: $dd-neutral-900;
+    background: $dd-gradient-primary;
+    font-weight: 700;
+  }
+
+  &--press {
+    opacity: 0.75;
+  }
+}
+</style>