antshop/backend/views/express-template/area.php

<?php
use yii\helpers\Html;
use antkaz\vue\VueAsset;
use xj\babel\BrowserAsset;

VueAsset::register($this); // register VueAsset
xj\babel\BrowserAsset::register($this);

?>
<style>
    .goods-create {
        overflow: visible!important;
    }
    .city--list.popup {
        top: 35px;
        max-height: 480px;
        overflow: auto;
    }

    #app label {
        display: flex;
        margin: 0;
    }
    #app  label span {
        flex-shrink: 0;
    }
    #app label input {
        width: unset!important;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    .list-complete-item {
        transition: all 1s;
        display: inline-block;
        margin-right: 10px;
    }
    .list-complete-enter, .list-complete-leave-to
        /* .list-complete-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(30px);
    }
    .list-complete-leave-active {
        position: absolute;
    }
    div,p{margin:0;padding:0; line-height:1.5;}
    .checks{ padding-left:20px;}

    .province--list, .city--list {
        display: flex;
        flex-wrap: wrap;
        padding-left: 10px;
        list-style-type: none;
    }

    .province--list > li {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        position: relative;
        margin-right: 10px;
        padding: 5px 10px;
    }

    .province--list > li .city--list {
        position: absolute;
        padding: 10px;
        background: #fff;
        z-index: 10000;
        box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);
        border-radius: 10px;
        /*opacity: 0;*/
        /*transition: all .2s;*/
    }

    /*.province--list > li.active {*/
    /*box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);*/
    /*}*/

    .province--list > li.active {
        color: #259c24;
    }
    .province--list > li.active .city--list {
        opacity: 1;

    }

    .province--list > li ul li {
        display: block;
        width: 200px;
        padding: 0;
    }

    input[type="checkbox"] {
        margin-right: 5px;
    }

    .glyphicon {
        padding: 5px;
        transition: all .2s;
        cursor: pointer;
    }

    .glyphicon.glyphicon-menu-down.switch--popup {
        position: relative;
        top: -1px;
    }
    .province--list > li.active .glyphicon {
        transform: rotate(180deg);
    }

    .shade {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }
    label {
        font-weight: normal;
    }

    .display-checked ul li {
        position: relative;
        display: inline-block;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        list-style-type: none;
        background: #00a65a;
        color: #fff;
    }

    .display-checked ul li ul {
        position: absolute;
        left: 50%;
        width: 200px;
        padding: 10px;
        opacity: 0;
        background: #fff;
        z-index: 10000;
        box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);
        border-radius: 10px;
        transform: translateX(-50%);
        transition: all .2s;
    }

    .display-checked ul li:hover ul {
        opacity: 1;

    }

    .display-checked .close {
        float: none!important;
        padding: 0;
        font-size: 1em;
        color: #fff;
        opacity: 1;
        transition: all .2s;
    }

    .display-checked .close:active {
        transform: scale(.6);
    }
