{include file="public/seller_top" /}

<div class="seller_main w1200">
    {include file="public/seller_left" /}
    <div class="seller_right">
        <div class="seller_items">
            {include file="public/seller_items" /}
        </div>
    <div class="alert alert-block mt10">
        <ul>
            <li>1、可以在此处对手机店铺进行设置，修改后的设置需要点击“保存修改”按钮进行保存</li>
            <li>2、可以拖拽“轮播”图片以调整顺序，无图片的不予轮播显示</li>
            <li>3、跳转URL必须带有“http://”，商品ID必须为数字且为本店发布的商品，非法数据将被自动过滤掉</li>
            <li>4、默认手机店铺页面显示的最多20条推荐商品，可以在“出售中的商品”中进行设置</li>
        </ul>
    </div>
    <div class="dssc-form-default">
        <form method="post"  enctype="multipart/form-data" id="my_store_form" onsubmit="ajaxpost('my_store_form', '', '', 'onerror');return false;">
            <dl>
                <dt>页头背景图{$Think.lang.ds_colon}</dt>
                <dd class="mb-sliders">
                    {if $mb_title_img}
                    <div class="img-wrapper"> <img alt="" src="{$mb_title_img}" /> </div>
                    <p>
                        <label>
                            <input type="checkbox" name="mb_title_img_del" value="1" />
                            标记为删除 </label>
                    </p>
                    {else /}
                    <p>暂无图片</p>
                   {/if}
                    <p>
                        <input type="file" name="mb_title_img" />
                    </p>
                    <p class="hint">手机店铺页面头部背景图片，默认为白色纯色背景，推荐图片大小640x100</p>
                </dd>
            </dl>
            <dl>
                <dt>轮播{$Think.lang.ds_colon}</dt>
                <dd>
                    <p class="hint">手机店铺页面头部区域下方的轮播图片展示，最多可上传{$max_mb_sliders}张图片，推荐图片大小640x240</p>
                </dd>
            </dl>
            {if $mbSliderUrls}
            <div class="flexslider">
                <ul class="slides">
                    {volist name="mbSliderUrls" id="v"}
                    <li> <a><img  src="{$v}" /></a></li>
                    {/volist}
                </ul>
            </div>
           {/if}
            <ul class="dssc-store-slider sortable">
                {for start="1" end="$max_mb_sliders" name="k"}
                <li>
                    <input type="hidden" name="mb_sliders_sort[]" value="{$k}" />
                    <div class="picture" nctype="file_{$k}">
                        {if $mbSliders[$k]['img']}
                        <img nctype="file_{$k}" alt="" src="{$Think.UPLOAD_SITE_URL}/{$Think.ATTACH_STORE}/mobileslide/{$mbSliders[$k]['img']}" />
                        {else /}
                        <i class="icon-picture"></i>
                      {/if}
                        <a href="javascript:;" data-slider-drop="{$k}" class="del" title="移除">&#215;</a> </div>
                    <div class="url">
                        <label>
                            <input type="radio" name="mb_sliders_type[{$k}]" value="1" {if $mbSliders[$k]['type']=='1'}checked="checked"{/if} />
                            跳转URL </label>
                        <label>
                            <input type="radio" name="mb_sliders_type[{$k}]" value="2" {if $mbSliders[$k]['type']=='2'}checked="checked"{/if} />
                            商品ID </label>
                        <input type="text" class="text w150" name="mb_sliders_links[{$k}]" value="{$mbSliders[$k]['link']}" />
                    </div>
                    <div class="dssc-upload-btn"> <a href="javascript:;"> <span>
          <input type="file" hidefocus="true" size="1" class="input-file" name="file_{$k}" id="file_{$k}" />
          </span>
                        <p> <i class="icon-upload-alt"></i> 图片上传 </p>
                    </a> </div>
                </li>
               {/for}
            </ul>
            <div class="bottom">
                <label class="submit-border">
                    <input type="submit" class="submit" value="保存修改" />
                </label>
            </div>
        </form>
    </div>
    </div>
</div>
<style type="text/css">
    .mb-sliders li { width: 225px; height: 168px; display: inline-block; padding: 3px; margin: 3px; border: 1px solid #ccc; }
    .mb-sliders img { max-width: 100%; max-height: 100%; display: block; margin: 3px auto; }
    .img-wrapper { width: 220px; height: 80px; overflow: hidden; }
</style>
<script src="{$Think.config.url_domain_root}static/plugins/ajaxfileupload.js"></script>
<script src="{$Think.config.url_domain_root}static/plugins/jquery.flexslider-min.js"></script>
<script>
    $(function() {
        $('.flexslider').flexslider();
        $(".sortable").sortable();

        var DEFAULT_GOODS_IMAGE = "{$Think.UPLOAD_SITE_URL}/{$Think.ATTACH_COMMON}/default_goods_image.gif";
        var LOADING_IMAGE = "{$Think.config.url_domain_root}static/home/images/loading.gif";

        $('input.input-file').change(function() {
            var id = this.id;

            $('div[nctype="'+id+'"]').find('i,img').remove().end()
                .prepend('<img nctype="'+id+'" src="'+LOADING_IMAGE+'">');

            $.ajaxFileUpload({
                url: "{:url('sellersetting/store_mb_sliders')}",
                secureuri: false,
                fileElementId: id,
                dataType: 'json',
                data: {id: id},
                success: function(data, status) {
                    if (data.error) {
                        alert(data.error);
                        $('img[nctype="'+id+'"]').attr('src', DEFAULT_GOODS_IMAGE);
                        return;
                    }
                    $('img[nctype="'+id+'"]').attr('src', data.uploadedUrl);
                },
                error: function(data, status, e) {
                    $('img[nctype="'+id+'"]').attr('src', data.uploadedUrl);
                }
            });
        });

        $("a[data-slider-drop]").click(function() {
            var id = $(this).attr('data-slider-drop');
            var $this = $(this);

            $.getJSON('{:url('sellersetting/store_mb_sliders_drop')}', {id: id}, function(d) {
                if (!d.success) {
                    alert(d.error);
                    return;
                }
                $this.parents('div.picture').find('img,i').remove().end()
                    .prepend('<i class="icon-picture"></i>');
            });
        });
    });
</script>