xzs-mysql/source/wx/xzs-student/component/iView/step/index.wxml
2020-09-02 08:44:41 +08:00

70 lines
2.3 KiB
Plaintext

<view class="i-class i-step-item {{parse.getClass(status,current,index)}} {{ direction === 'vertical' ? 'i-step-vertical' : 'i-step-horizontal' }}" style="{{parse.getItemStyle(len,direction)}}">
<view class="i-step-item-ico">
<view class="i-step-ico" wx:if="{{parse.noIco(status,current,index,icon) }}">{{ index+1 }}</view>
<view class="i-step-ico" wx:else>
<i-icon i-class="i-step-ico-in" type="{{parse.getIcoClass(status,icon)}}"></i-icon>
</view>
<view class="i-step-line" wx:if="{{ index !== len - 1 }}"></view>
</view>
<view class="i-step-item-main">
<view class="i-step-item-title" wx:if="{{title !== ''}}">
{{title}}
</view>
<view class="i-step-item-title" wx:else>
<slot name="title"></slot>
</view>
<view class="i-step-item-content" wx:if="{{content !== ''}}">
{{content}}
</view>
<view class="i-step-item-content" wx:else>
<slot name="content"></slot>
</view>
</view>
</view>
<wxs module="parse">
var allStatus = ['wait','process','finish','error'];
module.exports = {
noIco : function( status,current,index,icon ){
var aindex = allStatus.indexOf(status);
var noIcon = true;
if( index < current || icon !== '' ){
noIcon = false;
}
return noIcon;
},
getIcoClass : function( status,ico ){
var class = '';
if( status === 'error' ){
class = 'close';
}else{
class = 'right';
}
if( ico !== '' ){
class = ico;
}
return class;
},
getItemStyle : function(len,direction){
if( direction === 'horizontal' ){
return 'width :'+100/len + '%';
}else{
return 'width : 100%;';
}
},
getClass : function( status,current,index ) {
//wait、process、finish、error
var startClass = 'i-step-'
var classes = '';
var cindex = allStatus.indexOf( status );
if( cindex !== -1 ){
classes = startClass + allStatus[cindex];
}
if( index < current ){
classes = startClass + 'finish';
}else if( index === current ){
classes = startClass + 'process';
}
return classes;
}
}
</wxs>