sr-publicServicePlatform/component/common/appointment-step.js

(function() {
	Vue.component('appointment-step', {
		template: '<div class="div-step-header">\
				<div class="div-head-img">\
					<div class="c-f16 c-fff pt10 pl20">预约步骤</div>\
				</div>\
				<div class="mt80 div-step-content">\
					<div class="ml14">\
						<div class="div-step-item" :class="{\'active\': isFirstStep}">\
							<span class="c-f16" v-show="!isFirstStep">1</span>\
							<div class="div-active-item" v-show="isFirstStep"></div>\
						</div>\
						<div class="div-step-line"></div>\
						<div class="c-f16 div-step-item" :class="{\'active\': isSecondStep}">\
							<span class="c-f16" v-show="!isSecondStep">2</span>\
							<div class="div-active-item" v-show="isSecondStep"></div>\
						</div>\
						<div class="div-step-line"></div>\
						<div class="c-f16 div-step-item" :class="{\'active\': isThirdStep}">\
							<span class="c-f16" v-show="!isThirdStep">3</span>\
							<div class="div-active-item" v-show="isThirdStep"></div>\
						</div>\
						<div class="div-step-line"></div>\
						<div class="c-f16 div-step-item" :class="{\'active\': isFourStep}">\
							<span class="c-f16" v-show="!isFourStep">4</span>\
							<div class="div-active-item" v-show="isFourStep"></div>\
						</div>\
					</div>\
					<div class="ml20">\
						<div>\
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isFirstStep}">选择医院</div>\
							<div class="c-f14 c-909090 ">选择您满意的医院</div>\
						</div>\
						<div class="mt40">\
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isSecondStep}">选择医生</div>\
							<div class="c-f14 c-909090">选择适合您的医生</div>\
						</div>\
						<div class="mt40">\
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isThirdStep}">选择就诊时间</div>\
							<div class="c-f14 c-909090">选择您希望的就诊时间</div>\
						</div>\
						<div class="mt40">\
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isFourStep}">确认预约</div>\
							<div class="c-f14 c-909090">核对个人信息，确认预约</div>\
						</div>\
					</div>\
				</div>\
				<div class="div-step-bottom">\
					<img src="../../../images/icon_tishi2.png" width="19" height="19" />\
					<div class="c-f14 c-ff8787 ml10">预约完成后，请凭预约信息到<br/>医院救治。</div>\
				</div>\
			</div>',
		props: [],
		data: function() {
			return {
				isFirstStep: false,
				isSecondStep: false,
				isThirdStep: false,
				isFourStep: false,
			}
		},
		mounted: function() {
			var vm = this;
			EventBus.$on("jump-step", function(arg) {
				var step = arg.step;
				switch(step) {
					case 1:
						vm.isFirstStep = true;
						break;
					case 2:
						vm.isFirstStep = true;
						vm.isSecondStep = true;
						break;
					case 3:
						vm.isFirstStep = true;
						vm.isSecondStep = true;
						vm.isThirdStep = true;
						break;
					case 4:
						vm.isFirstStep = true;
						vm.isSecondStep = true;
						vm.isThirdStep = true;
						vm.isFourStep = true;
						break;
					default:
						break;
				}
			})
		}
	})
})()