btss/php/view/admin/wechat/message_reply.html

{include file="common/header"/}
<style>
    .img-box {
        position: relative;
        overflow: hidden;
        width: 230px;
        height: 150px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border: 1px #efefed solid;
        color: #76838f;
    }
    .img-box img{
        max-width:100% ;
    }
    .layui-col-md3 {
        padding:0 10px;
        text-align: center
    }

    .media-body {
        padding: 10px 5px;
        border: 1px solid rgb(231, 231, 235);
    }

    .media-btn {
        margin-top: 10px;
        text-align: center
    }
    .media-desc img{
        width: 100%;
        height: 180px;
    }
    .mdedia-lists-box {
        border-bottom: 1px solid rgb(231, 231, 235);
        display: inline-block;
        padding: 5px 0 5px 0px;
        height: 48px;
        width: 100%;
    }
    .media-img-box img{
        width: 100%;
        height: 48px;
    }
    .media-content{
        position: relative;
        height: 180px;
    }
    .media-content img{
        width: 100%;
        height: 180px;
    }
    .media-desc {

        position: absolute;
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        color: #ffffff;
        width: 100%;
        bottom: 0;
        height: 45px;
        text-align: left;
    }
</style>

<div class="LM-container">
    <div class="LM-main">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>{:lang('reply')}{:lang('message')}</legend>
            <blockquote class="layui-elem-quote">
                <div class="LM-table">
                    <div>

                        <label for="">{$user.nickname}</label>
                        <div class="layui-input-inline">

                            <img width="50" src="{$user.headimgurl}" alt="">
                        </div>
                    </div>
                </div>

            </blockquote>

        </fieldset>


        <form class="layui-form" action="">
            <input name="material_id" type="hidden" value="">
            <input name='msg_type' type="hidden" value="text">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">文本内容</li>
                    <li>图片</li>
                    <li>图文</li>
                    <li>视频</li>
                    <li>音频</li>
                </ul>
                <div class="layui-tab-content" style="padding: 15px;">
                    <div class="layui-tab-item layui-show text">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">回复内容</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea" name="data"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item image">
                        <div class="img-box" id="image">
                            <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px">                                        <div class="bottomBar">点击选择</div>
                        </div>
                        <div class="layui-row"  style="display: none">
                            {volist name="materialGroup['image']" id="vo"}
                            <div class="layui-col-md3">
                                <div class="media-body">
                                    <div class="media-time">
                                        发布时间：2019-08-12 : 10:38
                                    </div>
                                    <span style="display: block;">
                                  <div class="media-content">
                                        <div class="media-desc"><p class="media-desc-sp"></p></div>
                                        <img class="media-img" width="100%" height="180" src="{$vo.media_url}">
                                  </div>
                                 </span>
                                    <div>
                                        <ul>
                                        </ul>
                                    </div>
                                    <div class="media-item-type2">
                                        <div class="layui-btn-group media-btn">
                                            <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','image')"
                                               class="layui-btn layui-btn-primary layui-btn-sm">
                                                <i class="layui-icon"></i>选择
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            {/volist}
                        </div>
                    </div>
                    <div class="layui-tab-item news">
                        <div class="img-box" id="news">
                            <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px">                                        <div class="bottomBar">点击选择</div>
                        </div>
                        <div class="layui-row"  style="display: none">
                            {volist name="materialGroup['news']" id="vo"}

                            <div class="layui-col-md3">
                                <div class="media-body">
                                    <div class="media-time">
                                        发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                    </div>
                                    <span style="display: block;">
                                     <div class="media-content">
                                         <div class="media-desc">
                                             <p class="media-desc-sp">{if isset($vo['item_info'][0]['title'])}{$vo['item_info'][0]['title']}{/if}</p>
                                         </div>
                                            <img class="media-img"  src="{if isset($vo['item_info'][0]['cover'])}{$vo['item_info'][0]['cover']}{/if}">
                                      </div>
                                </span>
                                    <!--                                //多图文&ndash;&gt;-->
                                    {if count($vo['item_info'])>1}
                                    <div>
                                        <ul>
                                            {volist name="vo.item_info" id="v" offset='1' }
                                            <li>
                                                <div class="mdedia-lists-box">
                                                    <div class="media-title-box layui-col-md9 fl">
                                                        {$v.title}
                                                    </div>
                                                    <div class="media-img-box layui-col-md3 fr">
                                                        <img class="media-lists-img" src="{$v.cover}">
                                                    </div>
                                                </div>
                                            </li>
                                            {/volist}
                                        </ul>
                                    </div>
                                    {/if}
                                    <div class="media-item-type2">
                                        <div class="layui-btn-group media-btn">
                                            <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','news')"
                                               class="layui-btn layui-btn-primary layui-btn-sm">
                                                <i class="layui-icon"></i>选择
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            {/volist}
                        </div>
                    </div>
                    <div class="layui-tab-item video">
                        <div class="img-box" id="video">
                            <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px">                                        <div class="bottomBar">点击选择</div>
                        </div>
                        <div class="layui-row"  style="display: none">
                            {volist name="materialGroup['video']" id="vo"}
                            <div class="layui-col-md3">
                                <div class="media-body">
                                    <div class="media-time">
                                        发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                    </div>
                                    <span style="display: block;">
                                     <div class="media-content">
                                         <div class="media-desc">
                                             <p class="media-desc-sp"></p>
                                         </div>
                                         <div  style="font-size: 50px;height: 180px;line-height:180px;text-align: center">
                                             <i class="fa fa-play-circle-o"></i>
                                         </div>
                                      </div>
                                </span>
                                    <!--                                //多图文&ndash;&gt;-->

                                    <div class="media-item-type2">
                                        <div class="layui-btn-group media-btn">
                                            <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
                                               class="layui-btn layui-btn-primary layui-btn-sm">
                                                <i class="layui-icon"></i>选择
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            {/volist}
                        </div>
                    </div>
                    <div class="layui-tab-item voice">
                        <div class="img-box" id="voice">
                            <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px">                                        <div class="bottomBar">点击选择</div>
                        </div>
                        <div class="layui-row"  style="display: none">
                            {volist name="materialGroup['voice']" id="vo"}
                            <div class="layui-col-md3">
                                <div class="media-body">
                                    <div class="media-time">
                                        发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                                    </div>
                                    <span style="display: block;">
                                     <div class="media-content">
                                         <div class="media-desc">
                                             <p class="media-desc-sp"></p>
                                         </div>
                                         <audio class="media-img"  src="{$vo.media_url}"></audio>
                                      </div>
                                </span>
                                    <!--                                //多图文&ndash;&gt;-->

                                    <div class="media-item-type2">
                                        <div class="layui-btn-group media-btn">
                                            <a  href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
                                                class="layui-btn layui-btn-primary layui-btn-sm">
                                                <i class="layui-icon"></i>选择
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">立即发送</button>
                </div>
            </div>
        </form>


    </div>
