| | |
|---|
| | | <template> |
|---|
| | | <Form |
|---|
| | | :model-value="form" |
|---|
| | | ref="formRef" |
|---|
| | | :rules="rules" |
|---|
| | | label-position="top" |
|---|
| | | class="phone-bill-recharge" |
|---|
| | | > |
|---|
| | | <FormItem label="充值手机号" class="bole-form-item" prop="phone" required> |
|---|
| | | <Input |
|---|
| | | v-model.trim="form.phone" |
|---|
| | | class="bole-input-text" |
|---|
| | | placeholder="请填写您需要充值的手机号码" |
|---|
| | | type="text" |
|---|
| | | /> |
|---|
| | | </FormItem> |
|---|
| | | <FormItem label="选择充值金额" class="bole-form-item" prop="parValue" required> |
|---|
| | | <RadioGroup v-model="form.parValue" direction="horizontal" class="parValue-radio-group"> |
|---|
| | | <Radio |
|---|
| | | :label="item" |
|---|
| | | :key="item" |
|---|
| | | shape="button" |
|---|
| | | v-for="item in parValueList" |
|---|
| | | class="parValue-item" |
|---|
| | | > |
|---|
| | | <div class="parValue-item-inner"> |
|---|
| | | <div class="amount-wrapper"> |
|---|
| | | <div class="amount">{{ item }}</div> |
|---|
| | | <div class="unit">元</div> |
|---|
| | | </div> |
|---|
| | | <div class="price-wrapper"> |
|---|
| | | <div class="price-text">折后</div> |
|---|
| | | <div class="price">{{ blLifeRecharge.getRechargeParValue(item, rate) }}元</div> |
|---|
| | | </div> |
|---|
| | | <div class="discountTag">{{ rate * 100 }}折</div> |
|---|
| | | </div> |
|---|
| | | </Radio> |
|---|
| | | </RadioGroup> |
|---|
| | | </FormItem> |
|---|
| | | <div class="common-content"> |
|---|
| | | <nut-button class="recharge-button" type="primary" @click="recharge"> |
|---|
| | | <div class="recharge-button-inner"> |
|---|
| | | <div>￥{{ form.parValue }}</div> |
|---|
| | | <div class="recharge-button-text">立即充值</div> |
|---|
| | | </div> |
|---|
| | | </nut-button> |
|---|
| | | <RechargeTipsView :tips="tips" /> |
|---|
| | | </div> |
|---|
| | | <ConfirmDialog v-model:visible="confirmDialogVisible" @ok="goPay"> |
|---|
| | | <template #info> |
|---|
| | | <ConfirmDialogInfoItem label="充值账号" content="18858418480" /> |
|---|
| | | <ConfirmDialogInfoItem label="充值金额" :content="`￥${form.parValue}`" danger /> |
|---|
| | | <ConfirmDialogInfoItem label="优惠金额" :content="`￥${discountParValue}`" /> |
|---|
| | | <ConfirmDialogInfoItem label="实付金额" :content="`￥${realParValue}`" danger /> |
|---|
| | | </template> |
|---|
| | | </ConfirmDialog> |
|---|
| | | </Form> |
|---|
| | | <ElectricBillRechargeStep1 v-if="current === 'step1'" /> |
|---|
| | | <ElectricBillRechargeStep2 |
|---|
| | | v-else-if="current === 'step2'" |
|---|
| | | v-bind="props" |
|---|
| | | @go-pay="emit('goPay', $event)" |
|---|
| | | @paySuccess="emit('paySuccess', $event)" |
|---|
| | | @missName="emit('missName', $event)" |
|---|
| | | @editUserAccount="emit('editUserAccount', $event)" |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { Form, FormItem, RadioGroup, Radio, Input, Button as NutButton } from '@nutui/nutui-taro'; |
|---|
| | | import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; |
|---|
| | | import { reactive, ref, computed } from 'vue'; |
|---|
| | | import BlRadio from '../../components/Radio/Radio.vue'; |
|---|
| | | import { IspCodeText, IspCode } from '../../constants'; |
|---|
| | | import { useLifeRechargeContext } from '../../utils'; |
|---|
| | | import RechargeTipsView from '../../components/RechargeTipsView/RechargeTipsView.vue'; |
|---|
| | | import ConfirmDialog from '../../components/Dialog/ConfirmDialog.vue'; |
|---|
| | | import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue'; |
|---|
| | | import { computed, provide, watch } from 'vue'; |
|---|
| | | import { useStepper } from 'senin-mini/hooks'; |
|---|
| | | import { ElectricBillRechargeContextKey } from './context'; |
|---|
| | | import ElectricBillRechargeStep1 from './ElectricBillRechargeStep1.vue'; |
|---|
| | | import ElectricBillRechargeStep2 from './ElectricBillRechargeStep2.vue'; |
|---|
| | | import { RechargeProps } from '../PhoneBillRecharge/types'; |
|---|
| | | |
|---|
| | | defineOptions({ |
|---|
| | | name: 'electricBillRecharge', |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const emit = defineEmits<{ |
|---|
| | | (e: 'goPay'): void; |
|---|
| | | }>(); |
|---|
| | | |
|---|
| | | const form = reactive({ |
|---|
| | | ispCode: IspCode.yidong, |
|---|
| | | phone: '', |
|---|
| | | parValue: 100, |
|---|
| | | const props = withDefaults(defineProps<RechargeProps>(), { |
|---|
| | | isDev: false, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const rate = 0.96; |
|---|
| | | const stepperInfo = useStepper(['step1', 'step2'], 'step2'); |
|---|
| | | const current = computed(() => stepperInfo.current.value); |
|---|
| | | |
|---|
| | | const parValueList = [50, 100, 200]; |
|---|
| | | 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; |
|---|
| | | }>(); |
|---|
| | | |
|---|
| | | const realParValue = computed(() => blLifeRecharge.getRechargeParValue(form.parValue, rate)); |
|---|
| | | const discountParValue = computed(() => form.parValue - Number(realParValue.value)); |
|---|
| | | watch( |
|---|
| | | current, |
|---|
| | | (newVal) => { |
|---|
| | | emit('currentChange', newVal); |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | immediate: true, |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | const { blLifeRecharge } = useLifeRechargeContext(); |
|---|
| | | |
|---|
| | | const rules = reactive<FormRules>({}); |
|---|
| | | |
|---|
| | | const formRef = ref<any>(null); |
|---|
| | | |
|---|
| | | function handleSubmit() { |
|---|
| | | if (!formRef.value) return; |
|---|
| | | formRef.value.validate().then(({ valid, errors }: any) => { |
|---|
| | | if (valid) { |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | const tips = [ |
|---|
| | | '平台提供慢充服务，订单提交后，话费将于0 - 24小时内到账。若未能按时到账，系统将自动发起退款。', |
|---|
| | | '充值期间，若同一号码款项未到账，请勿在其他平台重复充值；主副卡不可同时充值。因上述操作导致的资金损失，由用户自行承担。', |
|---|
| | | '本平台话费充值服务不适用于已停机号码。电信号码若有欠费，也无法完成充值。电信已完成维护的区域包括：广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中，在此期间可能会出现充值不成功并自动退款的情况，请您谅解。', |
|---|
| | | '如接到陌生来电，对方以缴费或误操作等理由要求处理款项，务必立即拉黑，谨防诈骗。', |
|---|
| | | '售后服务期为充值完成之日起3天。申请售后服务时，需提供录屏证据，请确认接受此要求后再下单，逾期平台不再受理售后申请。', |
|---|
| | | '充值发票由运营商提供，您可登录网上营业厅下载电子发票。', |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | const confirmDialogVisible = ref(false); |
|---|
| | | |
|---|
| | | function recharge() { |
|---|
| | | confirmDialogVisible.value = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function goPay() { |
|---|
| | | emit('goPay'); |
|---|
| | | } |
|---|
| | | provide(ElectricBillRechargeContextKey, { |
|---|
| | | ...stepperInfo, |
|---|
| | | }); |
|---|
| | | </script> |
|---|
