@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

package/components/dd-checkbox/dd-checkbox.vue

@@ -6,7 +6,7 @@
       {
         'dd-checkbox--checked': isChecked,
         'dd-checkbox--indeterminate': indeterminate,
-        'dd-checkbox--disabled': disabled,
+        'dd-checkbox--disabled': isDisabled,
       },
     ]"
     @click="onToggle"
@@ -22,51 +22,42 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 interface Props {
-  modelValue?: boolean | any[]
-  value?: any
-  indeterminate?: boolean
+  /** 选项值，dd-checkbox-group 的 modelValue 数组成员 */
+  value: any
   disabled?: boolean
   size?: 'md' | 'sm'
   label?: string
+  /** 半选态（受控展示，不参与 group 数组逻辑） */
+  indeterminate?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
   value: null,
-  indeterminate: false,
   disabled: false,
   size: 'md',
   label: '',
+  indeterminate: false,
 })
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: boolean | any[]): void
-  (e: 'change', val: boolean | any[]): void
-}>()
+// 必须配合 dd-checkbox-group 使用（vant/uview 同款约定）
+const group = inject<{
+  props: { modelValue: any[]; disabled: boolean }
+  isMaxed: { value: boolean }
+  toggle: (value: any) => void
+} | null>('dd-checkbox-group', null)
 
-const isChecked = computed(() => {
-  if (Array.isArray(props.modelValue)) return props.modelValue.includes(props.value)
-  return !!props.modelValue
-})
+const isChecked = computed(() => !!group?.props.modelValue?.includes(props.value))
+const isDisabled = computed(
+  () => props.disabled || !!group?.props.disabled || (!!group?.isMaxed.value && !isChecked.value)
+)
 
 function onToggle() {
-  if (props.disabled) return
-  if (Array.isArray(props.modelValue)) {
-    const arr = props.modelValue.slice()
-    const idx = arr.indexOf(props.value)
-    if (idx >= 0) arr.splice(idx, 1)
-    else arr.push(props.value)
-    emit('update:modelValue', arr)
-    emit('change', arr)
-  } else {
-    const next = !props.modelValue
-    emit('update:modelValue', next)
-    emit('change', next)
-  }
+  if (isDisabled.value || !group) return
+  group.toggle(props.value)
 }
 </script>
 
