zhongshen_project/app/shop/view/promote.html

<style>
    .marked-message{height: 48px;background: #FFF5ED;font-size: 14px;font-family: Source Han Sans SC;font-weight: 400;color: #666;line-height: 50px;padding: 0 16px;display: flex;}
    .promote-flex{display: flex;margin-top: 15px;padding: 0 10px 0;}
    .promote-img{background-color: #f8f8f8;display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;}
    .promote-img img{width: 140px;height: 140px;}
    .label-width{width: 100px;}
    .block-left{margin-left: 100px !important;display: flex;}
    .promote-download{margin-left: 20px;}
    .h5-path{margin-left: 20px;width: 300px;}
    .h5-path .fuzhi{width: 1px;height: 0px;border: 0px;}
    .h5-path span{display: block;margin-bottom: 10px;}
    .h5-path p input{height: 30px;line-height: 30px;border: 1px solid #e6e6e5;width: 150px;padding: 0px 5px;border-radius: 5px;margin-right: 10px;}
</style>

<script type="text/html" id="promote">
    <div>
        <div class="marked-message">
            <p>活动可分享至多个渠道推广，增加商品曝光率，提升商品分享打开率。</p>
        </div>
        <div class="promote-flex">
            <div class="promote-img">
                <img src="{{ ns.img(d.h5.path) }}" alt="推广二维码">
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label label-width">选择渠道：</label>
                    <div class="layui-input-block block-left">
                        <input type="radio" name="promote_type" value="h5" title="H5" checked lay-filter="promote_type" >
                        <input type="radio" name="promote_type" value="weapp" title="微信小程序" lay-filter="promote_type">
                        {if addon_is_exit('aliapp', request()->siteid())}
                        <input type="radio" name="promote_type" value="aliapp" title="支付宝小程序" lay-filter="promote_type">
                        {/if}
                    </div>
                </div>
                <div class="h5-path">
                    <span>推广链接</span>
                    <p class="tips text-color"><input type="text" value="{{d.h5.url}}" readonly /><a class="layui-btn" href="javascript:ns.copy('h5_url_{{ d.id }}');">复制</a></p>
                    <input type="text" id="h5_url_{{ d.id }}" value="{{d.h5.url}}" readonly class="fuzhi"/>
                </div>
                <div class="promote-download">
                    <a class="text-color" href="{{ ns.img(d.h5.path) }}" download>下载二维码</a>
                </div>
            </div>
        </div>

    </div>
</script>

<script>
    // 推广渠道监听
    function promoteTypeSwitch(form, res){
        form.on('radio(promote_type)', function(radio){
            if(radio.value == 'h5') {
                var no_html = "";
                no_html += '<img src="'+ ns.img(res.data.h5.path) +'"/>';
                $('.promote-img').html(no_html);
                $('.promote-download a').attr('href',ns.img(res.data.h5.path));
                $(".h5-path").show();
            }else {
                if(!res.data[radio.value] || res.data[radio.value].path == ""){
                    var no_html = "";
                    no_html += '<span>小程序配置错误</span>';
                    $('.promote-img').html(no_html);
                }else{
                    $('.promote-img img').attr('src', ns.img(res.data[radio.value].path));
                    $('.promote-download a').attr('href',ns.img(res.data[radio.value].path));
                }
                $(".h5-path").hide();
            }
        });
    }
</script>