@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-pull-refresh/dd-pull-refresh.vue

@@ -0,0 +1,232 @@
+<template>
+  <view class="dd-pull-refresh">
+    <view
+      class="dd-pull-refresh__track"
+      :class="{ 'dd-pull-refresh__track--anim': !pulling }"
+      :style="{ transform: `translateY(${distance}px)` }"
+    >
+      <view class="dd-pull-refresh__head" :style="{ height: headHeightPx + 'px' }">
+        <view class="dd-pull-refresh__head-inner">
+          <view v-if="status === 'loading'" class="dd-pull-refresh__spinner"></view>
+          <text class="dd-pull-refresh__text">{{ statusText }}</text>
+        </view>
+      </view>
+      <scroll-view
+        class="dd-pull-refresh__scroll"
+        scroll-y
+        :scroll-top="scrollTop"
+        :lower-threshold="lowerThresholdPx"
+        :style="{ height: '100%' }"
+        @scroll="onScroll"
+        @scrolltolower="onScrollToLower"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+        @touchcancel="onTouchEnd"
+      >
+        <slot></slot>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+type Status = 'pulling' | 'loosing' | 'loading' | 'success'
+
+interface Props {
+  modelValue?: boolean
+  headHeight?: number // rpx
+  pullingText?: string
+  loosingText?: string
+  loadingText?: string
+  successText?: string
+  successDuration?: number
+  damping?: number
+  lowerThreshold?: number // rpx，距底部小于该值触发 loadmore
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  headHeight: 100,
+  pullingText: '下拉即可刷新...',
+  loosingText: '释放即可刷新...',
+  loadingText: '加载中...',
+  successText: '',
+  successDuration: 500,
+  damping: 0.5,
+  lowerThreshold: 100,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'refresh'): void
+  (e: 'loadmore'): void
+}>()
+
+const distance = ref(0)
+const pulling = ref(false)
+const status = ref<Status>('pulling')
+const scrollTop = ref(0)
+
+let startY = 0
+let startTop = 0
+let successTimer: ReturnType<typeof setTimeout> | null = null
+
+function rpxToPx(rpx: number): number {
+  try {
+    const info = uni.getWindowInfo()
+    return (rpx / 750) * info.windowWidth
+  } catch {
+    return rpx / 2
+  }
+}
+
+const headHeightPx = computed(() => rpxToPx(props.headHeight))
+const maxStretchPx = computed(() => headHeightPx.value * 1.5)
+const lowerThresholdPx = computed(() => rpxToPx(props.lowerThreshold))
+
+const statusText = computed(() => {
+  switch (status.value) {
+    case 'pulling': return props.pullingText
+    case 'loosing': return props.loosingText
+    case 'loading': return props.loadingText
+    case 'success': return props.successText || props.pullingText
+    default: return props.pullingText
+  }
+})
+
+function onScroll(e: any) {
+  scrollTop.value = e?.detail?.scrollTop ?? 0
+}
+
+function onScrollToLower() {
+  emit('loadmore')
+}
+
+function onTouchStart(e: any) {
+  if (props.modelValue) return
+  if (scrollTop.value > 0) return
+  pulling.value = true
+  startY = e.touches?.[0]?.clientY ?? 0
+  startTop = scrollTop.value
+}
+
+function onTouchMove(e: any) {
+  if (!pulling.value || props.modelValue) return
+  const y = e.touches?.[0]?.clientY ?? 0
+  let delta = y - startY
+  if (delta <= 0) {
+    distance.value = 0
+    return
+  }
+  // 阻止页面跟随滚动
+  if (e.preventDefault) e.preventDefault()
+  if (e.stopPropagation) e.stopPropagation()
+  // 0.5 阻尼，封顶 1.5x headHeight
+  let d = delta * props.damping
+  if (d > maxStretchPx.value) d = maxStretchPx.value
+  distance.value = d
+  status.value = d >= headHeightPx.value ? 'loosing' : 'pulling'
+}
+
+function onTouchEnd() {
+  if (!pulling.value) return
+  pulling.value = false
+  if (distance.value >= headHeightPx.value) {
+    // 触发刷新
+    distance.value = headHeightPx.value
+    status.value = 'loading'
+    emit('update:modelValue', true)
+    emit('refresh')
+  } else {
+    distance.value = 0
+    status.value = 'pulling'
+  }
+}
+
+// modelValue 驱动 loading 锁与 success 反馈序列
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      distance.value = headHeightPx.value
+      status.value = 'loading'
+    } else {
+      if (props.successText) {
+        status.value = 'success'
+        if (successTimer) clearTimeout(successTimer)
+        successTimer = setTimeout(() => {
+          distance.value = 0
+          status.value = 'pulling'
+        }, props.successDuration)
+      } else {
+        distance.value = 0
+        status.value = 'pulling'
+      }
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-pull-refresh {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+
+  &__track {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+    background: $dd-bg;
+
+    &--anim {
+      transition: transform 300ms ease;
+    }
+  }
+
+  &__head {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    transform: translateY(-100%);
+    z-index: 0;
+  }
+
+  &__head-inner {
+    height: 100%;
+    @include dd-flex-center;
+    gap: 16rpx;
+  }
+
+  &__spinner {
+    width: 32rpx;
+    height: 32rpx;
+    border: 4rpx solid $dd-border-default;
+    border-top-color: $dd-primary-500;
+    border-radius: 50%;
+    animation: dd-pr-spin 0.8s linear infinite;
+  }
+
+  &__text {
+    font-size: $dd-font-size-body;
+    color: $dd-text-tertiary;
+  }
+
+  &__scroll {
+    width: 100%;
+    overscroll-behavior-y: contain;
+  }
+}
+
+@keyframes dd-pr-spin {
+  to { transform: rotate(360deg); }
+}
+</style>

package/components/dd-radio/dd-radio.vue

@@ -0,0 +1,129 @@
+<template>
+  <view
+    class="dd-radio"
+    :class="[
+      `dd-radio--${size}`,
+      {
+        'dd-radio--checked': isChecked,
+        'dd-radio--disabled': disabled,
+      },
+    ]"
+    @click="onToggle"
+  >
+    <view class="dd-radio__outer">
+      <view class="dd-radio__inner"></view>
+    </view>
+    <text v-if="label || $slots.default" class="dd-radio__label">
+      <slot>{{ label }}</slot>
+    </text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: any
+  value?: any
+  disabled?: boolean
+  size?: 'md' | 'sm'
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  value: null,
+  disabled: false,
+  size: 'md',
+  label: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'change', val: any): void
+}>()
+
+const isChecked = computed(() => props.modelValue === props.value)
+
+function onToggle() {
+  if (props.disabled) return
+  if (isChecked.value) return
+  emit('update:modelValue', props.value)
+  emit('change', props.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 16rpx;
+  user-select: none;
+
+  &__outer {
+    @include dd-flex-center;
+    flex-shrink: 0;
+    border-radius: $dd-radius-full;
+    border: 3rpx solid $dd-neutral-700;
+    background: transparent;
+    box-sizing: border-box;
+    @include dd-transition(all 0.2s);
+  }
+
+  &__inner {
+    border-radius: 50%;
+    background: #ffffff;
+    transform: scale(0);
+    opacity: 0;
+    @include dd-transition(transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s);
+  }
+
+  &__label {
+    font-size: 28rpx;
+    color: $dd-text-primary;
+  }
+
+  &--checked .dd-radio__outer {
+    background: $dd-gradient-primary;
+    border-color: $dd-primary-500;
+    box-shadow: $dd-shadow-glow-gold-lg;
+  }
+
+  &--checked .dd-radio__inner {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    @include dd-no-touch;
+  }
+}
+
+.dd-radio--md {
+  .dd-radio__outer {
+    width: 40rpx;
+    height: 40rpx;
+  }
+  .dd-radio__inner {
+    width: 20rpx;
+    height: 20rpx;
+  }
+}
+.dd-radio--sm {
+  .dd-radio__outer {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  .dd-radio__inner {
+    width: 14rpx;
+    height: 14rpx;
+  }
+  .dd-radio__label {
+    font-size: 28rpx;
+  }
+}
+</style>

package/components/dd-rate/dd-rate.vue

@@ -0,0 +1,133 @@
+<template>
+  <view class="dd-rate" :class="{ 'dd-rate--readonly': readonly, 'dd-rate--disabled': disabled }">
+    <view
+      v-for="i in count"
+      :key="i"
+      class="dd-rate__item"
+      :style="{ width: starSize, height: starSize }"
+    >
+      <dd-icon name="star" class="dd-rate__void" :style="{ fontSize: starSize, color: voidColor }" />
+      <view class="dd-rate__fill" :style="{ width: fillPercent(i) + '%' }">
+        <dd-icon name="star" class="dd-rate__star" :style="{ fontSize: starSize, color: fullColor, width: starSize }" />
+      </view>
+      <view v-if="!readonly && !disabled" class="dd-rate__hit">
+        <template v-if="allowHalf">
+          <view class="dd-rate__hit-left" @click="select(i - 0.5)"></view>
+          <view class="dd-rate__hit-right" @click="select(i)"></view>
+        </template>
+        <view v-else class="dd-rate__hit-full" @click="select(i)"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: number
+  count?: number
+  size?: number
+  allowHalf?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  color?: string
+  voidColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  count: 5,
+  size: 20,
+  allowHalf: false,
+  readonly: false,
+  disabled: false,
+  color: '',
+  voidColor: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+}>()
+
+const starSize = computed(() => props.size * 2 + 'rpx')
+const fullColor = computed(() => props.color || '#F5A623')
+const voidColor = computed(() => props.voidColor || '#2A2A2A')
+
+function fillPercent(i: number) {
+  const v = props.modelValue
+  if (v >= i) return 100
+  if (props.allowHalf && v >= i - 0.5) return 50
+  return 0
+}
+
+function select(val: number) {
+  if (props.readonly || props.disabled) return
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-rate {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+
+  &__item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: serif;
+  }
+
+  &__void {
+    line-height: 1;
+  }
+
+  &__fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  &__star {
+    display: block;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  &__hit {
+    position: absolute;
+    inset: 0;
+    display: flex;
+  }
+  &__hit-left,
+  &__hit-right,
+  &__hit-full {
+    height: 100%;
+  }
+  &__hit-left {
+    width: 50%;
+  }
+  &__hit-right {
+    width: 50%;
+  }
+  &__hit-full {
+    width: 100%;
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    @include dd-no-touch;
+  }
+}
+</style>