页面各个#id各自独立化

最新推荐文章于 2021-08-05 23:12:42 发布
dj1540225203
最新推荐文章于 2021-08-05 23:12:42 发布
阅读量286
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/dj1540225203/article/details/106560512
版权
前端专栏收录该内容
9 篇文章 0 订阅
订阅专栏
页面各个#id各自独立化，这种思维可以动态化#id_$a.
<?php
defined('YII_ENV') or exit('Access Denied');
/* @var $list \app\models\Setting */

/* @var $qrcode \app\models\Qrcode */

use yii\widgets\LinkPager;

$static = Yii::$app->request->baseUrl . '/statics';
$urlManager = Yii::$app->urlManager;
$this->title = '配送功能配置';
$this->params['active_nav_group'] = 5;
?>
<style>
    .mobile-box {
        width: 219px;
        height: 450px;
        background-image: url("<?=Yii::$app->request->baseUrl?>/statics/images/mobile-iphone.png");
        background-size: cover;
        position: relative;
        font-size: .85rem;
        float: left;
        margin-right: 1rem;
    }

    .mobile-box .mobile-screen {
        position: absolute;
        top: 52px;
        left: 12px;
        right: 13px;
        bottom: 54px;
        border: 1px solid #999;
        background: #f5f7f9;
        overflow-y: hidden;
    }

    .mobile-box .mobile-navbar {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background: #fff;
    }

    .mobile-box .mobile-content {
        position: absolute;
        top: 38px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
    }

    .mobile-box .mobile-content::-webkit-scrollbar {
        width: 2px;
    }

    .right-box .order-list > div {
        border: 1px solid #e3e3e3;
        border-right-width: 0;
        cursor: pointer;
    }

    .right-box .order-list > div:hover {
        background: #f6f8f9;
    }

    .right-box .order-list > div:last-child {
        border-right-width: 1px;
    }

    .content-block.head-block {
        padding: 12px;
        background-color: #ff4544;
    }

    .content-block.menu-block {
        background-color: #fff;;
    }

    .right-box .menu-box {
        border: 1px solid #e3e3e3;
    }

    .right-box .menu-box .menu-header {
        padding: .5rem;
        border-bottom: 1px solid #e3e3e3;
    }

    .right-box .menu-box .menu-list {
        padding: .5rem;
        background: #f6f8f9;
    }

    .right-box .menu-box .menu-item {
        background: #fff;
        padding: .5rem;
        margin: .25rem 0;
    }

</style>
<div class="panel mb-3" id="app">
    <div class="panel-header"><?= $this->title ?>
       <div style="float: right;margin-right: 100px"> <?php if ($is_open['open_delivery_status'] == 0) : ?>
            <a id="speedup-audit" class="btn btn-success "
                href="javascript:;" data-id="<?= $is_open['id'] ?>">开通
            </a>
        <?php else : ?>
            <button class="btn btn-danger">已开通</button>
        <?php endif; ?>
       </div>
    </div>
    <div class="panel-body">
        <form method="post" class="form auto-form" autocomplete="off"
              return="<?= $urlManager->createUrl(['mch/dc/dc-setting/index']) ?>">
            <div class="right-box">
                <div class="form-group row">
                    <div class="form-group-label col-sm-2 text-right">
                        <label class="col-form-label">服务商</label>
                    </div>
                    <div class="col-sm-6" style="max-width: 500px">
                        <div class="menu-box">
                            <div class="menu-list">
                                <?php foreach ($option as $k => $v) : ?>
                                    <div class="menu-item" flex="dir:left box:justify cross:center">
                                        <div class="pl-3" style="width: 50%;">
                                            <?= $v['name'] ?><input type="hidden" name="<?= 'dc_list['. $k. '][name]' ?>" value="<?= $v['name'] ?>" />
                                            <span id="default_dc<?= $k ?>" style="color: green;">
                                                <?php if ($v['is_default'] == 1): ?>
                                                    [默认]
                                                <?php endif; ?>
                                            </span>
                                            <input type="hidden" name="<?= 'dc_list['. $k. '][is_default]' ?>" id="is_default<?= $k ?>" value="<?= $v['is_default'] ?>" />
                                        </div>
                                        <div class="pl-3">
                                            <input type="hidden" name="<?= 'dc_list['. $k. '][status]' ?>" id="status<?= $k ?>" value="<?= $v['status'] ?>" />
                                            <span id="status_dc<?= $k ?>">
                                                <?php if ($v['status'] == 0): ?>
                                                    未开通
                                                <?php elseif ($v['status'] == 1): ?>
                                                    已开通
                                                <?php else :?>
                                                    配置错误
                                                <?php endif; ?>
                                            </span>
                                        </div>
                                        <div class="pl-3">
                                            <input type="hidden" name="<?= 'dc_list['. $k. '][appkey]' ?>" id="appKey<?= $k ?>" value="<?= $v['appkey'] ?>" />
                                            <input type="hidden" name="<?= 'dc_list['. $k. '][secret]' ?>" id="secret<?= $k ?>" value="<?= $v['secret'] ?>" />
                                            <input type="hidden" name="<?= 'dc_list['. $k. '][service_code]' ?>" id="service_code<?= $k ?>" value="<?= $v['service_code'] ?>" />
                                            <a class="btn btn-sm btn-danger edit clickkey"  href="javascript:;" data-id="<?= $k ?>" data-toggle="modal" keyValue="<?= $k?>" data-target="#dcSetting">
                                            <span id="edit_dc<?= $k ?>">
                                                <?php if ($v['status'] == 0): ?>
                                                    申请开通
                                                <?php else :?>
                                                    修改配置
                                                <?php endif; ?>
                                            </span>
                                            </a>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="form-group-label col-2 text-right">
                    </div>
                    <div class="col-5">
                        <a class="btn btn-primary auto-form-btn" href="javascript:">保存</a>
                    </div>
                </div>

            </div>

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

