dlh_test_server/app/admin/view/distribution/distribution_partner/edit.html

{layout name="layout2" /}
<style>
    .city {
        margin: 10px 0 10px 110px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        justify-content: space-between;
        align-items: center;
    }

    .city-name {
        position: relative;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    .remove-city {
        position: absolute;
        right: 0;
        top: 50%;
        cursor: pointer;
        transform: translateY(-50%);
    }
</style>
<div class="layui-form" lay-filter="">
    <div class="layui-tab">
        <input type="hidden" name="id" value="{$info.id}">

        <div class="layui-form-item layui-col-sm6  layui-col-md4">
            <label class="layui-form-label"><font color="red">*</font>比例%</label>
            <div class="layui-input-block">
                <input type="text" value="{$info.proportion}" name="proportion" lay-verify="required" lay-verType="tips" placeholder="请输入比例，不用输入百分号"
                    autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-col-sm6  layui-col-md4">
            <label class="layui-form-label"><font color="red">*</font>合伙人类型</label>
            <div class="layui-input-block">
                <select name="type" class="layui-select" lay-search >
                    {volist name='partner' id='vo'}
                    <option value="{$i}" {if condition="$info.type eq $i"}selected{/if}>{$vo}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-col-sm6  layui-col-md4">
            <label class="layui-form-label"><font color="red">*</font>选择重点城市</label>
            <div class="layui-input-block" style="margin-top: 6px">
                <select name="city" class="layui-select" lay-search lay-filter="city">
                    <option value="">请选择</option>
                    {volist name='city' id='vo'}
                    <option value="{$vo.name}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
            <!--不要删除这个city节点-->
            <div class="city"></div>
        </div>

        <div class="layui-form-item layui-col-sm6  layui-col-md4">
            <label class="layui-form-label"><font color="red">*</font>重点城市缴费金额</label>
            <div class="layui-input-block">
                <input type="text" name="core_city_money" lay-verify="required" lay-verType="tips" placeholder="请输入重点城市缴费金额"
                    value="{$info.core_city_money}" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-col-sm6  layui-col-md4">
            <label class="layui-form-label"><font color="red">*</font>非重点城市缴费金额</label>
            <div class="layui-input-block">
                <input type="text" name="un_core_city_money" lay-verify="required" lay-verType="tips" placeholder="请输入非重点城市缴费金额"
                    value="{$info.un_core_city_money}" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-col-sm6  layui-col-md4">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
                <select name="is_show" class="layui-select">
                    <option value="1" {if condition="$info.is_show == 1"} selected {/if}>是</option>
                    <option value="0" {if condition="$info.is_show == 0"} selected {/if}>否</option>
                </select>
            </div>
        </div>
        <input type="hidden" name="citys">
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="edit-recharge-submit" id="edit-recharge-submit" value="确认">
        </div>
    </div>
</div>
<script>
    layui.config({
        version: "{$front_version}",
        base: '/static/lib/' //静态资源所在路径
    }).use(['form'], function () {
        var $ = layui.$
            , form = layui.form

        const partner = {
            city_arr: [],
            city() {
                // 添加城市
                form.on('select(city)', function (data) {
                    if (!partner.city_arr.includes(data.value) && data.value !== '') {
                        partner.city_arr.push(data.value)

                        let dom = `
                         <div class="city-name">
                            ${data.value}
                            <i class="layui-icon remove-city" data-city="${data.value}">&#x1007;</i>
                         </div>
                    `
                        $(".city").append(dom)
                    }

                    $("input[name='citys']").val(partner.city_arr.join(','))
                });

                // 删除城市
                $(document).on("click", ".remove-city", function (e) {
                    const txt = $(this).data('city')
                    $(this).parent().remove()

                    partner.city_arr = partner.city_arr.filter((v, i) => {
                        return v !== txt
                    })
                    $("input[name='citys']").val(partner.city_arr.join(','))
                });
            },

            setCity(c) {
                $("input[name='citys']").val(c)

                partner.city_arr = c.split(',')
                partner.city_arr.forEach((v) => {
                    let dom = `
                         <div class="city-name">
                            ${v}
                            <i class="layui-icon remove-city" data-city="${v}">&#x1007;</i>
                         </div>
                    `
                    $(".city").append(dom)
                })
            }
        }

        partner.city()
        partner.setCity('{$info.city}')
    });
</script>