| | |
| | | label-position="top" |
| | | class="order-bill-recharge electric" |
| | | > |
| | | <FormItem label="所在城市" class="bole-form-item" prop="province" required> |
| | | <FormItem label="所在区域" class="bole-form-item" prop="province" required> |
| | | <ChooseInputWithPicker |
| | | v-model="form.province" |
| | | placeholder="请选择城市" |
| | | placeholder="请选择区域" |
| | | :value-enum="electricParValueList" |
| | | enum-label-key="areaName" |
| | | enum-value-key="areaName" |
| | | enum-label-key="cityName" |
| | | enum-value-key="cityName" |
| | | /> |
| | | </FormItem> |
| | | <FormItem label="所在城市" class="bole-form-item" prop="city" required v-if="form.province"> |
| | | <ChooseInputWithPicker |
| | | v-model="form.city" |
| | | placeholder="请选择城市" |
| | | :value-enum="electricCityList" |
| | | enum-label-key="cityName" |
| | | enum-value-key="cityName" |
| | | /> |
| | | </FormItem> |
| | | <!-- <FormItem label="电网类型" class="bole-form-item" prop="electricType" required> |
| | |
| | | /> |
| | | </FormItem> |
| | | <FormItem label="电网户号" class="bole-form-item" prop="electricAccount" required> |
| | | <NutInput |
| | | <NumberInput |
| | | v-model.trim="form.electricAccount" |
| | | class="bole-input-text" |
| | | placeholder="请输入13位数字编号" |
| | | type="text" |
| | | max-length="13" |
| | | /> |
| | | </FormItem> |
| | | <FormItem |
| | |
| | | class="bole-input-text" |
| | | placeholder="请输入身份证后六位" |
| | | type="text" |
| | | max-length="6" |
| | | /> |
| | | </FormItem> |
| | | <FormItem |
| | |
| | | import ConfirmDialog from '../../components/Dialog/ConfirmDialog.vue'; |
| | | import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue'; |
| | | import ChooseInputWithPicker from '../../components/Input/ChooseInputWithPicker.vue'; |
| | | import NumberInput from '../../components/Input/NumberInput.vue'; |
| | | import { useGetRate, useGetElectricParValue } from '../../hooks'; |
| | | import { FormValidator } from '../../utils'; |
| | | |
| | |
| | | electricType: '', |
| | | electricAccountType: '', |
| | | province: '', |
| | | city: '', |
| | | sixID: '', |
| | | }); |
| | | |
| | |
| | | const { electricParValueList } = useGetElectricParValue(); |
| | | |
| | | const parValueList = computed( |
| | | () => electricParValueList.value.find((x) => x.areaName === form.province)?.parValue ?? [] |
| | | () => electricParValueList.value.find((x) => x.cityName === form.province)?.parValue ?? [] |
| | | ); |
| | | |
| | | const electricCityList = computed( |
| | | () => electricParValueList.value.find((x) => x.cityName === form.province)?.childCityList ?? [] |
| | | ); |
| | | |
| | | watch( |
| | | () => form.province, |
| | | (provinceName) => { |
| | | const electricParValue = electricParValueList.value.find( |
| | | (item) => item.areaName === provinceName |
| | | (item) => item.cityName === provinceName |
| | | ); |
| | | form.electricType = electricParValue.electricType; |
| | | } |
| | |
| | | const { blLifeRecharge } = useLifeRechargeContext(); |
| | | |
| | | const rules = reactive<FormRules>({ |
| | | province: [{ required: true, message: '请选择所在城市' }], |
| | | province: [{ required: true, message: '请选择所在区域' }], |
| | | city: [{ required: true, message: '请选择所在城市' }], |
| | | electricAccountType: [{ required: true, message: '请选择电费类型' }], |
| | | electricAccount: [{ required: true, message: '请输入电网户号' }], |
| | | sixID: [{ required: true, message: '请输入身份证后六位' }], |
| | | electricAccount: [{ required: true, message: '请输入电网户号', regex: /^\d{13}$/ }], |
| | | sixID: [ |
| | | { |
| | | required: true, |
| | | message: '请输入身份证后六位', |
| | | validator: FormValidator.validatorIDNumberSix, |
| | | }, |
| | | ], |
| | | parValue: [ |
| | | { required: true, message: '请选择充值金额', validator: FormValidator.validatorNumberNotNull }, |
| | | ], |
| | |
| | | electricAccountType: form.electricAccountType, |
| | | electricAccount: form.electricAccount, |
| | | province: form.province, |
| | | city: '', |
| | | city: form.city, |
| | | sixID: form.sixID, |
| | | }, |
| | | }; |