<template>
|
<GasBillRechargeStep1 v-if="current === 'step1'" />
|
<GasBillRechargeStep2 v-else-if="current === 'step2'" />
|
<GasBillRechargeStep3
|
v-else-if="current === 'step3'"
|
v-bind="props"
|
@go-pay="emit('goPay', $event)"
|
@paySuccess="emit('paySuccess', $event)"
|
@missName="emit('missName', $event)"
|
/>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, provide, reactive } from 'vue';
|
import { useStepper } from 'senin-mini/hooks';
|
import { GasBillRechargeContextKey } from './context';
|
import GasBillRechargeStep1 from './GasBillRechargeStep1.vue';
|
import GasBillRechargeStep2 from './GasBillRechargeStep2.vue';
|
import GasBillRechargeStep3 from './GasBillRechargeStep3.vue';
|
import { LifeRechargeConstants } from '@life-payment/core-vue';
|
import { RechargeProps } from '../PhoneBillRecharge/types';
|
|
defineOptions({
|
name: 'GasBillRecharge',
|
});
|
|
const props = withDefaults(defineProps<RechargeProps>(), {
|
isDev: false,
|
});
|
|
const stepperInfo = useStepper(['step1', 'step2', 'step3'], 'step3');
|
const current = computed(() => stepperInfo.current.value);
|
|
const emit = defineEmits<{
|
(e: 'goPay', orderNo: string): void;
|
(e: 'paySuccess', orderNo: string): void;
|
(e: 'missName', userAccountId: string): void;
|
}>();
|
|
const preSetForm = reactive({
|
gasOrgType: '',
|
// province: '',
|
// city: '',
|
gasAccount: '',
|
remark: '',
|
areaList: [] as string[],
|
name: '',
|
});
|
|
provide(GasBillRechargeContextKey, {
|
...stepperInfo,
|
preSetForm,
|
});
|
</script>
|
