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