149 lines
2.8 KiB
Vue
149 lines
2.8 KiB
Vue
<template>
|
||
<view class="register-step-bar">
|
||
<view
|
||
class="step-item"
|
||
:class="{
|
||
active: currentStep === 1,
|
||
done: currentStep > 1,
|
||
clickable: currentStep === 2 && allowBackToStep1,
|
||
}"
|
||
@click="onStepClick(1)"
|
||
>
|
||
<view class="step-circle">
|
||
<text v-if="currentStep > 1" class="step-check">✓</text>
|
||
<text v-else class="step-num">1</text>
|
||
</view>
|
||
<text class="step-label">选择就诊人</text>
|
||
</view>
|
||
<view class="step-line" :class="{ done: currentStep > 1 }"></view>
|
||
<view class="step-item" :class="{ active: currentStep === 2 }" @click="onStepClick(2)">
|
||
<view class="step-circle">
|
||
<text class="step-num">2</text>
|
||
</view>
|
||
<text class="step-label">确认预约信息，支付挂号费</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'RegisterStepBar',
|
||
props: {
|
||
currentStep: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
allowBackToStep1: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
methods: {
|
||
onStepClick(stepNum) {
|
||
if (stepNum === 1 && this.currentStep === 2 && this.allowBackToStep1) {
|
||
this.$emit('step-click', 1);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.register-step-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24rpx 32rpx 16rpx;
|
||
background: #F8FAFC;
|
||
|
||
.step-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 140rpx;
|
||
|
||
&.clickable {
|
||
.step-circle,
|
||
.step-label {
|
||
cursor: pointer;
|
||
}
|
||
|
||
&:active {
|
||
opacity: 0.75;
|
||
}
|
||
}
|
||
|
||
.step-circle {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
background: #E2E8F0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.step-num,
|
||
.step-check {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.step-label {
|
||
font-size: 24rpx;
|
||
color: #94A3B8;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&.active {
|
||
.step-circle {
|
||
background: #4175EE;
|
||
|
||
.step-num {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.step-label {
|
||
color: #4175EE;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
&.done {
|
||
.step-circle {
|
||
background: rgba(65, 117, 238, 0.15);
|
||
|
||
.step-check {
|
||
color: #4175EE;
|
||
}
|
||
}
|
||
|
||
.step-label {
|
||
color: #64748B;
|
||
}
|
||
|
||
&.clickable .step-label {
|
||
color: #4175EE;
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-line {
|
||
flex: 1;
|
||
max-width: 120rpx;
|
||
height: 4rpx;
|
||
background: #E2E8F0;
|
||
margin: 0 16rpx;
|
||
margin-bottom: 32rpx;
|
||
border-radius: 2rpx;
|
||
|
||
&.done {
|
||
background: #4175EE;
|
||
}
|
||
}
|
||
}
|
||
</style>
|