You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.6 KiB
69 lines
2.6 KiB
<view class="step {{'step-'+direction}} l-class"
|
|
style="{{direction==='row'?'width:'+(1/length)*stepsWidth+'px':'min-height:'+stepMinHeight+'rpx'}}">
|
|
<view class="step-container l-step-class {{'step-container-'+direction}}">
|
|
<view wx:if="{{custom}}" class="step-custom">
|
|
<slot name="dot" />
|
|
</view>
|
|
<view wx:else
|
|
class="l-step-class {{dot && !icon?'step-dot-'+currentStatus.setStatus(activeIndex,index,status)+' step-dot':'step-'+currentStatus.setStatus(activeIndex,index,status)+' step-icon'}}"
|
|
style="{{dot?currentStatus.dotStyle(activeIndex,index,color):currentStatus.statusStyle(activeIndex,index,color,status)}}">
|
|
<van-icon wx:if="{{icon}}" name="{{icon}}" size="{{iconSize}}" color="{{(currentStatus.setStatus(activeIndex,index,status))==='process'?'#3963BC':iconColor}}"/>
|
|
<block wx:if="{{!dot && !icon}}">
|
|
<view
|
|
wx:if="{{currentStatus.setStatus(activeIndex,index,status)==='error' || currentStatus.setStatus(activeIndex,index,status)==='finish'}}"
|
|
class="iconfont icon-{{currentStatus.setStatus(activeIndex,index,status)}}"></view>
|
|
<block wx:else>{{index+1}}</block>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="step-content {{'step-content-'+direction}}">
|
|
<view class="l-title-class {{activeIndex===index?'step-title-process':'step-title'}}">
|
|
{{title}}
|
|
<slot name="title" />
|
|
</view>
|
|
<view class="l-describe-class step-describe">
|
|
{{describe}}
|
|
<slot name="describe" />
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="step-line l-line-class {{'step-line-'+ direction}} {{activeIndex>index?'step-line-finish':'step-line-wait'}}"
|
|
style="{{activeIndex>index?('background-color:'+color):''}}" wx:if="{{length !== index+1}}">
|
|
</view>
|
|
</view>
|
|
|
|
<wxs module="currentStatus">
|
|
var setStatus = function (activeIndex, index, status) {
|
|
if (activeIndex === index) {
|
|
return status || 'process'
|
|
} else if (activeIndex > index) {
|
|
return 'finish'
|
|
} else {
|
|
return 'wait'
|
|
}
|
|
}
|
|
|
|
var statusStyle = function (activeIndex, index, color, status) {
|
|
if (activeIndex === index) {
|
|
return status === 'error' ? '' : ('background-color:' + color)
|
|
} else if (activeIndex > index) {
|
|
return ('border-color:' + color + ';color:' + color)
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
var dotStyle = function (activeIndex, index, color) {
|
|
if (activeIndex >= index) {
|
|
return ('background-color:' + color)
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
setStatus: setStatus,
|
|
statusStyle: statusStyle,
|
|
dotStyle: dotStyle
|
|
}
|
|
</wxs>
|