{extend name="../app/shop/view/base.html"/}
{block name="resources"}
<style>
    .upload-img-block {
        padding: 20px;
        width: 160px;
        height: 160px;
        border: 1px dashed #ddd;
        box-sizing: border-box;
        position: relative;
    }
    /* 关联会员 */
    .ns-search-result { border: 1px solid; padding: 15px 30px 15px 15px; display: flex; align-items: center; position: relative;margin-top:10px;border-color: #e5e5e5 !important; }
    .ns-search-res-img { width: 50px; height: 50px; margin-right: 5px; text-align: center; line-height: 50px; }
    .ns-search-res-img img { max-width: 100%; max-height: 100%; }
    .ns-search-res-intro p { line-height: 24px; }
    .ns-search-res-close { position: absolute; top: 5px; right: 5px; }
    .ns-check-member .layui-btn {
        position: absolute;
        top: 1px;
        border-color: #e5e5e5;
        padding: 0 10px;
        border-right: 0;
        border-top: 0;
        border-bottom: 0;
        left: 207px;
        height: 32px;
    }
    .ns-check-admin .layui-btn {
        position: absolute;
        top: 2px;
        border-color: #e5e5e5;
        padding: 0 10px;
        border-right: 0;
        border-top: 0;
        border-bottom: 0;
        left: 207px;
        height: 31px;
    }
    .ns-check-member .layui-input:focus+.layui-btn {border-color: #F38421;}
    .ns-check-admin .layui-input:focus+.layui-btn {border-color: #F38421;}
    .ns-form {margin-top: 0;}
    .layui-input-block {overflow: hidden;}
</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">操作提示</h2>
        <ul class="layui-colla-content layui-show">
            <li>当商家通过平台续费或购买一下产品可获取分佣</li>
            <li>1.码牌购买</li>
            <li>2.云喇叭购买</li>
            <li>3.小程序注册</li>
            <li>4.其他更多待加入</li>
        </ul>
    </div>
</div>
<div class="layui-form ns-form">
    <div class="layui-form-item">
        <label class="layui-form-label img-upload-lable">小程序二维码：</label>
        <div class="layui-input-inline img-upload">
            <div class="upload-img-block">
                <div class='upload-img-box'>
                    <div class="ns-upload-default" id="img" >
                        <div class="upload">
                            <img width="150px" src="{$qr}"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>绑定姓名：</label>
        <div class="layui-input-block">
            <input name="user_name" type="text" placeholder="请输入人员真实姓名" lay-verify="required" class="layui-input ns-len-long" value="{$bing.user_name??''}" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item ns-check-member-box">
        <label class="layui-form-label"><span class="required">*</span>绑定用户：</label>
        <div class="layui-input-block ns-check-member">
            <input type="text" id="search_text" name="search_text" placeholder="请输入用户名" class="layui-input ns-len-mid ns-member-name">
            <button type="button" class="layui-btn layui-btn-primary" onclick="checkMember()">
                <i class="layui-icon">&#xe615;</i>
            </button>
            <input class="ns-member-id" placeholder="请关联会员账号" lay-verify="required" type="hidden" name="member_id" />
            <input class="ns-nickname-id" lay-verify="required" type="hidden" name="nickname" />
        </div>
        <div class="ns-word-aux">
            <p>关联会员后商户购买商品才能到分佣。<a onclick="showDemo()" class="examples ns-text-color">查看示例</a></p>
        </div>
<!--        <p class="ns-word-aux">关联会员后商户购买商品才能到分佣</p>-->
    </div>
    <div class="ns-form-row">
        <button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use('form', function() {
        var form = layui.form,
            repeat_flag = false;//防重复标识
        form.render();
        /**
         * 监听提交
         */
        form.on('submit(save)', function(data) {
            if (repeat_flag) return;
            repeat_flag = true;
            $.ajax({
                url: ns.url("saasagent://shop/setting/config"),
                data: data.field,
                dataType: 'JSON',
                type: 'POST',
                success: function(data){
                    layer.msg(data.message);
                    repeat_flag = false;
                }
            });
        });
    });
    var repeat_flag_member = false;
    var html, val;
    function checkMember() {
        var parent = $(".ns-check-member");
        var con = parent.find(".ns-member-name").val();
        $(".layui-word-aux").remove();
        $(".ns-search-result").remove();
        if (repeat_flag_member) return false;
        repeat_flag_member = true;
        if (con == "" || con == null || con.trim() == "") {
            repeat_flag = false;
        } else {
            $.ajax({
                type: 'POST',
                url: ns.url("saasagent://shop/setting/searchMember"),
                data: {
                    'search_text': con,
                    'site_id': 1,
                },
                dataType: 'JSON',
                success: function(res) {
                    repeat_flag_member = false;
                    if (res.data == null) {
                        html = '<span class="layui-word-aux">未找到该用户</span>';
                        val = res.data;
                    } else {
                        html = '<div class="ns-search-result layui-input-inline ns-border-color-gray">' +
                            '<div class="ns-search-res-img">' +
                            '<img src="' + ( res.data.headimg ? ns.img(res.data.headimg) : ns.img("{$default_headimg}")) + '" />' +
                            '</div>' +
                            '<div class="ns-search-res-intro">' +
                            '<p>用户名：' + res.data.username + '</p>' +
                            '<p>电话：' + res.data.mobile + '</p>' +
                            '</div>' +
                            '<div class="ns-search-res-close" onclick="closeMember()">' +
                            '<i class="iconfont iconclose_light"></i>' +
                            '</div>' +
                            '</div>';
                        val = res.data.member_id;
                        $(".ns-nickname-id").attr("value",  res.data.nickname);
                    }
                    $(".ns-member-id").attr("value", val);
                    $(".ns-check-member").append(html);
                }
            });
        }
    }
    function closeMember() {
        $(".ns-search-result").hide();
    }
    function showDemo(){
        layer.open({
            title: '查看示例',
            type: 1,
            area: ['500px', '660px'],
            content: '<img style="margin:20px 80px;" src="SHOP_IMG/accdemo.png">'
        })
    }
</script>

{/block}