@@ -77,7 +68,7 @@ function onToggle() {
 .dd-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: 16rpx;
+  gap: $dd-space-2;
   user-select: none;
 
   &__box {
@@ -91,21 +82,21 @@ function onToggle() {
   }
 
   &__check {
-    color: #ffffff;
-    font-size: 24rpx;
+    color: $dd-color-white;
+    font-size: $dd-font-size-caption;
     font-weight: 700;
     line-height: 1;
   }
 
   &__dash {
     width: 60%;
-    height: 4rpx;
+    height: $dd-space-1;
     background: $dd-primary-500;
     border-radius: $dd-radius-full;
   }
 
   &__label {
-    font-size: 28rpx;
+    font-size: $dd-font-size-body;
     color: $dd-text-primary;
   }
 
@@ -127,19 +118,19 @@ function onToggle() {
 }
 
 .dd-checkbox--md .dd-checkbox__box {
-  width: 40rpx;
-  height: 40rpx;
+  width: $dd-size-icon-md;
+  height: $dd-size-icon-md;
 }
 .dd-checkbox--sm {
   .dd-checkbox__box {
-    width: 32rpx;
-    height: 32rpx;
+    width: $dd-size-icon-sm;
+    height: $dd-size-icon-sm;
   }
   .dd-checkbox__check {
-    font-size: 20rpx;
+    font-size: $dd-font-size-caption;
   }
   .dd-checkbox__label {
-    font-size: 28rpx;
+    font-size: $dd-font-size-body;
   }
 }
 </style>

package/components/dd-checkbox-group/dd-checkbox-group.vue

@@ -0,0 +1,67 @@
+<template>
+  <view
+    class="dd-checkbox-group"
+    :class="{ 'dd-checkbox-group--vertical': direction === 'vertical' }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+interface Props {
+  modelValue?: any[]
+  disabled?: boolean
+  direction?: 'horizontal' | 'vertical'
+  /** 选中数达到 max 后禁止再选（已选项仍可取消） */
+  max?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false,
+  direction: 'horizontal',
+  max: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any[]): void
+  (e: 'change', val: any[]): void
+}>()
+
+const isMaxed = computed(() => props.max > 0 && props.modelValue.length >= props.max)
+
+provide('dd-checkbox-group', {
+  props,
+  isMaxed,
+  toggle(value: any) {
+    const arr = props.modelValue.slice()
+    const idx = arr.indexOf(value)
+    if (idx >= 0) {
+      arr.splice(idx, 1)
+    } else {
+      if (isMaxed.value) return
+      arr.push(value)
+    }
+    emit('update:modelValue', arr)
+    emit('change', arr)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.dd-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 32rpx;
+  width: 100%;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24rpx;
+  }
+}
+</style>

package/components/dd-copy/dd-copy.vue

@@ -0,0 +1,74 @@
+<template>
+	<view @click="handleClick">
+        <slot>{{ t("dd.common.copy") }}</slot>
+    </view>
+</template>
+<script>
+import { t } from '../../libs/i18n'
+export default {
+    name: "up-copy",
+    props: {
+        content: {
+            type: String,
+            default: ''
+        },
+		alertStyle: {
+			type: String,
+			default: 'toast'
+		},
+		notice: {
+			type: String,
+			default: t("dd.common.copy") + t("dd.common.success")
+		}
+    },
+	emits: ['success'],
+    methods: {
+		t,
+        handleClick() {
+            let content = this.content;
+			if (!content) {
+				uni.showToast({
+				    title: t("dd.common.none"),
+				    icon: 'none',
+				    duration: 2000,
+				});
+				return false;
+			}
+            content = typeof content === 'string' ? content : content.toString() // 复制内容，必须字符串，数字需要转换为字符串
+            /**
+			* 复制逻辑
+			*/
+			let that = this;
+            uni.setClipboardData({
+                data: content,
+                success: function() {
+					if (that.alertStyle == 'modal') {
+						uni.showModal({
+							title: t("dd.common.tip"),
+							content: that.notice
+						});
+					} else {
+						uni.showToast({
+						    title: that.notice,
+						    icon: 'none'
+						});
+					}
+					that.$emit('success');
+                },
+                fail:function(){
+                    uni.showToast({
+                        title: t("dd.common.copy") + t("dd.common.fail"),
+                        icon: 'none',
+                        duration:3000,
+                    });
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/dd-shared';
+</style>

package/components/dd-coupon/dd-coupon.vue

@@ -0,0 +1,368 @@
+<template>
+  <view
+    class="dd-coupon"
+    :class="[
+      `dd-coupon--${shape}`,
+      `dd-coupon--${size}`,
+      { 'dd-coupon--disabled': disabled, [`dd-coupon--${type}`]: type },
+    ]"
+    :style="couponStyle"
+    @click="handleClick"
+  >
+    <view class="dd-coupon__content">
+      <!-- 左侧金额区域 -->
+      <view class="dd-coupon__amount">
+        <slot name="unit" :unit="unit" :unitPosition="unitPosition">
+          <text v-if="unitPosition === 'left'" class="dd-coupon__amount-unit">{{ unit }}</text>
+        </slot>
+        <slot name="amount" :amount="amount">
+          <text class="dd-coupon__amount-value">{{ amount }}</text>
+        </slot>
+        <slot name="unit" :unit="unit" :unitPosition="unitPosition">
+          <text v-if="unitPosition === 'right'" class="dd-coupon__amount-unit">{{ unit }}</text>
+        </slot>
+        <slot name="limit" :limit="limit">
+          <text v-if="limit" class="dd-coupon__amount-limit">{{ limit }}</text>
+        </slot>
+      </view>
+
+      <!-- 中间描述区域 -->
+      <view class="dd-coupon__info">
+        <slot name="title" :title="title">
+          <text class="dd-coupon__info-title">{{ title }}</text>
+        </slot>
+        <slot name="desc" :desc="desc">
+          <text v-if="desc" class="dd-coupon__info-desc">{{ desc }}</text>
+        </slot>
+        <slot name="time" :time="time">
+          <text v-if="time" class="dd-coupon__info-time">{{ time }}</text>
+        </slot>
+      </view>
+
+      <!-- 右侧操作区域 -->
+      <view class="dd-coupon__action">
+        <slot name="action" :actionText="actionText" :circle="circle">
+          <!-- ponytail: 原版 :shape="circle ? 'circle': 'circle'" 恒为圆形，故 round 恒 true -->
+          <dd-tag
+            variant="error"
+            :type="type ? 'outlined' : 'filled'"
+            round
+            size="sm"
+            class="dd-coupon__action-btn"
+          >{{ actionText }}</dd-tag>
+        </slot>
+      </view>
+    </view>
+
+    <!-- 红包绳子效果 -->
+    <view v-if="shape === 'envelope'" class="dd-coupon__rope"></view>
+
+    <!-- 默认插槽，可用于添加额外内容 -->
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdTag from '../dd-tag/dd-tag.vue'
+
+interface Props {
+  /** 金额 */
+  amount?: string | number
+  /** 金额单位 */
+  unit?: string
+  /** 单位位置 */
+  unitPosition?: 'left' | 'right'
+  /** 使用限制 */
+  limit?: string
+  /** 标题 */
+  title?: string
+  /** 描述 */
+  desc?: string
+  /** 有效期 */
+  time?: string
+  /** 操作按钮文字 */
+  actionText?: string
+  /** 形状：coupon-优惠券, envelope-红包, card-卡片 */
+  shape?: 'coupon' | 'envelope' | 'card'
+  /** 尺寸：small, medium, large */
+  size?: 'small' | 'medium' | 'large'
+  /** 是否圆形按钮（保留 API；原实现恒为圆形） */
+  circle?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 背景颜色 */
+  bgColor?: string
+  /** 文字颜色 */
+  color?: string
+  /** 内置背景主题：primary/success/warning/error */
+  type?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  amount: '',
+  unit: '￥',
+  unitPosition: 'left',
+  limit: '',
+  title: '优惠券',
+  desc: '',
+  time: '',
+  actionText: '使用',
+  shape: 'coupon',
+  size: 'medium',
+  circle: false,
+  disabled: false,
+  bgColor: '',
+  color: '',
+  type: '',
+})
+
+const emit = defineEmits<{ (e: 'click'): void }>()
+
+const couponStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.bgColor) style.background = props.bgColor
+  if (props.color) style.color = props.color
+  return style
+})
+
+function handleClick() {
+  if (props.disabled) return
+  emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-coupon {
+  position: relative;
+  overflow: hidden;
+  border-radius: $dd-radius-md;
+  background: #ffebf0;
+  color: $dd-text-primary;
+  width: 100%;
+
+  &--coupon {
+    border-radius: $dd-radius-lg;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -24rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 48rpx;
+      height: 48rpx;
+      background-color: $dd-bg;
+      border-radius: 50%;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: -24rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 48rpx;
+      height: 48rpx;
+      background-color: $dd-bg;
+      border-radius: 50%;
+    }
+  }
+
+  &--envelope {
+    border-radius: $dd-radius-lg;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      height: 20rpx;
+      background: repeating-linear-gradient(-45deg, #ffd000, #ffd000 10rpx, #ffa000 10rpx, #ffa000 20rpx);
+    }
+  }
+
+  &--card {
+    border-radius: $dd-radius-lg;
+  }
+
+  &--small {
+    height: 160rpx;
+  }
+
+  &--medium {
+    height: 180rpx;
+  }
+
+  &--large {
+    height: 220rpx;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 30rpx;
+    position: relative;
+    z-index: 2;
+  }
+
+  &__amount {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-left: 10rpx;
+    padding-right: 30rpx;
+    border-right: 1px dashed $dd-border-default;
+
+    &-unit {
+      font-size: $dd-font-size-caption;
+      font-weight: normal;
+    }
+
+    &-value {
+      font-size: 56rpx;
+      font-weight: bold;
+      color: $dd-error-400;
+      line-height: 1;
+      margin: 10rpx 0;
+    }
+
+    &-limit {
+      font-size: $dd-font-size-caption;
+      opacity: 0.9;
+    }
+  }
+
+  &__info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-left: 30rpx;
+
+    &-title {
+      font-size: $dd-font-size-h4;
+      font-weight: bold;
+      margin-bottom: 10rpx;
+    }
+
+    &-desc {
+      font-size: $dd-font-size-caption;
+      opacity: 0.9;
+      margin-bottom: 10rpx;
+    }
+
+    &-time {
+      font-size: $dd-font-size-caption;
+      opacity: 0.8;
+    }
+  }
+
+  &__action {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-right: 20rpx;
+  }
+
+  &__rope {
+    position: absolute;
+    top: -40rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80rpx;
+    height: 80rpx;
+    background: linear-gradient(to right, #ffd000, #ffa000);
+    border-radius: 40rpx 40rpx 0 0;
+    z-index: 1;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -20rpx;
+      width: 20rpx;
+      height: 40rpx;
+      background: linear-gradient(to bottom, #ffd000, #ffa000);
+      border-radius: 10rpx 0 0 10rpx;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: -20rpx;
+      width: 20rpx;
+      height: 40rpx;
+      background: linear-gradient(to bottom, #ffd000, #ffa000);
+      border-radius: 0 10rpx 10rpx 0;
+    }
+  }
+
+  // 内置主题样式（保留原版券面渐变视觉）
+  &--primary {
+    background: linear-gradient(90deg, #43afff, #3b8cff);
+    color: $dd-color-white;
+
+    .dd-coupon__amount {
+      border-right: 1px dashed #eee;
+    }
+
+    .dd-coupon__amount-value {
+      color: $dd-color-white;
+    }
+  }
+
+  &--success {
+    background: linear-gradient(90deg, #67dda9, #19be6b);
+    color: $dd-color-white !important;
+
+    .dd-coupon__amount {
+      border-right: 1px dashed #eee;
+    }
+
+    .dd-coupon__amount-value {
+      color: $dd-color-white;
+    }
+  }
+
+  &--warning {
+    background: linear-gradient(90deg, #ff9739, #ff6a39);
+    color: $dd-color-white;
+
+    .dd-coupon__amount {
+      border-right: 1px dashed #eee;
+    }
+
+    .dd-coupon__amount-value {
+      color: $dd-color-white;
+    }
+  }
+
+  &--error {
+    background: linear-gradient(90deg, #ff7070, #ff4747);
+    color: $dd-color-white;
+
+    .dd-coupon__amount {
+      border-right: 1px dashed #eee;
+    }
+
+    .dd-coupon__amount-value {
+      color: $dd-color-white;
+    }
+  }
+}
+</style>