qimall/backend/modules/mall/views/setting/basic/arealimit.php

<template id="limit">
    <el-row>
        <el-col :span="24">

            <el-form-item label="配送范围限制" prop="is_area_limit">
                <el-switch v-model="ruleForm.area.is_area_limit.value" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="启用乡镇级别限制" v-if="ruleForm.area.is_area_limit.value" prop="is_area_limit_town">
                <el-switch v-model="ruleForm.area.is_area_limit_town.value" :active-value="1" :inactive-value="0"></el-switch>
                <p style="color: #999">如果有更改"启用乡镇级别限制"那么就需要先保存一次且刷新当前页面方能生效</p>
            </el-form-item>
            <el-form-item label="允许购买区域" v-if="ruleForm.area.is_area_limit.value"  prop="area_limit">
                <div flex="dir:left box:last" v-if="ruleForm.area.area_limit.value.length>0" class="width-560">
                    <div flex="dir:left" style="flex-wrap: wrap">
                        <el-tag style="margin:5px;border:0" type="info" v-for="(item, index) in ruleForm.area.area_limit.value" :key="item.id" v-if="index < 300">
                            {{item.name}}
                        </el-tag>
                        <el-tag style="margin:5px;border:0" type="danger">
                            共 {{ruleForm.area.area_limit.value.length}} 项
                        </el-tag>
                    </div>
                    <div style="text-align: right">
                        <el-button type="text" @click="openDistrict" size="small" circle>
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <img src="resources/img/mall/edit.png" alt="">
                            </el-tooltip>
                        </el-button>
                        <el-button type="text" size="small" @click="space" circle>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <img src="resources/img/mall/del.png" alt="">
                            </el-tooltip>
                        </el-button>
                    </div>
                </div>
                <el-button size="small" type="text" @click="openDistrict" v-if="ruleForm.area.area_limit.value.length<=0">
                    <i class="el-icon-plus">添加地区</i>
                </el-button>
            </el-form-item>

            <el-dialog title="区域选择" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
                <div style="margin-bottom: 1rem;">
                    <com-district :rule="earaRule" :mall_id="mall_id" :is_area_limit_town="ruleForm.area.is_area_limit_town.value" @selected="selectDistrict" :level="4" :edit="earaRule"></com-district>
                    <div style="text-align: right;margin-top: 1rem;">
                        <el-button type="primary" @click="districtConfirm">
                            确定选择
                        </el-button>
                    </div>
                </div>
            </el-dialog>
        </el-col>
    </el-row>

</template>