wx-mini-weview
Version:
weixin UI
292 lines (272 loc) • 8.67 kB
JavaScript
const { WvInheritable } = require('../../behaviors/WvInheritable');
const { WvComponentEvent } = require('../../behaviors/WvComponentEvent');
Component({
options: {
styleIsolation: 'apply-shared',
multipleSlots: true
},
relations: {
'../steps/steps': {
type: 'parent',
linked(target) {
// 使用WvInheritable的方法注册父节点
this.linkParentNode('steps', target);
},
unlinked() {
// 使用WvInheritable的方法注销父节点
this.unlinkParentNode('steps');
}
}
},
behaviors: [
WvInheritable({
properties: {
status: {
type: String,
value: 'waiting'
},
// 步骤值，必填属性
value: {
type: String,
value: null
},
// 各状态对应的图标
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: ''
},
// 设置最小宽度
minWidth: {
type: String,
value: '120rpx'
},
// 设置最大高度
maxHeight: {
type: String,
value: '300rpx'
},
// 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, // Flag to determine whether to show index
currentIcon: '', // Current icon to display
currentTheme: '',
currentIconTextColor: '',
currentIconColor: '',
currentTitleColor: '',
currentMarkScale: 1
},
observers: {
'wvInheritableApply.status': function(status) {
// Compute all current values based on 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
});
},
getMarkerCoord() {
return new Promise((resolve, reject) => {
// 使用WvInheritable的方法获取父节点
const stepsParent = this.getParentNode('steps');
if (!stepsParent) {
reject(new Error('Parent steps 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();
});
}
}
});