From 07d73df3d817d01ce47f6c7b7a8d8514cd389295 Mon Sep 17 00:00:00 2001 From: zhengyiming <540361168@qq.com> Date: 星期四, 13 三月 2025 10:19:44 +0800 Subject: [PATCH] release: @life-payment/core v0.0.3 --- packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue | 128 ++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 128 insertions(+), 0 deletions(-) diff --git a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue b/packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue new file mode 100644 index 0000000..796693c --- /dev/null +++ b/packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue @@ -0,0 +1,128 @@ +<template> + <NutForm + :model-value="form" + ref="formRef" + :rules="rules" + label-position="top" + class="order-bill-recharge electric" + > + <NutFormItem label="鎵�鍦ㄥ尯鍩�" class="bole-form-item" prop="province" required> + <ChooseInputWithPicker + v-model="form.province" + placeholder="璇烽�夋嫨鍖哄煙" + :value-enum="electricParValueList" + enum-label-key="cityName" + enum-value-key="cityName" + /> + </NutFormItem> + <NutFormItem 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" + /> + </NutFormItem> + <!-- <NutFormItem label="鐢电綉绫诲瀷" class="bole-form-item" prop="electricType" required> + <ChooseInputWithPicker + v-model="form.electricType" + placeholder="璇烽�夋嫨鐢电綉绫诲瀷" + :value-enum="blLifeRecharge.constants.ElectricTypeText" + /> + </NutFormItem> --> + <NutFormItem label="鐢佃垂绫诲瀷" class="bole-form-item" prop="electricAccountType" required> + <ChooseInputWithPicker + v-model="form.electricAccountType" + placeholder="璇烽�夋嫨鐢佃垂绫诲瀷" + :value-enum="blLifeRecharge.constants.ElectricAccountTypeText" + /> + </NutFormItem> + <NutFormItem label="鐢电綉鎴峰彿" class="bole-form-item" prop="electricAccount" required> + <NumberInput + v-model.trim="form.electricAccount" + class="bole-input-text" + placeholder="璇疯緭鍏�13浣嶆暟瀛楃紪鍙�" + max-length="13" + /> + </NutFormItem> + <NutFormItem + v-if="form.electricType === blLifeRecharge.constants.ElectricType.nanwang" + label="韬唤璇佸悗鍏綅" + class="bole-form-item" + prop="sixID" + required + > + <NutInput + v-model.trim="form.sixID" + class="bole-input-text" + placeholder="璇疯緭鍏ヨ韩浠借瘉鍚庡叚浣�" + type="text" + max-length="6" + /> + </NutFormItem> + <slot /> + </NutForm> +</template> + +<script setup lang="ts"> +import { Form as NutForm, FormItem as NutFormItem, Input as NutInput } from '@nutui/nutui-taro'; +import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; +import { reactive, ref, computed, watch } from 'vue'; +import { useLifeRechargeContext } from '@life-payment/core-vue'; +import ChooseInputWithPicker from '../../components/Input/ChooseInputWithPicker.vue'; +import NumberInput from '../../components/Input/NumberInput.vue'; +import { useGetElectricParValue } from '../../hooks'; +import { FormValidator } from '../../utils'; + +defineOptions({ + name: 'ElectricBillRechargeBaseForm', +}); +const form = defineModel<{ + electricAccount: string; + electricType: string; + electricAccountType: string; + province: string; + city: string; + sixID: string; +}>('form'); + +const { electricParValueList } = useGetElectricParValue(); + +const electricCityList = computed( + () => + electricParValueList.value.find((x) => x.cityName === form.value.province)?.childCityList ?? [] +); + +watch( + () => form.value.province, + (provinceName) => { + const electricParValue = electricParValueList.value.find( + (item) => item.cityName === provinceName + ); + form.value.electricType = electricParValue.electricType; + } +); + +const { blLifeRecharge } = useLifeRechargeContext(); + +const rules = reactive<FormRules>({ + province: [{ required: true, message: '璇烽�夋嫨鎵�鍦ㄥ尯鍩�' }], + city: [{ required: true, message: '璇烽�夋嫨鎵�鍦ㄥ煄甯�' }], + electricAccountType: [{ required: true, message: '璇烽�夋嫨鐢佃垂绫诲瀷' }], + electricAccount: [{ required: true, message: '璇疯緭鍏ョ數缃戞埛鍙�', regex: /^\d{13}$/ }], + sixID: [ + { + required: true, + message: '璇疯緭鍏ヨ韩浠借瘉鍚庡叚浣�', + validator: FormValidator.validatorIDNumberSix, + }, + ], +}); + +const formRef = ref<any>(null); + +defineExpose({ + validate: computed(() => formRef.value.validate), +}); +</script> -- Gitblit v1.9.1