miniprogramme/components/interactive-feedback/interactive-feedback.js

// 🎯 交互反馈组件逻辑
const animationManager = require('../../utils/animation-manager.js');

Component({
  properties: {
    // 反馈类型
    feedbackType: {
      type: String,
      value: 'button' // button, card, list-item, icon, floating
    },
    
    // 是否启用波纹效果
    ripple: {
      type: Boolean,
      value: true
    },
    
    // 波纹颜色
    rippleColor: {
      type: String,
      value: 'primary' // primary, white, dark
    },
    
    // 触摸反馈类型
    touchFeedback: {
      type: String,
      value: 'overlay' // overlay, highlight, glow, none
    },
    
    // 是否启用缩放效果
    scaleEffect: {
      type: Boolean,
      value: true
    },
    
    // 缩放类型
    scaleType: {
      type: String,
      value: 'normal' // normal, large, none
    },
    
    // 是否禁用
    disabled: {
      type: Boolean,
      value: false
    },
    
    // 加载状态
    loading: {
      type: Boolean,
      value: false,
      observer: 'onLoadingChange'
    },
    
    // 主题
    theme: {
      type: String,
      value: 'default' // default, primary, success, error, ghost, minimal
    },
    
    // 特殊效果
    effect: {
      type: String,
      value: 'none' // none, glass, neon, gradient, hover-lift, hover-glow
    }
  },

  data: {
    // 反馈状态
    pressed: false,
    active: false,
    
    // 波纹数据
    ripples: [],
    showRipple: false,
    
    // 触摸反馈
    showTouchFeedback: false,
    touchFeedbackClass: '',
    touchFeedbackStyle: '',
    
    // 动画数据
    animationData: null,
    loadingAnimation: null,
    successAnimation: null,
    errorAnimation: null,
    
    // 样式
    feedbackStyle: '',
    feedbackClass: '',
    
    // 状态反馈
    showSuccess: false,
    showError: false,
    
    // 定时器
    rippleTimer: null,
    feedbackTimer: null
  },

  lifetimes: {
    attached() {
      console.log('🎯 交互反馈组件加载');
      this.initComponent();
    },
    
    detached() {
      console.log('🎯 交互反馈组件卸载');
      this.cleanup();
    }
  },

  methods: {
    // 初始化组件
    initComponent() {
      this.updateFeedbackClass();
      this.updateTouchFeedbackClass();
      this.createLoadingAnimation();
    },

    // 加载状态变化处理
    onLoadingChange(loading) {
      if (loading) {
        this.startLoadingAnimation();
      } else {
        this.stopLoadingAnimation();
      }
    },

    // 🎯 ===== 触摸事件处理 =====

    // 触摸开始
    onTouchStart(e) {
      if (this.properties.disabled || this.properties.loading) {
        return;
      }
      
      console.log('🎯 触摸开始');
      
      this.setData({
        pressed: true
      });
      
      // 显示触摸反馈
      this.showTouchFeedbackEffect();
      
      // 创建波纹效果
      if (this.properties.ripple) {
        this.createRipple(e);
      }
      
      // 缩放效果
      if (this.properties.scaleEffect) {
        this.applyScaleEffect(true);
      }
      
      this.triggerEvent('touchstart', e);
    },

    // 触摸结束
    onTouchEnd(e) {
      if (this.properties.disabled || this.properties.loading) {
        return;
      }
      
      console.log('🎯 触摸结束');
      
      this.setData({
        pressed: false
      });
      
      // 隐藏触摸反馈
      this.hideTouchFeedbackEffect();
      
      // 恢复缩放
      if (this.properties.scaleEffect) {
        this.applyScaleEffect(false);
      }
      
      this.triggerEvent('touchend', e);
    },

    // 触摸取消
    onTouchCancel(e) {
      if (this.properties.disabled || this.properties.loading) {
        return;
      }
      
      console.log('🎯 触摸取消');
      
      this.setData({
        pressed: false
      });
      
      // 隐藏触摸反馈
      this.hideTouchFeedbackEffect();
      
      // 恢复缩放
      if (this.properties.scaleEffect) {
        this.applyScaleEffect(false);
      }
      
      this.triggerEvent('touchcancel', e);
    },

    // 点击事件
    onTap(e) {
      if (this.properties.disabled || this.properties.loading) {
        return;
      }
      
      console.log('🎯 点击事件');
      
      // 按钮点击动画
      this.playButtonPressAnimation();
      
      this.triggerEvent('tap', e);
    },

    // 长按事件
    onLongPress(e) {
      if (this.properties.disabled || this.properties.loading) {
        return;
      }
      
      console.log('🎯 长按事件');
      
      // 长按反馈
      this.playLongPressFeedback();
      
      this.triggerEvent('longpress', e);
    },

    // 🌊 ===== 波纹效果 =====

    // 创建波纹
    createRipple(e) {
      const touch = e.touches[0];
      if (!touch) return;
      
      // 获取组件位置信息
      this.createSelectorQuery()
        .select('.interactive-feedback-container')
        .boundingClientRect((rect) => {
          if (!rect) return;
          
          // 计算波纹位置
          const x = touch.clientX - rect.left;
          const y = touch.clientY - rect.top;
          
          // 计算波纹大小
          const size = Math.max(rect.width, rect.height) * 2;
          
          // 创建波纹数据
          const ripple = {
            id: this.generateRippleId(),
            class: `${this.properties.rippleColor} animate`,
            style: `
              left: ${x - size / 2}px;
              top: ${y - size / 2}px;
              width: ${size}px;
              height: ${size}px;
            `,
            animation: null
          };
          
          // 添加波纹
          const ripples = [...this.data.ripples, ripple];
          this.setData({
            ripples: ripples,
            showRipple: true
          });
          
          // 清理波纹
          this.rippleTimer = setTimeout(() => {
            this.removeRipple(ripple.id);
          }, 600);
          
        })
        .exec();
    },

    // 移除波纹
    removeRipple(rippleId) {
      const ripples = this.data.ripples.filter(ripple => ripple.id !== rippleId);
      this.setData({
        ripples: ripples,
        showRipple: ripples.length > 0
      });
    },

    // 清理所有波纹
    clearRipples() {
      this.setData({
        ripples: [],
        showRipple: false
      });
    },

    // 📱 ===== 触摸反馈 =====

    // 显示触摸反馈
    showTouchFeedbackEffect() {
      if (this.properties.touchFeedback === 'none') return;
      
      this.setData({
        showTouchFeedback: true,
        touchFeedbackClass: `${this.properties.touchFeedback} active`
      });
    },

    // 隐藏触摸反馈
    hideTouchFeedbackEffect() {
      this.setData({
        showTouchFeedback: false,
        touchFeedbackClass: this.properties.touchFeedback
      });
    },

    // 🎭 ===== 动画效果 =====

    // 应用缩放效果
    applyScaleEffect(pressed) {
      if (!this.properties.scaleEffect) return;
      
      let scale = 1;
      if (pressed) {
        switch (this.properties.scaleType) {
          case 'large':
            scale = 1.02;
            break;
          case 'none':
            scale = 1;
            break;
          case 'normal':
          default:
            scale = 0.98;
            break;
        }
      }
      
      const animation = animationManager.scale(scale, {
        duration: 150,
        timingFunction: 'ease-out'
      });
      
      this.setData({
        animationData: animation.export()
      });
    },

    // 播放按钮点击动画
    playButtonPressAnimation() {
      const animation = animationManager.buttonPress({
        duration: 200
      });
      
      this.setData({
        animationData: animation.export()
      });
    },

    // 播放长按反馈
    playLongPressFeedback() {
      const animation = animationManager.pulse({
        duration: 300
      });
      
      this.setData({
        animationData: animation.export()
      });
    },

    // 🔄 ===== 加载动画 =====

    // 创建加载动画
    createLoadingAnimation() {
      const loadingAnimation = animationManager.loadingSpinner({
        duration: 1000
      });
      
      this.setData({
        loadingAnimation: loadingAnimation.export()
      });
    },

    // 开始加载动画
    startLoadingAnimation() {
      this.loadingTimer = setInterval(() => {
        const loadingAnimation = animationManager.loadingSpinner({
          duration: 1000
        });
        
        this.setData({
          loadingAnimation: loadingAnimation.export()
        });
      }, 1000);
    },

    // 停止加载动画
    stopLoadingAnimation() {
      if (this.loadingTimer) {
        clearInterval(this.loadingTimer);
        this.loadingTimer = null;
      }
    },

    // ✅ ===== 状态反馈 =====

    // 显示成功反馈
    showSuccessFeedback(duration = 1500) {
      console.log('✅ 显示成功反馈');
      
      this.setData({
        showSuccess: true
      });
      
      const successAnimation = animationManager.bounceIn({
        duration: 500
      });
      
      this.setData({
        successAnimation: successAnimation.export()
      });
      
      // 自动隐藏
      setTimeout(() => {
        this.hideSuccessFeedback();
      }, duration);
    },

    // 隐藏成功反馈
    hideSuccessFeedback() {
      this.setData({
        showSuccess: false
      });
    },

    // 显示错误反馈
    showErrorFeedback(duration = 1500) {
      console.log('❌ 显示错误反馈');
      
      this.setData({
        showError: true
      });
      
      const errorAnimation = animationManager.shake({
        duration: 500
      });
      
      this.setData({
        errorAnimation: errorAnimation.export()
      });
      
      // 自动隐藏
      setTimeout(() => {
        this.hideErrorFeedback();
      }, duration);
    },

    // 隐藏错误反馈
    hideErrorFeedback() {
      this.setData({
        showError: false
      });
    },

    // 🎨 ===== 样式管理 =====

    // 更新反馈类
    updateFeedbackClass() {
      let feedbackClass = this.properties.feedbackType;
      
      if (this.properties.theme !== 'default') {
        feedbackClass += ` theme-${this.properties.theme}`;
      }
      
      if (this.properties.effect !== 'none') {
        feedbackClass += ` ${this.properties.effect}`;
      }
      
      if (this.properties.disabled) {
        feedbackClass += ' disabled';
      }
      
      if (this.properties.loading) {
        feedbackClass += ' loading';
      }
      
      if (this.data.pressed) {
        feedbackClass += ' pressed';
      }
      
      if (this.data.active) {
        feedbackClass += ' active';
      }
      
      this.setData({
        feedbackClass: feedbackClass
      });
    },

    // 更新触摸反馈类
    updateTouchFeedbackClass() {
      this.setData({
        touchFeedbackClass: this.properties.touchFeedback
      });
    },

    // 🔧 ===== 工具方法 =====

    // 生成波纹ID
    generateRippleId() {
      return `ripple_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    },

    // 设置激活状态
    setActive(active) {
      this.setData({
        active: active
      });
      this.updateFeedbackClass();
    },

    // 触发成功状态
    triggerSuccess() {
      this.showSuccessFeedback();
      this.triggerEvent('success');
    },

    // 触发错误状态
    triggerError() {
      this.showErrorFeedback();
      this.triggerEvent('error');
    },

    // 重置状态
    reset() {
      this.setData({
        pressed: false,
        active: false,
        showSuccess: false,
        showError: false
      });
      
      this.clearRipples();
      this.hideTouchFeedbackEffect();
      this.updateFeedbackClass();
    },

    // 清理资源
    cleanup() {
      if (this.rippleTimer) {
        clearTimeout(this.rippleTimer);
        this.rippleTimer = null;
      }
      
      if (this.feedbackTimer) {
        clearTimeout(this.feedbackTimer);
        this.feedbackTimer = null;
      }
      
      this.stopLoadingAnimation();
      this.clearRipples();
    }
  }
});