index.wxml 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <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)}}">
  2. <view class="i-step-item-ico">
  3. <view class="i-step-ico" wx:if="{{parse.noIco(status,current,index,icon) }}">{{ index+1 }}</view>
  4. <view class="i-step-ico" wx:else>
  5. <i-icon i-class="i-step-ico-in" type="{{parse.getIcoClass(status,icon)}}"></i-icon>
  6. </view>
  7. <view class="i-step-line" wx:if="{{ index !== len - 1 }}"></view>
  8. </view>
  9. <view class="i-step-item-main">
  10. <view class="i-step-item-title" wx:if="{{title !== ''}}">
  11. {{title}}
  12. </view>
  13. <view class="i-step-item-title" wx:else>
  14. <slot name="title"></slot>
  15. </view>
  16. <view class="i-step-item-content" wx:if="{{content !== ''}}">
  17. {{content}}
  18. </view>
  19. <view class="i-step-item-content" wx:else>
  20. <slot name="content"></slot>
  21. </view>
  22. </view>
  23. </view>
  24. <wxs module="parse">
  25. var allStatus = ['wait','process','finish','error'];
  26. module.exports = {
  27. noIco : function( status,current,index,icon ){
  28. var aindex = allStatus.indexOf(status);
  29. var noIcon = true;
  30. if( index < current || icon !== '' ){
  31. noIcon = false;
  32. }
  33. return noIcon;
  34. },
  35. getIcoClass : function( status,ico ){
  36. var class = '';
  37. if( status === 'error' ){
  38. class = 'close';
  39. }else{
  40. class = 'right';
  41. }
  42. if( ico !== '' ){
  43. class = ico;
  44. }
  45. return class;
  46. },
  47. getItemStyle : function(len,direction){
  48. if( direction === 'horizontal' ){
  49. return 'width :'+100/len + '%';
  50. }else{
  51. return 'width : 100%;';
  52. }
  53. },
  54. getClass : function( status,current,index ) {
  55. //wait、process、finish、error
  56. var startClass = 'i-step-'
  57. var classes = '';
  58. var cindex = allStatus.indexOf( status );
  59. if( cindex !== -1 ){
  60. classes = startClass + allStatus[cindex];
  61. }
  62. if( index < current ){
  63. classes = startClass + 'finish';
  64. }else if( index === current ){
  65. classes = startClass + 'process';
  66. }
  67. return classes;
  68. }
  69. }
  70. </wxs>