嗨客组件库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
      }
    ]
  }
},