表单类型

一个简单的案例

$data = array(
    'zhuti'=>'',//主题的背景样式
    'title'=>'标题',
    'style'=>'padding: 20px;',//页面的容器配置
    'dataStyle'=>'',//页面的模块通用配置
    'dataModel'=>array(//表单的字段对应下方的model
        'username'=>'我是默认值',
        'phone'=>'我是默认值',
    ),
    'data'=>array(
        array(
            'type'=>'input',//类型
            'style'=>'padding: 15px;background-color: rgba(255, 255, 255, 0.75);border-radius: 10px;position: relative;z-index: 9;display: grid;gap: 10px;',//样式
            'listStyle'=>'display: grid;gap: 10px;grid-template-columns: 1fr 3fr;border-radius: 10px;background-color: white;padding: 15px;color: #656565;position: relative;',//列表样式
            'list'=>array(
                array(
                    'style' =>'',//当前样式
                    'type' => 'text',
                    'model'=>'username',
                    'maxlength'=>'11',
                    'placeholder'=>'联系人',
                    'disabled'=>false,
                    'contentStyle'=>'color: #797979;',//content的外部样式
                    'content' => '联系人'
                ),
                array(
                    'style' =>'',
                    'type' => 'text',
                    'model'=>'phone',
                    'maxlength'=>'11',
                    'placeholder'=>'请填写联系电话',
                    'disabled'=>true,
                    'contentStyle'=>'color: #797979;',
                    'content' => '联系电话'
                ),
            )
        ),
        array(
            'type'=>'html',
            'style'=>'height: 84px;',
        ),
        array(
            'type'=>'html',
            'style'=>'padding: 15px;background-color: white;position: fixed;left: 0;bottom: 0;right: 0;z-index: 99;',
            'listStyle'=>'',
            'list'=>array(
                array(
                    'url' => '/index.php/api/GetAjax?method=edit&id=userAe',
                    'type' => 'getAdd',
                    'content'=> '<div style="background-color: #007aff; color: #fff; text-align: center; padding: 15px; border-radius: 30px; font-size: 18px; font-weight: bold;box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(0, 0, 0, 0.1) 0px -5px 10px 0px inset, rgba(255, 255, 255, 0.2) 0px 5px 10px 0px inset;">
                        提交表单
                    </div>',
                ),
            ),
        ),
    ),
);

dataModel是字段提交的如果有表单必须有

表单类型input

输入框

array(
    'style' =>'',//当前样式
    'type' => 'text',//类型
    'model'=>'username',//字段
    'maxlength'=>'11',//输入长度
    'placeholder'=>'联系人',
    'disabled'=>false,//是否禁止输入
    'contentStyle'=>'color: #797979;',//content的外部样式
    'content' => '联系人'
),

参考原型源代码

<view v-else>
    <input
        :style="html.style" 
        :type="html.type" 
        :focus="html.focus"
        :auto-focus="html.autoFocus"
        :confirm-type="html.confirmType"
        :adjust-position="html.adjustPosition"
        :disabled="html.disabled" 
        v-model="list.dataModel[html.model]" 
        :maxlength="html.maxlength" 
        :confirm-hold="html.confirmHold"
        :cursor="html.cursor"
        :selection-start="html.selectionStart"
        :selection-end="html.selectionEnd"
        :placeholder="html.placeholder"/>
</view>

type类型

text - 文本输入键盘
number - 数字输入键盘 均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。
idcard - 身份证输入键盘 微信、支付宝、百度、QQ小程序、快手小程序、京东小程序
digit - 带小数点的数字键盘 均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）。
tel - 电话输入键盘
safe-password - 密码安全输入键盘 微信小程序
nickname - 昵称输入键盘 微信小程序

文本域

array(
    'style' =>'width: 100%;',
    'type' => 'textarea',
    'model'=>'content',
    'maxlength'=>'1000',
    'placeholder'=>'详细内容',
),

参考原型源代码

<textarea 
    :style="html.style" 
    :disabled="html.disabled" 
    :placeholder="html.placeholder" 
    v-model="list.dataModel[html.model]" 
    :focus="html.focus"
    :auto-focus="html.autoFocus"
    :confirm-type="html.confirmType"
    :adjust-position="html.adjustPosition"
    :auto-height="html.autoHeight"
    :confirm-hold="html.confirmHold"
    :cursor="html.cursor"
    :selection-start="html.selectionStart"
    :selection-end="html.selectionEnd"
    :maxlength="html.maxlength">
