zhengyiming
2025-02-25 3703bdcb3e0eef4428fb6069649622dd3c60d2c8
packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
@@ -1,47 +1,47 @@
<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"
@@ -60,9 +60,9 @@
            </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">
@@ -80,20 +80,28 @@
        <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';
@@ -103,29 +111,38 @@
  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)
@@ -162,7 +179,6 @@
  '充值期间,若同一号码款项未到账,请勿在其他平台重复充值;主副卡不可同时充值。因上述操作导致的资金损失,由用户自行承担。',
  '本平台话费充值服务不适用于已停机号码。电信号码若有欠费,也无法完成充值。电信已完成维护的区域包括:广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中,在此期间可能会出现充值不成功并自动退款的情况,请您谅解。',
  '如接到陌生来电,对方以缴费或误操作等理由要求处理款项,务必立即拉黑,谨防诈骗。',
  '售后服务期为充值完成之日起3天。申请售后服务时,需提供录屏证据,请确认接受此要求后再下单,逾期平台不再受理售后申请。',
  '充值发票由运营商提供,您可登录网上营业厅下载电子发票。',
];
@@ -172,23 +188,19 @@
  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>