页面渲染

简单页面

<?php 
namespace app\hello\view\layout;
use think\facade\Db;
use think\facade\Request;
class hello
{
    public $info = array(
        'open'=>1,
        'name'=>'测试页面',
        'url'=>'/pages/mi/index?id=hello',
    );
    // 获取布局数据
    public function layout()
    {
        $data = array(
            'zhuti'=>'#1a73e8',//主题
            'title'=>'测试页面',//标题
            'style'=>'padding: 10px;',//全局样式
            'dataStyle'=>'',//全局下级样式
            'dataModel'=>array(
                'm'=>'值'
            ),//字段表单
            'data'=>array(
                //布局开始
            )    
        );
        return array('code' => 1, 'msg' => '加载成功', 'data' => $data, 'jiazai' => false,'shuaxin' => false, 'scroll'=>0.01);
    }
}  
/*
jiazai = true加载更多开启fasle关闭 page分页
scroll 滚动位置
shuaxin true关闭返回加载刷新页面false默认
*/

布局开始

签名画布 - pad

array(
    'type'=>'pad',//类型
    'model'=>'pads',//dataModel里面的表单
    'style' => 'background-color: #ffffff;padding: 10px;border-radius: 10px;',//样式
    'width' => '300',//画布宽度
    'height' => '150',//画布高度
    'color' => '#ff0000',//画笔颜色
    'strokeWidth' => '4',//画笔宽度
),
//提交得到$post['data']['pads'] = 'data:image/png;base64,iVBOR.......png图片base64地址'

通用页面 - html

//案例
array(
    'type'=>'html',
    'style'=>'margin-bottom: 20px;position: relative;z-index: 1;',
    'listsStyle'=>'',
    'lists'=>array(
        array(
            'url'=>'/pages/mi/index?id=search',
            'type'=>'navigateTo',
            'style'=>'background-color: #fff; border-radius: 12px; padding: 15px;',
            'content'=>'<div style="padding: 15px;">我是内容</div>'
        )
    )
),

//案例
array(
    'type'=>'html',
    'style'=>'margin-bottom: 20px;position: relative;z-index: 1;',
    'listsStyle'=>'',
    'lists'=>array(
        array(
            'url'=>'/pages/mi/index?id=search',
            'type'=>'navigateTo',
            'style'=>'background-color: #fff; border-radius: 12px; padding: 15px;',
            'content'=>'<div style="padding: 15px;">我是内容</div>'
        )
    )
),

//案例
array(
    'type'=>'html',
    'style'=>'margin-bottom: 20px;position: relative;z-index: 1;',
    'listsStyle'=>'',
    'lists'=>array(
        array(
            'url'=>'/pages/mi/index',
            'type'=>'navigateTo',
            'style'=>'background-color: #fff; border-radius: 12px; padding: 15px;',
            'content'=>'<div style="padding: 15px;">我是内容</div>',
            // 下级
            'listsStyle'=>'',
            'lists'=>array(
                array(
                    'url'=>'/pages/mi/index',
                    'type'=>'navigateTo',
                    'style'=>'background-color: #fff; border-radius: 12px; padding: 15px;',
                    'content'=>'<div style="padding: 15px;">我是内容</div>',
                )
            )
        )
    )
),

//案例
array(
    'type'=>'html',
    'style'=>'margin-bottom: 20px;position: relative;z-index: 1;',
    'listsStyle'=>'',
    'lists'=>array(
        array(
            'url'=>'/pages/mi/index',
            'type'=>'navigateTo',
            'style'=>'background-color: #fff; border-radius: 12px; padding: 15px;',
            'content'=>'<div style="padding: 15px;">我是内容</div>',
            // 图片展示
            'imgStyle'=>'border-radius: 12px;display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;margin-top: 20px;',
            'img'=>array(
                array(
                    'style'=>'width: 100%;height: 100px;border-radius: 12px;',
                    'url'=>false,
                    'type'=>'',
                    'mode'=>'aspectFill',
                    'src'=> CheckUrl('图片地址'),
                ),
                array(
                    'style'=>'width: 100%;height: 100px;border-radius: 12px;',
                    'url'=>false,
                    'type'=>'',
                    'mode'=>'aspectFill',
                    'src'=> CheckUrl('图片地址'),
                ),
            ),
        )
    )
),

一张图片 - image

array(
    'type'=>'image',
    'style'=>'',//样式
    'mode'=>'scaleToFill',//参考https://uniapp.dcloud.net.cn/component/image.html的mode
    'longpress'=>true,//长按保存
    'src'=> CheckUrl('图片地址'),
),