</style>
<div id="app" class="vue">
    <div class="display-checked">
        <p>已选：</p>
        <ul>
            <li
                v-for="province in area.filter(i => i.city.find(j => j.checked))"
                :key="province.id"
                class="list-complete-item"
            >
                <div
                    class="close glyphicon glyphicon-remove"
                    title="删除"
                    @click="province.checked = false; province.city.forEach(i => i.checked = false)"
                ></div>
                <span>{{province.province}}</span>
                <!--                <ul>-->
                <!--                    <li>-->
                <!--                        <div class="close glyphicon glyphicon-remove" title="删除"></div>-->
                <!--                        <span>广东省</span>-->
                <!--                    </li>-->
                <!--                </ul>-->
            </li>
        </ul>
    </div>
    <div class="J_CheckWrap">
        <div v-if="activeProvince >= 0" @click="activeProvince = -1" class="shade" id="shade-layer"></div>
        <label class="check-all"><input type="checkbox" v-model="isCheckAll" /><span>全选</span></label>
        <div class="checks">
            <ul class="province--list">
                <li data-role="province" v-for="(province, index) in area">
                    <label data-type="province">
                        <input
                            type="checkbox"
                            v-model="province.checked"
                            @change="province.city.forEach(i => i.checked = province.checked)"
                        />
                        <span>{{province.province}}</span>
                    </label>
                    <div
                        class="glyphicon glyphicon-menu-down switch--popup"
                        @click="activeProvince = index"
                    ></div>
                    <transition name="fade">
                        <ul v-show="activeProvince === index" class="city--list popup">
                            <li class="checks" v-for="city in province.city">
                                <label>
                                    <input
                                        type="checkbox"
                                        :name="`area[${city.id}]`"
                                        <?php // in_array($city->city_id,$cities)?'checked':'' ?>
                                            value="city.id"
                                        v-model="city.checked"
                                        @change="province.id = area[area.length - 1].id + 1; province.checked = province.city.every(i => i.checked)"
                                    />{{city.name}}</label>
                            </li>
                        </ul>
                    </transition>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            area: (<?= json_encode($data) ?>).map(i => {
                return {
                    ...i,
                    city: i.city.map(j => {return {...j, checked: false}}),
                    checked: false
                }
            }),
            checkedAreaIds: (<?= json_encode($cities) ?>),
            activeProvince: -1
        },
        computed: {
            isCheckAll: {
                get() {
                    return this.area.every(i => i.checked)
                },
                set(value) {
                    this.area.forEach(i => {
                        i.checked = value;
                        i.city.forEach(j => j.checked = value)
                    })
                }
            }
        },
        methods: {
            clickProvince(index) {
                for (let city in this.area[index].city) {
                    city.checked = this.area[index].checked
                }
            },
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        },
        created() {
            this.checkedAreaIds.length > 0 && this.area.forEach(province => {
                let count = 0;
                province.city.forEach(city => {
                    if (this.checkedAreaIds.indexOf(city.id.toString()) >= 0) {
                        city.checked = true;
                        count++;
                    }
                });
                if (count >= province.city.length) {
                    province.checked = true;
                }
            })
            // document.body.addEventListener('click', e => {
            //     let isSwitch = e.target.classList.contains('switch--popup');
            //     let isCheckbox = e.target.type === 'checkbox';
            //     let isLabel = e.target.dataset.type === 'province';
            //
            //     if (this.activeProvince >= 0 && !isCheckbox && !isSwitch && !isLabel) {
            //         this.activeProvince = -1;
            //         e.stopPropagation();
            //     }
            // })
        }
    });
</script>

<div>


