index.wxml 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <view class="step {{'step-'+direction}} l-class"
  2. style="{{direction==='row'?'width:'+(1/length)*stepsWidth+'px':'min-height:'+stepMinHeight+'rpx'}}">
  3. <view class="step-container l-step-class {{'step-container-'+direction}}">
  4. <view wx:if="{{custom}}" class="step-custom">
  5. <slot name="dot"/>
  6. </view>
  7. <view wx:else
  8. class="l-step-class {{dot && !icon?'step-dot-'+currentStatus.setStatus(activeIndex,index,status)+' step-dot':'step-'+currentStatus.setStatus(activeIndex,index,status)+' step-icon'}}"
  9. style="{{dot?currentStatus.dotStyle(activeIndex,index,color):currentStatus.statusStyle(activeIndex,index,color,status)}}">
  10. <l-icon wx:if="{{icon}}" name="{{icon}}" size="{{iconSize}}" color="{{(currentStatus.setStatus(activeIndex,index,status))==='process'?'#3963BC':iconColor}}"/>
  11. <block wx:if="{{!dot && !icon}}">
  12. <view wx:if="{{currentStatus.setStatus(activeIndex,index,status)==='error' || currentStatus.setStatus(activeIndex,index,status)==='finish'}}"
  13. class="iconfont icon-{{currentStatus.setStatus(activeIndex,index,status)}}"></view>
  14. <block wx:else>{{index+1}}</block>
  15. </block>
  16. </view>
  17. </view>
  18. <view class="step-content {{'step-content-'+direction}}">
  19. <view class="l-title-class {{activeIndex===index?'step-title-process':'step-title'}}">
  20. {{title}}
  21. </view>
  22. <view class="l-describe-class step-describe">
  23. {{describe}}
  24. <slot name="describe"/>
  25. </view>
  26. </view>
  27. <view class="step-line l-line-class {{'step-line-'+ direction}} {{currentStatus.isReverse(reverse,activeIndex,index)?'step-line-finish':'step-line-wait'}}"
  28. style="{{activeIndex>index?('background-color:'+color):''}}"
  29. wx:if="{{reverse?(index!==0):(length!==index+1)}}">
  30. </view>
  31. </view>
  32. <wxs module="currentStatus">
  33. var setStatus = function(activeIndex,index,status){
  34. if(activeIndex===index){
  35. return status || 'process'
  36. } else if(activeIndex>index){
  37. return 'finish'
  38. }else{
  39. return 'wait'
  40. }
  41. }
  42. var statusStyle = function(activeIndex,index,color,status){
  43. if(activeIndex===index){
  44. return status==='error'?'':('background-color:' + color)
  45. } else if(activeIndex>index){
  46. return ('border-color:' + color + ';color:' + color)
  47. }else{
  48. return ''
  49. }
  50. }
  51. var dotStyle = function(activeIndex,index,color){
  52. if(activeIndex>=index){
  53. return ('background-color:' + color)
  54. } else{
  55. return ''
  56. }
  57. }
  58. var isReverse = function(reverse,activeIndex,index) {
  59. if(reverse){
  60. return (activeIndex>=index)
  61. }
  62. return (activeIndex>index)
  63. }
  64. module.exports = {
  65. setStatus:setStatus,
  66. statusStyle:statusStyle,
  67. dotStyle:dotStyle,
  68. isReverse:isReverse
  69. }
  70. </wxs>