index.wxml 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <wxs src="../wxs/utils.wxs" module="utils" />
  2. <view class="custom-class {{ utils.bem('steps', [direction]) }}">
  3. <view class="van-step__wrapper">
  4. <view
  5. wx:for="{{ steps }}"
  6. wx:key="index"
  7. bindtap="onClick"
  8. data-index="{{ index }}"
  9. class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
  10. style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
  11. >
  12. <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
  13. <view>{{ item.text }}</view>
  14. <!-- <view class="desc-class">{{ item.desc }}</view> -->
  15. <rich-text nodes="{{item.desc}}"></rich-text>
  16. </view>
  17. <view class="van-step__circle-container">
  18. <block wx:if="{{ index !== active }}">
  19. <van-icon
  20. wx:if="{{ item.inactiveIcon || inactiveIcon }}"
  21. color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
  22. name="{{ item.inactiveIcon || inactiveIcon }}"
  23. class="van-step__icon"
  24. />
  25. <view
  26. wx:else
  27. class="van-step__circle"
  28. style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
  29. />
  30. </block>
  31. <van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" class="van-step__icon" />
  32. </view>
  33. <view
  34. wx:if="{{ index !== steps.length - 1 }}"
  35. class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
  36. />
  37. </view>
  38. </view>
  39. </view>
  40. <wxs module="status">
  41. function get(index, active) {
  42. if (index < active) {
  43. return 'finish';
  44. } else if (index === active) {
  45. return 'process';
  46. }
  47. return 'inactive';
  48. }
  49. module.exports = get;
  50. </wxs>