appointment-step.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. (function() {
  2. Vue.component('appointment-step', {
  3. template: '<div class="div-step-header">\
  4. <div class="div-head-img">\
  5. <div class="c-f16 c-fff pt10 pl20">预约步骤</div>\
  6. </div>\
  7. <div class="mt80 div-step-content">\
  8. <div class="ml14">\
  9. <div class="div-step-item" :class="{\'active\': isFirstStep}">\
  10. <span class="c-f16" v-show="!isFirstStep">1</span>\
  11. <div class="div-active-item" v-show="isFirstStep"></div>\
  12. </div>\
  13. <div class="div-step-line"></div>\
  14. <div class="c-f16 div-step-item" :class="{\'active\': isSecondStep}">\
  15. <span class="c-f16" v-show="!isSecondStep">2</span>\
  16. <div class="div-active-item" v-show="isSecondStep"></div>\
  17. </div>\
  18. <div class="div-step-line"></div>\
  19. <div class="c-f16 div-step-item" :class="{\'active\': isThirdStep}">\
  20. <span class="c-f16" v-show="!isThirdStep">3</span>\
  21. <div class="div-active-item" v-show="isThirdStep"></div>\
  22. </div>\
  23. <div class="div-step-line"></div>\
  24. <div class="c-f16 div-step-item" :class="{\'active\': isFourStep}">\
  25. <span class="c-f16" v-show="!isFourStep">4</span>\
  26. <div class="div-active-item" v-show="isFourStep"></div>\
  27. </div>\
  28. </div>\
  29. <div class="ml20">\
  30. <div>\
  31. <div class="c-f16 c-323232" :class="{\'div-content-active\': isFirstStep}">选择医院</div>\
  32. <div class="c-f14 c-909090 ">选择您满意的医院</div>\
  33. </div>\
  34. <div class="mt40">\
  35. <div class="c-f16 c-323232" :class="{\'div-content-active\': isSecondStep}">选择医生</div>\
  36. <div class="c-f14 c-909090">选择适合您的医生</div>\
  37. </div>\
  38. <div class="mt40">\
  39. <div class="c-f16 c-323232" :class="{\'div-content-active\': isThirdStep}">选择就诊时间</div>\
  40. <div class="c-f14 c-909090">选择您希望的就诊时间</div>\
  41. </div>\
  42. <div class="mt40">\
  43. <div class="c-f16 c-323232" :class="{\'div-content-active\': isFourStep}">确认预约</div>\
  44. <div class="c-f14 c-909090">核对个人信息,确认预约</div>\
  45. </div>\
  46. </div>\
  47. </div>\
  48. <div class="div-step-bottom">\
  49. <img src="../../../images/icon_tishi2.png" width="19" height="19" />\
  50. <div class="c-f14 c-ff8787 ml10">预约完成后,请凭预约信息到<br/>医院救治。</div>\
  51. </div>\
  52. </div>',
  53. props: [],
  54. data: function() {
  55. return {
  56. isFirstStep: false,
  57. isSecondStep: false,
  58. isThirdStep: false,
  59. isFourStep: false,
  60. }
  61. },
  62. mounted: function() {
  63. var vm = this;
  64. EventBus.$on("jump-step", function(arg) {
  65. var step = arg.step;
  66. switch(step) {
  67. case 1:
  68. vm.isFirstStep = true;
  69. break;
  70. case 2:
  71. vm.isFirstStep = true;
  72. vm.isSecondStep = true;
  73. break;
  74. case 3:
  75. vm.isFirstStep = true;
  76. vm.isSecondStep = true;
  77. vm.isThirdStep = true;
  78. break;
  79. case 4:
  80. vm.isFirstStep = true;
  81. vm.isSecondStep = true;
  82. vm.isThirdStep = true;
  83. vm.isFourStep = true;
  84. break;
  85. default:
  86. break;
  87. }
  88. })
  89. }
  90. })
  91. })()