fix: 修改ui

zhengyiming

1 天以前 bd7dd96c732ded6854d47bf77f65e5c64d3d15e2

 packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeBaseForm.vue

@@ -4,10 +4,10 @@
    ref="formRef"
    :rules="rules"
    label-position="top"
    class="order-bill-recharge phone"
    class="order-bill-recharge phone chunk-form"
  >
    <NutFormItem label="选择运营商:" class="bole-form-item" prop="ispCode" required>
      <NutRadioGroup v-model="form.ispCode" direction="horizontal">
      <NutRadioGroup v-model="form.ispCode" direction="horizontal" @change="handleIspCodeChange">
        <BlRadio
          :label="key"
          v-for="(val, key) in BlLifeRecharge.constants.IspCodeText"
@@ -22,24 +22,25 @@
        class="bole-input-text"
        placeholder="请填写您需要充值的手机号码"
        type="text"
        placeholderClass="bole-input-text-placeholder"
      />
    </NutFormItem>
    <NutFormItem
      label="姓名"
      class="bole-form-item"
      prop="name"
      required
      v-if="form.ispCode === BlLifeRecharge.constants.IspCode.dianxin"
    >
    <NutFormItem label="机主姓名" class="bole-form-item" prop="name" required>
      <NutInput
        v-model.trim="form.name"
        class="bole-input-text"
        placeholder="请填写您的姓名"
        placeholder="请填写充值手机号对应的户主姓名"
        type="text"
        placeholderClass="bole-input-text-placeholder"
      />
    </NutFormItem>
    <slot></slot>
  </NutForm>
  <NutDialog
    title="提示"
    content="电信可充值区域包括：广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中，在此期间可能会出现充值不成功并自动退款的情况，请您谅解。"
    v-model:visible="dialogVisible"
  />
</template>

<script setup lang="ts">
@@ -48,12 +49,13 @@
  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 } from '@life-payment/core-vue';
import { BlLifeRecharge, LifeRechargeConstants } from '@life-payment/core-vue';

defineOptions({
  name: 'PhoneBillRechargeBaseForm',
@@ -71,9 +73,18 @@
    { required: true, message: '请输入充值手机号' },
    { validator: FormValidator.validatorPhoneNumber, message: '请输入正确的手机号' },
  ],
  name: [{ required: true, 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({