<template>
|
<NutForm
|
:model-value="form"
|
ref="formRef"
|
:rules="rules"
|
label-position="top"
|
class="order-bill-recharge phone chunk-form"
|
>
|
<NutFormItem label="选择运营商:" class="bole-form-item" prop="ispCode" required>
|
<NutRadioGroup v-model="form.ispCode" direction="horizontal" @change="handleIspCodeChange">
|
<BlRadio
|
:label="key"
|
v-for="(val, key) in BlLifeRecharge.constants.IspCodeText"
|
:key="key"
|
>{{ val }}</BlRadio
|
>
|
</NutRadioGroup>
|
</NutFormItem>
|
<NutFormItem label="充值手机号" class="bole-form-item" prop="phone" required>
|
<NutInput
|
v-model.trim="form.phone"
|
class="bole-input-text"
|
placeholder="请填写您需要充值的手机号码"
|
type="text"
|
placeholderClass="bole-input-text-placeholder"
|
/>
|
</NutFormItem>
|
<NutFormItem label="机主姓名" class="bole-form-item" prop="name" required>
|
<NutInput
|
v-model.trim="form.name"
|
class="bole-input-text"
|
placeholder="请填写充值手机号对应的户主姓名"
|
type="text"
|
placeholderClass="bole-input-text-placeholder"
|
/>
|
</NutFormItem>
|
<slot></slot>
|
</NutForm>
|
<NutDialog
|
title="提示"
|
content="电信可充值区域包括：广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中，在此期间可能会出现充值不成功并自动退款的情况，请您谅解。"
|
v-model:visible="dialogVisible"
|
/>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
Form as NutForm,
|
FormItem as NutFormItem,
|
RadioGroup as NutRadioGroup,
|
Input as NutInput,
|
Dialog as NutDialog,
|
} 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 { BlLifeRecharge, LifeRechargeConstants } from '@life-payment/core-vue';
|
|
defineOptions({
|
name: 'PhoneBillRechargeBaseForm',
|
});
|
|
const form = defineModel<{
|
ispCode: string;
|
phone: string;
|
name: string;
|
}>('form');
|
|
const rules = reactive<FormRules>({
|
ispCode: [{ required: true, message: '请选择运营商' }],
|
phone: [
|
{ required: true, message: '请输入充值手机号' },
|
{ validator: FormValidator.validatorPhoneNumber, message: '请输入正确的手机号' },
|
],
|
name: [{ required: true, message: '请填写充值手机号对应的户主姓名' }],
|
});
|
|
const dialogVisible = ref(false);
|
|
function handleIspCodeChange(ispCode: LifeRechargeConstants.IspCode) {
|
console.log('ispCode: ', ispCode);
|
if (ispCode === LifeRechargeConstants.IspCode.dianxin) {
|
dialogVisible.value = true;
|
}
|
}
|
|
const formRef = ref<any>(null);
|
|
defineExpose({
|
validate: computed(() => formRef.value.validate),
|
});
|
</script>
|
