book_admin/application/admin/view/custom/addimagetext.html

<link rel="stylesheet" href="/assets/libs/element-ui/index.css">
<link rel="stylesheet" href="/assets/dist/component/main.css">
<style type="text/css">

    .n-error{
        top: 3px;
    }
    .img_txt_one_img{
        overflow: hidden;
        padding: 20px 0;
    }
    .img_txt_one_img img{
        margin: 0;
        padding: 0;
        border: 0;
        display: block;
        width: 200px;
    }
    .content{
        min-height: 600px;
    }
</style>



<form id="addimagetext-form-box" class="form-horizontal form-ajax" role="form" method="POST" action="">
    <div class="form-group">
        <label for="module" class="control-label col-xs-12 col-sm-2">链接类型:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label for="imgtxt_type-0">
                    <input type="radio" name="row[imgtxt_type]" value="0" id="imgtxt_type-0" checked/>书籍
                </label>
                <label for="imgtxt_type-1">
                    <input type="radio" name="row[imgtxt_type]" value="1" id="imgtxt_type-1"/>活动
                </label>
                <label for="imgtxt_type-2">
                    <input type="radio" name="row[imgtxt_type]" value="2" id="imgtxt_type-2"/>继续阅读
                </label>
                <!--<label for="imgtxt_type-3">
                    <input type="radio" name="row[imgtxt_type]" value="3" id="imgtxt_type-3"/>菜单
                </label>-->
                <label for="imgtxt_type-6">
                    <input type="radio" name="row[imgtxt_type]" value="6" id="imgtxt_type-6"/> 自定义链接
                </label>
                <label for="imgtxt_type-8">
                    <input type="radio" name="row[imgtxt_type]" value="8" id="imgtxt_type-8"/>常用链接
                </label>
                {if condition="$miniOpen == 1"}
                <label for="imgtxt_type-10">
                    <input type="radio" name="row[imgtxt_type]" value="10" id="imgtxt_type-10"/>小程序
                </label>
                {/if}
            </div>
            <input type="hidden" name="row[url]">
        </div>
    </div>

    <div class="group-type" id="group-type-0">
        <div class="form-group">
            <label for="c-book_title" class="control-label col-sm-2">*推广标题:</label>
            <div class="col-sm-8">
                <input id="c-book_title" class="form-control" name="book[title]" data-rule="required">
            </div>
            <div class="col-sm-2"><a href="javascript:" class="btn btn-danger img_txt_edit_tit"><i class="fa fa-pencil"></i> 选择标题</a></div>
        </div>
        <div class="form-group">
            <label for="c-book_image" class="control-label col-xs-12 col-sm-2">*推广封面:</label>
            <div class="col-xs-12 col-sm-8">
                <a href="javascript:" class="btn btn-danger add_img_txt_edit_img"><i class="fa fa-pencil"></i> 选择封面</a>
                <div class="img_txt_one_img"><img src=""/></div>
                <input id="c-book_image" class="form-control" name="book[image]" type="hidden" data-rule="required">
            </div>
        </div>
        <div class="form-group">
            <label for="select_book_id" class="control-label col-xs-12 col-sm-2">*小说名称:</label>
            <div class="col-xs-12 col-sm-8">
                <!--<input id="c-book_name" class="form-control" name="row[image]">-->
                <input id="c-book_book_name" data-source="custom/autocompletebookname"
                       data-field="name"
                       data-primary-key="name" class="form-control" data-pagination="false"
                       name="book[book_name]" type="text" value="">
                <input type="hidden" name="book[book_id]" id="select_book_id" value="" />
                <input type="hidden" name="acc_type" value="{$acc_type??''}">
            </div>
        </div>
        <div class="form-group">
            <label for="description" class="control-label col-xs-12 col-sm-2">推广描述:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea type="text" class="form-control" rows="4" id="description-book" name="book[description]" maxlength="120"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="c-book_wx_type" class="control-label col-xs-12 col-sm-2">*渠道类型:</label>
            <div class="col-xs-12 col-sm-8">
                {:build_radios('book[wx_type]',$wxTypeList)}
            </div>
        </div>
        <!--        <div class="form-group">
                    <label for="c-book_push" class="control-label col-xs-12 col-sm-2">*推送类型:</label>
                    <div class="col-xs-12 col-sm-8">
                        {:build_radios('book[push]',$pushList)}
                    </div>
                </div>-->
        <input type="hidden" name="book[push]" value="1">
        <div class="form-group">
            <label for="c-book_channel_name" class="control-label col-xs-12 col-sm-2">*渠道名称:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-book_channel_name" data-rule="required" class="form-control" name="book[channel_name]">
            </div>
        </div>
        <div class="group-push" id="group-push-0">
            <div class="form-group">
                <label for="c-book_guide_chapter_idx" class="control-label col-xs-12 col-sm-2">*导粉章节号:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-book_guide_chapter_idx" data-rule="required;integer(+)" class="form-control" name="book[guide_chapter_idx]" data-rule="required">
                </div>
            </div>
            <div class="form-group">
                <label for="c-book_cost" class="control-label col-xs-12 col-sm-2">推广成本:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-book_cost" class="form-control" name="book[cost]" data-rule="range(0~)" />
                </div>
            </div>
        </div>
    </div>

    <div class="form-group group-type hide" id="group-type-1">
        <div class="form-group">
            <label for="c-activity_title" class="control-label col-xs-12 col-sm-2">*推广标题:</label>
            <div class="col-sm-8">
                <input id="c-activity_title" class="form-control" name="activity[title]"  data-rule="required"/>
            </div>
            <div class="col-sm-2"><a href="javascript:" class="btn btn-danger img_txt_edit_tit"><i class="fa fa-pencil"></i> 选择标题</a></div>
        </div>
        <div class="form-group">
            <label for="description" class="control-label col-xs-12 col-sm-2">推广描述:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea type="text" class="form-control" rows="4" id="description-activity" name="activity[description]" maxlength="120"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="c-activity_image" class="control-label col-xs-12 col-sm-2">*推广封面:</label>
            <div class="col-xs-12 col-sm-8">
                <a href="javascript:" class="btn btn-danger add_img_txt_edit_img"><i class="fa fa-pencil"></i> 选择封面</a>
                <div class="img_txt_one_img"><img src=""/></div>
                <input id="c-activity_image" class="form-control" name="activity[image]" type="hidden"  data-rule="required" />
            </div>
        </div>

        <div class="form-group">
            <label for="c-activity_activity_id" class="control-label col-xs-12 col-sm-2">*活动:</label>
            <div class="col-xs-12 col-sm-8">
                <!--<input id="c-activity_activity_id" class="form-control" name="activity[activity_id]">-->
                <select  id="c-activity_activity_id" class="form-control selectpicker" name="activity[activity_id]"  data-rule="required">
                    {foreach name="activityList" item="vo"}
                    <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="c-activity_channel_name" class="control-label col-xs-12 col-sm-2">*渠道名称:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-activity_channel_name" class="form-control" name="activity[channel_name]" data-rule="required" />
            </div>
        </div>
    </div>

    <div class="form-group group-type hide" id="group-type-2">
        <div class="form-group">
            <label for="c-recent_title" class="control-label col-xs-12 col-sm-2">*推广标题:</label>
            <div class="col-sm-8">
                <input id="c-recent_title" class="form-control" name="recent[title]" data-rule="required" />
            </div>
            <div class="col-sm-2"><a href="javascript:" class="btn btn-danger img_txt_edit_tit"><i class="fa fa-pencil"></i> 选择标题</a></div>
        </div>
        <div class="form-group">
            <label for="description" class="control-label col-xs-12 col-sm-2">推广描述:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea type="text" class="form-control" rows="4" id="description-recent" name="recent[description]" maxlength="120"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="c-recent_image" class="control-label col-xs-12 col-sm-2">*推广封面:</label>
            <div class="col-xs-12 col-sm-8">
                <a href="javascript:" class="btn btn-danger add_img_txt_edit_img"><i class="fa fa-pencil"></i> 选择封面</a>
                <div class="img_txt_one_img"><img src=""/></div>
                <input id="c-recent_image" class="form-control" name="recent[image]" type="hidden" data-rule="required" />
            </div>
        </div>
        <div class="form-group">
            <label for="c-recent_channel_name" class="control-label col-xs-12 col-sm-2">*渠道名称:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-recent_channel_name" class="form-control" name="recent[channel_name]" data-rule="required" />
            </div>
        </div>
    </div>

    <div class="form-group group-type hide" id="group-type-3">
        <div class="form-group">
            <label for="c-menu_title" class="control-label col-xs-12 col-sm-2">*推广标题:</label>
            <div class="col-sm-8">
                <input id="c-menu_title" class="form-control" name="menu[title]" data-rule="required" />
            </div>
            <div class="col-sm-2"><a href="javascript:" class="btn btn-danger img_txt_edit_tit"><i class="fa fa-pencil"></i> 选择标题</a></div>
        </div>
        <div class="form-group">
            <label for="c-menu_image" class="control-label col-xs-12 col-sm-2">*推广封面:</label>
            <div class="col-xs-12 col-sm-8">
                <a href="javascript:" class="btn btn-danger add_img_txt_edit_img"><i class="fa fa-pencil"></i> 选择封面</a>
                <div class="img_txt_one_img"><img src=""/></div>
                <input id="c-menu_image" class="form-control" name="menu[image]" type="hidden" data-rule="required" />
            </div>
        </div>

        <div class="form-group">
            <label for="c-menu_menu_id" class="control-label col-xs-12 col-sm-2">*菜单:</label>
            <div class="col-xs-12 col-sm-8">
                <!--<input id="c-menu_menu_id" class="form-control" name="menu[menu_id]">-->

                <select  id="c-menu_menu_id" class="form-control selectpicker" name="menu[menu_id]" data-rule="required" />
                {foreach name="menuList" item="vo"}
                <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                {/foreach}
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="c-menu_channel_name" class="control-label col-xs-12 col-sm-2">*渠道名称:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-menu_channel_name" class="form-control" name="menu[channel_name]" data-rule="required" />
            </div>
        </div>
    </div>

    <div class="form-group group-type hide" id="group-type-6">
        <div class="form-group">
            <label for="c-url_title" class="control-label col-sm-2">*推广标题:</label>
            <div class="col-sm-8">
                <input id="c-url_title" class="form-control" name="url[title]" data-rule="required">
            </div>
            <div class="col-sm-2"><a href="javascript:" class="btn btn-danger img_txt_edit_tit"><i class="fa fa-pencil"></i> 选择标题</a></div>
        </div>
        <div class="form-group">
            <label for="c-url_image" class="control-label col-xs-12 col-sm-2">*推广封面:</label>
            <div class="col-xs-12 col-sm-8">
                <a href="javascript:" class="btn btn-danger add_img_txt_edit_img"><i class="fa fa-pencil"></i> 选择封面</a>
                <div class="img_txt_one_img"><img src=""/></div>
                <input id="c-url_image" class="form-control" name="url[image]" type="hidden" data-rule="required">
            </div>
        </div>
        <div class="form-group">
            <label for="c-url_url" class="control-label col-xs-12 col-sm-2">*链接地址:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-url_url" class="form-control" name="url[url]" data-rule="required;length(~255)">
            </div>
        </div>
        <div class="form-group">
            <label for="url-description" class="control-label col-xs-12 col-sm-2">推广描述:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea type="text" class="form-control" rows="4" id="description-url" name="url[description]" maxlength="120"></textarea>
            </div>
        </div>
    </div>
    <div class="form-group group-type hide" id="group-type-8">
        <div class="form-group">
            <label for="c-daily_url_title" class="control-label col-sm-2">*推广标题:</label>
            <div class="col-sm-8">
                <input id="c-daily_url_title" class="form-control" name="daily_url[title]" data-rule="required">
            </div>
            <div class="col-sm-2"><a href="javascript:" class="btn btn-danger img_txt_edit_tit"><i class="fa fa-pencil"></i> 选择标题</a></div>
        </div>
        <div class="form-group">
            <label for="c-daily_url_image" class="control-label col-xs-12 col-sm-2">*推广封面:</label>
            <div class="col-xs-12 col-sm-8">
                <a href="javascript:" class="btn btn-danger add_img_txt_edit_img"><i class="fa fa-pencil"></i> 选择封面</a>
                <div class="img_txt_one_img"><img src=""/></div>
                <input id="c-daily_url_image" class="form-control" name="daily_url[image]" type="hidden" data-rule="required">
            </div>
        </div>
        <div class="form-group">
            <label for="c-daily_url_url" class="control-label col-xs-12 col-sm-2">*链接地址:</label>
            <div class="col-xs-12 col-sm-8">
                <select name="daily_url[url]" class="form-control" id="c-daily_url_url"   data-rule="required">
                    <option value="">请选择</option>
                    {foreach name="dailyLink" item="vo"}
                    <option value="{$key}">{$vo.title}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="c-daily_url-description" class="control-label col-xs-12 col-sm-2">推广描述:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea type="text" class="form-control" rows="4" id="c-daily_url-description-url" name="daily_url[description]" maxlength="120"></textarea>
            </div>
        </div>
    </div>
    {if condition="$miniOpen == 1"}
    <div class="form-group group-type hide" id="group-type-10">
        <div class="form-group">
            <label for="c-mini_page" class="control-label col-xs-12 col-sm-2">小程序页面:</label>
            <div class="col-xs-12 col-sm-8">

                <select  id="c-mini_page" class="form-control selectpicker" name="mini[page]">
                    {foreach name="miniPages" item="vo"}
                    <option value="{$key}" >{$vo}</option>
                    {/foreach}
                </select>

            </div>
        </div>
        <div class="form-group">
            <label for="c-mini_type" class="control-label col-xs-12 col-sm-2">{:__('消息类型')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="radio" id="c-mini_type">
                    <label for=""><input  class="mini_type" name="mini[mini_type]" type="radio" checked value="3" /> 小程序卡片</label>
                    <label for=""><input class="mini_type" name="mini[mini_type]" type="radio" value="4" /> 小程序码</label>
                </div>
            </div>
        </div>
        <div class="form-group mini-type3 mini-title" style="">
            <label for="c-mini-title" class="control-label col-xs-12 col-sm-2">卡片标题:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-mini-title" class="form-control" name="mini[title]" type="text" value="">
            </div>
        </div>
        <div class="form-group mini-type3 mini-card" style="">
            <label for="c-mini-title" class="control-label col-xs-12 col-sm-2">卡片图片:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="mini_content">
                    <div class="card">
                        <div class="xcx_name">
                            <img src="{:asset('/img/backend/mini_logo.png')}" alt="">
                            <text>小程序名称</text>
                        </div>
                        <div class="card_name">卡片标题显示位置</div>
                        <div class="inner">
                            <div class="info">建议图片尺寸必须为520*416,大小不超过2M,暂时不支持动图</div>
                            <div class="btn_file mini_plupload" id="mini_plupload" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false">上传文件</div>
                        </div>
                        <div style="margin-top:20px;display: none" class="img_card" >
                            <input type="hidden" name="mini[image]" class="mini-image" value="">
                            <img  class="btn_file card_img mini_plupload" id="mini_pluploads" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" src="" alt="">
                        </div>
                        <div class="bot">
                            <img src="{:asset('/img/backend/mini_xcx.png')}" alt="">
                            <text>小程序</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/if}
    <div class="form-group {:input('get.callback')?'':'hidden layer-footer'}">
        <div class="col-xs-2"></div>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-danger btn-embossed disabled">{:__('OK')}</button>
            <!--            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>-->
        </div>
    </div>
