@didaoktv/didaoui-uniapp 1.3.8 → 1.4.0

package/components/dd-modal/dd-modal.vue

@@ -195,7 +195,7 @@ onUnmounted(() => {
     z-index: 1001;
     max-width: 720rpx; // 360px 上限
     max-height: 80vh;
-    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    background: var(--dd-bg-popup, #{$dd-bg-popup});
     border: 1px solid var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-xl;
     box-shadow: var(--dd-shadow-4, #{$dd-shadow-4});
@@ -219,7 +219,7 @@ onUnmounted(() => {
     transform: translateY(100%);
     z-index: 1001;
     max-height: 85vh;
-    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    background: var(--dd-bg-popup, #{$dd-bg-popup});
     border: 1px solid var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-xl $dd-radius-xl 0 0;
     box-shadow: var(--dd-shadow-4, #{$dd-shadow-4});

package/components/dd-number-keyboard/dd-number-keyboard.vue

@@ -150,7 +150,7 @@
 	$dd-number-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
 	$dd-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
 	$dd-number-keyboard-gap:6rpx !default;
-	$dd-number-keyboard-button-border-radius:var(--dd-radius-sm, #{$dd-radius-sm}) !default;
+	$dd-number-keyboard-button-border-radius:$dd-radius-sm !default;
 	$dd-number-keyboard-button-height: 90rpx!default;
 	$dd-number-keyboard-button-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
 	$dd-number-keyboard-button-box-shadow:0 2px 0px var(--dd-bg, #{$dd-bg}) !default;

package/components/dd-picker/dd-picker.vue

@@ -159,7 +159,7 @@ function onConfirm() {
     right: 0;
     bottom: 0;
     z-index: $dd-z-index-popup;
-    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    background: var(--dd-bg-popup, #{$dd-bg-popup});
     border-radius: $dd-radius-lg $dd-radius-lg 0 0;
     transform: translateY(100%);
     @include dd-transition(transform 0.3s);

package/components/dd-popover/dd-popover.vue

@@ -121,9 +121,9 @@ provide('ddPopover', {
     z-index: 2000;
 
     &--light {
-      background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+      background: var(--dd-bg-popup, #{$dd-bg-popup});
       color: var(--dd-text-primary, #{$dd-text-primary});
-      .dd-popover__arrow { background: var(--dd-bg-elevated, #{$dd-bg-elevated}); }
+      .dd-popover__arrow { background: var(--dd-bg-popup, #{$dd-bg-popup}); }
     }
     &--dark {
       background: $dd-neutral-700;

package/components/dd-popup/dd-popup.vue

@@ -171,7 +171,7 @@ onUnmounted(() => {
 
   &__panel {
     position: fixed;
-    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    background: var(--dd-bg-popup, #{$dd-bg-popup});
     box-shadow: var(--dd-shadow-3, #{$dd-shadow-3});
     transition: transform var(--dd-popup-duration, 0.3s) ease,
                 opacity var(--dd-popup-duration, 0.3s) ease;

package/components/dd-price/dd-price.vue

@@ -0,0 +1,84 @@
+<template>
+  <view v-if="pricePair" class="dd-price">
+    <text v-if="prefix" class="dd-price__prefix">{{ prefix }}</text>
+    <text class="dd-price__currency">{{ currency }}</text>
+    <text class="dd-price__integer">{{ pricePair[0] }}</text>
+    <text v-if="pricePair[1]" class="dd-price__decimal">{{ mark }}{{ pricePair[1] }}</text>
+    <text v-if="suffix" class="dd-price__suffix">{{ suffix }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** 金额（元，直接展示不除以 100）；不传不渲染 */
+  rate?: number | string
+  /** 小数位数（rate 为 number 时生效，0 隐藏小数） */
+  decimalLength?: string | number
+  /** 货币符号 */
+  currency?: string
+  /** 整数/小数分隔符 */
+  mark?: string
+  /** 额外前缀文案（货币符之前） */
+  prefix?: string
+  /** 额外后缀文案（如「起」） */
+  suffix?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rate: undefined,
+  decimalLength: 2,
+  currency: '¥',
+  mark: '.',
+  prefix: '',
+  suffix: '',
+})
+
+const pricePair = computed<string[] | null>(() => {
+  if (props.rate === undefined || props.rate === null || props.rate === '') return null
+  if (typeof props.rate === 'number') {
+    const len = Math.max(0, Number(props.decimalLength) || 0)
+    return props.rate.toFixed(len).split('.')
+  }
+  return props.rate.split('.')
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-price {
+  display: inline-flex;
+  align-items: baseline;
+  // ponytail: 颜色跟随使用方（inherit），Vant 亦由上下文（如 submit-bar 红价）控制
+  color: inherit;
+  font-weight: 600;
+  line-height: 1;
+
+  &__prefix,
+  &__suffix {
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
+    font-size: 24rpx;
+    font-weight: 400;
+  }
+
+  &__prefix {
+    margin-right: $dd-space-1;
+  }
+
+  &__suffix {
+    margin-left: $dd-space-1;
+  }
+
+  &__currency,
+  &__decimal {
+    font-size: 24rpx;
+  }
+
+  &__integer {
+    font-size: 36rpx;
+  }
+}
+</style>

package/components/dd-sidebar/dd-sidebar.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="dd-sidebar">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+
+interface Props {
+  /** 当前选中项的索引（v-model） */
+  modelValue?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+}>()
+
+const counter = ref(0)
+
+function register(): number {
+  const idx = counter.value
+  counter.value += 1
+  return idx
+}
+
+function onItemClick(idx: number) {
+  if (idx === props.modelValue) return
+  emit('update:modelValue', idx)
+  emit('change', idx)
+}
+
+provide('ddSidebar', {
+  active: computed(() => props.modelValue),
+  register,
+  onItemClick,
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-sidebar {
+  display: flex;
+  flex-direction: column;
+  background: var(--dd-bg-section, #{$dd-bg-section});
+}
+</style>

package/components/dd-sidebar-item/dd-sidebar-item.vue

@@ -0,0 +1,129 @@
+<template>
+  <view
+    class="dd-sidebar-item"
+    :class="[
+      customClass,
+      {
+        'dd-sidebar-item--active': isActive,
+        'dd-sidebar-item--disabled': disabled,
+      },
+    ]"
+    @click="onClick"
+  >
+    <view class="dd-sidebar-item__text">
+      <slot name="title">{{ title }}</slot>
+    </view>
+    <view v-if="badge" class="dd-sidebar-item__badge">
+      <text class="dd-sidebar-item__badge-text">{{ badge }}</text>
+    </view>
+    <view v-else-if="dot" class="dd-sidebar-item__dot"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+
+interface Props {
+  /** 导航项文案 */
+  title?: string
+  /** 右上角红点 */
+  dot?: boolean
+  /** 右上角徽标数 */
+  badge?: string | number
+  /** 禁用（点击不切换、不触发 click） */
+  disabled?: boolean
+  /** 额外类名 */
+  customClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  dot: false,
+  badge: '',
+  disabled: false,
+  customClass: '',
+})
+
+const emit = defineEmits<{
+  (e: 'click', index: number): void
+}>()
+
+const ctx = inject<any>('ddSidebar', null)
+const fallbackIdx = ref(ctx ? ctx.register() : 0)
+
+const isActive = computed(() => (ctx ? ctx.active.value === fallbackIdx.value : false))
+
+function onClick() {
+  if (props.disabled) return
+  ctx?.onItemClick(fallbackIdx.value)
+  emit('click', fallbackIdx.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-sidebar-item {
+  position: relative;
+  padding: $dd-space-4 $dd-space-3;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
+  font-size: $dd-font-size-body;
+  line-height: $dd-line-height-body;
+
+  &--active {
+    background: var(--dd-bg-card, #{$dd-bg-card});
+    color: var(--dd-text-primary, #{$dd-text-primary});
+    font-weight: 600;
+
+    // 左侧金色选中条
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6rpx;
+      height: 32rpx;
+      border-radius: 0 $dd-radius-full $dd-radius-full 0;
+      background: var(--dd-primary, #{$dd-primary});
+    }
+  }
+
+  &--disabled {
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+  }
+
+  &__text {
+    @include dd-ellipsis(1);
+  }
+
+  &__badge {
+    position: absolute;
+    top: $dd-space-2;
+    right: $dd-space-2;
+    min-width: $dd-space-4;
+    height: $dd-space-4;
+    padding: 0 $dd-space-1;
+    border-radius: $dd-radius-full;
+    background: var(--dd-error, #{$dd-error});
+    @include dd-flex-center;
+  }
+
+  &__badge-text {
+    color: $dd-color-white;
+    font-size: 20rpx;
+    line-height: 1;
+  }
+
+  &__dot {
+    position: absolute;
+    top: $dd-space-2;
+    right: $dd-space-2;
+    width: $dd-space-2;
+    height: $dd-space-2;
+    border-radius: 50%;
+    background: var(--dd-error, #{$dd-error});
+  }
+}
+</style>

package/components/dd-submit-bar/dd-submit-bar.vue

@@ -0,0 +1,194 @@
+<template>
+  <view
+    v-if="placeholder"
+    class="dd-submit-bar__placeholder"
+    :class="{ 'dd-submit-bar__placeholder--safe': safeAreaInsetBottom }"
+  ></view>
+  <view class="dd-submit-bar" :class="{ 'dd-submit-bar--safe': safeAreaInsetBottom }">
+    <slot name="top"></slot>
+    <view v-if="hasTip" class="dd-submit-bar__tip">
+      <dd-icon v-if="tipIcon" :name="tipIcon" class="dd-submit-bar__tip-icon" />
+      <text v-if="tip" class="dd-submit-bar__tip-text">{{ tip }}</text>
+      <slot name="tip"></slot>
+    </view>
+    <view class="dd-submit-bar__bar">
+      <slot></slot>
+      <view v-if="hasPrice" class="dd-submit-bar__text" :style="textStyle">
+        <text class="dd-submit-bar__label">{{ label }}</text>
+        <dd-price
+          class="dd-submit-bar__price"
+          :rate="priceYuan"
+          :currency="currency"
+          :decimal-length="decimalLength"
+        />
+        <text v-if="suffixLabel" class="dd-submit-bar__suffix-label">{{ suffixLabel }}</text>
+      </view>
+      <slot name="button">
+        <dd-button
+          class="dd-submit-bar__button"
+          round
+          :type="buttonType"
+          :style="buttonStyle"
+          :loading="loading"
+          :disabled="disabled"
+          @click="onSubmit"
+        >{{ buttonText }}</dd-button>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import type { CSSProperties } from 'vue'
+import DdButton from '../dd-button/dd-button.vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+import DdPrice from '../dd-price/dd-price.vue'
+
+interface Props {
+  /** 提示文案（tip 区域，如「小计不含服务费」） */
+  tip?: string
+  /** 价格左侧文案 */
+  label?: string
+  /** 价格（单位：分），传 number 才渲染价格区 */
+  price?: number
+  /** 提示区图标名（dd-icon name） */
+  tipIcon?: string
+  /** 按钮加载态 */
+  loading?: boolean
+  /** 货币符号 */
+  currency?: string
+  /** 按钮禁用态 */
+  disabled?: boolean
+  /** 价格区对齐方式（left/center/right） */
+  textAlign?: string
+  /** 按钮文案 */
+  buttonText?: string
+  /** 按钮类型（dd-button type） */
+  buttonType?: 'default' | 'primary' | 'secondary' | 'ghost' | 'text' | 'success' | 'warning' | 'danger'
+  /** 按钮自定义背景色（透传覆盖 dd-button 背景） */
+  buttonColor?: string
+  /** 价格右侧附加文案 */
+  suffixLabel?: string
+  /** 固定在底部时是否生成占位视图 */
+  placeholder?: boolean
+  /** 价格小数位数 */
+  decimalLength?: string | number
+  /** 是否预留底部安全区 */
+  safeAreaInsetBottom?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tip: '',
+  label: '合计：',
+  tipIcon: '',
+  loading: false,
+  currency: '¥',
+  disabled: false,
+  textAlign: '',
+  buttonText: '',
+  buttonType: 'danger',
+  buttonColor: '',
+  suffixLabel: '',
+  placeholder: false,
+  decimalLength: 2,
+  safeAreaInsetBottom: true,
+})
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+}>()
+
+const slots = useSlots()
+
+const hasTip = computed(() => !!props.tip || !!slots.tip)
+
+// Vant 口径：price 单位为分，除以 100 转元交给 dd-price 渲染
+const priceYuan = computed(() => (typeof props.price === 'number' ? props.price / 100 : undefined))
+const hasPrice = computed(() => priceYuan.value !== undefined)
+
+const textStyle = computed<CSSProperties | undefined>(() =>
+  props.textAlign ? { textAlign: props.textAlign as CSSProperties['textAlign'] } : undefined,
+)
+
+const buttonStyle = computed(() => (props.buttonColor ? { background: props.buttonColor } : undefined))
+
+function onSubmit() {
+  if (props.disabled || props.loading) return
+  emit('submit')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-submit-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $dd-z-index-sticky;
+  background: var(--dd-bg-card, #{$dd-bg-card});
+
+  &--safe {
+    @include dd-safe-area-bottom;
+  }
+}
+
+.dd-submit-bar__placeholder {
+  width: 100%;
+  height: 100rpx;
+  box-sizing: content-box;
+
+  &--safe {
+    @include dd-safe-area-bottom;
+  }
+}
+
+.dd-submit-bar__tip {
+  display: flex;
+  align-items: center;
+  padding: $dd-space-2 $dd-space-3;
+  background: var(--dd-warning, #{$dd-warning});
+  color: $dd-color-white;
+  font-size: $dd-font-size-caption;
+  line-height: $dd-line-height-caption;
+}
+
+.dd-submit-bar__tip-icon {
+  margin-right: $dd-space-1;
+  font-size: 28rpx;
+}
+
+.dd-submit-bar__bar {
+  display: flex;
+  align-items: center;
+  min-height: 100rpx;
+  padding: $dd-space-2 $dd-space-3;
+}
+
+.dd-submit-bar__text {
+  flex: 1;
+  padding-right: $dd-space-3;
+  color: var(--dd-text-primary, #{$dd-text-primary});
+  font-size: $dd-font-size-body;
+}
+
+.dd-submit-bar__price {
+  margin-left: $dd-space-1;
+  color: var(--dd-error, #{$dd-error});
+}
+
+.dd-submit-bar__suffix-label {
+  margin-left: $dd-space-1;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
+  font-size: $dd-font-size-caption;
+}
+
+.dd-submit-bar__button {
+  flex-shrink: 0;
+  min-width: 200rpx;
+  margin-left: $dd-space-2;
+}
+</style>