荔枝发卡系统如何自定义扩展信息

在荔枝发卡系统中,添加商品中有一个“扩展信息”功能,这是一个非常强大的功能,下面即将介绍的就是该功能的使用方法。

该功能是做什么的?有时候我们需要用户在购买时输入其他信息,但系统并没有提供这样的输入框,那么我们要如何让系统能够支持呢?那么这个功能就是为了满足你这个需求的。
下方所有组件都可以重复使用,显示顺序就是你使用代码的放置顺序
推荐使用notepad++编辑器进行编辑

组件支持列表

  • name:代表当前英文名称(禁止使用:pass、contact、num、payId、device、voucher、commodityId,因为这些已经被系统使用了,所以你不能再使用了。)
  • title:代表当前中文名称,如:账号密码
  • type:代表当前输入类型,当前支持:text(文本框)、password(密码输入框)、textarea(多行文本框)、select(下拉选择框)、radio(单选框)、checkbox(多选框/复选框)
  • required:如果为0,代表可以为空,如果为1,代表不能为空,用户提交时服务端会自动检测。
  • tips:输入框或下拉框提示,比如:请输入账号密码、请选择类型
  • regx:正则验证,如果不懂什么是正则,请先学习后再使用该参数,可为空
  • error:正则验证失败,返回给用户看的信息,比如:账号密码格式不正确
  • height:textarea(多行文本框)专用,其他不能使用
  • contents:elect(下拉选择框)、radio(单选框)、checkbox(多选框/复选框)专用,其他不能使用
  • default:默认值,所有组件都可以使用,但部分使用方法略有不同,会在下方演示中进行详细说明

文本框(text)-使用方法

[
   {
        "name": "username",
        "regx": "[1-9]{1}[0-9]{4,11}",
        "tips": "请输入XX用户名称",
        "type": "text",
        "error": "用户名称格式输入错误,只能是5-11位纯数字",
        "title": "用户名称",
        "required": 1
    }
]

将上方代码复制到你的扩展信息里面,保存商品后,在前台就可以得出下方效果:

密码框(password)-使用方法

[
   {
        "name": "username",
        "regx": "[1-9]{1}[0-9]{4,11}",
        "tips": "请输入XX用户名称",
        "type": "text",
        "error": "用户名称格式输入错误,只能是5-11位纯数字",
        "title": "用户名称",
        "required": 1
    },
    {
        "name": "password",
        "regx": "^[A-Za-z0-9]{8,20}$",
        "tips": "请输入XX用户密码",
        "type": "password",
        "error": "用户密码格式错误,只能是8-20位字母+数字",
        "title": "用户密码",
        "required": 1
    }
]

如果一次性使用多个组件,需要使用英文逗号隔开:",",上方代码效果如下:

多行文本框(textarea)-使用方法

[
   {
        "name": "username",
        "regx": "[1-9]{1}[0-9]{4,11}",
        "tips": "请输入XX用户名称",
        "type": "text",
        "error": "用户名称格式输入错误,只能是5-11位纯数字",
        "title": "用户名称",
        "required": 1
    },
    {
        "name": "password",
        "regx": "^[A-Za-z0-9]{8,20}$",
        "tips": "请输入XX用户密码",
        "type": "password",
        "error": "用户密码格式错误,只能是8-20位字母+数字",
        "title": "用户密码",
        "required": 1
    },
    {
        "name": "cert",
        "regx": "",
        "tips": "请将您的授权证书粘贴至这里,如果没有可不填写",
        "type": "textarea",
        "error": "",
        "title": "证书内容",
        "height": 100,
        "required": 0
    }
]

下拉选择框(select)-使用方法