</form>
<div id="title-select">
    <title-select :select="select" title="选择标题" bind=".img_txt_edit_tit"></title-select>
</div>

<style type="text/css">

    .mini-card .mini_content {
        width: 300px;
        height: 300px;
        display: flex;
    }
    .mini-card .mini_content .title {
        margin-right: 10px;
    }
    .mini-card .card {
        position: relative;
        width: 260px;
        background: #eee;
        height: 300px;
        padding: 10px 20px 0 20px;
    }
    .mini-card .card .xcx_name {
        vertical-align: middle;
        display: inline-block;
    }
    .mini-card .card .xcx_name img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        border-radius: 50%;
    }
    .mini-card .card .xcx_name text {
        font-size: 10px;
        color: #333;
        vertical-align: middle;
    }
    .mini-card .card_name {
        margin-top: 10px;
        color: #666;
        font-size: 10px;
    }
    .mini-card .inner {
        width: 220px;
        height: 150px;
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
        background: #fff;
        margin-top: 20px;
        border-radius: 4px;
    }
    .mini-card .card_img{
        width: 220px;
        height: 150px;
    }
    .mini-card .inner .info {
        text-align: center;
        font-size: 10px;
        color: #999;
    }
    .mini-card .inner .btn_file {
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: #333;
        text-align: center;
        font-size: 10px;
        background: #f9f9f9;
        border-radius: 4px;
        margin: 20px auto 0;
        cursor:pointer;
    }
    .mini-card .bot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-top: 1px solid #c3c3c3;
        margin-top: 20px;
    }
    .mini-card .bot img{
        width: 15px;
        height: 15px;
        margin-left: 20px;
        vertical-align: middle;
    }
    .mini-card .bot text {
        font-size: 10px;
        color: #999;
    }

</style>