admin/addon/aliapp/shop/view/aliapp/setting.html

{extend name="app/shop/view/base.html" /}
{block name="resources"}
<style>
    .progress-wrap {
        display: flex;
        align-items: center;
        text-align: center;
        min-height: 120px;
    }
    .progress-point {
        flex-grow: 1;
    }
    .progress-point-pic {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .progress-point-pic img {
        max-width: 100%;
        max-height: 100%;
    }
    .item-block-wrap .new-tips{
        width: 8px;
        height: 8px;
        background: #f00;
        border-radius: 50%;
        position: absolute;
        right: 15px;
    }
    .item-content-desc{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .insert-type .type-title {font-size: 23px;font-weight: 100;text-align: center;margin-bottom: 10px;}
    .insert-type .item-type {width: 47%;border: 1px solid #e6e9f0;display: inline-block;margin: 10px 1% 0px;padding: 20px 10px 20px 10px;box-sizing: border-box;cursor: pointer;height: 90px;}
    .insert-type .item-type:last-child{margin-right: 0;}
    .insert-type .item-type div {display: inline-block;float: left;height: 50px;width: 50px;}
    .insert-type .item-type div img{width: 100%;}
    .insert-type .item-type div.item-content {margin-left: 10px;width: 180px;}
    .insert-type .item-type div.item-content p.name {margin-top: 2px;}
    .insert-type .item-type div.item-content p {margin-bottom: 0px;}
    .insert-type .item-type div.item-content p.description {color: #999;font-size: 12px;margin-top: 7px;}
</style>
<div class="insert-type" style="display: none" id="insert">
    <div class="item-type" lay-active="authinsert">
        <div class="item-img"><img src="SHOP_IMG/goods_icon.png" alt=""></div>
        <div class="item-content">
            <p class="name">授权接入</p>
            <p class="description">（授权接入无需复杂参数配置）</p>
        </div>
    </div>
    <div class="item-type" lay-active="paraminsert">
        <div class="item-img"><img src="SHOP_IMG/virtual_goods_icon.png" alt=""></div>
        <div class="item-content">
            <p class="name">参数设置</p>
            <p class="description">（手动接入需要录入开发相关数据）</p>
        </div>
    </div>
</div>
{/block}
{block name="main"}
<div class="layui-card card-common card-brief">
    <div class="layui-card-header">
        <span class="card-title">支付宝小程序使用流程</span>
    </div>
    <div class="layui-card-body">
        <ul class="progress-wrap">
            <li class="progress-point">
                <div class="progress-point-pic">
                    <img src="WEAPP_IMG/register.png" alt="">
                </div>
                <p class="progress-point-text">注册小程序应用</p>
            </li>
            <li class="progress-point-arrow">
                <img src="WEAPP_IMG/arrow.png" alt="">
            </li>
            <li class="progress-point">
                <div class="progress-point-pic">
                    <img src="WEAPP_IMG/set_up.png" alt="">
                </div>
                <p class="progress-point-text">信息完善</p>
            </li>
            <li class="progress-point-arrow">
                <img src="WEAPP_IMG/arrow.png" alt="">
            </li>
            <li class="progress-point">
                <div class="progress-point-pic">
                    <img src="WEAPP_IMG/public_number.png" alt="">
                </div>
                <p class="progress-point-text">开发</p>
            </li>
            <li class="progress-point-arrow">
                <img src="WEAPP_IMG/arrow.png" alt="">
            </li>
            <li class="progress-point">
                <div class="progress-point-pic">
                    <img src="WEAPP_IMG/edition.png" alt="">
                </div>
                <p class="progress-point-text">提交审核</p>
            </li>
            <li class="progress-point-arrow">
                <img src="WEAPP_IMG/arrow.png" alt="">
            </li>
            <li class="progress-point">
                <div class="progress-point-pic">
                    <img src="WEAPP_IMG/complete.png" alt="">
                </div>
                <p class="progress-point-text">发布</p>
            </li>
        </ul>
    </div>
</div>
<div class="layui-card card-common card-brief">
    <div class="layui-card-header">
        <span class="card-title">小程序入口</span>
    </div>
    <div class="layui-card-body">
        <div class="site_list item-block-parent item-five">
            <a class="item-block item-block-hover-a"  lay-active="active">
                <div class="item-block-wrap">
                    <div class="item-pic">
                        <img src="WEAPP_IMG/administration.png">
                    </div>
                    <div class="item-con">
                        <div class="item-content-title">小程序管理</div>
                        <p class="item-content-desc">小程序管理</p>
                    </div>
                </div>
            </a>

            {if !empty($config_info['line_type']) &&$config_info.line_type=='auth'}
            <a class="item-block item-block-hover-a" href="{:addon_url('aliapp://shop/aliapp/editapp')}">
                <div class="item-block-wrap">
                    <div class="item-pic">
                        <img src="WEAPP_IMG/message.png">
                    </div>
                    <div class="item-con">
                        <div class="item-content-title">基础设置</div>
                        <p class="item-content-desc">完善基础信基础设置</p>
                    </div>
                </div>
            </a>

            <a class="item-block item-block-hover-a" href="{:addon_url('aliapp://shop/appletRelease/index')}">
                <div class="item-block-wrap">
                    <div class="item-pic">
                        <img src="WEAPP_IMG/message.png">
                    </div>
                    <div class="item-con">
                        <div class="item-content-title">发布小程序</div>
                        <p class="item-content-desc">构建&提审小程序</p>
                    </div>
                </div>
            </a>
            {/if}
            <a class="item-block item-block-hover-a" href="{:addon_url('shop/message/lists')}">
                <div class="item-block-wrap">
                    <div class="item-pic">
                        <img src="WEAPP_IMG/message.png">
                    </div>
                    <div class="item-con">
                        <div class="item-content-title">订阅消息</div>
                        <p class="item-content-desc">给用户提供更好的服务闭环体验</p>
                    </div>
                </div>
            </a>

        </div>
    </div>
</div>

{/block}
{block name="script"}
<script type="text/javascript">
    layui.use(['layer','util'], function() {
        var layer = layui.layer,util=layui.util,index;
        //处理属性 为 lay-active 的所有元素事件
        util.event('lay-active', {
            active: function () {
                index = layer.open({
                    type: 1,
                    title: '接入方式',
                    area: ['600px']
                    , content: $('#insert')
                })
            }
            ,paraminsert(){
                location.href="{:addon_url('aliapp://shop/aliapp/config')}"
            }
            ,authinsert(){
                location.href="{:addon_url('aliapp://shop/aliapp/auth')}"
            }
        });
    });
</script>
{/block}