[
   {
        "name": "username",
        "regx": "[1-9]{1}[0-9]{4,11}",
        "tips": "请输入XX用户名称",
        "type": "text",
        "error": "用户名称格式输入错误,只能是5-11位纯数字",
        "title": "用户名称",
        "required": 1
    },
    {
        "name": "password",
        "regx": "^[A-Za-z0-9]{8,20}$",
        "tips": "请输入XX用户密码",
        "type": "password",
        "error": "用户密码格式错误,只能是8-20位字母+数字",
        "title": "用户密码",
        "required": 1
    },
    {
        "name": "cert",
        "regx": "",
        "tips": "请将您的授权证书粘贴至这里,如果没有可不填写",
        "type": "textarea",
        "error": "",
        "title": "证书内容",
        "height": 100,
        "required": 0
    },
    {
        "name": "userType",
        "tips": "请选择用户类型",
        "type": "select",
        "error": "",
        "title": "用户类型",
        "default": "个人",
        "contents": {
            "企业": "企业用户",
            "个人": "个人用户",
            "学生": "学生用户"
        },
        "required": 1
    }
]

上方值得注意的是contents中的两边数据对应,前方的显示给后台看的的,后方的显示给前台客户看的的,default默认选中的选项,必须是前面的值,否则无法自动默认选中,效果如下:

单选框(radio)-使用方法

[
   {
        "name": "username",
        "regx": "[1-9]{1}[0-9]{4,11}",
        "tips": "请输入XX用户名称",
        "type": "text",
        "error": "用户名称格式输入错误,只能是5-11位纯数字",
        "title": "用户名称",
        "required": 1
    },
    {
        "name": "password",
        "regx": "^[A-Za-z0-9]{8,20}$",
        "tips": "请输入XX用户密码",
        "type": "password",
        "error": "用户密码格式错误,只能是8-20位字母+数字",
        "title": "用户密码",
        "required": 1
    },
    {
        "name": "cert",
        "regx": "",
        "tips": "请将您的授权证书粘贴至这里,如果没有可不填写",
        "type": "textarea",
        "error": "",
        "title": "证书内容",
        "height": 100,
        "required": 0
    },
    {
        "name": "userType",
        "tips": "请选择用户类型",
        "type": "select",
        "error": "",
        "title": "用户类型",
        "default": "个人",
        "contents": {
            "企业": "企业用户",
            "个人": "个人用户",
            "学生": "学生用户"
        },
        "required": 1
    },
    {
        "name": "sex",
        "type": "radio",
        "error": "",
        "title": "选择性别",
        "default": "保密",
        "contents": {
            "女": "女",
            "男": "男",
            "保密": "保密"
        },
        "required": 1
    }
]

多选框/复选框(checkbox)-使用方法

[
   {
        "name": "username",
        "regx": "[1-9]{1}[0-9]{4,11}",
        "tips": "请输入XX用户名称",
        "type": "text",
        "error": "用户名称格式输入错误,只能是5-11位纯数字",
        "title": "用户名称",
        "required": 1
    },
    {
        "name": "password",
        "regx": "^[A-Za-z0-9]{8,20}$",
        "tips": "请输入XX用户密码",
        "type": "password",
        "error": "用户密码格式错误,只能是8-20位字母+数字",
        "title": "用户密码",
        "required": 1
    },
    {
        "name": "cert",
        "regx": "",
        "tips": "请将您的授权证书粘贴至这里,如果没有可不填写",
        "type": "textarea",
        "error": "",
        "title": "证书内容",
        "height": 100,
        "required": 0
    },
    {
        "name": "userType",
        "tips": "请选择用户类型",
        "type": "select",
        "error": "",
        "title": "用户类型",
        "default": "个人",
        "contents": {
            "企业": "企业用户",
            "个人": "个人用户",
            "学生": "学生用户"
        },
        "required": 1
    },
    {
        "name": "sex",
        "type": "radio",
        "error": "",
        "title": "选择性别",
        "default": "保密",
        "contents": {
            "女": "女",
            "男": "男",
            "保密": "保密"
        },
        "required": 1
    },
    {
        "name": "teacher",
        "type": "checkbox",
        "error": "",
        "title": "选择老师",
        "default": [
            "杨老师","麻衣老师"
        ],
        "contents": {
            "杨老师": "杨老师",
            "李老师": "李老师",
            "吴老师": "吴老师",
            "张老师": "张老师",
            "柔伊老师": "柔伊老师",
            "麻衣老师": "麻衣老师"
        },
        "required": 1
    }
]

这里强调default参数,于其他组件的默认参数都不一样,这里需要传多个参数,并且使用[]包起来才可以正常使用,按照上方例子即可,效果如下:

后台查看


点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注