gaoyixia/application/nutrition/view/video_url/form.html

<link rel="stylesheet" href="/static/plugs/layui/css/layui.css"  media="all">
<script src="/static/plugs/layui/layui.all.js" charset="utf-8"></script>

<div class="think-box-shadow">
    <form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>视频编辑</legend>
        </fieldset>
        <div class="layui-card-body  layui-tab-content">

            <div class="layui-form-item">
                <label class="layui-form-label label-required">系列</label>
                <div class="layui-input-block">
                    <input  name="video_id" type="hidden" value='{$video_info.id|default=""}' class="layui-input">
                    <input readonly maxlength="20"  value='{$video_info.title|default=""}' class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label label-required">标题</label>
                <div class="layui-input-block">
                    <input  name="title" value='{$vo.title|default=""}' class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label label-required">简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入简介" maxlength="100" class="layui-textarea" name="desc">{$vo.desc|default=''}</textarea>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label label-required">标签</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入标签" maxlength="100" class="layui-textarea" name="label">{$vo.label|default=''}</textarea>
                    <span >多个用逗号隔开（半角）</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label label-required">关联文章</label>
                <div class="layui-input-inline">
                    <select name="article_id" lay-filter ="article_id">
                        <option value="0">请选择</option>
                        {foreach $article_list as $vk=>$vv}
                        <option  {if isset($vo.article_id) && $vo.article_id == $vv['id'] }selected{/if} data-vl_key="{$vk}" value="{$vv['id']}">{$vv['title']}</option>
                        {/foreach}
                    </select>
                </div>


                <div class="layui-input-inline">
                    <select name="article_item" lay-filter ="article_item">
                        <option value="0">请选择</option>
                        {foreach $article_list as $vk=>$vv}
                        {if isset($vo.article_id) && $vo.article_id == $vv['id'] }
                        {foreach $vv['item_children'] as $cln}
                        <option {if isset($vo.article_item) && $vo.article_item == $cln['id']} selected  {/if} value="{$cln['id']}">{$cln['title']}</option>
                        {/foreach}
                        {/if}
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label ">关联资料</label>
                <div class="layui-input-inline">
                    <select name="datum_id" lay-filter ="datum_id">
                        <option value="0">请选择</option>
                        {foreach $datum_list as $dk=>$dv}
                        <option  {if isset($vo.datum_id) && $vo.datum_id == $dv['id'] }selected{/if} data-dl_key="{$dk}" value="{$dv['id']}">{$dv['title']}</option>
                        {/foreach}
                    </select>
                </div>

                <div class="layui-input-inline">
                    <select name="datum_item" lay-filter ="datum_item">
                        <option value="0">请选择</option>
                        {foreach $datum_list as $vk=>$vv}
                        {if isset($vo.datum_id) && $vo.datum_id == $vv['id'] }
                        {foreach $vv['url_arr'] as $cln}
                        <option {if isset($vo.datum_item) && $vo.datum_item == $cln['id']} selected  {/if} value="{$cln['id']}">{$cln['title']}</option>
                        {/foreach}
                        {/if}
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ">会员账号</label>
                <div class="layui-input-block">
                    <input name="phone"   value='{$vo.phone|default=""}' placeholder="请输入会员会员账号" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label ">播放量</label>
                <div class="layui-input-block">
                    <input name="read_num"   value='{$vo.read_num|default=""}' placeholder="请输入播放量" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label label-required">PPT</label>
                <label class="layui-col-xs10 relative">
                    <label class="layui-col-xs9 think-form-group-left">
                        <input name="ppt" value='{$vo.ppt|default=""}'  readonly placeholder="请上传" class="layui-input">
                    </label>
                    <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传PPT</button>
                </label>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label label-required">视频封面</label>
                <div class="layui-input-block">
                    <input class="cover" name="cover" type="hidden" class="layui-input"  value="{$vo.cover|default=''}">
                </div>
            </div>

            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label label-required">上传类型</label>
                <div class="layui-input-inline">
                    <select name="up_type" lay-filter ="up_type">
                        {foreach [2=>'路径'] as $ck=>$cv}
                        {if !empty($vo.up_type) &&  $vo.up_type == $ck }
                        <option selected data-cl_key="{$ck}" value="{$ck}">{$cv}</option>
                        {else}
                        <option data-cl_key="{$ck}" value="{$ck}">{$cv}</option>
                        {/if}
                        {/foreach}
                    </select>
                </div>
            </div>
