2.0.18 • Published 11 months ago
@uzhan/hicoo-packages-v2 v2.0.18
嗨客组件库v2.0
Project setup
pnpm install hicoo-packages-v2@version组件
动态表单示例
.vue
<el-form
ref="form"
:model="form"
label-width="auto"
label-position="left"
>
<ProElFormItem
v-for="item in options"
:key="item.name"
:prop="item.name"
:type="item.type"
:label="item.label"
:extra-type="item.tip.type"
:extra="item.tip.content"
:rule="item.rule"
@change="handleChangeValue"
>
<ProElInput
v-if="item.type === 'input'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElUploadFile
v-if="item.type === 'file'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElUploadImage
v-if="item.type === 'image'"
v-model="form[item.name]"
v-bind="item"
:extra="item.tip.content"
/>
<ProElInputNumber
v-if="item.type === 'number'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElTextArea
v-if="item.type === 'textarea'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElRadioGroup
v-if="item.type === 'radio'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElCheckBox
v-if="item.type === 'checkbox'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElCascader
v-if="item.type === 'cascader'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElSelect
v-if="item.type === 'select'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElDateTimePicker
v-if="item.type === 'timepicker'"
v-model="form[item.name]"
v-bind="item"
/>
<ProElDateTimeRangePicker
v-if="item.type === 'timerangepicker'"
v-model="form[item.name]"
v-bind="item"
/>
</ProElFormItem>
</el-form>.js
data() {
return {
form: {
merchant_short_name: '',
legal_person_video: '',
license_img: '',
wechat_rate: '',
supplement: '',
d0: 'NEED',
business_space: [
"SALES_SCENES_STORE",
"SALES_SCENES_MP"
],
business_region: [],
id_type: [],
license_validity_period_start1: '',
license_validity_period_start: ''
},
options: [
{
"type": "input",
"name": "merchant_short_name",
"label": "商户简称",
"placeholder": "请输入商户简称",
"min_length": 3,
"max_length": 20,
"prefix": "¥",
"suffix": "元",
"tip": {
"type": "inline",
"content": "与门店招牌相同，显示在支付凭证上。长度不得超过20个字。"
},
rule: [{
required: true,
message: "请输入商户简称",
trigger: 'blur'
}],
"value": "",
"disabled": false
},
{
"type": "file",
"name": "legal_person_video",
"label": "法人开户意愿视频",
"multiple": false,
"max_size": 100,
"max": 5,
"accept": ".rar,.7z,.mp4",
"tip": {
"type": "inline",
"content": "建议法人按如下话术录制“法人开户意愿视频”：我是#公司全称#的法定代表人（或负责人），特此证明本公司申请的商户号为我司真实意愿开立且用于XX业务（或XX服务）。我司现有业务符合法律法规及腾讯的相关规定。"
},
"rule": {
"required": true,
"message": ""
},
"value": "https://mat.uphicoo.com/materials/801114000/legal_person_video.mp4?token=xxxxx",
"disabled": true
},
{
"type": "image",
"name": "license_img",
"label": "营业执照照片",
"accept": ".png,.jpg,.jpeg",
"multiple": true,
"max": 1,
"max_size": 1,
"tip": {
"type": "inline",
"content": "营业执照照片需要清晰可见不可PS"
},
"rule": {
"required": true,
"message": "请上传营业执照照片"
},
"value": "https://cdn.apifox.com/app/project-icon/builtin/6.jpg",
"disabled": false
},
{
"type": "number",
"name": "wechat_rate",
"label": "微信费率",
"placeholder": "",
"min": 0.25,
"max": 0.38,
"prefix": "",
"suffix": "%",
"precision": 3,
"tip": {
"type": "inline",
"content": "微信费率"
},
"rule": {
"required": true,
"api": "https://gateway.uphicoo.com/agent/channel/form/validate"
},
"value": 0.38,
"disabled": false
},
{
"type": "textarea",
"name": "supplement",
"label": "补充说明",
"placeholder": "可输入200个字符",
"min_length": 0,
"max_length": 200,
"tip": {
"type": "inline",
"content": "特殊情况，说明原因。"
},
"rule": {
"required": false,
"message": ""
},
"value": "合伙人补充说明",
"disabled": false
},
{
"type": "radio",
"name": "d0",
"label": "是否需要开通D0",
"tip": {
"type": "inline",
"content": "开通D0后将当天到账"
},
"rule": {
"required": true,
"message": "是否需要开通D0"
},
"value": "NEED",
"options": [
{
"value": "NEED",
"label": "需要"
},
{
"value": "NOT_NEED",
"label": "不需要"
}
],
"disabled": true
},
{
"type": "checkbox",
"name": "business_space",
"label": "选择经营场景",
"tip": {
"type": "inline",
"content": "选择经营场景，根据实际需要选择，每种场景都需要对应的证明材料。"
},
"rule": {
"required": true,
"message": "根据实际需要选择经营场景"
},
"value": [
"SALES_SCENES_STORE",
"SALES_SCENES_MP"
],
"options": [
{
"value": "SALES_SCENES_STORE",
"label": "线下场所"
},
{
"value": "SALES_SCENES_MP",
"label": "公众号"
},
{
"value": "SALES_SCENES_MINI_PROGRAM",
"label": "小程序"
},
{
"value": "SALES_SCENES_WEB",
"label": "互联网网站"
},
{
"value": "SALES_SCENES_APP",
"label": "APP"
},
{
"value": "SALES_SCENES_WEWORK",
"label": "企业微信"
}
],
"disabled": false
},
{
"type": "cascader",
"name": "business_region",
"label": "经营地址省市区",
"placeholder": "选择经营地址省市区",
"tip": {
"type": "inline",
"content": "选择经营地址省市区"
},
"rule": {
"required": true,
"message": "请选择经营地址省市区"
},
"options_api": "https://gateway.uphicoo.com/regions",
"options": [
{
"value": "500000",
"label": "重庆市",
"children": [
{
"value": "500100",
"label": "重庆市",
"children": [
{
"value": "500106",
"label": "南岸区"
},
{
"value": "500104",
"label": "渝北区"
},
{
"value": "500103",
"label": "江北区"
},
{
"value": "500102",
"label": "沙坪坝区"
},
]
}
]
}
],
"value": [
"500000",
"500100",
"500106"
],
"disabled": false
},
{
"type": "select",
"name": "id_type",
"label": "证件类型",
"placeholder": "选择法人证件类型",
"tip": {
"type": "inline",
"content": "选择法人证件类型"
},
"rule": {
"required": true,
"message": "请选择法人证件类型"
},
"multiple": false,
"value": "ID_MAIN",
"options": [
{
"value": "ID_MAIN",
"label": "大陆居民身份证"
},
{
"value": "ID_MACAU",
"label": "澳门居民身份证"
},
{
"value": "ID_HONGKONG",
"label": "香港居民身份证"
},
{
"value": "ID_TAIWAN",
"label": "台湾居民身份证"
},
{
"value": "ID_FOREIGN_RESIDENT",
"label": "外国人居留证"
}
],
"options_api": "https://gateway.uphicoo.com/common/definitions/id_types",
"disabled": false
},
{
"type": "timepicker",
"name": "license_validity_period_start",
"label": "营业执照有效期限开始日期",
"date_type": "date",
"format": "yyyy-MM-dd",
max_date: "2024-02-20",
min_date: "2024-02-04",
"tip": {
"type": "inline",
"content": "营业执照有效期限开始日期，需早于当前日期。"
},
"rule": {
"required": true,
"message": "请指定营业执照有效期限开始日期"
},
"value": "2020-01-01",
"disabled": false
},
{
"type": "timerangepicker",
"name": "license_validity_period_start1",
"label": "营业执照有效期限开始日期",
"date_type": "daterange",
"format": "yyyy-MM-dd",
max_date: "2024-02-20",
min_date: "2024-02-04",
start_placeholder: "开始日期",
end_placeholder: "结束日期",
range_separator: '至',
"tip": {
"type": "inline",
"content": "营业执照有效期限开始日期，需早于当前日期。"
},
"rule": {
"required": true,
"message": "请指定营业执照有效期限开始日期"
},
"value": "2020-01-01",
"disabled": false
}
]
}
},