wx-mini-weview/components/vsteps-node/vsteps-node.js

weixin UI

const { WvInheritable } = require('../../behaviors/WvInheritable');
const { WvComponentEvent } = require('../../behaviors/WvComponentEvent');

Component({
  options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true
  },
  
  relations: {
    '../vsteps/vsteps': {
      type: 'parent',
      linked(target) {
        // 使用WvInheritable的方法注册父节点
        this.linkParentNode('vsteps', target);
      },
      unlinked() {
        // 使用WvInheritable的方法注销父节点
        this.unlinkParentNode('vsteps');
      }
    }
  },

  behaviors: [
    WvInheritable({
      properties: {
        status: {
          type: String,
          value: 'waiting'
        },
        // 步骤值，必填属性
        value: {
          type: String,
          value: null
        },
        // 标题
        title: {
          type: String,
          value: ''
        },
        // 说明文本
        description: {
          type: String,
          value: ''
        },
        // 各状态对应的图标
        waitingIcon: {
          type: String,
          value: '' // 默认显示数字
        },
        processIcon: {
          type: String,
          value: 'STEPS_INDEX' // 默认显示数字
        },
        finishIcon: {
          type: String,
          value: 'bi-check' // 默认显示对勾
        },
        errorIcon: {
          type: String,
          value: 'bi-x' // 默认显示叉
        },
        // 各状态主题
        waitingTheme: {
          type: String,
          value: 'wv-theme-light wv-content-dark'
        },
        processTheme: {
          type: String,
          value: 'wv-theme-primary wv-content-light'
        },
        finishTheme: {
          type: String,
          value: 'wv-theme-success wv-content-light'
        },
        errorTheme: {
          type: String,
          value: 'wv-theme-error wv-content-light'
        },
        hiddenStatusDesc: {
          type: Boolean,
          value: false
        },
        
        waitingIconTextColor: {
          type: String,
          value: ''
        },
        processIconTextColor: {
          type: String,
          value: ''
        },
        finishIconTextColor: {
          type: String,
          value: ''
        },
        errorIconTextColor: {
          type: String,
          value: ''
        },
        
        // Icon background colors
        waitingIconColor: {
          type: String,
          value: ''
        },
        processIconColor: {
          type: String,
          value: ''
        },
        finishIconColor: {
          type: String,
          value: ''
        },
        errorIconColor: {
          type: String,
          value: ''
        },
        
        // Title colors
        waitingTitleColor: {
          type: String,
          value: 'unset'
        },
        processTitleColor: {
          type: String,
          value: ''
        },
        finishTitleColor: {
          type: String,
          value: ''
        },
        errorTitleColor: {
          type: String,
          value: ''
        },
        
        // Marker scale for different states
        markWidth: {
          type: String,
          value: '40rpx'
        }, 
        markHeight: {
          type: String,
          value: '40rpx'
        }, 
        waitingMarkScale: {
          type: Number,
          value: 0.6
        },
        processMarkScale: {
          type: Number,
          value: 0.8
        },
        finishMarkScale: {
          type: Number,
          value: 1
        },
        errorMarkScale: {
          type: Number,
          value: 1
        }
      }
    })
  ], 

  data: {
    isFirst: false,
    isLast: false,
    index: -1,
    total: 0,
    showIndex: false,
    currentIcon: '',
    currentTheme: '',
    currentIconTextColor: '',
    currentIconColor: '',
    currentTitleColor: '',
    currentMarkScale: 1
  },

  observers: {
    'wvInheritableApply.status': function(status) {
      let currentIcon;
      let currentTheme = '';
      let currentIconTextColor = '';
      let currentIconColor = '';
      let currentTitleColor = '';
      let currentMarkScale = 1;
      let showIndex = false;
      
      switch (status) {
        case 'process':
          currentIcon = this.data.wvInheritableApply.processIcon || '';
          currentTheme = this.data.wvInheritableApply.processTheme || '';
          currentIconTextColor = this.data.wvInheritableApply.processIconTextColor || '';
          currentIconColor = this.data.wvInheritableApply.processIconColor || '';
          currentTitleColor = this.data.wvInheritableApply.processTitleColor || '';
          currentMarkScale = this.data.wvInheritableApply.processMarkScale || 1;
          break;
        case 'finish':
          currentIcon = this.data.wvInheritableApply.finishIcon || '';
          currentTheme = this.data.wvInheritableApply.finishTheme || '';
          currentIconTextColor = this.data.wvInheritableApply.finishIconTextColor || '';
          currentIconColor = this.data.wvInheritableApply.finishIconColor || '';
          currentTitleColor = this.data.wvInheritableApply.finishTitleColor || '';
          currentMarkScale = this.data.wvInheritableApply.finishMarkScale || 1;
          break;
        case 'error':
          currentIcon = this.data.wvInheritableApply.errorIcon || '';
          currentTheme = this.data.wvInheritableApply.errorTheme || '';
          currentIconTextColor = this.data.wvInheritableApply.errorIconTextColor || '';
          currentIconColor = this.data.wvInheritableApply.errorIconColor || '';
          currentTitleColor = this.data.wvInheritableApply.errorTitleColor || '';
          currentMarkScale = this.data.wvInheritableApply.errorMarkScale || 1;
          break;
        case 'waiting':
        default:
          currentIcon = this.data.wvInheritableApply.waitingIcon || '';
          currentTheme = this.data.wvInheritableApply.waitingTheme || '';
          currentIconTextColor = this.data.wvInheritableApply.waitingIconTextColor || '';
          currentIconColor = this.data.wvInheritableApply.waitingIconColor || '';
          currentTitleColor = this.data.wvInheritableApply.waitingTitleColor || '';
          currentMarkScale = this.data.wvInheritableApply.waitingMarkScale || 1;
          break;
      }
      
      // Determine if we should show index number
      showIndex = (currentIcon === 'STEPS_INDEX');
      
      this.setData({
        showIndex,
        currentIcon: showIndex ? '' : currentIcon,
        currentTheme,
        currentIconTextColor,
        currentIconColor,
        currentTitleColor,
        currentMarkScale
      });
    }
  },

  methods: {
    updateNodePosition(index, total) {
      this.setData({
        isFirst: index === 0,
        isLast: index === total - 1,
        index,
        total
      });
    },
    
    // 获取marker中心点坐标，相对于wv-steps容器
    getMarkerCoord() {
      return new Promise((resolve, reject) => {
        // 使用WvInheritable的方法获取父节点
        const stepsParent = this.getParentNode('vsteps');
        if (!stepsParent) {
          reject(new Error('Parent vsteps component not found'));
          return;
        }
        
        // 先获取父容器位置
        const stepsQuery = wx.createSelectorQuery().in(stepsParent);
        stepsQuery.select('.wv-steps-container').boundingClientRect(stepsRect => {
          if (!stepsRect) {
            reject(new Error('Steps container not found'));
            return;
          }
          
          // 再获取当前marker位置
          const query = wx.createSelectorQuery().in(this);
          query.select('.wv-steps-node-marker').boundingClientRect(markerRect => {
            if (!markerRect) {
              reject(new Error('Marker not found'));
              return;
            }
            
            // 计算相对坐标（中心点）
            const centerPoint = {
              x: (markerRect.left + markerRect.width / 2) - stepsRect.left,
              y: (markerRect.top + markerRect.height / 2) - stepsRect.top
            };
            
            resolve(centerPoint);
          }).exec();
        }).exec();
      });
    }
  }
});