| | |
| | | </NutRadio> |
| | | </NutRadioGroup> |
| | | </NutFormItem> |
| | | <SelectPayTypeFormItem |
| | | v-model="form.lifePayType" |
| | | :showWeixinPay="showWeixinPay" |
| | | :showAliPay="showAliPay" |
| | | ></SelectPayTypeFormItem> |
| | | <div class="common-content"> |
| | | <nut-button class="recharge-button" type="primary" @click="handleSubmit"> |
| | | <div class="recharge-button-inner"> |
| | |
| | | <div class="recharge-button-text">立即充值</div> |
| | | </div> |
| | | </nut-button> |
| | | <RechargeTipsView :tips="tips" /> |
| | | <RechargeTipsView :lifePayOrderType="LifeRechargeConstants.LifePayOrderTypeEnum.电费订单" /> |
| | | </div> |
| | | <ConfirmDialog v-model:visible="confirmDialogVisible" @ok="goPay"> |
| | | <template #tips> |
| | |
| | | 同一电费账户在充值期间,未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担!!! |
| | | </template> |
| | | </ConfirmDialog> |
| | | <NutToast :msg="state.msg" v-model:visible="state.show" type="warn" cover /> |
| | | </NutForm> |
| | | </template> |
| | | |
| | |
| | | RadioGroup as NutRadioGroup, |
| | | Radio as NutRadio, |
| | | Button as NutButton, |
| | | Toast as NutToast, |
| | | } from '@nutui/nutui-taro'; |
| | | import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; |
| | | import { reactive, ref, computed } from 'vue'; |
| | | import { reactive, ref, computed, toRef } from 'vue'; |
| | | import { |
| | | useLifeRechargeContext, |
| | | LifeElectricDataCreateLifePayOrderInput, |
| | |
| | | import ConfirmDialog from '../../components/Dialog/ConfirmDialog.vue'; |
| | | import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue'; |
| | | import { useGetRate, useGetElectricParValue, useSetUserAccountBySelect } from '../../hooks'; |
| | | import { FormValidator } from '../../utils'; |
| | | import { CustomerServiceTips } from '../../constants'; |
| | | import { FormValidator, initLifePayType } from '../../utils'; |
| | | import AccountAddCard from '../../components/Card/AccountAddCard.vue'; |
| | | import AccountCard from '../../components/Card/AccountCard.vue'; |
| | | import { useElectricBillRechargeContext, ElectricUserAccountExtraProperties } from './context'; |
| | | import SelectPayTypeFormItem from '../../components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue'; |
| | | import { useSelectPayType, useGetPayStatusByOrderNo } from '../../hooks/selectPayType'; |
| | | import { RechargeProps } from '../PhoneBillRecharge/types'; |
| | | |
| | | defineOptions({ |
| | | name: 'ElectricBillRechargeStep2', |
| | | }); |
| | | |
| | | type Props = { |
| | | isDev?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | const props = withDefaults(defineProps<RechargeProps>(), { |
| | | isDev: false, |
| | | }); |
| | | |
| | | const emit = defineEmits<{ |
| | | (e: 'goPay', orderNo: string): void; |
| | | (e: 'paySuccess', orderNo: string): void; |
| | | }>(); |
| | | |
| | | const { goTo } = useElectricBillRechargeContext(); |
| | |
| | | sixID: '', |
| | | currentUserAccountId: '', |
| | | remark: '', |
| | | lifePayType: initLifePayType(props.isInWeChat, props.isInAlipay), |
| | | name: '', |
| | | }); |
| | | |
| | | const { userAccountAllList, handleUserAccountChange } = useSetUserAccountBySelect({ |
| | |
| | | form.electricAccountType = currentUserAccountExtraProperties.electricAccountType; |
| | | form.sixID = currentUserAccountExtraProperties.sixID; |
| | | form.remark = currentUserAccount.remark; |
| | | form.name = currentUserAccountExtraProperties.name ?? ''; |
| | | const electricParValueItem = electricParValueList.value.find( |
| | | (x) => x.cityName === form.province |
| | | ); |
| | |
| | | { required: true, message: '请选择充值金额', validator: FormValidator.validatorNumberNotNull }, |
| | | ], |
| | | currentUserAccountId: [{ required: true, message: '请选择充值户号' }], |
| | | lifePayType: [{ required: true, message: '请选择支付方式' }], |
| | | }); |
| | | |
| | | const formRef = ref<any>(null); |
| | | |
| | | function handleSubmit() { |
| | | if (!form.name) { |
| | | state.show = true; |
| | | state.msg = '请先完善所属户主姓名'; |
| | | return; |
| | | } |
| | | if (!formRef.value) return; |
| | | formRef.value.validate().then(({ valid, errors }: any) => { |
| | | if (valid) { |
| | |
| | | }); |
| | | } |
| | | |
| | | const tips = [ |
| | | '平台提供慢充服务,订单提交后,电费将于0 - 72 小时内到账,若未能按时到账,系统将自动发起退款。', |
| | | '充值期间,若同一账户的充值款未到账,请勿在其他平台重复充值,因上述操作导致的资金损失,由用户自行承担。', |
| | | '为确保充值顺利进行,目前平台不支持对欠款金额超过1000元的账户进行充值,且每次充值金额必须高于欠费总额。', |
| | | '如接到陌生来电,对方以缴费或误操作等理由要求处理款项,务必立即拉黑,谨防诈骗。', |
| | | '下单时,请您务必准确填写完整的省市及户号信息。充值完成后,发票由运营商提供,您可登录网上营业厅下载对应的电子发票。', |
| | | CustomerServiceTips, |
| | | ]; |
| | | |
| | | const confirmDialogVisible = ref(false); |
| | | |
| | | function recharge() { |
| | | confirmDialogVisible.value = true; |
| | | } |
| | | |
| | | const { state, invokeAliPay, invokeWeixinPay } = useSelectPayType({ |
| | | isInWeChat: toRef(props, 'isInWeChat'), |
| | | isH5: toRef(props, 'isH5'), |
| | | appId: toRef(props, 'appId'), |
| | | getOpenId: toRef(props, 'getOpenId'), |
| | | }); |
| | | |
| | | const currentOrderNo = ref(''); |
| | | |
| | | async function goPay() { |
| | | try { |
| | |
| | | userId: blLifeRecharge.accountModel.userId, |
| | | channelId: blLifeRecharge.accountModel.channlesNum, |
| | | productData: { |
| | | parValue: props.isDev ? 0.1 : form.parValue, |
| | | parValue: form.parValue, |
| | | electricType: form.electricType, |
| | | electricAccountType: form.electricAccountType, |
| | | electricAccount: form.electricAccount, |
| | | province: form.province, |
| | | city: form.city, |
| | | sixID: form.sixID, |
| | | name: form.name, |
| | | }, |
| | | }; |
| | | let res = await blLifeRecharge.services.createLifePayElectricOrder(params); |
| | | emit('goPay', res.orderNo); |
| | | // emit('goPay', res.orderNo); |
| | | if (form.lifePayType === LifeRechargeConstants.LifePayTypeEnum.WxPay) { |
| | | await invokeWeixinPay(res.orderNo); |
| | | } else { |
| | | await invokeAliPay(res.orderNo); |
| | | } |
| | | currentOrderNo.value = res.orderNo; |
| | | } catch (error) {} |
| | | } |
| | | |
| | | useGetPayStatusByOrderNo({ |
| | | orderNo: currentOrderNo, |
| | | enabled: computed(() => props.isFocus && !!currentOrderNo.value), |
| | | onPaySuccess: (orderNo) => { |
| | | emit('paySuccess', orderNo); |
| | | currentOrderNo.value = ''; |
| | | }, |
| | | }); |
| | | </script> |