| | |
| | | <template> |
| | | <Form |
| | | <NutForm |
| | | :model-value="form" |
| | | ref="formRef" |
| | | :rules="rules" |
| | | label-position="top" |
| | | class="phone-bill-recharge" |
| | | class="order-bill-recharge phone" |
| | | > |
| | | <FormItem label="选择运营商:" class="bole-form-item" prop="ispCode" required> |
| | | <RadioGroup v-model="form.ispCode" direction="horizontal"> |
| | | <NutFormItem label="选择运营商:" class="bole-form-item" prop="ispCode" required> |
| | | <NutRadioGroup v-model="form.ispCode" direction="horizontal" @change="changeIspCode"> |
| | | <BlRadio |
| | | :label="key" |
| | | v-for="(val, key) in BlLifeRecharge.constants.IspCodeText" |
| | | :key="key" |
| | | >{{ val }}</BlRadio |
| | | > |
| | | </RadioGroup> |
| | | </FormItem> |
| | | <FormItem label="充值手机号" class="bole-form-item" prop="phone" required> |
| | | <Input |
| | | </NutRadioGroup> |
| | | </NutFormItem> |
| | | <NutFormItem label="充值手机号" class="bole-form-item" prop="phone" required> |
| | | <NutInput |
| | | v-model.trim="form.phone" |
| | | class="bole-input-text" |
| | | placeholder="请填写您需要充值的手机号码" |
| | | type="text" |
| | | /> |
| | | </FormItem> |
| | | <FormItem |
| | | </NutFormItem> |
| | | <NutFormItem |
| | | label="姓名" |
| | | class="bole-form-item" |
| | | prop="name" |
| | | required |
| | | v-if="form.ispCode === BlLifeRecharge.constants.IspCode.dianxin" |
| | | > |
| | | <Input |
| | | <NutInput |
| | | v-model.trim="form.name" |
| | | 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" |
| | | </NutFormItem> |
| | | <NutFormItem label="选择充值金额" class="bole-form-item" prop="parValue" required> |
| | | <NutRadioGroup v-model="form.parValue" direction="horizontal" class="parValue-radio-group"> |
| | | <NutRadio |
| | | :label="Number(item)" |
| | | :key="item" |
| | | shape="button" |
| | | v-for="item in parValueList" |
| | |
| | | </div> |
| | | <div class="discountTag">{{ lifePayPhoneRate * 100 }}折</div> |
| | | </div> |
| | | </Radio> |
| | | </RadioGroup> |
| | | </FormItem> |
| | | </NutRadio> |
| | | </NutRadioGroup> |
| | | </NutFormItem> |
| | | <div class="common-content"> |
| | | <nut-button class="recharge-button" type="primary" @click="handleSubmit"> |
| | | <div class="recharge-button-inner"> |
| | |
| | | <ConfirmDialogInfoItem label="实付金额" :content="`¥${realParValue}`" danger /> |
| | | </template> |
| | | </ConfirmDialog> |
| | | </Form> |
| | | </NutForm> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { Form, FormItem, RadioGroup, Radio, Input, Button as NutButton } from '@nutui/nutui-taro'; |
| | | import { |
| | | Form as NutForm, |
| | | FormItem as NutFormItem, |
| | | RadioGroup as NutRadioGroup, |
| | | Radio as NutRadio, |
| | | Input as NutInput, |
| | | 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 { FormValidator } from '../../utils'; |
| | | import { |
| | | useLifeRechargeContext, |
| | | BlLifeRecharge, |
| | | LifePhoneDataCreateLifePayOrderInput, |
| | | FormValidator, |
| | | } from '../../utils'; |
| | | LifeRechargeConstants, |
| | | } from '@life-payment/core-vue'; |
| | | import RechargeTipsView from '../../components/RechargeTipsView/RechargeTipsView.vue'; |
| | | import ConfirmDialog from '../../components/Dialog/ConfirmDialog.vue'; |
| | | import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue'; |
| | |
| | | name: 'PhoneBillRecharge', |
| | | }); |
| | | |
| | | type Props = { |
| | | isDev?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | isDev: false, |
| | | }); |
| | | |
| | | const form = reactive({ |
| | | ispCode: BlLifeRecharge.constants.IspCode.yidong, |
| | | ispCode: '', |
| | | phone: '', |
| | | parValue: 0, |
| | | name: '', |
| | | }); |
| | | |
| | | const emit = defineEmits<{ |
| | | ( |
| | | e: 'goPay', |
| | | form: { |
| | | ispCode: typeof BlLifeRecharge.constants.IspCode; |
| | | phone: string; |
| | | parValue: number; |
| | | name: string; |
| | | } |
| | | ): void; |
| | | (e: 'goPay', orderNo: string): void; |
| | | }>(); |
| | | |
| | | const { lifePayPhoneRate } = useGetRate(); |
| | | const { phoneParValueList } = useGetPhoneParValue(); |
| | | |
| | | const parValueList = [50, 100, 200]; |
| | | const parValueList = computed( |
| | | () => phoneParValueList.value.find((x) => x.ispCode === form.ispCode)?.parValue ?? [] |
| | | ); |
| | | |
| | | function changeIspCode(val: LifeRechargeConstants.IspCode) { |
| | | const phoneParValueItem = phoneParValueList.value.find((x) => x.ispCode === val); |
| | | if (phoneParValueItem.parValue.every((x) => Number(x) !== form.parValue)) { |
| | | form.parValue = 0; |
| | | } |
| | | } |
| | | |
| | | const realParValue = computed(() => |
| | | blLifeRecharge.getRechargeParValue(form.parValue, lifePayPhoneRate.value) |
| | |
| | | '充值期间,若同一号码款项未到账,请勿在其他平台重复充值;主副卡不可同时充值。因上述操作导致的资金损失,由用户自行承担。', |
| | | '本平台话费充值服务不适用于已停机号码。电信号码若有欠费,也无法完成充值。电信已完成维护的区域包括:广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中,在此期间可能会出现充值不成功并自动退款的情况,请您谅解。', |
| | | '如接到陌生来电,对方以缴费或误操作等理由要求处理款项,务必立即拉黑,谨防诈骗。', |
| | | '售后服务期为充值完成之日起3天。申请售后服务时,需提供录屏证据,请确认接受此要求后再下单,逾期平台不再受理售后申请。', |
| | | '充值发票由运营商提供,您可登录网上营业厅下载电子发票。', |
| | | ]; |
| | | |
| | |
| | | confirmDialogVisible.value = true; |
| | | } |
| | | |
| | | async function createLifePayPhoneOrder() { |
| | | async function goPay() { |
| | | try { |
| | | let params: LifePhoneDataCreateLifePayOrderInput = { |
| | | userId: blLifeRecharge.userId, |
| | | // lifePayType: 10, |
| | | userId: blLifeRecharge.accountModel.userId, |
| | | productData: { |
| | | ispCode: form.ispCode, |
| | | parValue: 0.1, |
| | | phone: '18858418480', |
| | | parValue: props.isDev ? 0.1 : form.parValue, |
| | | phone: form.phone, |
| | | name: form.ispCode === BlLifeRecharge.constants.IspCode.dianxin ? form.name : '', |
| | | }, |
| | | }; |
| | | let res = await blLifeRecharge.services.createLifePayPhoneOrder(params); |
| | | emit('goPay', res.orderNo); |
| | | } catch (error) {} |
| | | } |
| | | |
| | | function goPay() { |
| | | emit('goPay'); |
| | | } |
| | | </script> |