前端组件

面包屑导航

@include('components.breadcrumb',['menus'=>['微信普通文本消息'=>'#']])

图片上传

使用 uploadImage 函数上传图片，参数为input表单的name值。

<div class="form-group">
    <label>图片上传</label>
    <div class="input-group mb-1">
        <input type="text" class="form-control" name="icon" value="">
        <div class="input-group-append">
        <button class="btn btn-outline-secondary" onclick="uploadImage('icon')" type="button">
            选择图标
        </button>
        </div>
    </div>
    <img class="img-thumbnail d-block" src="">
</div>

文件上传

使用 uploadFile 函数上传文件，参数1为input表单的name值，参数2为上传类型（不设置时使用系统配置项）

<div class="form-group">
    <label>文件上传</label>
    <div class="input-group mb-1">
        <input type="text" class="form-control" name="icon" value="">
        <div class="input-group-append">
        <button class="btn btn-outline-secondary" onclick="uploadFile('icon')" type="button">
            选择文件
        </button>
        </div>
    </div>
</div>

删除数据

用于触发删除资源使用的前端函数

/**
 * 删除事件
 * @param bt 按钮
 * @param message 提示消息
 */
function destroy(bt, message) {

使用代码如下，注意 form 必须在按钮前面

<form action="{{route('site.chat.destroy',[$site,$chat])}}" method="post">
    @csrf @method('DELETE')
</form>
<button type="button" onclick="destroy(this,'确定删除 {{$chat['name']}} 公众号吗？')">
    删除公众号
</button>

发送验证码

使用 send_code 用来发送验证码，参数一为按钮参数二为表单。

<div class="form-group">
    <label>验证码</label>
    <div class="input-group mb-3">
        <input type="text" class="form-control" name="code" placeholder="请输入验证码">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="sendCode">
                发送验证码
            </button>
        </div>
    </div>
    <script>
        send_code("#sendCode",'[name="username"]');
    </script>
</div>

会员信息

显示会员个人信息的部件，提供了几种展示效果，根据需要选择合适的，或二次进行开发。

效果一

@include('components.user',['user'=>$user])

效果二

@include('components.user',['user'=>$user])