ThinkAdmin/app/wechat/view/keys/form.html

<style>
    .keys-container .layui-card {
        width: 580px;
        height: 578px;
    }

    .keys-container .layui-card .layui-card-body {
        height: 495px;
    }

    .keys-container .layui-card .layui-card-body [data-tips-image] {
        width: 112px;
        height: auto
    }

    .keys-container .layui-card .layui-card-body .layui-form-label {
        width: 60px;
        color: #6c6c6c;
        font-weight: 700;
    }

    .keys-container .layui-card .layui-card-body .layui-form-label + .layui-input-block {
        margin-left: 100px;
    }
</style>

<div class="nowrap padding-10">
    <div class='mobile-preview inline-block'>
        <div class='mobile-header'>公众号</div>
        <div class='mobile-body' data-iframe-box></div>
    </div>
    <div class="keys-container inline-block absolute margin-left-10 margin-right-15">
        <form action="{:request()->url()}" method="post" data-auto="true" class="layui-form layui-card">
            <div class="layui-card relative shadow-none">
                <div class="layui-card-header layui-bg-gray text-center">编辑关键字</div>
                <div class="layui-card-body">
                    <!--{if !isset($vo.keys) or ($vo.keys neq 'default' and $vo.keys neq 'subscribe')}-->
                    <div class="layui-form-item margin-top-10">
                        <label class="layui-form-label">关&ensp;键&ensp;字</label>
                        <div class="layui-input-block">
                            <input required vali-name="关键字" placeholder='请输入关键字' maxlength='20' name='keys' class="layui-input" value='{$vo.keys|default=""}'>
                        </div>
                    </div>
                    <!--{else}-->
                    <input type="hidden" name="keys" value="{$vo.keys|default=''}">
                    <!--{/if}-->
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required">规则状态</label>
                        <div class="layui-input-block">
                            <div class="layui-input help-checks">
                                {foreach ['1'=>'启用','0'=>'禁用'] as $k=>$v}
                                <label class="think-radio">
                                    <!--{if (!isset($vo.status) and $k eq '1') or (isset($vo.status) and $vo.status eq $k)}-->
                                    <input type="radio" checked name="status" value="{$k}" lay-ignore> {$v}
                                    <!--{else}-->
                                    <input type="radio" name="status" value="{$k}" lay-ignore> {$v}
                                    <!--{/if}-->
                                </label>
                                {/foreach}
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label label-required">消息类型</label>
                        <div class="layui-input-block" style="white-space:normal">
                            <div class="layui-textarea help-checks">
                                {foreach $types as $k=>$v}
                                <label class="think-radio">
                                    <!--{if (!isset($vo.type) and $k eq 'text') or (isset($vo.type) and$vo.type eq $k)}-->
                                    <input name="type" checked type="radio" value="{$k}" lay-ignore> {$v}
                                    <!--{else}-->
                                    <input name="type" type="radio" value="{$k}" lay-ignore> {$v}
                                    <!--{/if}-->
                                </label>
                                {/foreach}
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='text'>
                        <label class="layui-form-label">回复文字</label>
                        <div class="layui-input-block">
                            <textarea name="content" required vali-name="回复文字" placeholder="请输入回复文字" maxlength="10000" class="layui-textarea">{$vo.content|raw|default='说点什么吧'}</textarea>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='news'>
                        <label class="layui-form-label label-required">选取图文</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="news_id" value="{$vo.news_id|default=0}">
                            <a class="layui-btn layui-btn-sm layui-btn-primary" data-title="选择图文" data-iframe="{:url('news/select')}?field={:encode('news_id')}">选择图文</a>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='image'>
                        <label class="layui-form-label label-required">图片地址</label>
                        <div class="layui-input-block">
                            <input class="layui-input padding-right-30" onchange="$(this).nextAll('img').attr('src', this.value)" value="{$vo.image_url|default=$defaultImage}" name="image_url" required vali-name="图片链接" placeholder="请上传图片或输入图片URL地址　　">
                            <a data-file="btn" data-type="bmp,png,jpeg,jpg,gif" data-field="image_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
                            <p class="help-block">文件最大2Mb，支持bmp/png/jpeg/jpg/gif格式</p>
                            <img data-tips-image src='{$vo.image_url|default=$defaultImage}' alt="img">
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='voice'>
                        <label class="layui-form-label">上传语音</label>
                        <div class="layui-input-block">
                            <input class='layui-input padding-right-30' value="{$vo.voice_url|default=''}" name="voice_url" required vali-name="语音链接" placeholder="请上传语音文件或输入语音URL地址　　">
                            <a data-file="btn" data-type="mp3,wma,wav,amr" data-field="voice_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
                            <p class="help-block">文件最大2Mb，播放长度不超过60s，mp3/wma/wav/amr格式</p>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label">音乐标题</label>
                        <div class="layui-input-block">
                            <input class='layui-input' value="{$vo.music_title|default='音乐标题'}" name="music_title" required vali-name="音乐标题" placeholder="请输入音乐标题">
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label label-required">上传音乐</label>
                        <div class="layui-input-block">
                            <input class='layui-input padding-right-30' value="{$vo.music_url|default=''}" name="music_url" required vali-name="音乐链接" placeholder="请上传音乐文件或输入音乐URL地址　　">
                            <a data-file="btn" data-type="mp3,wma,wav,amr" data-field="music_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label">音乐描述</label>
                        <div class="layui-input-block">
                            <input name="music_desc" class="layui-input" value="{$vo.music_desc|default='音乐描述'|raw}">
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label">音乐图片</label>
                        <div class="layui-input-block">
                            <input class="layui-input padding-right-30" value="{$vo.music_image|default=$defaultImage}" name="music_image" required vali-name="图片链接" placeholder="请上传音乐图片或输入音乐图片URL地址　　">
                            <a data-file="btn" data-type="jpg,png" data-field="music_image" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
                            <p class="help-block">文件最大64KB，只支持JPG格式</p>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='video'>
                        <label class="layui-form-label">视频标题</label>
                        <div class="layui-input-block">
                            <input class='layui-input' value="{$vo.video_title|default='视频标题'}" name="video_title" required vali-name="视频标题" placeholder="请输入视频标题">
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='video'>
                        <label class="layui-form-label">上传视频</label>
                        <div class="layui-input-block">
                            <input class='layui-input padding-right-30' value="{$vo.video_url|default=''}" name="video_url" required vali-name="视频链接" placeholder="请上传视频或输入视频URL地址　　">
                            <a data-file="btn" data-type="mp4" data-field="video_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
                            <p class="help-block">文件最大10MB，只支持MP4格式</p>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='video'>
                        <label class="layui-form-label">视频描述</label>
                        <div class="layui-input-block">
                            <input value="{$vo.video_desc|default='视频描述'}" name="video_desc" maxlength="50" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center absolute full-width" style="bottom:0">
                <div class="hr-line-dashed margin-bottom-10"></div>
                {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'>{/if}
                {if isset($vo['code'])}<input type='hidden' value='{$vo.code}' name='code'>{/if}
                <button class="layui-btn menu-submit">保存数据</button>
                <button data-close data-confirm="确定要取消编辑吗？" class="layui-btn layui-btn-danger" type='button'>取消编辑</button>
            </div>
        </form>
    </div>
</div>

<script>
    $(function () {

        /*! 刷新预览显示 */
        function showReview(params, location) {
            if (params['type'] === 'news') {
                location = '{:url("api.view/news")}?id=_id_'.replace('_id_', params.content);
            } else {
                location = '{:url("api.view/_type_")}?'.replace('_type_', params.type) + $.param(params || {});
            }
            var iframe = '<iframe id="phone-preview" frameborder="0" marginheight="0" marginwidth="0"></iframe>';
            $('[data-iframe-box]').empty().append($(iframe).attr('src', location));
        }

        $('body').off('change', '[name="news_id"]').on('change', '[name="news_id"]', function () {
            /*! 图文显示预览 */
            showReview({type: 'news', content: this.value});
        }).off('change', '[name="content"]').on('change', '[name="content"]', function () {
            /*! 文字显示预览 */
            showReview({type: 'text', content: this.value});
        }).off('change', '[name="image_url"]').on('change', '[name="image_url"]', function () {
            /*! 图片显示预览 */
            showReview({type: 'image', content: this.value});
        }).off('change', '[name="voice_url"]').on('change', '[name="voice_url"]', function () {
            /*! 语音显示预览 */
            showReview({type: 'voice', content: this.value});
        });

        /*! 音乐显示预览 */
        var musicSelector = '[name="music_url"],[name="music_title"],[name="music_desc"],[name="music_image"]';
        $('body').off('change', musicSelector).on('change', musicSelector, function () {
            var params = {type: 'music'}, $parent = $(this).parents('form');
            params.url = $parent.find('[name="music_url"]').val();
            params.desc = $parent.find('[name="music_desc"]').val();
            params.title = $parent.find('[name="music_title"]').val();
            params.image = $parent.find('[name="music_image"]').val();
            showReview(params);
        });

        /*! 视频显示预览 */
        var videoSelector = '[name="video_title"],[name="video_url"],[name="video_desc"]';
        $('body').off('change', videoSelector).on('change', videoSelector, function () {
            var params = {type: 'video'}, $parent = $(this).parents('form');
            params.url = $parent.find('[name="video_url"]').val();
            params.desc = $parent.find('[name="video_desc"]').val();
            params.title = $parent.find('[name="video_title"]').val();
            showReview(params);
        });

        /*! 默认类型事件 */
        $('body').off('click', 'input[name=type]').on('click', 'input[name=type]', function () {
            var value = $(this).val(), $form = $(this).parents('form');
            if (value === 'customservice') value = 'text';
            var $current = $form.find('[data-keys-type="' + value + '"]').removeClass('layui-hide');
            $form.find('[data-keys-type]').not($current).addClass('layui-hide');
            switch (value) {
                case 'news':
                    return $('[name="news_id"]').trigger('change');
                case 'text':
                case 'customservice':
                    return $('[name="content"]').trigger('change');
                case 'image':
                    return $('[name="image_url"]').trigger('change');
                case 'video':
                    return $('[name="video_url"]').trigger('change');
                case 'music':
                    return $('[name="music_url"]').trigger('change');
                case 'voice':
                    return $('[name="voice_url"]').trigger('change');
            }
        });

        /*! 默认事件触发 */
        $('input[name=type]:checked').map(function () {
            $(this).trigger('click');
        });
    });
</script>