<div class="modal fade" id="dcSetting" data-backdrop="static">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">服务配置</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <div class="form-group-label col-4 text-right">
                        <label class="col-form-label">appKey</label>
                    </div>
                    <div class="col-8">
                        <input name="appKey" id="appKey" placeholder="请填写appKey" value="" class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="form-group-label col-4 text-right">
                        <label class="col-form-label">secret</label>
                    </div>
                    <div class="col-8">
                        <input name="secret" id="secret" placeholder="请填写secret" value="" class="form-control">
                    </div>
                </div>
                        <div class="form-group row">
                            <div class="form-group-label col-4 text-right">
                                <label class="col-form-label">配置服务</label>
                            </div>
                            <div class="col-8">
                                <select id="service_code">
                                    <option value="">请选择配置服务</option>
                                    <option value="4002">飞速达</option>
                                    <option value="4011">快速达</option>
                                    <option value="4012">及时达</option>
                                    <option value="4013">集中送</option>
                                </select>
                            </div>
                        </div>

                <div class="form-group row">
                    <div class="form-group-label col-4 text-right">
                        <label class="col-form-label">默认</label>
                    </div>
                    <div class="col-8">
                        <label class="radio-label">
                            <input value="1" name="is_default" type="radio" class="custom-control-input">
                            <span class="label-icon"></span> <span class="label-text">是</span>
                        </label>
                        <label class="radio-label">
                            <input value="0" name="is_default" type="radio" class="custom-control-input">
                            <span class="label-icon"></span> <span class="label-text">否</span>
                        </label>
                    </div>
                </div>
                <div class="form-error text-danger mt-3 rechange-error" style="display: none">ddd</div>
                <div class="form-success text-success mt-3" style="display: none">sss</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary save-dc">提交</button>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    var id = '';
    $(document).on('click', '.edit', function () {
        id = $(this).data('id');
        var appKey = $('#appKey' + id).val();
        var secret = $('#secret' + id).val();
        var service_code = $('#service_code' + id).val();
        var is_default = $('#is_default' + id).val();
        $('input[name=appKey]').val(appKey);
        $('input[name=secret]').val(secret);
        $(":radio[name='is_default'][value='" + is_default + "']").prop("checked", "checked");
        $('#service_code').find('option[value="'+ service_code +'"]').attr('selected','selected');
    });

    $(document).on('click', '.save-dc', function () {
        var appKey = $('#appKey').val();
        var secret = $('#secret').val();
        var service_code = $("#service_code").find("option:selected").val();
        var is_default = $('input[name="is_default"]:checked ').val();
        var btn = $(this);
        if (!appKey) {
            $('.rechange-error').css('display', 'block');
            $('.rechange-error').text('请填写appKey');
            btn.btnReset();
            return;
        }
        if (!secret) {
            $('.rechange-error').css('display', 'block');
            $('.rechange-error').text('请填写secret');
            btn.btnReset();
            return;
        }
        if (!service_code) {
            $('.rechange-error').css('display', 'block');
            $('.rechange-error').text('请选择配送服务');
            btn.btnReset();
            return;
        }

        for (i=1; i<=3; i++) {
            if (i != id) {
                $('#default_dc' + id).text('');
                $('#is_default' + id).val(0);
            }
        }
        if (is_default == 1) {
            $('#default_dc' + id).text('[默认]');
        }else{
            $('#default_dc' + id).text('');
        }
        $('#appKey' + id).val(appKey);
        $('#secret' + id).val(secret);
        $('#service_code' + id).val(service_code);
        $('#is_default' + id).val(is_default);
        $('#status' + id).val(1);
        $('#status_dc' + id).text('已开通');
        $('#edit_dc' + id).text('修改配置');
        $("#dcSetting").modal('hide');
        return false;
    });
</script>

<script>
    //开通
    $(document).on('click', '#speedup-audit', function () {
        id = $(this).attr('data-id');
        $.myConfirm({
            content: '确定要开通及时配送吗？',
            confirm: function () {
                $.myLoading();
                $.ajax({
                    url: "<?= $urlManager->createUrl(['admin/wechat-audit/open-delivery']) ?>",
                    type: 'post',
                    dataType: 'json',
                    data: {id: id, _csrf: _csrf},
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                offset: 'm',
                                anim: 6,
                                time: 2000
                            });
                            window.location.reload();
                        } else {
                            layer.msg(res.msg, {
                                offset: 'm',
                                anim: 6,
                                time: 2000
                            });
                        }
                    },
                    complete: function () {
                        $.myLoadingHide();
                    }
                });
            }
        });
        return false;
    });

</script>