</textarea>

上传图片批量

array(
    'type'=>'img',//类型
    'style'=>'padding: 15px;background-color: rgba(255, 255, 255, 0.75);border-radius: 10px;margin-bottom: 10px;',
    'model' => 'pic',
    'n' => 9,//张数
),

dataModel

'pic'=>json_decode(dingyi($t['pic'],'[]'),true),//图片[]

多选

array(
    'style' =>'overflow: auto;display: block;',
    'type' =>'checkbox',
    'model'=> '字段',
    'content' =>'，内容',
    'contentStyle' =>'color: rgb(185 183 183);font-size: 12px;margin-bottom: 10px;',
    'itemStyle' =>'float: left;margin-right: 10px;',
    'labelStyle' =>'font-size: 28rpx;',
    'list'=>array_map(function($v) { return ['id' => trim($v), 'name' => trim($v)]; }, explode(NEWLINE, $vo['config'])),//数据
)

list数据

array(
    array(
        'id' =>'我是一个选择',
        'name' =>'我是一个选择',
    ),
    array(
        'id' =>'我是一个选择',
        'name' =>'我是一个选择',
    ),
)

单选

array(
    'style' =>'',
    'type' => 'picker',
    'mode' => 'selector',
    'model'=>'字段',
    'tips'=>'请选择',
    'contentStyle'=>'color: rgb(185 183 183);font-size: 12px;margin-bottom: 10px;',
    'content' => '内容',
    'tipsStyle'=>'',
    'list'=>array_map(function($v) { return ['id' => trim($v), 'name' => trim($v)]; }, explode(NEWLINE, $vo['config'])),//数据
)

list数据

array(
    array(
        'id' =>'我是一个选择',
        'name' =>'我是一个选择',
    ),
    array(
        'id' =>'我是一个选择',
        'name' =>'我是一个选择',
    ),
)

时间

array(
    'style' => 'color: #333;',
    'type' => 'pickerTime',
    'model' => $vo['ziduan'],
    'mode' => 'date',
    'start' => '1964-01-01',
    'end' => '2048-01-01',
    'tips' => '请选择日期',
    'contentStyle'=>'color: rgb(185 183 183);font-size: 12px;margin-bottom: 10px;',
    'content' => $vo['name'],
)

上传单张图片

array(
    'style' => 'color: #333;',
    'type' => 'upimg',
    'model' => $vo['ziduan'],
    'styleImg'=>'width: 100%;height: 200rpx;border-radius: 10px;',
    'btnStyle'=>'background-color: rgb(0 122 255);color: white;z-index: 9;padding: 0.625rem;border: 0.0625rem dashed #e6e6e6;border-radius: 0.5rem;text-align: center;font-size: 0.875rem;',
    'btn' => '上传图片',
    'contentStyle'=>'color: rgb(185 183 183);font-size: 12px;margin-bottom: 10px;',
    'content' => $vo['name'],
) 

上传视频

array(
    'style' =>'',
    'type' => 'video',
    'model'=>$vo['ziduan'],
    'contentStyle'=>'font-size: 28rpx; color: #333;',
    'previewStyle'=>'height: 300rpx;', // 预览视频高度
    'contentStyle'=>'color: rgb(185 183 183);font-size: 12px;margin-bottom: 10px;',
    'content' => $vo['name'],
    'btn' =>'<div style="color: #007AFF;">+ 点击上传视频</div>', // 上传按钮文案
    'tipsStyle' => '', // 提示样式
    'tips' => '', // 提示
)

二维选择

array(
    'type' => 'pickerTwo',
    'contentStyle'=>'color: rgb(185 183 183);font-size: 12px;margin-bottom: 10px;',
    'content' => '地区',
    'style' => 'width:100%;',
    'tips' => '请选择地区',
    'model' => 'diqu_id',//{"first": "1","second": "20","firstName": "北京","secondName": "海淀区"}
    'range' => getRegionTree($diqu['id'])
)

dataModel

'diqu_id'=>array(
    'first'=>$first['id'],
    'firstName'=>$first['name'],
    'second'=>$second['id'],
    'secondName'=>$second['name'],
),//地区编号{"first": "1","second": "20","firstName": "北京","secondName": "海淀区"}