<script type="text/javascript" src="/js/jquery.min.js"></script>
<!--<script >-->
<!--//-->
<!--//    (function (win, doc, $) {-->
<!--//        $.fn.extend({-->
<!--//            checktree : function () {-->
<!--//                this.click(function (evt) {-->
<!--//                    var evtEle = $(evt.target).closest("input:checkbox");-->
<!--//                    if (!evtEle[0]) {-->
<!--//                        return;-->
<!--//                    }-->
<!--//                    //check child all-->
<!--//                    evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);-->
<!--//-->
<!--//                    //check parent-->
<!--//                    if (evtEle.is("input:checked")) {-->
<!--//                        // evtEle.parents(".checks").each(function () {-->
<!--//                        //     !$(this).children("p").children("input:checkbox").filter(function () {-->
<!--//                        //         return !this.checked;-->
<!--//                        //     })[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");-->
<!--//                        // });-->
<!--//                    } else {-->
<!--//                        evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);-->
<!--//                    }-->
<!--//                });-->
<!--//            }-->
<!--//        });-->
<!--////        document.querySelector('.container-fluid.form-vertical').addEventListener('submit', function (e) {-->
<!--////-->
<!--////            alert('ggg');-->
<!--////            e.preventDefault();-->
<!--////            return false;-->
<!--////        })-->
<!--//    })(window, document, jQuery);-->
<!---->
<!--    function $(query) {-->
<!--        return document.querySelector(query);-->
<!--    }-->
<!---->
<!--    function $$(query) {-->
<!--        return document.querySelectorAll(query);-->
<!--    }-->
<!---->
<!--    var activeProvince = null;-->
<!---->
<!--    window.addEventListener('click', function (e) {-->
<!--        function $(query) {-->
<!--            return document.querySelector(query);-->
<!--        }-->
<!---->
<!--        if (e.target.type === 'checkbox') {-->
<!--            var parent = e.target.parentElement;-->
<!---->
<!--            if (parent.dataset.type === 'province') {-->
<!--                // 点击省复选框-->
<!--                // parent.parentElement.className = e.target.checked ? 'active' : '';-->
<!---->
<!--                var ul = parent.nextElementSibling;-->
<!--                var inputList = ul.querySelectorAll('input[type="checkbox"]');-->
<!---->
<!--                for (var i = 0, input; input = inputList[i++];) {-->
<!--                    input.checked = e.target.checked;-->
<!--                }-->
<!---->
<!--                var isCheckedAllProvince = Array.prototype.every.call($$('.checkbox-province'), i => i.checked);-->
<!---->
<!--                $('#check-all-province').checked = isCheckedAllProvince;-->
<!--            } else {-->
<!--                // 点击城市复选框-->
<!--                var parentUL = e.target.parentElement.parentElement.parentElement;-->
<!--                var inputList = parentUL.querySelectorAll('input');-->
<!--                var parentInput = parentUL.previousElementSibling.querySelector('input');-->
<!--                var isCheckedAllCity = Array.prototype.every.call(inputList, i => i.checked);-->
<!--                parentInput.checked = isCheckedAllCity;-->
<!--                var isCheckedAllProvince = Array.prototype.every.call($$('.checkbox-province'), i => i.checked);-->
<!--                $('#check-all-province').checked = isCheckedAllProvince;-->
<!--            }-->
<!--        }-->
<!--        if (e.target.className === 'glyphicon glyphicon-menu-down switch--popup') {-->
<!--            var parentLi = e.target.parentElement;-->
<!---->
<!--            if (parentLi.classList.contains('active')) {-->
<!--                parentLi.classList.remove('active');-->
<!--                activeProvince = null;-->
<!--                $('#shade-layer').className = ''-->
<!--            } else {-->
<!--                activeProvince && (activeProvince.className = '');-->
<!--                parentLi.classList.add('active');-->
<!--                activeProvince = parentLi;-->
<!--                // $('#shade-layer').className = 'shade'-->
<!--            }-->
<!--        } else {-->
<!--            function $(query) {-->
<!--                return document.querySelector(query);-->
<!--            }-->
<!--            activeProvince && (activeProvince.className = '');-->
<!--            activeProvince = null;-->
<!--            $('#shade-layer').className = '';-->
<!--        }-->
<!--    });-->
<!---->
<!--    $('#check-all-province').addEventListener('change', function (e) {-->
<!--        Array.prototype.forEach.call($$('.checkbox-province'), function (input) {-->
<!--            input.checked = e.target.checked;-->
<!--            var parent = input.parentElement;-->
<!---->
<!--            var ul = parent.nextElementSibling;-->
<!--            var inputList = ul.querySelectorAll('input[type="checkbox"]');-->
<!---->
<!--            for (var i = 0, item; item = inputList[i++];) {-->
<!--                item.checked = e.target.checked;-->
<!--            }-->
<!--        })-->
<!--    });-->
<!---->
<!--    // $('#shade-layer').addEventListener('click', function () {-->
<!--    //     function $(query) {-->
<!--    //         return document.querySelector(query);-->
<!--    //     }-->
<!--    //     activeProvince && (activeProvince.className = '');-->
<!--    //     activeProvince = null;-->
<!--    //     $('#shade-layer').className = '';-->
<!--    // });-->
<!---->
<!--</script>-->
<!--<script>-->
<!--    $(".J_CheckWrap").checktree();-->
<!--</script>-->
</div>