<!--
            <div class="layui-form-item up_video">
                <label class="layui-form-label label-required">视频上传</label>
                <div class="layui-input-block">
                    <input class="up_url layui-input" name="up_url" type="hidden"  value="{$vo.url|default=''}">
                </div>
            </div>-->


           <!-- <div class="layui-form-item path" >
                <label class="layui-form-label label-required">视频路径</label>
                <div class="layui-input-block">
                    <input  name="path" class="layui-input"  value="{$vo.url|default=''}" />
                </div>
            </div>-->

            <div class="layui-form-item"  >
                <label class="layui-form-label label-required">云点播ID</label>
                <div class="layui-input-block">
                    <input  name="ali_vid" class="layui-input"  value="{$vo.ali_vid|default=''}" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label label-required">是否VIP</label>
                <div class="layui-input-block">
                    <select class="layui-select" name="is_vip">
                        <option    value="0">否</option>
                        <option   {if !empty($vo.is_vip) &&  $vo.is_vip == 1 }selected{/if}  value="1">是</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label label-required">排序</label>
                <div class="layui-input-block">
                    <input name="sort"  maxlength="20"  value='{$vo.sort|default=""}' class="layui-input">
                </div>
            </div>
            {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
            <div class="layui-form-item text-center">
                <button class="layui-btn" type='submit'>保 存</button>
                <button class="layui-btn layui-btn-danger" type='button' onclick="history.go(-1)" data-close>返回</button>
            </div>
        </div>
    </form>
    <script src="/static/plugs/layui/layui.all.js" charset="utf-8"></script>
    <script>

        window.form.render();
        $('[name="cover"]').uploadOneImage()
        $('[name="up_url"]').uploadOneVideo()
        $(document).on("click",'.video_player',function () {
            vUrl = $(".item_url").val(); //获取到播放的url
            var loadstr = '<video width="100%" height="100%"  controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop">' +
                '<source src='+vUrl+' type="video/mp4"></source></video>';
            layer.open({
                type: 1,
                title: false,
                area: ['730px', '500px'],
                shade: [0.8, 'rgb(14, 16, 22)'],
                skin: 'demo-class',
                content: loadstr
            });
            form.render();
        });
        // 文章监听
        form.on('select(article_id)', function(data){
            var cl_html = '<option value="0">请选择</option>';
            if(data.value == 0) {
                $("select[name='article_item']").html(cl_html);
            }else{
                var vl_key =  data.elem[data.elem.selectedIndex].dataset.vl_key;
                var article_list = {:json_encode($article_list)};
                $.each(article_list[vl_key]['item_children'],function (ck,cv) {
                    cl_html +='<option value="'+cv.id+'">'+cv.title+'</option>';
                })
                $("select[name='article_item']").html(cl_html);
            }
            window.form.render();
        });

        // 关联资料监听
        form.on('select(datum_id)', function(data){
            var cl_html = '<option value="0">请选择</option>';
            if(data.value == 0) {
                $("select[name='datum_item']").html(cl_html);
            }else{
                var dl_key =  data.elem[data.elem.selectedIndex].dataset.dl_key;
                var datum_list = {:json_encode($datum_list)};
                $.each(datum_list[dl_key]['url_arr'],function (ck,cv) {
                    cl_html +='<option value="'+cv.id+'">'+cv.title+'</option>';
                })
                $("select[name='datum_item']").html(cl_html);
            }
            window.form.render();
        });
        form.on('select(up_type)', function(data){
            check_type()
            window.form.render();
        })


        function check_type() {
            if( $("select[name='up_type']").val() == 1) {
                $(".up_video").show();
                $(".path").hide();
            }else{
                $(".up_video").hide();
                $(".path").show();
            }
            window.form.render();
        }
        check_type()


        layui.use(['upload', 'element', 'layer'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer;
            upload.render({
                elem: '#test3',
                url: '/api/upload/pdfUpload', //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。,accept: 'file', //普通文件,
                accept: 'file', //普通文件,
                done: function(res){
                    if(res.code == 1){
                        $("input[name='datum_url']").val(res.data);
                    }
                    layer.msg(res.msg);
                }
            });
        });
    </script>
</div>