轮播图 - swiper

array(
    'type'=>'swiper',
    'style'=>'margin: 0 0 20px 0;',
    'listStyle'=>'height: 150px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
    'list'=>array(
        array(
            'style'=>'width:100%; height:100%;',
            'url'=>$vo['url'],
            'type'=>$vo['type'],
            'mode'=>'aspectFill',
            'pic'=> CheckUrl($vo['pic']),
        ),
        array(
            'style'=>'width:100%; height:100%;',
            'url'=>$vo['url'],
            'type'=>$vo['type'],
            'mode'=>'aspectFill',
            'pic'=> CheckUrl($vo['pic']),
        ),
    ),
)

表单开始input

https://www.mifenlei.com/docultra/itemnAj6idRSWcwJDjgA.html

数据渲染原型

https://www.mifenlei.com/docultra/itemmvBsrLQltNaqibUS.html

案例展示

<?php
namespace view\app\layout;
use think\facade\Db;
use think\facade\Request;

class userKefu
{
    public $info = array(
        'open' => 1,
        'name' => '官方客服',
        'url' => '/pages/mi/index?id=userKefu',
        'set' => array(
            'desc' => array(
                'title' => '服务介绍',
                'type' => '文本域',
                'value' => '有任何问题请随时联系我们',
            ),
            'phone' => array(
                'title' => '电话',
                'type' => '输入框',
                'value' => '10086',
            ),
            'weixin' => array(
                'title' => '微信二维码',
                'type' => '附件',
                'value' => '/view/public/img/wxma.jpg',
            ),
        ),
    );

    public function layout()
    {
        $data = array(
            'zhuti' => '#6c5ce7',
            'title' => '官方客服',
            'style' => 'padding: 20px;',
            'dataStyle' => '',
            'dataModel' => array(),
            'data' => array(
                // 顶部欢迎卡片
                array(
                    'type' => 'html',
                    'style' => 'margin-bottom: 20px;',
                    'lists' => array(
                        array(
                            'style' => 'background: white; border-radius: 20px; padding: 30px; box-shadow: 0 12px 30px rgba(74,139,245,0.15);',
                            'content' => '<div style="text-align: center;">
                                <div style="width: 80px; height: 80px; background: linear-gradient(45deg, #4a8bf5, #6c5ce7); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;">
                                    <img src="'.CheckUrl('/view/public/svg/userKefu.svg?v1748356930').'" style="width: 40px; height: 40px; filter: brightness(0) invert(1);">
                                </div>
                                <div style="font-size: 24px; font-weight: 700; color: #2d3436; margin-bottom: 10px;">24小时为您服务</div>
                                <div style="color: #666; line-height: 1.6;">'.Vset('desc','userKefu').'</div>
                            </div>'
                        )
                    )
                ),

                // 联系通道
                array(
                    'type' => 'html',
                    'style' => '',
                    'listsStyle' => 'display: grid; gap: 15px;',
                    'lists' => array(
                        $this->contactCard('电话咨询', '#4a8bf5', '/view/public/svg/dianhuas.svg?v1748357227', Vset('phone','userKefu'), Vset('phone','userKefu'),'tel'),
                        $this->contactCard('微信客服', '#00c853', '/view/public/svg/weixin.svg?v1748356930', '微信扫码添加', [CheckUrl(Vset('weixin','userKefu'))],'previewImage')
                    )
                ),
            ),
        );
        return json(array('code' => 1, 'msg' => '加载成功', 'data' => $data, 'scroll'=>0.01));
    }

    // 联系卡片生成器
    private function contactCard($title, $color, $pic, $desc, $url, $type)
    {
        return array(
            'style' => 'background: white; border-radius: 15px; padding: 20px; box-shadow: rgba(74, 139, 245, 0.15) 0px 12px 30px;position: relative;',
            'url' => $url,
            'type' => $type,
            'content' => '<div style="display: flex; align-items: center; gap: 15px;">
                <div style="width: 50px; height: 50px; background: '.$color.'10; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                    <img src="'.CheckUrl($pic).'" style="width: 28px; height: 28px; filter: hue-rotate(0deg);">
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 16px; font-weight: 600; color: #2d3436; margin-bottom: 4px;">'.$title.'</div>
                    <div style="font-size: 14px; color: '.$color.';">'.$desc.'</div>
                </div>
                <img src="'.CheckUrl('/view/public/svg/youjiantou.svg?v1748356930').'" style="width: 16px; height: 16px; opacity: 0.6;">
                <div style="position: absolute; inset: 0px; z-index: 1;"></div>
            </div>'
        );
    }
}