drip-ui/packages/form/demo/data.js

Lightweight Mobile UI Components built on Vue

// 提单页 - 投保人信息
export const applierUserFn = (relTypeList) => {
  return [{
    name: 'applierUserName', // 用于标示当前对象的唯一索引值
    label: '姓名', // 左侧label显示的文案
    placeholder: '请输入投保人姓名', // input没有文案时展示的提示文案
    value: '', // input显示的内容, 且需要传入后端的数据
    hide: true,
    rules: [{ // 校验规则
      required: true,
      errmsg: '请输入投保人姓名'
    }, {
      cname: true,
      errmsg: '投保人姓名有误'
    }]
  }, {
    name: 'applierIdCard',
    label: '身份证号',
    placeholder: '请输入身份证号码',
    value: '11',
    valueView: '22',
    rules: [{
      required: true,
      errmsg: '请输入投保人身份证'
    }, {
      idCard: true,
      errmsg: '请输入正确的身份证'
    }]
  }, {
    name: 'applierMobile',
    label: '手机号码',
    placeholder: '请输入手机号码',
    value: '',
    rules: [{
      required: true,
      errmsg: '请输入投保人手机号'
    }, {
      phone: true,
      errmsg: '请输入正确的手机号'
    }]
  }, {
    name: 'applierEmail',
    label: '邮箱',
    placeholder: '请输入邮箱',
    value: '',
    rules: [{
      required: true,
      errmsg: '请输入邮箱'
    }, {
      email: true,
      errmsg: '请输入正确的邮箱'
    }],
  }, {
    name: 'applierdesc',
    label: '投保人性格爱好',
    placeholder: '最多填写30个字',
    rightType: 'textarea',
    maxlength: 30,
    value: '',
    rules: [{
      required: true,
      errmsg: '请输入您的喜好，至少30个字'
    }, {
      custom: /^([\u4e00-\u9fa50-9A-Za-z\-_()]{10,})$/, // 自定义规则校验
      errmsg: '不可少于10个字'
    }]
  }, {
    name: 'relType',
    label: '为谁投保',
    rightType: 'selectButton', // 右侧选项类型，如果是非input, 必填
    list: relTypeList, // 选项列表
    raValue: [1], // 初始化时默认选中的选项
  }, {
    name: 'insuranceNums',
    label: '投保份数',
    rightType: 'numInput', // 右侧选项类型，如果是非input, 必填
    minNum: 1,
    maxNum: 3,
    value: 1
  }, {
    name: 'applierDepositBank',
    label: '银行',
    placeholder: '请选择银行卡开户行',
    value: '',
    valueView: '',
    disabled: true, // input 框不可点击
    rules: [{
      required: true,
      errmsg: '请选择银行卡开户行'
    }],
    btn: () => { // 最右侧按钮（如果input可点击，热区只有按钮处，如果input框不可点，热区为整个input 部分）
      return `<button class="form-down"></button>`
    }
  }, {
    name: 'severeDisease',
    label: '重疾受益人',
    value: '被保人本人',
    disabled: true
  }, {
    name: 'death',
    label: '身故受益人',
    value: '法定受益人',
    disabled: true,
    hideLine: true // 隐藏下边框
  }, {
    label: '满期返还保费',
    riskDescShow: true,
    riskDesc: [
      {
        name: '标题',
        value: '备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注'
      },
      {
        name: '标题2',
        // 必须是span要不有问题
        value: '<span>备注备注备注</span>'
      }
    ],
  }]
}