zhongshen_project/app/shop/view/store/select.html

{extend name="base"/}

{block name="resources"}
<style>
    html,body {width: 100%;height: 100%}
    .store-empty {display: flex;height: 100%; align-items: center;justify-content: center}
    .store-wrap {display: flex;height: 100%;flex-wrap: wrap;overflow-y: auto;padding: 15px;box-sizing: border-box}
    .store-wrap .store-item {box-sizing: border-box;margin: 0 15px 15px 0;border: 1px solid #f5f5f5;width: calc((100% - 30px) / 3);padding: 10px;cursor: pointer;height: fit-content;}
    .store-wrap .store-item.active {border-color: var(--base-color);}
    .store-wrap .store-item .name {font-weight: bold;}
    .store-wrap .store-item .status {margin: 5px 0;line-height: 1;font-size: 12px}
    .store-wrap .store-item .address {color: #999;font-size: 12px}
    .store-wrap .store-item:nth-child(3n+3) {margin-right: 0}
    .open {color: #00A717}
    .close {color: #ff0000}
</style>
{/block}

{block name="body"}
{notempty name="store_list"}
<div class="store-wrap">
    {foreach name="store_list" item="vo"}
        <div class="store-item {if in_array($vo.store_id, $store_id)}active{/if}" data-store="{$vo.store_id}">
            <div class="name">{$vo.store_name}</div>
            <div class="status">
                {if $vo.is_frozen == 1 || $vo.status == 0}
                    <span class="close">已停业</span>
                {else/}
                    <span class="open">营业中</span>
                {/if}
            </div>
            <div class="address">{$vo.full_address}{$vo.address}</div>
        </div>
    {/foreach}
</div>
{else/}
<div class="store-empty">暂无可用门店</div>
{/notempty}
{/block}

{block name="script"}
<script>
    var storeList = {:json_encode($store_list)};
    $('.store-item').click(function () {
        if ($(this).hasClass('active')) $(this).removeClass('active');
        else $(this).addClass('active');
    })

    function selectStore(callback) {
        var store = [];
        $('.store-item.active').each(function () {
            var index = $(this).index();
            store.push(storeList[index])
        })
        if (typeof callback == "function") callback(store);
    }
</script>
{/block}