<template>
|
<NutForm
|
:model-value="form"
|
ref="formRef"
|
:rules="rules"
|
label-position="top"
|
class="order-bill-recharge phone"
|
>
|
<NutFormItem label="选择运营商:" class="bole-form-item" prop="ispCode" required>
|
<NutRadioGroup v-model="form.ispCode" direction="horizontal">
|
<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"
|
/>
|
</NutFormItem>
|
<NutFormItem
|
label="姓名"
|
class="bole-form-item"
|
prop="name"
|
required
|
v-if="form.ispCode === BlLifeRecharge.constants.IspCode.dianxin"
|
>
|
<NutInput
|
v-model.trim="form.name"
|
class="bole-input-text"
|
placeholder="请填写您的姓名"
|
type="text"
|
/>
|
</NutFormItem>
|
<slot></slot>
|
</NutForm>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
Form as NutForm,
|
FormItem as NutFormItem,
|
RadioGroup as NutRadioGroup,
|
Input as NutInput,
|
} 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 } 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 formRef = ref<any>(null);
|
|
defineExpose({
|
validate: computed(() => formRef.value.validate),
|
});
|
</script>
|
