feat: 电费

wupengfei

2025-02-21 6ab8060d51e7eda0006943057f1d983d0d44abea

 packages/components/src/views/electricBillRecharge/electricBillRecharge.vue

@@ -4,13 +4,34 @@
    ref="formRef"
    :rules="rules"
    label-position="top"
    class="phone-bill-recharge"
    class="order-bill-recharge electric"
  >
    <FormItem label="充值手机号" class="bole-form-item" prop="phone" required>
    <FormItem label="所在城市" class="bole-form-item" prop="type" required>
      <ChooseInputWithPicker
        v-model="form.type"
        placeholder="请选择城市"
        :value-enum="IspCodeText"
      />
    </FormItem>
    <FormItem label="电网类型" class="bole-form-item" prop="type" required>
      <ChooseInputWithPicker
        v-model="form.type"
        placeholder="请选择电网类型"
        :value-enum="IspCodeText"
      />
    </FormItem>
    <FormItem label="电费类型" class="bole-form-item" prop="type" required>
      <ChooseInputWithPicker
        v-model="form.type"
        placeholder="请选择电费类型"
        :value-enum="IspCodeText"
      />
    </FormItem>
    <FormItem label="电网户号" class="bole-form-item" prop="phone" required>
      <Input
        v-model.trim="form.phone"
        class="bole-input-text"
        placeholder="请填写您需要充值的手机号码"
        placeholder="请输入13位数字编号"
        type="text"
      />
    </FormItem>
@@ -40,18 +61,25 @@
    <div class="common-content">
      <nut-button class="recharge-button" type="primary" @click="recharge">
        <div class="recharge-button-inner">
          <div>￥{{ form.parValue }}</div>
          <div>￥{{ realParValue }}</div>
          <div class="recharge-button-text">立即充值</div>
        </div>
      </nut-button>
      <RechargeTipsView :tips="tips" />
    </div>
    <ConfirmDialog v-model:visible="confirmDialogVisible" @ok="goPay">
      <template #tips>
        该产品为慢充模式，0-72小时内到账，介意请勿付款！充值前请仔细阅读充值须知！
      </template>
      <template #info>
        <ConfirmDialogInfoItem label="充值账号" content="18858418480" />
        <ConfirmDialogInfoItem label="电网类型" content="国家电网" />
        <ConfirmDialogInfoItem label="电费类型" content="住宅" />
        <ConfirmDialogInfoItem label="充值金额" :content="`￥${form.parValue}`" danger />
        <ConfirmDialogInfoItem label="优惠金额" :content="`￥${discountParValue}`" />
        <ConfirmDialogInfoItem label="实付金额" :content="`￥${realParValue}`" danger />
      </template>
      <template #warning>
        同一电费账户在充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！
      </template>
    </ConfirmDialog>
  </Form>
@@ -67,6 +95,7 @@
import RechargeTipsView from '../../components/RechargeTipsView/RechargeTipsView.vue';
import ConfirmDialog from '../../components/Dialog/ConfirmDialog.vue';
import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue';
import ChooseInputWithPicker from '../../components/Input/ChooseInputWithPicker.vue';

defineOptions({
  name: 'electricBillRecharge',
@@ -80,11 +109,12 @@
  ispCode: IspCode.yidong,
  phone: '',
  parValue: 100,
  type: IspCodeText.yidong,
});

const rate = 0.96;

const parValueList = [50, 100, 200];
const parValueList = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000];

const realParValue = computed(() => blLifeRecharge.getRechargeParValue(form.parValue, rate));
const discountParValue = computed(() => form.parValue - Number(realParValue.value));
@@ -104,12 +134,11 @@
}

const tips = [
  '平台提供慢充服务，订单提交后，话费将于0 - 24小时内到账。若未能按时到账，系统将自动发起退款。',
  '充值期间，若同一号码款项未到账，请勿在其他平台重复充值；主副卡不可同时充值。因上述操作导致的资金损失，由用户自行承担。',
  '本平台话费充值服务不适用于已停机号码。电信号码若有欠费，也无法完成充值。电信已完成维护的区域包括：广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中，在此期间可能会出现充值不成功并自动退款的情况，请您谅解。',
  '平台提供慢充服务，订单提交后，电费将于0 - 72 小时内到账，若未能按时到账，系统将自动发起退款。',
  '充值期间，若同一账户的充值款未到账，请勿在其他平台重复充值，因上述操作导致的资金损失，由用户自行承担。',
  '为确保充值顺利进行，目前平台不支持对欠款金额超过1000元的账户进行充值，且每次充值金额必须高于欠费总额。',
  '如接到陌生来电，对方以缴费或误操作等理由要求处理款项，务必立即拉黑，谨防诈骗。',
  '售后服务期为充值完成之日起3天。申请售后服务时，需提供录屏证据，请确认接受此要求后再下单，逾期平台不再受理售后申请。',
  '充值发票由运营商提供，您可登录网上营业厅下载电子发票。',
  '下单时，请您务必准确填写完整的省市及户号信息。充值完成后，发票由运营商提供，您可登录网上营业厅下载对应的电子发票。',
];

const confirmDialogVisible = ref(false);
@@ -122,3 +151,14 @@
  emit('goPay');
}
</script>
<style lang="scss">
.order-bill-recharge {
  &.electric {
    .nut-dialog {
      .nut-dialog__content {
        max-height: 700px;
      }
    }
  }
}
</style>