</div>


{include file="common/footer"/}
<script>
    var $='';
    var layer;
    var index='';
    layui.use(['form','element','layer'], function () {
        $ = layui.jquery;
        var  form = layui.form,
            layer = layui.layer,
            element = layui.element;
        var openid = '{$user.openid}';
        form.on('submit(submit)', function(data){
            var type = '';
            if($("input[name='msg_type']").val()=='text' && !$("textarea[name='data']").val()){

                layer.msg('请填写文本内容');
                return false;
            }


            loading =layer.load(1, {shade: [0.1,'#fff']});
            data.field.openid = openid;
            $.post("{:url('messageReply')}",data.field,function(res){
                layer.close(loading);
                if(res.code>0){
                    layer.msg(res.msg,{time:1000,icon:1});

                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
                return false;
            });
            return false;
        });


        $('.img-box').click(function (e) {
            index = layer.open({
                type: 1,
                content: $(this).next('.layui-row'),
                area: ['800px', '600px'],
                anim: 2,
                maxmin: true,
            });
        })



    });
    function materialSelect(obj,id,type) {
        var src = $(obj).parents('.layui-tab-item').find('.media-img').attr('src');
        console.log(src);
        $("input[name='material_id']").val(id)
        $("input[name='msg_type']").val(type)
        $(obj).parents('.layui-tab-item').find('.img-box').find('img').attr('src',src);
        layer.close(index);

    }

</script>