{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style type="text/css">
    .access {
        padding: 10px;
    }

    .access-title {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    .access-item {
        background-color: #F8F8F8;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .item {
        display: flex;
        justify-content: space-between;
        margin: 20px 0 20px 10px;
    }

    .item-datail {
        position: relative;
    }

    .item-number {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 5px solid #eee;
        position: absolute;
        top: -5px;
        left: -45px;
        box-sizing: border-box;
        font-size: 10px;
        line-height: 20px;
    }

    .item-number label {
        width: 20px;
        height: 20px;
        background: #ddd;
        border-radius: 50%;
        text-align: center;
        color: #FFFFFF !important;
        display: inline-block;
        font-size: 12px;
    }

    .item-number.active {
        border: 5px solid rgba(255, 106, 0, 0.5);
    }

    .item-number.active label {
        background: #FF6A00;
    }

    .item-check {
        position: absolute;
        top: 5px;
        left: 20px;
        width: 25px;
        height: 25px;
        background: #CCCCCC;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item-check i {
        border-radius: 50%;
        border: none;
        font-size: 14px;
        color: #fff
    }
    .item-checked {
        background: rgba(255, 106, 0, 0.5);
        border-radius: 50%;
    }
    .item-checked i {
        color: #ff6a00
    }
    .item-datail div {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
    }
    .item-datail p {
        display: inline-block;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
    }
    .item-datail a {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF6A00 !important;
    }
    .item button {
        width: 88px;
        height: 34px;
        background: #FF6A00;
        border-radius: 2px;
        border: 1px solid #FFFFFF;
        font-weight: 400;
        color: #FFFFFF;
        cursor: pointer;
    }
    .item span, .item a, .item button {
        margin-right: 40px;
        margin-top: 10px;
    }
    .layui-timeline-item:before {
        top: 27px;
    }
    .order-pay-layer .wrap {
        display: flex;
    }
    .order-pay-layer .wrap .flex {
        flex: 1
    }
    .order-pay-layer .wrap .flex:last-child {
        border-left: 1px solid #eee
    }
    .order-pay-layer .qrcode img {
        width: 150px;
        margin: auto;
        display: block;
    }
    .order-pay-layer .goods-name {
        margin-right: 15px;
        font-weight: bold;
    }
    .order-pay-layer .price {
        margin-right: 15px;
        margin-top: 15px;
        font-weight: bold;
    }
    .order-pay-layer .tips {
        margin-bottom: 15px;
    }
    a:hover {
        text-decoration: none !important;
        cursor: pointer
    }
</style>
{/block}
{block name="main"}
<div class="access">
    <div class="access-title">1688精选代发</div>
    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number active">
                            <label>1</label>
                        </div>
                        <div>创建1688账号</div>
                        <p>在1688中创建视频号，如已有1688可越过该步骤。</p>
                    </div>
                    <a href="https://www.yuque.com/yuqueyonghuwahz8b/ogiw29/ioyzisgv1kccwnkh?singleDoc# 《1688代发指南》" target="_blank" class="layui-btn">接入指南</a>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number {if $checkres['code'] == 0 && $checkres['data']['status'] == 2}active{/if}">
                            <label>2</label>
                        </div>
                        <div>1688代发精选</div>
                        <p>去订购'精选代发'开通之后<a href="{$authorization_url}" target="_blank">去订购</a></p>
                    </div>
                </div>
                <div class="access-item">
                    <div class="item">
                        <div class="item-datail">
                            <div class="item-check {if $checkres['code'] == 0 && $checkres['data']['status'] == 2 }item-checked{/if}">
                                <i class="iconfont iconduihao"></i>
                            </div>
                            <div style="margin-left: 60px;">
                                <label>完成支付宝代扣</label>
                                <br>
                                <p>请完成1688支付宝自动代扣协议<a
                                        href="{:addon_url('shopcomponent://shop/goods/lists')}">前去添加</a></p>
                            </div>
                        </div>
                        <span>已完成</span>
                    </div>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number {if $checkres['code'] == 0 && $checkres['data']['status'] == 2 }active{/if}">
                            <label>3</label>
                        </div>
                        <div>完成了去选品</div>
                        <p>开通成功之后 选品库中的商品 商家到产品库<a href="{:addon_url('ali1688/shop/goods/lists')}" target="_blank">前去添加</a>。
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number {if $checkres['code'] == 0 && $checkres['data']['status'] == 2 }active{/if}">
                            <label>4</label>
                        </div>
                        <div>开启自动下单</div>
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">开启自动下单</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="isAutoBuyOrder" lay-skin="switch" value="1"
                                           lay-filter="switchTest" lay-text="ON|OFF" {if $info.isAutoBuyOrder??''} checked {/if} >
                                </div>
                                <div class="word-aux">
                                    <p>客户下单后系统将完成自动化下单到1688精选</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="layui-form">
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var laytpl, repeatTag = false;
    layui.use(['form', 'laydate'], function () {
        laytpl = layui.laytpl;
        var form = layui.form, laydate = layui.laydate, repeat_flag = false; //防重复标识
        form.render();
    });
    function apply() {
        $.ajax({
            url: ns.url("shopcomponent://shop/goods/access"),
            dataType: 'JSON',
            type: 'POST',
            success: function (res) {
                if (res.code == 0) {
                    layer.msg('开通成功');
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                } else {
                    layer.msg(res.message);
                }
            }
        });
    }
</script>
{/block}