wedux-ui 0.3.1 → 0.5.0

package/miniprogram_dist/components/carousel/carousel.js

@@ -0,0 +1,568 @@
+const { createDrag } = require('../../utils/drag');
+
+Component({
+  relations: {
+    '../carousel-item/carousel-item': {
+      type: 'descendant',
+      linked: function () {
+        this._onChildrenChange();
+      },
+      unlinked: function () {
+        this._onChildrenChange();
+      },
+    },
+  },
+
+  properties: {
+    current: {
+      type: Number,
+      value: -1,
+    },
+    defaultCurrent: {
+      type: Number,
+      value: 0,
+    },
+    effect: {
+      type: String,
+      value: 'slide',
+    },
+    direction: {
+      type: String,
+      value: 'horizontal',
+    },
+    loop: {
+      type: Boolean,
+      value: true,
+    },
+    autoplay: {
+      type: Boolean,
+      value: false,
+    },
+    interval: {
+      type: Number,
+      value: 5000,
+    },
+    duration: {
+      type: Number,
+      value: 300,
+    },
+    slidesPerView: {
+      type: Number,
+      value: 1,
+    },
+    spaceBetween: {
+      type: Number,
+      value: 0,
+    },
+    showDots: {
+      type: Boolean,
+      value: true,
+    },
+    dotType: {
+      type: String,
+      value: 'dot',
+    },
+    dotPlacement: {
+      type: String,
+      value: 'bottom',
+    },
+  },
+
+  data: {
+    _trackStyle: '',
+    _dots: [],
+    _total: 0,
+  },
+
+  observers: {
+    current: function (val) {
+      if (val >= 0) {
+        this._goTo(val, true);
+      }
+    },
+  },
+
+  lifetimes: {
+    created() {
+      this._internalIndex = this.data.defaultCurrent;
+      this._drag = createDrag();
+    },
+
+    ready() {
+      this._containerWidth = 0;
+      this._containerHeight = 0;
+      this._slideSize = 0;
+      this._autoplayTimer = null;
+      this._loopResetTimer = null;
+      this._boundaryItemIndex = -1;
+
+      wx.nextTick(() => {
+        this._measure();
+      });
+    },
+
+    detached() {
+      this._stopAutoplay();
+      if (this._loopResetTimer) {
+        clearTimeout(this._loopResetTimer);
+        this._loopResetTimer = null;
+      }
+    },
+  },
+
+  methods: {
+    /* ── Relations ── */
+    _getItems() {
+      return this.getRelationNodes('../carousel-item/carousel-item') || [];
+    },
+
+    _onChildrenChange() {
+      const items = this._getItems();
+      const total = items.length;
+      this._internalIndex = Math.min(this._internalIndex || 0, Math.max(0, total - 1));
+      this._rebuildDots();
+      if (this._slideSize > 0) {
+        this._updateChildSizes();
+        this._goTo(this._internalIndex, false);
+      }
+    },
+
+    /* ── Measure ── */
+    _measure() {
+      const query = this.createSelectorQuery();
+      query.select('.w-carousel').boundingClientRect();
+      query.exec((res) => {
+        if (!res[0]) return;
+        const { width, height } = res[0];
+        this._containerWidth = width;
+        this._containerHeight = height;
+        const { slidesPerView, spaceBetween, direction } = this.data;
+        const containerSize = direction === 'horizontal' ? width : height;
+        this._slideSize = (containerSize - (slidesPerView - 1) * spaceBetween) / slidesPerView;
+
+        this._updateChildSizes();
+        this._goTo(this._internalIndex, false);
+        this._startAutoplay();
+      });
+    },
+
+    /* ── Child size dispatch (slide effect only) ── */
+    _updateChildSizes() {
+      const items = this._getItems();
+      const { effect, direction, spaceBetween } = this.data;
+      if (effect !== 'slide') return;
+
+      items.forEach((item) => {
+        const sizeStyle =
+          direction === 'horizontal'
+            ? `width: ${this._slideSize}px; height: 100%; margin-right: ${spaceBetween}px;`
+            : `width: 100%; height: ${this._slideSize}px; margin-bottom: ${spaceBetween}px;`;
+        item._setState('active', sizeStyle);
+      });
+    },
+
+    /* ── Dots ── */
+    _rebuildDots() {
+      const items = this._getItems();
+      const total = items.length;
+      const { slidesPerView } = this.data;
+      const dotCount =
+        slidesPerView <= 1 ? total : Math.max(0, total - Math.floor(slidesPerView) + 1);
+      const displayIndex = this._internalIndex;
+      const dots = Array.from({ length: dotCount }, (_, i) => ({
+        active: i === displayIndex,
+      }));
+      this.setData({ _total: total, _dots: dots });
+    },
+
+    /* ── Go to index ── */
+    _goTo(index, animate) {
+      if (animate === undefined) animate = true;
+      const items = this._getItems();
+      const total = items.length;
+      if (!total) return;
+
+      // 清除待执行的 loop 复位，立即复位
+      if (this._loopResetTimer) {
+        clearTimeout(this._loopResetTimer);
+        this._loopResetTimer = null;
+        this._updateChildSizes();
+      }
+
+      let newIndex = index;
+
+      if (this.data.loop) {
+        newIndex = ((index % total) + total) % total;
+      } else {
+        newIndex = Math.max(0, Math.min(index, total - 1));
+      }
+
+      const prev = this._internalIndex;
+      this._internalIndex = newIndex;
+
+      // slide + loop 边界过渡：无缝动画而非瞬移
+      if (
+        this.data.loop &&
+        this.data.effect === 'slide' &&
+        animate &&
+        total > 1 &&
+        this.data.slidesPerView <= 1
+      ) {
+        const isForwardLoop = prev === total - 1 && newIndex === 0;
+        const isBackwardLoop = prev === 0 && newIndex === total - 1;
+
+        if (isForwardLoop || isBackwardLoop) {
+          this._slideLoopTransition(prev, newIndex, isForwardLoop);
+          this._rebuildDots();
+          if (prev !== newIndex) {
+            this.triggerEvent('change', { current: newIndex, previous: prev });
+          }
+          return;
+        }
+      }
+
+      // 非边界过渡，清理拖拽时预置的 boundary item
+      if (this._boundaryItemIndex >= 0) {
+        this._boundaryItemIndex = -1;
+        if (animate) {
+          this._loopResetTimer = setTimeout(() => {
+            this._loopResetTimer = null;
+            this._updateChildSizes();
+          }, this.data.duration + 20);
+        } else {
+          this._updateChildSizes();
+        }
+      }
+
+      this._applyEffect(animate);
+      this._rebuildDots();
+
+      if (prev !== newIndex) {
+        this.triggerEvent('change', { current: newIndex, previous: prev });
+      }
+    },
+
+    /* ── Apply visual effect ── */
+    _applyEffect(animate) {
+      const { effect, direction, spaceBetween, duration } = this.data;
+      const dur = animate ? duration : 0;
+
+      if (effect === 'slide') {
+        const offset = this._internalIndex * (this._slideSize + spaceBetween);
+        const transform =
+          direction === 'horizontal' ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({
+          _trackStyle: `transform: ${transform}; transition: transform ${dur}ms ease;`,
+        });
+        return;
+      }
+
+      this._applyNonSlideEffect(dur);
+    },
+
+    _applyNonSlideEffect(dur) {
+      const items = this._getItems();
+      const total = items.length;
+      const { effect, loop } = this.data;
+      const cur = this._internalIndex;
+
+      items.forEach((item, i) => {
+        let state, style;
+        const base = `width: 100%; height: 100%; position: absolute; top: 0; left: 0;`;
+
+        if (effect === 'fade') {
+          const isActive = i === cur;
+          state = isActive ? 'active' : 'hidden';
+          style = `${base} opacity: ${isActive ? 1 : 0}; transition: opacity ${dur}ms; z-index: ${isActive ? 1 : 0};`;
+        } else {
+          // card
+          const cardBase = `${base} border-radius: var(--w-carousel-card-radius); overflow: hidden;`;
+          const diff = i - cur;
+          const isPrev = diff === -1 || (loop && diff === total - 1);
+          const isNext = diff === 1 || (loop && diff === -(total - 1));
+
+          if (diff === 0) {
+            state = 'active';
+            style = `${cardBase} transform: scale(1) translateX(0); opacity: 1; transition: transform ${dur}ms ease, opacity ${dur}ms ease; z-index: 1;`;
+          } else if (isPrev) {
+            state = 'prev';
+            style = `${cardBase} transform: scale(0.85) translateX(-70%); opacity: 0.7; transition: transform ${dur}ms ease, opacity ${dur}ms ease; z-index: 0;`;
+          } else if (isNext) {
+            state = 'next';
+            style = `${cardBase} transform: scale(0.85) translateX(70%); opacity: 0.7; transition: transform ${dur}ms ease, opacity ${dur}ms ease; z-index: 0;`;
+          } else {
+            state = 'hidden';
+            style = `${cardBase} opacity: 0; pointer-events: none; z-index: 0;`;
+          }
+        }
+
+        item._setState(state, style);
+      });
+    },
+
+    /* ── Slide loop 无缝过渡 ── */
+    _getItemSizeStyle() {
+      const { direction, spaceBetween } = this.data;
+      return direction === 'horizontal'
+        ? `width: ${this._slideSize}px; height: 100%; margin-right: ${spaceBetween}px;`
+        : `width: 100%; height: ${this._slideSize}px; margin-bottom: ${spaceBetween}px;`;
+    },
+
+    _slideLoopTransition(fromIndex, toIndex, isForward) {
+      const items = this._getItems();
+      const total = items.length;
+      const { direction, spaceBetween, duration } = this.data;
+      const step = this._slideSize + spaceBetween;
+      const isH = direction === 'horizontal';
+      const axis = isH ? 'X' : 'Y';
+      const sizeStyle = this._getItemSizeStyle();
+
+      this._boundaryItemIndex = -1;
+
+      if (isForward) {
+        // 最后→第一：把 item[0] 移到最后一张后面
+        items[toIndex]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${total * step}px);`,
+        );
+        // track 向前滑动一格到 item[0] 的临时位置
+        const offset = total * step;
+        const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({
+          _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
+        });
+      } else {
+        // 第一→最后：把 item[last] 移到第一张前面
+        items[toIndex]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
+        );
+        // track 向后滑动一格
+        const offset = -step;
+        const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({
+          _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
+        });
+      }
+
+      // 动画结束后复位所有 item 和 track
+      this._loopResetTimer = setTimeout(() => {
+        this._loopResetTimer = null;
+        this._updateChildSizes();
+        this._applyEffect(false);
+      }, duration + 20);
+    },
+
+    /**
+     * 拖拽前预置边界 item，使跟手拖动时能看到下一张
+     */
+    _prepareBoundarySlide() {
+      const items = this._getItems();
+      const total = items.length;
+      if (total <= 1) return;
+
+      const cur = this._internalIndex;
+      const { direction, spaceBetween } = this.data;
+      const step = this._slideSize + spaceBetween;
+      const isH = direction === 'horizontal';
+      const axis = isH ? 'X' : 'Y';
+      const sizeStyle = this._getItemSizeStyle();
+
+      this._boundaryItemIndex = -1;
+
+      if (cur === 0) {
+        // 可能向前滑（回到最后）→ 把最后一张移到第一张前面
+        items[total - 1]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
+        );
+        this._boundaryItemIndex = total - 1;
+      } else if (cur === total - 1) {
+        // 可能向后滑（到第一张）→ 把第一张移到最后一张后面
+        items[0]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${total * step}px);`,
+        );
+        this._boundaryItemIndex = 0;
+      }
+    },
+
+    /* ── Touch handlers ── */
+    onTouchStart(e) {
+      this._stopAutoplay();
+      // 清除待执行的 loop 复位
+      if (this._loopResetTimer) {
+        clearTimeout(this._loopResetTimer);
+        this._loopResetTimer = null;
+        this._updateChildSizes();
+        this._applyEffect(false);
+      }
+
+      this._drag.start(e.touches[0]);
+      if (this.data.effect === 'slide') {
+        this._startTranslate = this._internalIndex * (this._slideSize + this.data.spaceBetween);
+        // loop 模式下预置边界 item，使跟手拖动无缝
+        if (this.data.loop && this.data.slidesPerView <= 1) {
+          this._prepareBoundarySlide();
+        }
+      }
+    },
+
+    onTouchMove(e) {
+      if (!this._drag.isActive()) return;
+      const { effect, direction } = this.data;
+      const touch = e.touches[0];
+
+      if (effect === 'slide') {
+        const delta = this._drag.delta(touch, direction);
+        const offset = this._startTranslate - delta;
+        const transform =
+          direction === 'horizontal' ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({ _trackStyle: `transform: ${transform}; transition: none;` });
+      } else {
+        const containerSize =
+          direction === 'horizontal' ? this._containerWidth : this._containerHeight;
+        const progress = this._drag.progress(touch, direction, containerSize);
+        if (effect === 'fade') {
+          this._applyFadeDrag(progress);
+        } else {
+          this._applyCardDrag(progress);
+        }
+      }
+    },
+
+    onTouchEnd(e) {
+      const { direction } = this.data;
+      const containerSize =
+        direction === 'horizontal' ? this._containerWidth : this._containerHeight;
+      const result = this._drag.end(e.changedTouches[0], direction, containerSize);
+      if (!result) return;
+
+      if (result.swipe === 1) {
+        this._goTo(this._internalIndex + 1);
+      } else if (result.swipe === -1) {
+        this._goTo(this._internalIndex - 1);
+      } else {
+        this._goTo(this._internalIndex);
+      }
+      this._startAutoplay();
+    },
+
+    /* ── Fade 跟手拖动 ── */
+    _applyFadeDrag(progress) {
+      const items = this._getItems();
+      const total = items.length;
+      const cur = this._internalIndex;
+      const { loop } = this.data;
+      const absP = Math.abs(progress);
+
+      let targetIndex;
+      if (progress > 0) {
+        targetIndex = loop ? (cur + 1) % total : Math.min(cur + 1, total - 1);
+      } else {
+        targetIndex = loop ? (cur - 1 + total) % total : Math.max(cur - 1, 0);
+      }
+
+      const base = 'width: 100%; height: 100%; position: absolute; top: 0; left: 0;';
+      items.forEach((item, i) => {
+        let opacity, zIndex;
+        if (i === cur) {
+          opacity = 1 - absP;
+          zIndex = 1;
+        } else if (i === targetIndex && targetIndex !== cur) {
+          opacity = absP;
+          zIndex = 1;
+        } else {
+          opacity = 0;
+          zIndex = 0;
+        }
+        item._setState(
+          i === cur ? 'active' : 'hidden',
+          `${base} opacity: ${opacity}; z-index: ${zIndex}; transition: none;`,
+        );
+      });
+    },
+
+    /* ── Card 跟手拖动 ── */
+    _applyCardDrag(progress) {
+      const items = this._getItems();
+      const total = items.length;
+      const cur = this._internalIndex;
+      const { loop } = this.data;
+      const absP = Math.abs(progress);
+
+      const prevIndex = loop ? (cur - 1 + total) % total : cur - 1;
+      const nextIndex = loop ? (cur + 1) % total : cur + 1;
+
+      const base =
+        'width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: var(--w-carousel-card-radius); overflow: hidden;';
+      items.forEach((item, i) => {
+        let style;
+        if (i === cur) {
+          const tx = -progress * 70;
+          const scale = 1 - absP * 0.15;
+          const opacity = 1 - absP * 0.3;
+          style = `${base} transform: scale(${scale}) translateX(${tx}%); opacity: ${opacity}; z-index: 1; transition: none;`;
+        } else if (i === prevIndex && prevIndex >= 0) {
+          const tx = progress < 0 ? -70 + absP * 70 : -70;
+          const scale = progress < 0 ? 0.85 + absP * 0.15 : 0.85;
+          const opacity = progress < 0 ? 0.7 + absP * 0.3 : 0.7;
+          style = `${base} transform: scale(${scale}) translateX(${tx}%); opacity: ${opacity}; z-index: 0; transition: none;`;
+        } else if (i === nextIndex && nextIndex < total) {
+          const tx = progress > 0 ? 70 - absP * 70 : 70;
+          const scale = progress > 0 ? 0.85 + absP * 0.15 : 0.85;
+          const opacity = progress > 0 ? 0.7 + absP * 0.3 : 0.7;
+          style = `${base} transform: scale(${scale}) translateX(${tx}%); opacity: ${opacity}; z-index: 0; transition: none;`;
+        } else {
+          style = `${base} opacity: 0; pointer-events: none; z-index: 0;`;
+        }
+        item._setState(i === cur ? 'active' : 'other', style);
+      });
+    },
+
+    /* ── Card tap ── */
+    _onItemTap(item) {
+      if (this.data.effect !== 'card') return;
+      const items = this._getItems();
+      const idx = items.indexOf(item);
+      if (idx !== -1 && idx !== this._internalIndex) {
+        this._goTo(idx);
+      }
+    },
+
+    /* ── Autoplay ── */
+    _startAutoplay() {
+      if (!this.data.autoplay) return;
+      this._stopAutoplay();
+      const items = this._getItems();
+      if (items.length <= 1) return;
+      this._autoplayTimer = setInterval(() => {
+        this._goTo(this._internalIndex + 1);
+      }, this.data.interval);
+    },
+
+    _stopAutoplay() {
+      if (this._autoplayTimer) {
+        clearInterval(this._autoplayTimer);
+        this._autoplayTimer = null;
+      }
+    },
+
+    /* ── Public methods ── */
+    to(index) {
+      this._goTo(index, true);
+    },
+
+    prev() {
+      this._goTo(this._internalIndex - 1, true);
+    },
+
+    next() {
+      this._goTo(this._internalIndex + 1, true);
+    },
+
+    getCurrentIndex() {
+      return this._internalIndex;
+    },
+  },
+});

