| | |
| | | @go-pay="emit('goPay', $event)" |
| | | @paySuccess="emit('paySuccess', $event)" |
| | | @missName="emit('missName', $event)" |
| | | @editUserAccount="emit('editUserAccount', $event)" |
| | | /> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { computed, provide, useAttrs } from 'vue'; |
| | | import { computed, provide, useAttrs, watch } from 'vue'; |
| | | import { useStepper } from 'senin-mini/hooks'; |
| | | import { PhoneBillRechargeContextKey } from './context'; |
| | | import PhoneBillRechargeStep1 from './PhoneBillRechargeStep1.vue'; |
| | |
| | | const stepperInfo = useStepper(['step1', 'step2'], 'step2'); |
| | | const current = computed(() => stepperInfo.current.value); |
| | | |
| | | const outCurrent = defineModel<'step1' | 'step2'>({ |
| | | set(value) { |
| | | stepperInfo.goTo(value); |
| | | }, |
| | | get() { |
| | | return stepperInfo.current.value; |
| | | }, |
| | | }); |
| | | |
| | | const emit = defineEmits<{ |
| | | (e: 'goPay', orderNo: string): void; |
| | | (e: 'paySuccess', orderNo: string): void; |
| | | (e: 'missName', userAccountId: string): void; |
| | | (e: 'editUserAccount', userAccountId: string): void; |
| | | (e: 'currentChange', current: 'step1' | 'step2'): void; |
| | | }>(); |
| | | |
| | | watch( |
| | | current, |
| | | (newVal) => { |
| | | emit('currentChange', newVal); |
| | | }, |
| | | { |
| | | immediate: true, |
| | | } |
| | | ); |
| | | |
| | | provide(PhoneBillRechargeContextKey, { |
| | | ...stepperInfo, |
| | | }); |