hemall.terabimsoft.com.cn/plugins/city-delivery/views/admin/setting.blade.php

@extends('layouts.base')
@section('title', '基础设置')
@section('content')
    <script src="https://webapi.amap.com/maps?v=1.4.15&key={!!$a_map_key!!}&plugin=AMap.PolyEditor"></script>
    {{--    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css?time='.time())}}"/>--}}
    {{--    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.css?time='.time())}}"/>--}}
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        .el-checkbox-group {
            position: relative;
            z-index: 0;
        }

        .el-checkbox {
            margin-top: 10px !important;
        }

        body {
            font-family: arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti
        }

        #container {
            width: 100%;
            height: 500px;
        }

        .rightlist #app .el-breadcrumb {
            padding: 30px 0;
            font-size: 16px;
        }

        .el-breadcrumb__inner a {
            font-weight: 500;
        }

        .rightlist #app {
            margin-left: 30px;
        }

        .el-form-item__label {
            padding-right: 30px;
        }

        .el-button {
            margin-right: 30px;
        }

        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {
            left: 100%;
            margin-left: -17px;
        }

        .el-switch__core::after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 100%;
            transition: all .3s;
            width: 16px;
            height: 16px;
            background-color: #fff;
        }

        /* 上传图片 */
        .avatar-uploader .el-upload {
            margin-top: 15px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload-tip {
            width: 178px;
            margin: 0;
            padding: 0;
            color: #999;
            text-align: center;
        }

        input[type=file] {
            display: none;
        }

        .avatar-uploader-box {
            position: relative;
            width: 200px;
        }

        .el-icon-circle-close {
            position: absolute;
            top: 10px;
            right: 0;
            color: #999;
        }

        .tip {
            color: #999;
            font-size: 12px;
        }

        .input-card {
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border-radius: .25rem;
            width: 22rem;
            border-width: 0;
            border-radius: 0.4rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.75rem 1.25rem;
        }

        .amap-marker .amap-icon img[src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"] {
            width: 25px;
            height: 34px;
        }

    </style>


    <div id='re_content' class="rightlist">

        <div class="con">
            <el-form ref="form" label-width="15%">


                <div class="vue-head">

                    <div class="vue-main-title">
                        <div class="title" style="margin-top: 20px;">
                            <span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span>
                            <b>[[plugin_name]]</b>
                        </div>
                    </div>

                    <div class="vue-main-form">
                        <el-form-item label="应用名">
                            <el-input size="medium" v-model="form.plugin_name"
                                      style="width:50%;"></el-input>
                        </el-form-item>
                    </div>

                    <div class="vue-main-form">
                        <el-form-item label="开启插件">
                            <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.open_state"
                                    active-color="#13ce66"
                                    inactive-color="#808080"
                            >
                            </el-switch>
                        </el-form-item>
                    </div>


                    <div class="vue-main-form">
                        <el-form-item label="第三方配送">
                            <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.another_delivery_state"
                                    active-color="#13ce66"
                                    inactive-color="#808080"
                            >
                            </el-switch>
                        </el-form-item>
                    </div>

                    <template v-if="form.another_delivery_state==1">

                        <div class="vue-main-form">
                            <el-form-item label="自动创建第三方订单">
                                <el-switch
                                        :active-value="1"
                                        :inactive-value="0"
                                        v-model="form.auto_push"
                                        active-color="#13ce66"
                                        inactive-color="#808080"
                                >
                                </el-switch>
                            </el-form-item>
                        </div>

                        <div class="vue-main-form">
                            <el-form-item label="配送方式">
                                <el-radio-group v-model="form.delivery_type">
                                    <el-radio :label="1">顺丰同城</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>

                        <div class="vue-main-form" v-if="form.delivery_type==1">
                            <el-form-item label="开发者账号">
                                <el-input size="medium" style="width: 50%" v-model="form.sf_key"></el-input>
                            </el-form-item>

                            <el-form-item label="开发者秘钥">
                                <el-input size="medium" style="width: 50%" v-model="form.sf_secret"></el-input>
                            </el-form-item>

                            <el-form-item label="店铺ID">
                                <el-input size="medium" style="width: 50%" v-model="form.sf_store_id"></el-input>
                            </el-form-item>

                            <el-form-item label="顺丰同城回调地址">
                                <el-input size="medium" style="width: 50%" v-model="sf_callback_url"
                                          disabled="true"></el-input>
                                <el-button size="medium" type="primary" @click="copyUrl(sf_callback_url)">复制</el-button>
                            </el-form-item>
                        </div>

                    </template>

                </div>


                <div class="vue-head">

                    <div class="vue-main-title">
                        <div class="title" style="margin-top: 20px">
                            <span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span>
                            <b>预约配送</b>
                        </div>
                    </div>

                    <div class="vue-main-form">
                        <el-form-item label="预约配送">
                            <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="form.future_state"
                                    active-color="#13ce66"
                                    inactive-color="#808080"
                            >
                            </el-switch>
                        </el-form-item>
                    </div>


                    <template v-if="form.future_state==1">

                        <div class="vue-main-form">
                            <el-form-item label="配送时段">
                                <el-radio-group v-model="form.time_type">
                                    <el-radio :label="0">全天</el-radio>
                                    <el-radio :label="1">自定义</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>

                        <div class="vue-main-form">
                            <el-form-item label="配送时段" v-if="form.time_type==1">
                                <el-button size="medium" @click="addFutureWeekArr()">添加星期</el-button>
                                <template v-for="(v,k) in form.time_arr">
                                    <el-row>
                                        <el-col :span="10">
                                            <el-checkbox-group @change="futureWeekChange()" v-model="v.week_day">
                                                <el-checkbox :disabled="futureWeekDisabled(k,1)" :label=1>周一
                                                </el-checkbox>
                                                <el-checkbox :disabled="futureWeekDisabled(k,2)" :label=2>周二
                                                </el-checkbox>
                                                <el-checkbox :disabled="futureWeekDisabled(k,3)" :label=3>周三
                                                </el-checkbox>
                                                <el-checkbox :disabled="futureWeekDisabled(k,4)" :label=4>周四
                                                </el-checkbox>
                                                <el-checkbox :disabled="futureWeekDisabled(k,5)" :label=5>周五
                                                </el-checkbox>
                                                <el-checkbox :disabled="futureWeekDisabled(k,6)" :label=6>周六
                                                </el-checkbox>
                                                <el-checkbox :disabled="futureWeekDisabled(k,7)" :label=7>周日
                                                </el-checkbox>
                                            </el-checkbox-group>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-button-group style="align:left">
                                                <el-button size="medium" @click="addFutureTimeArr(k)">添加时间段</el-button>
                                                <el-button size="medium" type="danger" @click="deleteFutureWeekArr(k)">
                                                    删除星期
                                                </el-button>
                                            </el-button-group>
                                        </el-col>
                                        {{--                                        <el-col :span="2">--}}
                                        {{--                                            <el-button size="medium" type="danger" @click="deleteFutureWeekArr(k)">删除星期--}}
                                        {{--                                            </el-button>--}}
                                        {{--                                            <el-button size="medium" @click="addFutureTimeArr(k)">添加时间段</el-button>--}}
                                        {{--                                        </el-col>--}}
                                    </el-row>


                                    <template v-for="(vv,kk) in v.time_arr">
                                        <el-select size="medium" v-model="vv.start_time">
                                            <el-option
                                                    v-for="item in start_time_arr"
                                                    :label="item.label"
                                                    :value="item.value"
                                            ></el-option>
                                        </el-select>

                                        <el-select size="medium" v-model="vv.end_time">
                                            <el-option
                                                    v-for="item in end_time_arr"
                                                    :label="item.label"
                                                    :value="item.value"
                                            ></el-option>
                                        </el-select>
                                        <el-button size="medium" type="danger" @click="deleteFutureTimeArr(k,kk)">删除
                                        </el-button>
                                        <p></p>
                                    </template>

                                </template>
                            </el-form-item>

                            <el-form-item label="细分时段">
                                <el-radio-group v-model="form.time_divide">
                                    <el-radio :label="1">天</el-radio>
                                    <el-radio :label="2">小时</el-radio>
                                    <el-radio :label="3">30分钟</el-radio>
                                    <el-radio :label="4">15分钟</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="预约下单">
                                <el-row>
                                    <el-col :span="5">
                                        <el-input size="medium" v-model="form.before_time"></el-input>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-select size="medium" v-model="form.before_time_type">
                                            <el-option :label="'天'" :value=1></el-option>
                                            <el-option :label="'小时'" :value=2></el-option>
                                            <el-option :label="'分钟'" :value=3></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <div class="tip">填0时为无需提前</div>
                                <div class="tip">按天时为自然天，不论当前几点，只能下明天以后的订单</div>
                            </el-form-item>

                            <el-form-item label="最长预约">
                                <el-row>
                                    <el-col :span="5">
                                        <el-input size="medium" v-model="form.max_day">
                                            <template slot="prepend">可预约</template>
                                            <template slot="append">天内下单</template>
                                        </el-input>
                                    </el-col>
                                </el-row>
                                <div class="tip">当天数小于等于1时，只能当天下单</div>
                                <div class="tip">如：可预约7天内订单，即今天与未来6天的送达时间可让买家选择</div>
                            </el-form-item>

                            <el-form-item label="下单时默认选择">
                                <el-radio-group v-model="form.default_choose">
                                    <el-radio :label="0">不选择</el-radio>
                                    <el-radio :label="1">选择最近时段</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </template>
                </div>


                <div class="vue-head">

                    <div class="vue-main-title">
                        <div class="title" style="margin-top: 20px">
                            <span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span>
                            <b>配送区域</b>
                        </div>
                    </div>

                    <div class="vue-main-form">

                        <el-form-item label="店铺地址">
                            <el-input size="medium" style="width: 50%" :disabled="true"
                                      v-model="form.store_address"></el-input>
                            <a href="{{yzWebFullUrl("setting.shop.contact")}}" target="_blank" style="margin-left:15px">修改地址</a>
                        </el-form-item>

                        <el-form-item label="配送区域">
                            <el-radio-group v-model="form.distance_type" @change="showMapDiv()">
                                <el-radio :label="1">按距离</el-radio>
                                <el-radio :label="2">行政区域</el-radio>
                                <el-radio :label="3">社区</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="起送金额">
                            <el-input size="medium" style="width: 50%" v-model="form.min_amount">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>

                        <template v-if="form.distance_type!=3">
                            <el-form-item label="距离加价">
                                <div class="tip">
                                    <el-button @click="addDistance()">添加距离范围</el-button>
                                    根据用户下单定位地址经纬度+商家地址经纬度,请求高德计算骑行距离，如留空则不计算距离加价，高德请求次数存在每日限制，请根据实际情况申请配额
                                </div>
                                <p></p>
                                <template v-for="(v,k) in form.distance_setting">
                                    <el-input size="medium" style="width: 30%" v-model="v.unit">
                                        <template slot="append" v-if="v.level==1">公里内</template>
                                        <template slot="prepend" v-if="v.level!=1">范围</template>
                                        <template slot="append" v-if="v.level!=1">公里</template>
                                    </el-input>
                                    <el-input size="medium" style="width: 30%" v-model="v.amount">
                                        <template slot="prepend" v-if="v.level==1">起步价</template>
                                        <template slot="prepend" v-if="v.level!=1">每公里加价</template>
                                        <template slot="append">元</template>
                                    </el-input>
                                    <el-button size="medium" type="danger" @click="deleteDistance(k)">删除</el-button>
                                    <p></p>
                                </template>
                            </el-form-item>

                            <el-form-item label="重量加价">
                                <div class="tip">
                                    <el-button size="medium" @click="addWeight()">添加重量范围</el-button>
                                    取商品设置的重量计算，如留空则不计算重量加价
                                </div>
                                <p></p>
                                <template v-for="(v,k) in form.weight_setting">
                                    <el-input size="medium" style="width: 30%" v-model="v.unit">
                                        <template slot="append" v-if="v.level==1">KG内</template>
                                        <template slot="prepend" v-if="v.level!=1">范围</template>
                                        <template slot="append" v-if="v.level!=1">KG</template>
                                    </el-input>
                                    <el-input size="medium" style="width: 30%" v-model="v.amount">
                                        <template slot="prepend" v-if="v.level==1">起步价</template>
                                        <template slot="prepend" v-if="v.level!=1">每KG加价</template>
                                        <template slot="append">元</template>
                                    </el-input>
                                    <el-button size="medium" type="danger" @click="deleteWeight(k)">删除</el-button>
                                    <p></p>
                                </template>
                            </el-form-item>

                            <el-form-item label="夜间加价">
                                <div class="tip">
                                    <el-button size="medium" @click="addNight()">添加夜间范围</el-button>
                                    在设置的夜间时间范围内下单，加收费用！如留空，则不计算夜间加价。当配送时间与多个夜间加价时间范围重叠时，取加价费用最高的一个。当开启预约时间且细分时间设置为天时，夜间加价失效。
                                </div>
                                <p></p>
                                <template v-for="(v,k) in form.night_setting">
                                    时间段
                                    <el-select size="medium" v-model="v.start_time">
                                        <el-option
                                                v-for="item in start_time_arr"
                                                :label="item.label"
                                                :value="item.value"
                                        ></el-option>
                                    </el-select>
                                    至
                                    <el-select size="medium" v-model="v.end_time">
                                        <el-option
                                                v-for="item in end_time_arr"
                                                :label="item.label"
                                                :value="item.value"
                                        ></el-option>
                                    </el-select>
                                    <el-input v-model="v.amount" style="width: 30%" size="medium">
                                        <template slot="prepend">加价</template>
                                        <template slot="append">元</template>
                                    </el-input>
                                    <el-button size="medium" type="danger" @click="deleteNight(k)">删除</el-button>
                                    <p></p>
                                </template>
                            </el-form-item>
                        </template>


                        <el-form-item label="配送价格" v-if="form.distance_type==3">
                            <el-input size="medium" style="width: 50%" v-model="form.community_price"
                                      placeholder="请输入配送价格"></el-input>
                        </el-form-item>

                        <el-form-item label="配送区域" style="margin-bottom: 200px">
                            <div id="map_div" style="display: none">
                                <div style="position: relative;width:70%;">
                                    <div id="container"></div>
                                    <div class="input-card" style="width: 120px;position: absolute;">
                                        <button type="button" class="btn" onclick="openEdit()"
                                                style="margin-bottom: 5px">
                                            开始编辑
                                        </button>
                                        <button type="button" class="btn" onclick="polyEditor.close()">结束编辑</button>
                                    </div>
                                </div>
                            </div>


                            <div v-if="form.distance_type==2">
                                <el-select size="medium" filterable v-model="form.province_id" @change="provinceChange">
                                    <el-option :label="'请选择省份'" :value="0"></el-option>
                                    <el-option
                                            v-for="item in province_list"
                                            :label="item.areaname"
                                            :value="item.id"
                                    ></el-option>
                                </el-select>
                                <el-select size="medium" filterable v-model="form.city_id" @change="cityChange">
                                    <el-option :label="'请选择城市'" :value="0"></el-option>
                                    <el-option
                                            v-for="item in city_list"
                                            v-if="item.parentid==form.province_id"
                                            :label="item.areaname"
                                            :value="item.id"
                                    ></el-option>
                                </el-select>
                                <el-cascader
                                        v-model="form.choose_area"
                                        :options="area_list"
                                        :props="{ multiple: true, checkStrictly: true }"
                                        clearable></el-cascader>
                            </div>

                            <div v-if="form.distance_type==3" style="width: 70%">
                                <el-input size="medium" style="width: 50%" v-model="new_community_name"
                                          placeholder="请输入社区名称"></el-input>
                                <el-button size="medium" type="primary" @click="addCommunity()">新增社区</el-button>
                                <p></p>
                                <el-tag style="margin-left: 10px" v-for="tag in form.community_list"
                                        closable @close="deleteCommunity(tag)" :disable-transitions="true">
                                    [[tag]]
                                </el-tag>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>

            <div style=" width: calc(100% - 266px);
            position: fixed;
            bottom: 0;
            right: 0;
            margin-right: 10px;
            line-height: 63px;
            background-color: #ffffff;
            box-shadow: 0px 8px 23px 1px rgba(51, 51, 51, 0.3);
            background-color: #fff;
            text-align: center;">
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
            </el-form>
        </div>
    </div>


    <script>
        var polyEditor;
        var path_list = [];
        var longitude = "";
        var latitude = "";
        var set = {!! $set?:'{}' !!};
        if (set.longitude) {
            longitude = set.longitude;
        }
        if (set.latitude) {
            latitude = set.latitude;
        }

        console.log(set);
        if (set.delivery_area) {
            if (set.delivery_area[0] instanceof Array) {
                path_list = set.delivery_area;
            } else {
                set.delivery_area.forEach((item, index) => {
                    path_list.push([item[0], item[1]]);
                })
            }
        } else {
            path_list.push(
                [parseFloat((parseFloat(longitude) + 0.012).toFixed(6)), parseFloat((parseFloat(latitude) + 0.019).toFixed(6))],
                [parseFloat((parseFloat(longitude) + 0.012).toFixed(6)), parseFloat((parseFloat(latitude) - 0.008).toFixed(6))],
                [parseFloat((parseFloat(longitude) - 0.022).toFixed(6)), parseFloat((parseFloat(latitude) - 0.012).toFixed(6))],
                [parseFloat((parseFloat(longitude) - 0.012).toFixed(6)), parseFloat((parseFloat(latitude) + 0.032).toFixed(6))],
            )
        }

        var app = new Vue({
            el: "#re_content",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    plugin_name: '同城配送',
                    form: {
                        delivery_area: [],
                        longitude: '',
                        latitude: '',
                    },
                    start_time_arr: [],
                    end_time_arr: [],
                    area_list: [],
                    new_community_name: '',
                    province_list: [],
                    city_list: [],
                }
            },
            created() {
                this.getData();
            },
            mounted() {
            },
            methods: {
                provinceChange() {
                    this.form.city_id = 0;
                    this.cityChange();
                },
                cityChange() {
                    this.form.choose_area = [];
                    this.refreshAreaList();
                },
                addCommunity() {
                    if (!this.new_community_name) {
                        this.$message({message: '请输入社区名称', type: 'error'});
                        return false;
                    }
                    if (this.form.community_list.indexOf(this.new_community_name) === -1) {
                        this.form.community_list.push(this.new_community_name);
                    } else {
                        this.$message({message: '存在重复的社区名称', type: 'error'});
                        return false;
                    }

                },
                deleteCommunity(tag) {
                    var key = this.form.community_list.indexOf(tag);
                    if (key === -1) {
                        this.$message({message: '标签不存在', type: 'error'});
                        return false;
                    }
                    this.form.community_list.splice(key, 1);
                },
                showMapDiv: function () {
                    if (this.form.distance_type === 1) {
                        document.getElementById("map_div").style.display = "block"
                    } else {
                        document.getElementById("map_div").style.display = "none"
                    }
                },
                addNight: function () {
                    this.form.night_setting.push({
                        unit: '',
                        amount: '',
                        level: this.form.night_setting.length + 1,
                    });
                },
                deleteNight: function (key) {
                    this.form.night_setting.splice(key, 1);
                    var night_setting = this.form.night_setting;
                    this.form.night_setting.forEach(function (v, k) {
                        night_setting[k].level = k + 1;
                    });
                },
                addWeight: function () {
                    this.form.weight_setting.push({
                        unit: '',
                        amount: '',
                        level: this.form.weight_setting.length + 1,
                    });
                },
                deleteWeight: function (key) {
                    this.form.weight_setting.splice(key, 1);
                    var weight_setting = this.form.weight_setting;
                    this.form.weight_setting.forEach(function (v, k) {
                        weight_setting[k].level = k + 1;
                    });
                },
                addDistance: function () {
                    this.form.distance_setting.push({
                        unit: '',
                        amount: '',
                        level: this.form.distance_setting.length + 1,
                    });
                },
                deleteDistance: function (key) {
                    this.form.distance_setting.splice(key, 1);
                    var distance_setting = this.form.distance_setting;
                    this.form.distance_setting.forEach(function (v, k) {
                        distance_setting[k].level = k + 1;
                    });
                },
                futureWeekDisabled: function (key, week) {
                    if (this.form.time_arr[key].week_day.indexOf(week) !== -1) {
                        return false;
                    }
                    if (this.form.had_choose_week_day.indexOf(week) === -1) {
                        return false;
                    }
                    return true;
                },
                futureWeekChange: function () {
                    var arr = [];
                    this.form.time_arr.forEach(function (v, k) {
                        v.week_day.forEach(function (vv, kk) {
                            if (arr.indexOf(vv) === -1) {
                                arr.push(vv);
                            }
                        })
                    });
                    this.form.had_choose_week_day = arr;
                },
                deleteFutureWeekArr: function (key) {
                    this.form.time_arr.splice(key, 1);
                    this.futureWeekChange();
                },
                addFutureWeekArr: function () {
                    this.form.time_arr.push({
                        'week_day': [],
                        'time_arr': [],
                    });
                },
                addFutureTimeArr: function (key) {
                    this.form.time_arr[key].time_arr.push({
                        'start_time': '',
                        'end_time': '',
                    });
                    // this.form.time_arr.splice(key);
                },
                deleteFutureTimeArr: function (key1, key2) {
                    this.form.time_arr[key1].time_arr.splice(key2, 1);
                },
                copyUrl: function (url) {
                    let oInput = document.createElement('input');
                    oInput.value = url;
                    document.body.appendChild(oInput);
                    oInput.select(); // 选择对象;
                    console.log(oInput.value);
                    document.execCommand("Copy"); // 执行浏览器复制命令
                    this.$message({message: '复制成功', type: 'success'});
                    oInput.remove()
                },
                refreshAreaList() {
                    this.$http.post('{!! yzWebFullUrl('plugin.city-delivery.admin.setting.getAreaListByCity') !!}', {city_id: this.form.city_id}).then(response => {
                        if (response.data.result) {
                            this.area_list = response.data.data;
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                getData() {
                    this.$http.post('{!! yzWebFullUrl('plugin.city-delivery.admin.setting.index') !!}', {is_json: 1}).then(response => {
                        if (response.data.result) {
                            console.log(response.data.data.setting);
                            this.form = response.data.data.setting;
                            this.plugin_name = this.form.plugin_name;
                            this.start_time_arr = response.data.data.start_time_arr;
                            this.end_time_arr = response.data.data.end_time_arr;
                            this.province_list = response.data.data.province_list;
                            this.city_list = response.data.data.city_list;
                            this.sf_callback_url = response.data.data.sf_callback_url;
                            this.showMapDiv();
                            if (this.form.city_id) {
                                this.refreshAreaList();
                            }
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                submit() {
                    this.form.delivery_area = path_list;
                    this.$http.post('{!! yzWebFullUrl('plugin.city-delivery.admin.setting.edit') !!}', this.form).then(response => {
                        if (response.data.result) {
                            this.$message({message: response.data.msg, type: 'success'});
                            this.getData();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
            },
        });

        function openEdit() {
            console.log("开始编辑")
            polyEditor.open();
        }

        console.log([longitude, latitude]);
        var map = new AMap.Map("container", {
            // center: [116.400274, 39.905812],
            center: [longitude, latitude],

            zoom: 14
        });
        var marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            // position: [116.400274, 39.905812],
            center: [longitude, latitude],
        });

        marker.setMap(map);

        var path = path_list;

        polygon = new AMap.Polygon({
            path: path,
            strokeColor: "#FF33FF",
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            fillColor: '#1791fc',
            zIndex: 50,
        });

        map.add(polygon);
        // 缩放地图到合适的视野级别
        map.setFitView([polygon]);

        polyEditor = new AMap.PolyEditor(map, polygon);

        polyEditor.on('addnode', function (event) {
            // log.info('触发事件：addnode')
            console.log(event);
        });

        polyEditor.on('adjust', function (event) {
            console.log(event);
            // log.info('触发事件：adjust')
        });

        polyEditor.on('removenode', function (event) {
            console.log(event);
            // log.info('触发事件：removenode')
        });

        polyEditor.on('end', function (event) {
            console.log(event.target.w.path);
            path_list = [];
            for (let i = 0; i < event.target.w.path.length; i++) {
                // path_list.push([event.target.w.path[i].lng,event.target.w.path[i].lat])
                path_list.push(event.target.w.path[i]);
            }
            console.log(path_list)
            // log.info('触发事件： end')
            // event.target 即为编辑后的多边形对象
        })

    </script>
@endsection