package/miniprogram_dist/components/carousel/carousel.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/carousel/carousel.scss

@@ -0,0 +1,98 @@
+.w-carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.w-carousel__track {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  will-change: transform;
+}
+
+.w-carousel--vertical .w-carousel__track {
+  flex-direction: column;
+  width: 100%;
+}
+
+.w-carousel__slides {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Dots container */
+.w-carousel__dots {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.w-carousel__dots--bottom {
+  bottom: 24rpx;
+  left: 0;
+  right: 0;
+  flex-direction: row;
+}
+
+.w-carousel__dots--top {
+  top: 24rpx;
+  left: 0;
+  right: 0;
+  flex-direction: row;
+}
+
+.w-carousel__dots--left {
+  left: 24rpx;
+  top: 0;
+  bottom: 0;
+  flex-direction: column;
+}
+
+.w-carousel__dots--right {
+  right: 24rpx;
+  top: 0;
+  bottom: 0;
+  flex-direction: column;
+}
+
+/* Dot 圆点 */
+.w-carousel__dot {
+  width: var(--w-carousel-dot-size);
+  height: var(--w-carousel-dot-size);
+  border-radius: 9999rpx;
+  background: var(--w-carousel-dot-color);
+  transition:
+    transform 300ms,
+    background 300ms;
+  flex-shrink: 0;
+}
+
+.w-carousel__dot--active {
+  background: var(--w-carousel-dot-color-active);
+  transform: scale(1.25);
+}
+
+/* Line 线条 */
+.w-carousel__dot--line {
+  width: var(--w-carousel-dot-line-width);
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: var(--w-carousel-dot-color);
+  transition:
+    width 300ms,
+    background 300ms;
+  transform: none;
+}
+
+.w-carousel__dot--line.w-carousel__dot--active {
+  width: var(--w-carousel-dot-line-width-active);
+  background: var(--w-carousel-dot-color-active);
+  transform: none;
+}

package/miniprogram_dist/components/carousel/carousel.wxml

@@ -0,0 +1,33 @@
+<view
+  class="w-carousel w-carousel--{{effect}} w-carousel--{{direction}} w-carousel--dots-{{dotPlacement}}"
+>
+  <view
+    wx:if="{{effect === 'slide'}}"
+    class="w-carousel__track"
+    style="{{_trackStyle}}"
+    bindtouchstart="onTouchStart"
+    bindtouchmove="onTouchMove"
+    bindtouchend="onTouchEnd"
+  >
+    <slot />
+  </view>
+  <view
+    wx:else
+    class="w-carousel__slides"
+    bindtouchstart="onTouchStart"
+    bindtouchmove="onTouchMove"
+    bindtouchend="onTouchEnd"
+  >
+    <slot />
+  </view>
+  <view
+    wx:if="{{showDots && _total > 1}}"
+    class="w-carousel__dots w-carousel__dots--{{dotPlacement}}"
+  >
+    <view
+      wx:for="{{_dots}}"
+      wx:key="index"
+      class="w-carousel__dot {{item.active ? 'w-carousel__dot--active' : ''}} {{dotType === 'line' ? 'w-carousel__dot--line' : ''}}"
+    />
+  </view>
+</view>

package/miniprogram_dist/components/carousel-item/carousel-item.js

@@ -0,0 +1,25 @@
+Component({
+  relations: {
+    '../carousel/carousel': {
+      type: 'ancestor',
+    },
+  },
+
+  data: {
+    _style: '',
+    _state: 'hidden',
+  },
+
+  methods: {
+    _setState(state, style) {
+      this.setData({ _state: state, _style: style });
+    },
+
+    onTap() {
+      const parents = this.getRelationNodes('../carousel/carousel');
+      if (parents && parents.length) {
+        parents[0]._onItemTap(this);
+      }
+    },
+  },
+});

package/miniprogram_dist/components/carousel-item/carousel-item.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/carousel-item/carousel-item.scss

@@ -0,0 +1,6 @@
+.w-carousel-item {
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}

package/miniprogram_dist/components/carousel-item/carousel-item.wxml

@@ -0,0 +1,3 @@
+<view class="w-carousel-item w-carousel-item--{{_state}}" style="{{_style}}" bindtap="onTap"
+  ><slot
+/></view>

package/miniprogram_dist/components/price/price.js

@@ -0,0 +1,57 @@
+Component({
+  properties: {
+    price: {
+      type: null,
+      value: 0,
+    },
+    originalPrice: {
+      type: null,
+      value: '',
+    },
+    currency: {
+      type: String,
+      value: '¥',
+    },
+    decimal: {
+      type: Number,
+      value: 2,
+    },
+    size: {
+      type: String,
+      value: 'md',
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    _formattedPrice: '0.00',
+    _formattedOriginal: '',
+    _hasOriginal: false,
+    _style: '',
+  },
+
+  observers: {
+    color(color) {
+      this.setData({ _style: color ? `--w-price-color: ${color}` : '' });
+    },
+    'price, originalPrice, decimal': function (price, originalPrice, decimal) {
+      const decimals = Math.max(0, Math.floor(decimal));
+      const numPrice = Number(price);
+      const formattedPrice = isNaN(numPrice) ? '0' : numPrice.toFixed(decimals);
+      const hasOriginal =
+        originalPrice !== '' && originalPrice !== undefined && originalPrice !== null;
+      const numOriginal = hasOriginal ? Number(originalPrice) : NaN;
+      const formattedOriginal =
+        hasOriginal && !isNaN(numOriginal) ? numOriginal.toFixed(decimals) : '';
+
+      this.setData({
+        _formattedPrice: formattedPrice,
+        _formattedOriginal: formattedOriginal,
+        _hasOriginal: hasOriginal,
+      });
+    },
+  },
+});

package/miniprogram_dist/components/price/price.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/price/price.scss

@@ -0,0 +1,51 @@
+.w-price {
+  display: inline-flex;
+  align-items: baseline;
+  line-height: 1;
+}
+
+/* Size variants — 主价格字号 */
+.w-price--sm .w-price__value {
+  font-size: var(--font-size-lg);
+}
+
+.w-price--sm .w-price__currency {
+  font-size: var(--font-size-sm);
+}
+
+.w-price--md .w-price__value {
+  font-size: var(--font-size-xl);
+}
+
+.w-price--md .w-price__currency {
+  font-size: var(--font-size-md);
+}
+
+.w-price--lg .w-price__value {
+  font-size: var(--font-size-h3);
+}
+
+.w-price--lg .w-price__currency {
+  font-size: var(--font-size-xl);
+}
+
+.w-price__currency {
+  font-weight: 700;
+  color: var(--w-price-color);
+  vertical-align: super;
+  line-height: 1;
+}
+
+.w-price__value {
+  font-weight: 700;
+  color: var(--w-price-color);
+  font-variant-numeric: tabular-nums;
+}
+
+.w-price__original {
+  font-size: var(--font-size-sm);
+  color: var(--w-price-original-color);
+  text-decoration: line-through;
+  margin-left: 8rpx;
+  font-weight: 400;
+}

package/miniprogram_dist/components/price/price.wxml

@@ -0,0 +1,7 @@
+<view class="w-price w-price--{{size}}" style="{{_style}}">
+  <text class="w-price__currency">{{currency}}</text
+  ><text class="w-price__value">{{_formattedPrice}}</text
+  ><text wx:if="{{_hasOriginal}}" class="w-price__original"
+    >{{currency}}{{_formattedOriginal}}</text
+  >
+</view>

package/miniprogram_dist/styles/iconfont.scss

@@ -1,12 +1,13 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 5134551 */
-  src: 
-       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
-       url('//at.alicdn.com/t/c/font_5134551_zr54w3qnk2m.ttf?t=1775402273099') format('truetype');
+  font-family: 'iconfont'; /* Project id 5134551 */
+  src:
+    url('data:application/x-font-woff;charset=utf-8;base64,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')
+      format('woff'),
+    url('//at.alicdn.com/t/c/font_5134551_zr54w3qnk2m.ttf?t=1775402273099') format('truetype');
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: 'iconfont' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -14,81 +15,81 @@
 }
 
 .icon-empty:before {
-  content: "\e6a6";
+  content: '\e6a6';
 }
 
 .icon-minus:before {
-  content: "\e7fd";
+  content: '\e7fd';
 }
 
 .icon-plus:before {
-  content: "\e8fe";
+  content: '\e8fe';
 }
 
 .icon-home:before {
-  content: "\e6d7";
+  content: '\e6d7';
 }
 
 .icon-computer-border:before {
-  content: "\e622";
+  content: '\e622';
 }
 
 .icon-g_my:before {
-  content: "\e61a";
+  content: '\e61a';
 }
 
 .icon-diandan01:before {
-  content: "\e606";
+  content: '\e606';
 }
 
 .icon-close:before {
-  content: "\e60f";
+  content: '\e60f';
 }
 
 .icon-play_fill:before {
-  content: "\e717";
+  content: '\e717';
 }
 
 .icon-calendar:before {
-  content: "\e699";
+  content: '\e699';
 }
 
 .icon-retry:before {
-  content: "\e601";
+  content: '\e601';
 }
 
 .icon-left:before {
-  content: "\e83d";
+  content: '\e83d';
 }
 
 .icon-file:before {
-  content: "\e803";
+  content: '\e803';
 }
 
 .icon-top:before {
-  content: "\e681";
+  content: '\e681';
 }
 
 .icon-clock1:before {
-  content: "\e66a";
+  content: '\e66a';
 }
 
 .icon-sort:before {
-  content: "\e83c";
+  content: '\e83c';
 }
 
 .icon-add:before {
-  content: "\e835";
+  content: '\e835';
 }
 
 .icon-up:before {
-  content: "\e845";
+  content: '\e845';
 }
 
 .icon-right:before {
-  content: "\e840";
+  content: '\e840';
 }
 
 .icon-down:before {
-  content: "\e839";
+  content: '\e839';
 }

package/miniprogram_dist/styles/tokens.scss

@@ -300,4 +300,16 @@ page {
   --w-empty-image-size-md: 160rpx;
   --w-empty-image-size-lg: 240rpx;
   --w-empty-image-size: var(--w-empty-image-size-md);
+
+  /* Price */
+  --w-price-color: var(--color-brand);
+  --w-price-original-color: var(--color-text-secondary);
+
+  /* Carousel */
+  --w-carousel-dot-color: rgba(255, 255, 255, 0.5);
+  --w-carousel-dot-color-active: #ffffff;
+  --w-carousel-dot-size: 16rpx;
+  --w-carousel-dot-line-width: 16rpx;
+  --w-carousel-dot-line-width-active: 48rpx;
+  --w-carousel-card-radius: var(--w-radius-lg, 16rpx);
 }

package/miniprogram_dist/utils/drag.js

@@ -0,0 +1,71 @@
+/**
+ * 拖动跟踪工具
+ * 封装 touch 事件的追踪、delta 计算、滑动判定
+ */
+function createDrag() {
+  let startX = 0;
+  let startY = 0;
+  let startTime = 0;
+  let active = false;
+
+  return {
+    /** 记录起点 */
+    start(touch) {
+      active = true;
+      startX = touch.clientX;
+      startY = touch.clientY;
+      startTime = Date.now();
+    },
+
+    /** 计算拖动位移（px） */
+    delta(touch, direction) {
+      const dx = touch.clientX - startX;
+      const dy = touch.clientY - startY;
+      return direction === 'horizontal' ? dx : dy;
+    },
+
+    /**
+     * 计算拖动进度（-1 ~ 1），正值 = 向 next 拖动
+     * @param {Object} touch
+     * @param {string} direction
+     * @param {number} containerSize
+     */
+    progress(touch, direction, containerSize) {
+      if (!containerSize) return 0;
+      const d = this.delta(touch, direction);
+      return Math.max(-1, Math.min(1, -d / containerSize));
+    },
+
+    /**
+     * 结束拖动，返回滑动判定
+     * @returns {{ delta: number, velocity: number, swipe: number } | null}
+     *   swipe: 1 = next, -1 = prev, 0 = 回弹
+     */
+    end(touch, direction, containerSize) {
+      if (!active) return null;
+      active = false;
+      const delta = this.delta(touch, direction);
+      const elapsed = Date.now() - startTime;
+      const velocity = elapsed > 0 ? delta / elapsed : 0;
+
+      let swipe = 0;
+      if (delta < -containerSize * 0.3 || velocity < -0.4) {
+        swipe = 1;
+      } else if (delta > containerSize * 0.3 || velocity > 0.4) {
+        swipe = -1;
+      }
+
+      return { delta, velocity, swipe };
+    },
+
+    isActive() {
+      return active;
+    },
+
+    cancel() {
+      active = false;
+    },
+  };
+}
+
+module.exports = { createDrag };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wedux-ui",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "微信小程序组件库，支持主题切换",
   "miniprogram": "miniprogram_dist",
   "files": [