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;
				}
			})
		}
	})
})()