2658 lines
87 KiB
Vue
2658 lines
87 KiB
Vue
<template>
|
||
<div class="localDelivery-container">
|
||
<div class="item-block">
|
||
<div class="title">同城配送</div>
|
||
<div class="block">
|
||
<el-form
|
||
ref="formDistribution"
|
||
:model="form"
|
||
label-width="160px"
|
||
:rules="rules"
|
||
>
|
||
<!-- <el-form-item label="配送方式" prop="distributionType">
|
||
<el-checkbox-group v-model="form.distributionType">
|
||
<el-checkbox
|
||
v-for="(item, index) of checkList"
|
||
:key="item.label + index"
|
||
:label="item.label"
|
||
size="medium"
|
||
>
|
||
{{ item.name }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
<div class="tips">开启后将由第三方平台为您配送。</div>
|
||
</el-form-item> -->
|
||
<div v-if="form.distributionType.includes(2)">
|
||
<!-- <el-form-item prop="no3DistributionType">
|
||
<el-checkbox-group
|
||
v-model="form.no3DistributionType"
|
||
class="distribution-group"
|
||
>
|
||
<div
|
||
:class="['distribution-box', { active: active == index }]"
|
||
v-for="(item, index) of distributionList"
|
||
:key="item.label + index"
|
||
@click.stop.prevent="handleClickImg($event, index)"
|
||
>
|
||
<el-checkbox
|
||
:label="item.label"
|
||
@click.native="stopEvenPropagation($event)"
|
||
size="medium"
|
||
>
|
||
<img
|
||
class="img"
|
||
width="89"
|
||
height="23"
|
||
:src="item.imgUrl"
|
||
@click.stop.prevent="handleClickImg($event, index)"
|
||
/>
|
||
</el-checkbox>
|
||
</div>
|
||
</el-checkbox-group>
|
||
</el-form-item> -->
|
||
<el-form-item
|
||
label="app_key"
|
||
prop="dadaData.appKey"
|
||
v-if="active == 0"
|
||
>
|
||
<el-input v-model="form.dadaData.appKey"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="app_secret"
|
||
prop="dadaData.appSecret"
|
||
v-if="active == 0"
|
||
>
|
||
<el-input v-model="form.dadaData.appSecret"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="商户ID"
|
||
prop="dadaData.storeId"
|
||
v-if="active == 0"
|
||
>
|
||
<el-input v-model="form.dadaData.storeId"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="门店编码"
|
||
prop="dadaData.shopCode"
|
||
v-if="active == 0"
|
||
>
|
||
<el-input v-model="form.dadaData.shopCode"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="城市选择" prop="" v-if="active == 0">
|
||
<el-button type="primary" @click="getCity()">获取城市</el-button>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="配送服务"
|
||
prop="meituanData.distributionOpction"
|
||
v-if="active == 1"
|
||
>
|
||
<el-select
|
||
v-model="form.meituanData.distributionOpction"
|
||
placeholder="请选择配送服务"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of distributionOpction"
|
||
:key="index + item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="AppKey"
|
||
prop="meituanData.appKey"
|
||
v-if="active == 1"
|
||
>
|
||
<el-input v-model="form.meituanData.appKey"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="AppSecret"
|
||
prop="meituanData.appSecret"
|
||
v-if="active == 1"
|
||
>
|
||
<el-input v-model="form.meituanData.appSecret"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="门店ID"
|
||
prop="meituanData.storeId"
|
||
v-if="active == 1"
|
||
>
|
||
<el-input v-model="form.meituanData.storeId"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="支付方式"
|
||
prop="meituanData.storeId"
|
||
v-if="active == 1"
|
||
>
|
||
<el-radio-group v-model="form.meituanData.payType">
|
||
<el-radio :label="0">账期支付</el-radio>
|
||
<el-radio :label="1">余额支付</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="开发者账号（dev_id）"
|
||
prop="sfData.developerAccount"
|
||
v-if="active == 2"
|
||
>
|
||
<el-input
|
||
disabled
|
||
v-model="form.sfData.developerAccount"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="开发者秘钥（dev_key）"
|
||
prop="sfData.devKey"
|
||
v-if="active == 2"
|
||
>
|
||
<el-input disabled v-model="form.sfData.devKey"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="店铺名字"
|
||
v-if="active == 2"
|
||
>
|
||
<el-input v-model="shopInfoData.store_name" disabled></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="店铺id"
|
||
prop="sfData.storeId"
|
||
v-if="active == 2"
|
||
>
|
||
<el-input v-model="form.sfData.storeId" disabled></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="物品类型"
|
||
prop="sfData.goodsType"
|
||
v-if="active == 2"
|
||
>
|
||
<el-select
|
||
v-model="form.sfData.goodsType"
|
||
placeholder="请选择物品类型"
|
||
disabled
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of goodsTypeList"
|
||
:key="index + item.value"
|
||
:label="item.value"
|
||
:value="item.key"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="商户ID"
|
||
prop="ssData.shopId"
|
||
v-if="active == 3"
|
||
>
|
||
<el-input v-model="form.ssData.storeId"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="App_key（Client_ID）"
|
||
prop="ssData.appKey"
|
||
v-if="active == 3"
|
||
>
|
||
<el-input v-model="form.ssData.appKey"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="App_secret"
|
||
prop="ssData.appSecret"
|
||
v-if="active == 3"
|
||
>
|
||
<el-input v-model="form.ssData.appSecret"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="门店ID"
|
||
prop="ssData.storeId"
|
||
v-if="active == 3"
|
||
>
|
||
<el-input v-model="form.ssData.shopId"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="appid" prop="uuData.appId" v-if="active == 4">
|
||
<el-input v-model="form.ssData.storeId"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="appkey"
|
||
prop="uuData.appKey"
|
||
v-if="active == 4"
|
||
>
|
||
<el-input v-model="form.ssData.appKey"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="openid"
|
||
prop="uuData.openId"
|
||
v-if="active == 4"
|
||
>
|
||
<el-input v-model="form.ssData.appSecret"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item label="配送时间买家自选" prop="">
|
||
<el-radio-group v-model="form.isDistribution" disabled>
|
||
<el-radio :label="1">开启</el-radio>
|
||
<el-radio :label="0">关闭</el-radio>
|
||
</el-radio-group>
|
||
<div class="tips">
|
||
开启后，买家下单选择同城配送时，可选择配送时间，提交订单后，将在买家备注中显示。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="自动发货" prop="">
|
||
<el-radio-group
|
||
v-model="form.isAutomaticDelivery"
|
||
class="automatic-delivery-radio"
|
||
disabled
|
||
>
|
||
<el-radio :label="0">不启用</el-radio>
|
||
<el-radio :label="1">下单后，在营业时间内，自动发货</el-radio>
|
||
<el-radio :label="2" disabled>
|
||
下单后，在自定义时间内，自动发货
|
||
</el-radio>
|
||
<el-radio :label="3">
|
||
下单后，抵达订单配送时间时，自动发货
|
||
</el-radio>
|
||
</el-radio-group>
|
||
<div class="in-advance-block" v-if="form.isAutomaticDelivery == 3">
|
||
<div class="title-block">提前</div>
|
||
<el-input
|
||
class="time-input-block"
|
||
v-model="form.inAdvanceTime"
|
||
placeholder=""
|
||
>
|
||
<label slot="append">分钟</label>
|
||
</el-input>
|
||
<div style="margin-left: 10px">
|
||
进行发货（若默认配送方式为第三方配送，则此时将订单推送至第三方平台）
|
||
</div>
|
||
</div>
|
||
<div class="tips" style="color: #1890ff">
|
||
在自动发货时间内生成的订单自动发货，启用自动发货后，需要在配送管理列表同城配送处设置默认发货方式。
|
||
</div>
|
||
<div
|
||
v-for="(group, groupIndex) of form.weekConfig"
|
||
:key="groupIndex"
|
||
>
|
||
<el-checkbox-group
|
||
v-model="group.weekList"
|
||
v-if="form.isAutomaticDelivery == 2"
|
||
>
|
||
<el-checkbox
|
||
v-for="(item, index) of group.weekListConfig"
|
||
:key="item.label + index"
|
||
:label="item.label"
|
||
:disabled="item.disabled"
|
||
@change="handleWeekList"
|
||
>
|
||
{{ item.name }}
|
||
</el-checkbox>
|
||
<label
|
||
class="el-checkbox is-checked delect-week"
|
||
v-if="groupIndex >= 1"
|
||
@click="delectWeek(groupIndex)"
|
||
>
|
||
删除
|
||
</label>
|
||
</el-checkbox-group>
|
||
<div
|
||
class="time-list"
|
||
v-for="(item2, index2) of group.timeList"
|
||
:key="index2"
|
||
>
|
||
<div v-if="form.isAutomaticDelivery == 2">
|
||
<el-time-select
|
||
v-model="item2.startTime"
|
||
:picker-options="group.pickerOptions"
|
||
placeholder="开始时间"
|
||
:class="group.isError ? 'error' : ''"
|
||
@change="checkTimeSelect(item2.startTime)"
|
||
></el-time-select>
|
||
<span class="division">-</span>
|
||
<el-time-select
|
||
v-model="item2.endTime"
|
||
:picker-options="group.pickerOptions"
|
||
placeholder="结束时间"
|
||
:class="group.isError ? 'error' : ''"
|
||
@change="checkTimeSelect(item2.endTime)"
|
||
></el-time-select>
|
||
<span
|
||
class="add"
|
||
v-show="showAdd(group.timeList.length, index2)"
|
||
@click="handleAddTime(groupIndex)"
|
||
>
|
||
添加
|
||
</span>
|
||
<span
|
||
class="add"
|
||
v-show="showDelect(group.timeList.length, index2)"
|
||
@click="handleDelectTime(groupIndex, index2)"
|
||
>
|
||
删除
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="error-msg" v-if="group.errorMsg">
|
||
{{ group.errorMsg }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="btn-week"
|
||
v-show="form.isAutomaticDelivery == 2"
|
||
@click="addWeekItem()"
|
||
>
|
||
+添加星期
|
||
</div>
|
||
</el-form-item>
|
||
<div v-if="form.isDistribution == 1">
|
||
<el-form-item label="配送时段" prop="">
|
||
<el-radio-group v-model="form.deliveryPeriod">
|
||
<el-radio :label="0">全天</el-radio>
|
||
<el-radio :label="1" disabled>自定义</el-radio>
|
||
</el-radio-group>
|
||
<div class="tips">
|
||
自定义时间段，请将小程序升级至2.1.0版本及以上才能生效。
|
||
<br />
|
||
所设时间段为可配送时间段，手机端展示时间段会根据细分时段划分展示。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="细分时段" prop="">
|
||
<el-radio-group v-model="form.subdivisionPeriod">
|
||
<el-radio :label="1">天</el-radio>
|
||
<el-radio :label="60">小时</el-radio>
|
||
<el-radio :label="30">30分钟</el-radio>
|
||
<el-radio :label="15">15分钟</el-radio>
|
||
</el-radio-group>
|
||
<div class="tips">
|
||
手机端选择送达时间，按时间段细分
|
||
<span class="example">
|
||
查看示例
|
||
<div class="example-img-box">
|
||
<img
|
||
class="example-img"
|
||
:src="require('@/assets/time-selector.jpg')"
|
||
/>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="预约下单" prop="">
|
||
<el-radio-group v-model="form.orderAppointment.inAdvance">
|
||
<el-radio :label="0">无需提前</el-radio>
|
||
<el-radio :label="1">提前</el-radio>
|
||
</el-radio-group>
|
||
<el-input
|
||
class="orderAppointment-time-input"
|
||
v-model="form.orderAppointment.orderAppointmentTimeTime"
|
||
placeholder="请输入内容"
|
||
:disabled="form.orderAppointment.inAdvance == 0"
|
||
></el-input>
|
||
<el-select
|
||
class="orderAppointment-time-select"
|
||
v-model="form.orderAppointment.orderAppointmentTimeType"
|
||
placeholder="请选择"
|
||
:disabled="form.orderAppointment.inAdvance == 0"
|
||
>
|
||
<el-option
|
||
v-for="item in periodOpction"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<div class="tips">
|
||
按天时为自然天，不管当前几点，只能下明天以后的订单。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="最长预约" prop="">
|
||
<el-radio-group v-model="form.maxAppointment.maxAppointmentType">
|
||
<el-radio :label="0">只能当天下单</el-radio>
|
||
<el-radio :label="1">可预约</el-radio>
|
||
</el-radio-group>
|
||
<el-input
|
||
class="maxAppointment-input"
|
||
v-model="form.maxAppointment.maxAppointmentSky"
|
||
placeholder="请输入内容"
|
||
:disabled="form.maxAppointment.maxAppointmentType == 0"
|
||
></el-input>
|
||
天内下单
|
||
<div class="tips">
|
||
如，可预约7天内订单，那么就是今天+未来6天内的送达时间可以让买家选择
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="下单时默认选择" prop="">
|
||
<el-radio-group v-model="form.orderDefault">
|
||
<el-radio :label="0">默认不选中</el-radio>
|
||
<el-radio :label="1">当前时间最近可用时间段</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="item-block">
|
||
<div class="title">配送区域设置</div>
|
||
<div class="block">
|
||
<el-form ref="form" :model="form" label-width="160px" :rules="rules">
|
||
<el-form-item label="店铺地址" prop="shopAddress">
|
||
<el-input
|
||
class="shop-address"
|
||
v-model="form.shopAddress"
|
||
disabled
|
||
></el-input>
|
||
<label class="btn-amend" @click="handleSkip()">修改</label>
|
||
<div class="">配送区域以此地址为起点进行距离计算</div>
|
||
</el-form-item>
|
||
<el-form-item label="配送区域" prop="">
|
||
<el-radio-group v-model="form.dispensingArea">
|
||
<el-radio :label="0" disabled>按不同区域</el-radio>
|
||
<el-radio :label="1">按不同距离</el-radio>
|
||
<el-radio :label="2" disabled>按行政区域</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="可配送区域"
|
||
prop=""
|
||
class="distribution-area"
|
||
v-if="form.dispensingArea == 2"
|
||
>
|
||
<el-select
|
||
v-model="form.cityList"
|
||
multiple
|
||
filterable
|
||
allow-create
|
||
default-first-option
|
||
placeholder="请选择文章标签"
|
||
>
|
||
<el-option
|
||
v-for="item in cityListOpction"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<el-checkbox
|
||
style="margin-left: 10px"
|
||
v-model="form.isNoLimit"
|
||
:true-label="1"
|
||
:false-label="0"
|
||
>
|
||
不限制
|
||
</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="划分方式"
|
||
prop=""
|
||
v-if="form.dispensingArea != 2"
|
||
>
|
||
<el-radio-group v-model="form.divideType">
|
||
<el-radio :label="1">半径</el-radio>
|
||
<el-radio :label="2" disabled>自定义</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label-width="210px"
|
||
label="距离"
|
||
v-if="form.dispensingArea == 1"
|
||
>
|
||
<el-input
|
||
class="distance-input"
|
||
v-model="form.distance.distanceNum"
|
||
>
|
||
<label slot="append">km</label>
|
||
</el-input>
|
||
<label class="distance-lable">内，重量</label>
|
||
<el-input class="distance-input" v-model="form.distance.weightNum">
|
||
<label slot="append">kg</label>
|
||
</el-input>
|
||
<label class="distance-lable">内，配送费用</label>
|
||
<el-input
|
||
class="distance-input"
|
||
v-model="form.distance.distributionFreightNum"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label-width="210px"
|
||
label="距离每增加"
|
||
v-if="form.dispensingArea == 1"
|
||
>
|
||
<el-input
|
||
class="distance-input"
|
||
v-model="form.distanceAdd.distanceNum"
|
||
>
|
||
<label slot="append">km</label>
|
||
</el-input>
|
||
<label class="distance-lable">，运费将增加</label>
|
||
<el-input
|
||
class="distance-input"
|
||
v-model="form.distanceAdd.FreightAddNum"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label-width="210px"
|
||
label="重量每增加"
|
||
v-if="form.dispensingArea == 1"
|
||
>
|
||
<el-input
|
||
class="distance-input"
|
||
v-model="form.weightAdd.weightAddNum"
|
||
>
|
||
<label slot="append">kg</label>
|
||
</el-input>
|
||
<label class="distance-lable">，运费将增加</label>
|
||
<el-input
|
||
class="distance-input"
|
||
v-model="form.weightAdd.FreightAddNum"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="form.dispensingArea != 2">
|
||
<div class="">
|
||
当配送区域交叉时，以最低费用计算费用。
|
||
因考虑实际送货路况，配送费计算按骑行距离，非地图直线距离。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item v-if="form.dispensingArea != 2">
|
||
<div class="map-box">
|
||
<div class="areas-block">
|
||
<div class="areas-conetn">
|
||
<div v-if="form.divideType == 1">
|
||
<div
|
||
:class="[
|
||
'areas-item',
|
||
{ acitve: mapForm.radiusActive == index },
|
||
]"
|
||
v-for="(item, index) of mapForm.radiusList"
|
||
:key="index"
|
||
@click="handleRadiusActive('', index)"
|
||
>
|
||
<div class="areas-head-block">
|
||
<div class="areas-title">
|
||
<i class="title-circle">
|
||
<i class="content"></i>
|
||
</i>
|
||
区域{{ item.areaNum }}
|
||
</div>
|
||
<div
|
||
class="btn-delect"
|
||
@click="delectRadiusItem(index, item)"
|
||
>
|
||
删除
|
||
</div>
|
||
</div>
|
||
<div class="areas-item-block">
|
||
<el-form
|
||
ref="form"
|
||
:model="mapForm.radiusList[index]"
|
||
:rules="mapRules"
|
||
label-width="90px"
|
||
:show-message="false"
|
||
>
|
||
<el-form-item label="起送金额" prop="minPriceType">
|
||
<div>
|
||
按
|
||
<el-select
|
||
class="min-price-type-opction"
|
||
v-model="mapForm.radiusList[index].minPriceType"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(
|
||
opction, index2
|
||
) of mapMinPriceTypeOpciotn"
|
||
:key="index2 + opction.value"
|
||
:label="opction.label"
|
||
:value="opction.value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="minPrice">
|
||
<div class="">
|
||
满
|
||
<el-input
|
||
class="min-price-input"
|
||
v-model="mapForm.radiusList[index].minPrice"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<label>起送</label>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="配送费"
|
||
prop="deliveryCostAmount"
|
||
v-if="form.dispensingArea != 1"
|
||
>
|
||
<el-input
|
||
class="delivery-cost-amout-input"
|
||
v-model="
|
||
mapForm.radiusList[index].deliveryCostAmount
|
||
"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="运费减免"
|
||
prop="freightReliefType"
|
||
>
|
||
<div>
|
||
按
|
||
<el-select
|
||
class="min-price-type-opction"
|
||
v-model="
|
||
mapForm.radiusList[index].freightReliefType
|
||
"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(
|
||
opction, index2
|
||
) of freightReliefTypeOpction"
|
||
:key="index2 + opction.value"
|
||
:label="opction.label"
|
||
:value="opction.value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="freightReliefAmout">
|
||
<div class="">
|
||
满
|
||
<el-input
|
||
class="min-price-input"
|
||
v-model="
|
||
mapForm.radiusList[index].freightReliefAmout
|
||
"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<!-- <label>起送</label> -->
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="derateAmout">
|
||
<div class="">
|
||
减免
|
||
<el-input
|
||
class="min-price-input"
|
||
v-model="mapForm.radiusList[index].derateAmout"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="半径" prop="radiusNum">
|
||
<el-input
|
||
type="number"
|
||
class="delivery-cost-amout-input"
|
||
v-model="
|
||
mapForm.radiusList[index].circlePath.radius
|
||
"
|
||
@input="handleRaduiInput($event, index)"
|
||
>
|
||
<label slot="append">米</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="form.divideType == 2">
|
||
<div
|
||
:class="[
|
||
'areas-item',
|
||
{ acitve: mapForm.customActive == index },
|
||
]"
|
||
v-for="(item, index) of mapForm.customList"
|
||
:key="index"
|
||
@click="handlePolygonAcitve('', index)"
|
||
>
|
||
<div class="areas-head-block">
|
||
<div class="areas-title">
|
||
<i class="title-circle">
|
||
<i class="content"></i>
|
||
</i>
|
||
区域{{ item.areaNum }}
|
||
</div>
|
||
<div
|
||
class="btn-delect"
|
||
@click="delectRadiusItem(index)"
|
||
>
|
||
删除
|
||
</div>
|
||
</div>
|
||
<div class="areas-item-block">
|
||
<el-form
|
||
ref="form"
|
||
:model="mapForm.radiusList[index]"
|
||
:rules="mapRules"
|
||
label-width="90px"
|
||
:show-message="false"
|
||
>
|
||
<el-form-item label="起送金额" prop="minPriceType">
|
||
<div>
|
||
按
|
||
<el-select
|
||
class="min-price-type-opction"
|
||
v-model="mapForm.customList[index].minPriceType"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(
|
||
opction, index2
|
||
) of mapMinPriceTypeOpciotn"
|
||
:key="index2 + opction.value"
|
||
:label="opction.label"
|
||
:value="opction.value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="minPrice">
|
||
<div class="">
|
||
满
|
||
<el-input
|
||
class="min-price-input"
|
||
v-model="mapForm.customList[index].minPrice"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<label>起送</label>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="配送费"
|
||
prop="deliveryCostAmount"
|
||
v-if="form.dispensingArea != 1"
|
||
>
|
||
<el-input
|
||
class="delivery-cost-amout-input"
|
||
v-model="
|
||
mapForm.customList[index].deliveryCostAmount
|
||
"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="运费减免"
|
||
prop="freightReliefType"
|
||
>
|
||
<div>
|
||
按
|
||
<el-select
|
||
class="min-price-type-opction"
|
||
v-model="
|
||
mapForm.customList[index].freightReliefType
|
||
"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(
|
||
opction, index2
|
||
) of freightReliefTypeOpction"
|
||
:key="index2 + opction.value"
|
||
:label="opction.label"
|
||
:value="opction.value"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="freightReliefAmout">
|
||
<div class="">
|
||
满
|
||
<el-input
|
||
class="min-price-input"
|
||
v-model="
|
||
mapForm.customList[index].freightReliefAmout
|
||
"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<label>起送</label>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="derateAmout">
|
||
<div class="">
|
||
减免
|
||
<el-input
|
||
class="min-price-input"
|
||
v-model="mapForm.customList[index].derateAmout"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="areas-conetn-footer" @click="addRadiusItem()">
|
||
+添加配送区域{{
|
||
form.divideType == 1
|
||
? mapForm.radiusList.length
|
||
: mapForm.customList.length
|
||
}}/10
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="map-block">
|
||
<baidu-map
|
||
class="map"
|
||
style="display: flex; flex-direction: column"
|
||
:center="center"
|
||
:zoom="zoom"
|
||
:mapClick="false"
|
||
:scroll-wheel-zoom="true"
|
||
@ready="handlerBaiduMap"
|
||
>
|
||
<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
|
||
<div class="radius-block" v-if="form.divideType == 1">
|
||
<template v-for="(item, index) of this.mapForm.radiusList">
|
||
<bm-circle
|
||
v-if="mapReady && form.divideType == 1"
|
||
:key="'circle-' + index"
|
||
:center="item.circlePath.center"
|
||
:radius="item.circlePath.radius"
|
||
stroke-color="#6fee0c"
|
||
:stroke-opacity="1"
|
||
:stroke-weight="3"
|
||
:massClear="false"
|
||
fillColor="#d1f5ad"
|
||
:editing="
|
||
mapForm.showCircleEditing &&
|
||
mapForm.radiusActive == index
|
||
"
|
||
@click="handleRadiusActive($event, index)"
|
||
@lineupdate="updateCirclePath($event, index)"
|
||
></bm-circle>
|
||
<bm-marker
|
||
v-if="
|
||
mapForm.showRadiusCenter &&
|
||
mapForm.radiusActive == index
|
||
"
|
||
:key="'marker-' + index"
|
||
:position="item.circlePath.center"
|
||
:dragging="false"
|
||
@click="onClickMarker"
|
||
:icon="{
|
||
url: require('@/assets/dd-via.png'),
|
||
size: { width: 11, height: 11 },
|
||
}"
|
||
@dragging="handleDragging($event, index)"
|
||
@mouseover="handleMarkerMouseovert()"
|
||
>
|
||
<bm-overlay
|
||
v-if="
|
||
mapForm.showRadiusCenter &&
|
||
mapForm.radiusActive == index
|
||
"
|
||
pane="labelPane"
|
||
:class="{ sample: true }"
|
||
@initialize="initialize($event)"
|
||
@draw="handleOverlayDraw"
|
||
>
|
||
<div>
|
||
半径：{{
|
||
mapForm.radiusList[mapForm.radiusActive]
|
||
.circlePath.radius
|
||
}}米
|
||
</div>
|
||
</bm-overlay>
|
||
</bm-marker>
|
||
</template>
|
||
</div>
|
||
<div class="custom-block" v-if="form.divideType == 2">
|
||
<template v-for="(item, index) of this.mapForm.customList">
|
||
<bm-polygon
|
||
:key="'polygon-' + index"
|
||
:path="item.polygonPath"
|
||
stroke-color="#ff3cfd"
|
||
:stroke-opacity="1"
|
||
:stroke-weight="4"
|
||
fillColor="#ff3cfd"
|
||
:fillOpacity="0.4"
|
||
:editing="
|
||
mapForm.showCustomEditing &&
|
||
mapForm.customActive == index
|
||
"
|
||
@click="handlePolygonAcitve($event, index)"
|
||
@lineupdate="updatePolygonPath"
|
||
/>
|
||
<bm-marker
|
||
:key="'marker-' + index"
|
||
v-if="
|
||
mapForm.showCustomDragging &&
|
||
mapForm.customActive == index
|
||
"
|
||
:position="item.oldCenter"
|
||
:dragging="mapForm.showCustomDragging"
|
||
@click="onClickMarker"
|
||
:icon="{
|
||
url: require('@/assets/dd-via.png'),
|
||
size: { width: 11, height: 11 },
|
||
}"
|
||
@dragging="handleDragging($event, index)"
|
||
@mouseover="handleMarkerMouseovert()"
|
||
></bm-marker>
|
||
</template>
|
||
</div>
|
||
</baidu-map>
|
||
<!-- <el-amap
|
||
v-if="mapReady"
|
||
:center="center"
|
||
:zoom="zoom"
|
||
@init="init"
|
||
>
|
||
<template v-for="(item, index) of mapForm.radiusList">
|
||
<el-amap-circle
|
||
:key="'circle-' + index"
|
||
strokeColor="#6fee0c"
|
||
fillColor="#d1f5ad"
|
||
:center="item.circlePath.center"
|
||
:radius="item.circlePath.radius"
|
||
:visible="true"
|
||
:editable="
|
||
mapForm.showCircleEditing &&
|
||
mapForm.radiusActive == index
|
||
"
|
||
:draggable="false"
|
||
@click="handleRadiusActive($event, index)"
|
||
@mouseover="updateCirclePath"
|
||
@mouseover
|
||
/>
|
||
</template>
|
||
</el-amap> -->
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="item-block distribution-amount" v-if="form.dispensingArea == 2">
|
||
<div class="title">配送价格</div>
|
||
<div class="block">
|
||
<el-form
|
||
ref="form"
|
||
:model="distributionForm"
|
||
label-width="160px"
|
||
:rules="distributionRules"
|
||
:show-message="false"
|
||
>
|
||
<el-form-item label="起送金额" prop="deliveryAmount">
|
||
<label class="distribution-block-lable">按</label>
|
||
<el-select
|
||
class="distribution-select"
|
||
v-model="distributionForm.priceType"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(opction, index2) of mapMinPriceTypeOpciotn"
|
||
:key="index2 + opction.value"
|
||
:label="opction.label"
|
||
:value="opction.value"
|
||
></el-option>
|
||
</el-select>
|
||
<label class="distribution-block-lable">满</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.deliveryAmount"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<label class="distribution-block-lable">起送</label>
|
||
<div class="distribution-tips">
|
||
订单价格不满足时，买家无法下单
|
||
<br />
|
||
商品折后价：按商品参加所有生效优惠活动后的金额计算，不包含积分抵扣和优惠券优惠金额。
|
||
<br />
|
||
订单实付价：按订单最终的实际付款金额计算。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="配送费" prop="distributionAmout">
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.distributionAmout"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="运费减免" prop="freightFullAmout">
|
||
<label class="distribution-block-lable">按</label>
|
||
<el-select
|
||
class="distribution-select"
|
||
v-model="distributionForm.freightType"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(opction, index2) of mapMinPriceTypeOpciotn"
|
||
:key="index2 + opction.value"
|
||
:label="opction.label"
|
||
:value="opction.value"
|
||
></el-option>
|
||
</el-select>
|
||
<label class="distribution-block-lable">满</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.freightFullAmout"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<label class="distribution-block-lable">减免</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.freightAmout"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<div class="tips">运费最低减为0</div>
|
||
</el-form-item>
|
||
<el-form-item label="配送费" prop="isStairSwitch">
|
||
<el-switch
|
||
v-model="distributionForm.isStairSwitch"
|
||
:active-text="switchText"
|
||
@change="handleSwitchText"
|
||
></el-switch>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label=""
|
||
prop=""
|
||
v-if="distributionForm.isStairSwitch == 1"
|
||
>
|
||
<label class="distribution-block-lable">半径</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.radiusNum"
|
||
>
|
||
<label slot="append">km</label>
|
||
</el-input>
|
||
<label class="distribution-block-lable">内，重量</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.radiusWeithNum"
|
||
>
|
||
<label slot="append">kg</label>
|
||
</el-input>
|
||
<label class="distribution-block-lable">内，配送费用</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.radiusDistributionAmout"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label=""
|
||
prop=""
|
||
v-if="distributionForm.isStairSwitch == 1"
|
||
>
|
||
<label class="distribution-block-lable">起送距离每增加</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.freightDistanceNum"
|
||
>
|
||
<label slot="append">km</label>
|
||
</el-input>
|
||
<label class="distribution-block-lable">内，运费增加</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.freightDistanceAmout"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label=""
|
||
prop=""
|
||
v-if="distributionForm.isStairSwitch == 1"
|
||
>
|
||
<label class="distribution-block-lable">起送重量每增加</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.freightWeigthNum"
|
||
>
|
||
<label slot="append">km</label>
|
||
</el-input>
|
||
<label class="distribution-block-lable">内，运费增加</label>
|
||
<el-input
|
||
class="distribution-input"
|
||
v-model="distributionForm.freightWeigthAmount"
|
||
>
|
||
<label slot="append">元</label>
|
||
</el-input>
|
||
<div class="tips">
|
||
不超过起送半径和重量时，按基础运费计算
|
||
<br />
|
||
实际配送距离大于起送半径，不满增加公里数，运费按增加计算；实际配送重量大于起送重量，不满增加重量，
|
||
<br />
|
||
运费按增加计算，依次类推
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<!-- <el-button class="btn" size="medium">取消</el-button> -->
|
||
<el-button class="btn" size="medium" type="primary" @click="handerSubmit">
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { get } from '@/api/store/base'
|
||
import {
|
||
getSameCityTransport,
|
||
saveSameCityTransport,
|
||
delectArea,
|
||
getSFTypeList,
|
||
} from '@/api/sameCityTransport/sameCityTransport'
|
||
import { ChineseDistricts } from '@/components/VabArea/city-picker.data'
|
||
import {
|
||
distributionOpction,
|
||
checkList,
|
||
distributionList,
|
||
goodsTypeData,
|
||
mapMinPriceTypeOpciotn,
|
||
freightReliefTypeOpction,
|
||
weekListConfig,
|
||
periodOpction,
|
||
} from './distributionSetupConfig/config.js'
|
||
export default {
|
||
name: 'localDelivery',
|
||
data() {
|
||
return {
|
||
ChineseDistricts: {},
|
||
active: 2,
|
||
weekListConfig: weekListConfig,
|
||
distributionOpction: distributionOpction,
|
||
checkList: checkList,
|
||
distributionList: distributionList,
|
||
goodsTypeData: goodsTypeData,
|
||
mapMinPriceTypeOpciotn: mapMinPriceTypeOpciotn,
|
||
freightReliefTypeOpction: freightReliefTypeOpction,
|
||
periodOpction: periodOpction,
|
||
shopInfoData: {},
|
||
goodsTypeList: [],
|
||
rules: {
|
||
distributionType: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '请至少选择一种配送方式',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
no3DistributionType: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '请至少选择一个平台配送服务',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
dadaData: {
|
||
appKey: [
|
||
{ required: true, message: '请输入app_key', trigger: 'blur' },
|
||
],
|
||
appSecret: [
|
||
{ required: true, message: '请输入app_secret', trigger: 'blur' },
|
||
],
|
||
storeId: [
|
||
{ required: true, message: '请输入商户ID', trigger: 'blur' },
|
||
],
|
||
shopCode: [
|
||
{ required: true, message: '请输入门店编码', trigger: 'blur' },
|
||
],
|
||
},
|
||
meituanData: {
|
||
distributionOpction: [
|
||
{ required: true, message: '请选择配送服务', trigger: 'change' },
|
||
],
|
||
appKey: [
|
||
{ required: true, message: '请输入AppKey', trigger: 'blur' },
|
||
],
|
||
appSecret: [
|
||
{ required: true, message: '请输入AppSecret', trigger: 'blur' },
|
||
],
|
||
storeId: [
|
||
{ required: true, message: '请输入商户ID', trigger: 'blur' },
|
||
],
|
||
},
|
||
sfData: {
|
||
// developerAccount: [
|
||
// {
|
||
// required: true,
|
||
// message: '请输入开发者账号（dev_id）',
|
||
// trigger: 'blur',
|
||
// },
|
||
// ],
|
||
// devKey: [
|
||
// {
|
||
// required: true,
|
||
// message: '请输入开发者秘钥（dev_key）',
|
||
// trigger: 'blur',
|
||
// },
|
||
// ],
|
||
storeId: [
|
||
{ required: true, message: '请输入店铺id', trigger: 'blur' },
|
||
],
|
||
goodsType: [
|
||
{ required: true, message: '请选择物品类型', trigger: 'change' },
|
||
],
|
||
},
|
||
ssData: {
|
||
shopId: [
|
||
{ required: true, message: '请输入门店编码', trigger: 'blur' },
|
||
],
|
||
appKey: [
|
||
{ required: true, message: '请输入app_key', trigger: 'blur' },
|
||
],
|
||
appSecret: [
|
||
{ required: true, message: '请输入app_secret', trigger: 'blur' },
|
||
],
|
||
storeId: [
|
||
{ required: true, message: '请输入商户ID', trigger: 'blur' },
|
||
],
|
||
},
|
||
uuData: {
|
||
appId: [{ required: true, message: '请输入appId', trigger: 'blur' }],
|
||
appKey: [
|
||
{ required: true, message: '请输入appKey', trigger: 'blur' },
|
||
],
|
||
openId: [
|
||
{ required: true, message: '请输入openId', trigger: 'blur' },
|
||
],
|
||
},
|
||
// weekList:[
|
||
// { type: 'array', required: true, message: '请至少选择一个星期', trigger: 'change' }
|
||
// ],
|
||
shopAddress: [
|
||
{ required: true, message: '地址获取失败', trigger: 'blur' },
|
||
],
|
||
},
|
||
mapRules: {
|
||
minPriceType: [{ required: true, message: '', trigger: 'change' }],
|
||
minPrice: [{ required: true, message: '', trigger: 'blur' }],
|
||
deliveryCostAmount: [{ required: true, message: '', trigger: 'blur' }],
|
||
freightReliefType: [{ required: true, message: '', trigger: 'change' }],
|
||
freightReliefAmout: [{ required: true, message: '', trigger: 'blur' }],
|
||
derateAmout: [{ required: true, message: '', trigger: 'blur' }],
|
||
radiusNum: [{ required: true, message: '', trigger: 'blur' }],
|
||
},
|
||
store_id:'',
|
||
form: {
|
||
store_id:'',
|
||
distributionType: [0, 2],
|
||
no3DistributionType: [3],
|
||
dadaData: {
|
||
appKey: 'dada8e0c052d94e8a09',
|
||
appSecret: 'a5350665c9200871e5671440437b7f1b',
|
||
storeId: '928007283',
|
||
shopCode: '76c8cbd2e5464d5c',
|
||
},
|
||
meituanData: {
|
||
distributionOpction: 0,
|
||
appKey: '',
|
||
appSecret: '',
|
||
storeId: '',
|
||
payType: 0,
|
||
},
|
||
sfData: {
|
||
developerAccount: '************',
|
||
devKey: '************',
|
||
appSecret: '',
|
||
storeId: '',
|
||
goodsType: null,
|
||
},
|
||
ssData: {
|
||
storeId: '',
|
||
appKey: '',
|
||
appSecret: '',
|
||
shopId: '',
|
||
},
|
||
uuData: {
|
||
appId: '',
|
||
appKey: '',
|
||
openId: '',
|
||
},
|
||
isDistribution: 0,
|
||
isAutomaticDelivery: 0,
|
||
weekConfig: [
|
||
{
|
||
weekListConfig: JSON.parse(JSON.stringify(weekListConfig)),
|
||
weekList: [7, 1, 2, 3, 4, 5, 6],
|
||
pickerOptions: {
|
||
start: '00:00',
|
||
step: '00:30',
|
||
end: '23:30',
|
||
},
|
||
timeList: [
|
||
{
|
||
startTime: null,
|
||
endTime: null,
|
||
},
|
||
],
|
||
isError: false,
|
||
errorMsg: '',
|
||
},
|
||
],
|
||
inAdvanceTime: 0,
|
||
shopAddress: '',
|
||
dispensingArea: 1,
|
||
divideType: 1,
|
||
distance: {
|
||
distanceNum: null,
|
||
weightNum: null,
|
||
distributionFreightNum: null,
|
||
},
|
||
distanceAdd: {
|
||
distanceNum: null,
|
||
FreightAddNum: null,
|
||
},
|
||
weightAdd: {
|
||
weightAddNum: null,
|
||
FreightAddNum: null,
|
||
},
|
||
cityList: [],
|
||
isNoLimit: 0,
|
||
deliveryPeriod: 0,
|
||
subdivisionPeriod: 1,
|
||
orderAppointment: {
|
||
inAdvance: 0,
|
||
orderAppointmentTimeTime: 2,
|
||
orderAppointmentTimeType: 0,
|
||
},
|
||
maxAppointment: {
|
||
maxAppointmentType: 0,
|
||
maxAppointmentSky: 2,
|
||
},
|
||
orderDefault: 0,
|
||
},
|
||
mapForm: {
|
||
radiusActive: 0,
|
||
showRadiusCenter: false,
|
||
showRadiusDragging: false,
|
||
showCircleEditing: false,
|
||
customActive: 0,
|
||
showCustomEditing: false,
|
||
showCustomDragging: false,
|
||
radiusList: [],
|
||
customList: [],
|
||
},
|
||
BMap: null,
|
||
center: { lng: 0, lat: 0 },
|
||
zoom: 16,
|
||
mapInstance: null,
|
||
BMapInstance: null,
|
||
mapReady: false,
|
||
// center: [0, 0],
|
||
map: null,
|
||
distributionForm: {
|
||
priceType: 0,
|
||
deliveryAmount: 0,
|
||
distributionAmout: 0,
|
||
freightType: 0,
|
||
freightFullAmout: 0,
|
||
freightAmout: 0,
|
||
isStairSwitch: 0,
|
||
radiusNum: null,
|
||
radiusWeithNum: null,
|
||
radiusDistributionAmout: null,
|
||
freightDistanceNum: null,
|
||
freightDistanceAmout: null,
|
||
freightWeigthNum: null,
|
||
freightWeigthAmount: null,
|
||
},
|
||
distributionRules: {
|
||
deliveryAmount: [{ required: true, message: '', trigger: 'blur' }],
|
||
distributionAmout: [{ required: true, message: '', trigger: 'blur' }],
|
||
freightFullAmout: [{ required: true, message: '', trigger: 'blur' }],
|
||
},
|
||
switchText: '关闭',
|
||
cityListOpction: [],
|
||
}
|
||
},
|
||
created() {
|
||
this.ChineseDistricts = ChineseDistricts
|
||
this.store_id = this.$route.query.store_id || ''
|
||
if (!this.store_id) {
|
||
this.$message.warning('未获取到店铺ID')
|
||
return
|
||
}
|
||
this.getSameCityTransport({store_id:this.store_id})
|
||
this.getCompanyInfo()
|
||
|
||
this.getSFTypeList()
|
||
},
|
||
beforeDestroy() {},
|
||
methods: {
|
||
async getSFTypeList() {
|
||
let res = await getSFTypeList()
|
||
if (res && res.status == 200) {
|
||
this.goodsTypeList = res.data
|
||
} else {
|
||
this.goodsTypeList = Object.keys(this.goodsTypeData).map((key) => ({
|
||
value: this.goodsTypeData[key],
|
||
key: Number(key),
|
||
}))
|
||
}
|
||
},
|
||
async getSameCityTransport(data) {
|
||
let res = await getSameCityTransport(data)
|
||
if (res && res.status == 200) {
|
||
let transportBase = res.data.transportBase
|
||
let transportList = res.data.transportList
|
||
this.form.dispensingArea = transportBase.area_type
|
||
|
||
this.form.distance.distanceNum = transportBase.distance_base
|
||
this.form.distance.weightNum = transportBase.weight_base
|
||
this.form.distance.distributionFreightNum =
|
||
transportBase.delivery_base_fee
|
||
|
||
this.form.distanceAdd.distanceNum = transportBase.distance_increase_km
|
||
this.form.distanceAdd.FreightAddNum =
|
||
transportBase.distance_increase_fee
|
||
|
||
this.form.weightAdd.weightAddNum = transportBase.weight_increase_kg
|
||
this.form.weightAdd.FreightAddNum = transportBase.weight_increase_fee
|
||
|
||
if (this.active == 2) {
|
||
this.form.sfData.storeId = transportBase.shop_id
|
||
this.form.sfData.goodsType = transportBase.business_type
|
||
}
|
||
|
||
let arr = transportList.map((item, index) => {
|
||
let obj = {
|
||
areaNum: index + 1,
|
||
transport_id: item.transport_id,
|
||
circlePath: {
|
||
radius: item.max_delivery_radius,
|
||
center: this.center,
|
||
},
|
||
minPriceType: item.min_delivery_amount_type - 1,
|
||
minPrice: item.min_delivery_amount,
|
||
freightReliefType: item.delivery_discount_type - 1,
|
||
freightReliefAmout: item.min_delivery_discount_amount,
|
||
derateAmout: item.delivery_discount,
|
||
}
|
||
return obj
|
||
})
|
||
this.mapForm.radiusList = arr
|
||
}
|
||
},
|
||
handleSkip() {
|
||
this.$router.push({ path: '/setupshop' })
|
||
},
|
||
// 点击第三方图片
|
||
handleClickImg(e, index) {
|
||
e.stopPropagation()
|
||
this.active = index
|
||
},
|
||
stopEvenPropagation(e) {
|
||
e.stopPropagation()
|
||
},
|
||
// 增加时段
|
||
handleAddTime(index) {
|
||
this.checkTimeAll()
|
||
this.form.weekConfig[index].timeList.push({
|
||
startTime: null,
|
||
endTime: null,
|
||
})
|
||
},
|
||
// 删除时段
|
||
handleDelectTime(groupIndex, index) {
|
||
this.form.weekConfig[groupIndex].timeList.splice(index, 1)
|
||
this.checkTimeAll()
|
||
},
|
||
// 显示添加
|
||
showAdd(num, index2) {
|
||
if (num == 1 && index2 == 0) {
|
||
return true
|
||
}
|
||
|
||
if (num == 2 && index2 == 1) {
|
||
return true
|
||
}
|
||
|
||
if (num == 3 && index2 == 2) {
|
||
return false
|
||
}
|
||
|
||
return false
|
||
},
|
||
// 显示删除
|
||
showDelect(num, index2) {
|
||
if (num == 2 && index2 == 1) {
|
||
return true
|
||
}
|
||
|
||
if (num == 3 && index2 == 1) {
|
||
return true
|
||
}
|
||
|
||
if (num == 3 && index2 == 2) {
|
||
return true
|
||
}
|
||
|
||
return false
|
||
},
|
||
// 保留
|
||
handleWeekList() {},
|
||
// 添加星期
|
||
addWeekItem() {
|
||
this.checkTimeAll()
|
||
let obj = {
|
||
weekListConfig: JSON.parse(JSON.stringify(weekListConfig)),
|
||
weekList: [7, 1, 2, 3, 4, 5, 6],
|
||
pickerOptions: {
|
||
start: '00:00',
|
||
step: '00:30',
|
||
end: '23:30',
|
||
},
|
||
timeList: [
|
||
{
|
||
startTime: null,
|
||
endTime: null,
|
||
},
|
||
],
|
||
isError: false,
|
||
errorMsg: '',
|
||
}
|
||
|
||
this.form.weekConfig.push(obj)
|
||
},
|
||
// 删除星期
|
||
delectWeek(index) {
|
||
this.form.weekConfig.splice(index, 1)
|
||
},
|
||
timeToMinutes(timeStr) {
|
||
if (!timeStr) return
|
||
const [hours, minutes] = timeStr.split(':').map(Number)
|
||
return hours * 60 + minutes
|
||
},
|
||
checkTimeSelect(item) {
|
||
if (item == null) return
|
||
|
||
let { isInvalid, isRepetition } = this.checkTime()
|
||
|
||
if (isInvalid) {
|
||
this.$baseMessage('结束时间要大于开始时间', 'error')
|
||
}
|
||
|
||
if (isRepetition) {
|
||
this.$baseMessage('不能有重复时间段', 'error')
|
||
return
|
||
}
|
||
},
|
||
checkTimeOverlap(periods) {
|
||
// 对时间段进行排序，以确保我们可以简单地比较相邻的时间段
|
||
periods.sort((a, b) => {
|
||
if (a.startTime !== b.startTime) {
|
||
return a.startTime - b.startTime
|
||
}
|
||
return a.endTime - b.endTime
|
||
})
|
||
|
||
// 遍历排序后的时间段数组，检查相邻的时间段是否有重叠
|
||
for (let i = 1; i < periods.length; i++) {
|
||
// 如果前一个时间段的结束时间大于或等于当前时间段的开始时间，则存在重叠
|
||
|
||
if (periods[i - 1].endTime > periods[i].startTime) {
|
||
return true // 找到重叠，返回true
|
||
}
|
||
}
|
||
|
||
return false // 没有找到重叠，返回false
|
||
},
|
||
checkInvalidTimes(periods) {
|
||
for (let period of periods) {
|
||
if (period.startTime >= period.endTime) {
|
||
return true // 找到无效的时间段，返回true
|
||
}
|
||
}
|
||
return false // 没有找到无效的时间段，返回false
|
||
},
|
||
checkTime() {
|
||
var periods = this.form.weekConfig
|
||
var isInvalid, isRepetition
|
||
|
||
periods.forEach((item, index) => {
|
||
let list = []
|
||
list = item.timeList
|
||
.map((item) => {
|
||
return {
|
||
startTime: this.timeToMinutes(item.startTime),
|
||
endTime: this.timeToMinutes(item.endTime),
|
||
}
|
||
})
|
||
.filter((item) => item.startTime != null || item.endTime != null)
|
||
|
||
isInvalid = this.checkInvalidTimes(list)
|
||
isRepetition = this.checkTimeOverlap(list)
|
||
})
|
||
|
||
return { isInvalid: isInvalid, isRepetition: isRepetition }
|
||
},
|
||
checkTimeAll() {
|
||
var periods = this.form.weekConfig
|
||
|
||
periods.forEach((item, index) => {
|
||
let list = []
|
||
|
||
list = item.timeList
|
||
.map((item) => {
|
||
return {
|
||
startTime: this.timeToMinutes(item.startTime),
|
||
endTime: this.timeToMinutes(item.endTime),
|
||
}
|
||
})
|
||
.filter((item) => item.startTime != null || item.endTime != null)
|
||
|
||
var isInvalid = this.checkInvalidTimes(list)
|
||
var isRepetition = this.checkTimeOverlap(list)
|
||
|
||
if (isInvalid) {
|
||
this.form.weekConfig[index].isError = true
|
||
this.form.weekConfig[index].errorMsg = '结束时间要大于开始时间'
|
||
return
|
||
} else {
|
||
this.form.weekConfig[index].isError = false
|
||
this.form.weekConfig[index].errorMsg = ''
|
||
}
|
||
|
||
if (isRepetition) {
|
||
this.form.weekConfig[index].isError = true
|
||
this.form.weekConfig[index].errorMsg = '不能有重复时间段'
|
||
} else {
|
||
this.form.weekConfig[index].isError = false
|
||
this.form.weekConfig[index].errorMsg = ''
|
||
}
|
||
})
|
||
},
|
||
addRadiusItem() {
|
||
if (this.form.divideType == 1) {
|
||
if (this.mapForm.radiusList.length >= 10) return
|
||
|
||
let areaNum = this.mapForm.radiusList.length + 1
|
||
// let arrLength = this.mapForm.radiusList.length;
|
||
|
||
let obj = {
|
||
// id:arrLength == 0 ? 0 : arrLength,
|
||
areaNum: areaNum,
|
||
minPriceType: 0,
|
||
minPrice: null,
|
||
deliveryCostAmount: null,
|
||
freightReliefType: 0,
|
||
freightReliefAmout: null,
|
||
derateAmout: null,
|
||
circlePath: {
|
||
center: this.center,
|
||
radius: 300,
|
||
},
|
||
}
|
||
|
||
this.mapForm.radiusList.push(obj)
|
||
} else {
|
||
if (this.mapForm.customList.length >= 10) return
|
||
|
||
let areaNum = this.mapForm.customList.length + 1
|
||
|
||
let { lng, lat } = this.center
|
||
// 正方形的边长（米）
|
||
var side_length = 300
|
||
|
||
// 每度纬度的距离（米）
|
||
var lat_distance_per_degree = 111000
|
||
|
||
var deltaLat = side_length / lat_distance_per_degree
|
||
|
||
var deltaLng = deltaLat
|
||
|
||
let polygonPath = [
|
||
{ lng: lng + deltaLng, lat: lat + deltaLat },
|
||
{ lng: lng + deltaLng, lat: lat - deltaLat },
|
||
{ lng: lng - deltaLng, lat: lat - deltaLat },
|
||
{ lng: lng - deltaLng, lat: lat + deltaLat },
|
||
]
|
||
|
||
let obj = {
|
||
transport_id: 0,
|
||
areaNum: areaNum,
|
||
polygonPath: polygonPath,
|
||
minPriceType: 0,
|
||
minPrice: null,
|
||
deliveryCostAmount: null,
|
||
freightReliefType: 0,
|
||
freightReliefAmout: null,
|
||
derateAmout: null,
|
||
oldCenter: this.center,
|
||
}
|
||
|
||
this.mapForm.customList.push(obj)
|
||
}
|
||
|
||
// this.creatCircle(obj)
|
||
},
|
||
async delectRadiusItem(index, item) {
|
||
let res = await delectArea({ transport_id: item.transport_id,store_id:this.store_id })
|
||
if (res && res.status == 200) {
|
||
this.$baseMessage('删除成功', 'success')
|
||
}
|
||
if (this.form.divideType == 1) {
|
||
if (this.mapForm.radiusList.length == 0) return
|
||
|
||
this.mapForm.radiusList.splice(index, 1)
|
||
// this.map.remove(this.mapForm.circleList[index].circle)
|
||
// this.mapForm.circleList[index].editor.close();
|
||
// this.mapForm.circleList.splice(index,1);
|
||
|
||
if (this.mapForm.radiusList.length == 0) {
|
||
this.mapForm.radiusActive = 0
|
||
this.mapForm.showRadiusCenter = false
|
||
this.mapForm.showRadiusDragging = false
|
||
this.mapForm.showCircleEditing = false
|
||
}
|
||
} else {
|
||
this.mapForm.customList.splice(index, 1)
|
||
if (this.mapForm.customList.length == 0) {
|
||
this.mapForm.customActive = 0
|
||
this.mapForm.showCustomEditing = false
|
||
this.mapForm.showCustomDragging = false
|
||
}
|
||
}
|
||
},
|
||
async getCompanyInfo() {
|
||
const { data } = await get({store_id:this.store_id})
|
||
if (data) {
|
||
let str = data.store_address
|
||
this.form.shopAddress = str.replace(/\//g, '')
|
||
|
||
let cityListCode = data.store_district_id.split('/')
|
||
|
||
let cityList = this.ChineseDistricts
|
||
|
||
if (cityList[cityListCode[1]]) {
|
||
let obj = cityList[cityListCode[1]]
|
||
|
||
this.cityListOpction = Object.keys(obj).map((key) => ({
|
||
value: parseInt(key, 10),
|
||
label: obj[key],
|
||
}))
|
||
}
|
||
|
||
this.shopInfoData = data
|
||
// this.center[0] = Number(this.shopInfoData.store_longitude);
|
||
// this.center[1] = Number(this.shopInfoData.store_latitude);
|
||
// this.mapForm.radiusList[0].circlePath.center[0] = Number(this.shopInfoData.store_longitude);
|
||
// this.mapForm.radiusList[0].circlePath.center[1] = Number(this.shopInfoData.store_latitude);
|
||
|
||
this.center.lng = Number(this.shopInfoData.store_longitude)
|
||
this.center.lat = Number(this.shopInfoData.store_latitude)
|
||
|
||
if (this.mapForm.radiusList.length == 0) {
|
||
let obj = {
|
||
areaNum: 1,
|
||
minPriceType: 0,
|
||
minPrice: null,
|
||
deliveryCostAmount: null,
|
||
freightReliefType: 0,
|
||
freightReliefAmout: null,
|
||
derateAmout: null,
|
||
circlePath: {
|
||
center: {
|
||
lng: 0,
|
||
lat: 0,
|
||
},
|
||
// center:[],
|
||
radius: 300,
|
||
},
|
||
}
|
||
|
||
this.mapForm.radiusList.push(obj)
|
||
|
||
this.mapForm.radiusList[0].circlePath.center.lng = Number(
|
||
this.shopInfoData.store_longitude
|
||
)
|
||
this.mapForm.radiusList[0].circlePath.center.lat = Number(
|
||
this.shopInfoData.store_latitude
|
||
)
|
||
}
|
||
|
||
if (this.mapForm.customList.length == 0) {
|
||
let areaNum = this.mapForm.radiusList.length + 1
|
||
|
||
let obj = {
|
||
transport_id: 0,
|
||
areaNum: areaNum,
|
||
polygonPath: [],
|
||
minPriceType: 0,
|
||
minPrice: null,
|
||
deliveryCostAmount: null,
|
||
freightReliefType: 0,
|
||
freightReliefAmout: null,
|
||
derateAmout: null,
|
||
oldCenter: this.center,
|
||
}
|
||
|
||
this.mapForm.customList.push(obj)
|
||
|
||
let { lng, lat } = this.center
|
||
// 正方形的边长（米）
|
||
var side_length = 300
|
||
|
||
// 每度纬度的距离（米）
|
||
var lat_distance_per_degree = 111000
|
||
|
||
var deltaLat = side_length / lat_distance_per_degree
|
||
|
||
var deltaLng = deltaLat
|
||
|
||
this.mapForm.customList[0].polygonPath = [
|
||
{ lng: lng + deltaLng, lat: lat + deltaLat },
|
||
{ lng: lng + deltaLng, lat: lat - deltaLat },
|
||
{ lng: lng - deltaLng, lat: lat - deltaLat },
|
||
{ lng: lng - deltaLng, lat: lat + deltaLat },
|
||
]
|
||
}
|
||
this.mapReady = true
|
||
}
|
||
},
|
||
async handlerBaiduMap({ BMap, map }) {
|
||
this.mapInstance = map
|
||
this.BMapInstance = BMap
|
||
},
|
||
handleRaduiInput(number, index) {
|
||
if (number == null || number == 0 || number == '') {
|
||
this.mapForm.showRadiusCenter = false
|
||
return
|
||
}
|
||
|
||
this.mapForm.radiusList[index].circlePath.radius = Number(number)
|
||
|
||
if (this.mapForm.radiusList[index].radiusInfo != undefined) {
|
||
this.mapForm.showRadiusCenter = true
|
||
let item = this.mapForm.radiusList[index].radiusInfo
|
||
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
var divs = document.querySelectorAll('.BMap_vectex_node')
|
||
let left = parseInt(divs[1].style.left) + 20 + 'px'
|
||
let top = parseInt(divs[1].style.top) + 'px'
|
||
item.el.style.left = left
|
||
item.el.style.top = top
|
||
console.log('div', left, top)
|
||
|
||
console.log(item.el.style.left, (item.el.style.top = top))
|
||
})
|
||
}, 0)
|
||
}
|
||
},
|
||
updateCirclePath(e, index, type, number) {
|
||
this.mapForm.radiusList[index].circlePath.center = e.target.getCenter()
|
||
this.mapForm.radiusList[index].circlePath.radius = Math.round(
|
||
e.target.getRadius()
|
||
)
|
||
var divs = document.querySelectorAll('.BMap_vectex_node')
|
||
if (divs && divs.length >= 2) {
|
||
if (this.mapForm.radiusList[index].radiusInfo != undefined) {
|
||
let item = this.mapForm.radiusList[index].radiusInfo
|
||
let left = parseInt(divs[1].style.left) + 20 + 'px'
|
||
let top = parseInt(divs[1].style.top) + 'px'
|
||
item.el.style.left = left
|
||
item.el.style.top = top
|
||
}
|
||
}
|
||
},
|
||
handleRadiusActive(e, index) {
|
||
this.mapForm.radiusActive = index
|
||
this.center = this.mapForm.radiusList[index].circlePath.center
|
||
let radius = this.mapForm.radiusList[index].circlePath.radius
|
||
if (radius == 0 || radius == '') {
|
||
this.mapForm.showRadiusCenter = false
|
||
return
|
||
}
|
||
this.mapForm.showRadiusCenter = true
|
||
this.mapForm.showCircleEditing = false
|
||
this.mapForm.showCircleEditing = true
|
||
},
|
||
onClickMarker() {
|
||
if (this.form.divideType == 1) {
|
||
this.mapForm.showRadiusDragging = true
|
||
} else {
|
||
this.mapForm.showCustomDragging = true
|
||
}
|
||
},
|
||
handleDragging(e, index) {
|
||
if (this.form.divideType == 1) {
|
||
this.mapForm.radiusList[index].circlePath.center = e.point
|
||
|
||
let divs = document.querySelectorAll('.BMap_vectex_node')
|
||
if (divs && divs.length >= 2) {
|
||
let item = this.mapForm.radiusList[index].radiusInfo
|
||
let left = parseInt(divs[1].style.left) + 20 + 'px'
|
||
let top = parseInt(divs[1].style.top) + 'px'
|
||
item.el.style.left = left
|
||
item.el.style.top = top
|
||
}
|
||
} else {
|
||
const oldCenter = JSON.parse(
|
||
JSON.stringify(
|
||
this.mapForm.customList[this.mapForm.customActive].oldCenter
|
||
)
|
||
)
|
||
|
||
const newCenter = e.point
|
||
|
||
const deltaLng = newCenter.lng - oldCenter.lng
|
||
const deltaLat = newCenter.lat - oldCenter.lat
|
||
|
||
const newVertices = this.mapForm.customList[
|
||
this.mapForm.customActive
|
||
].polygonPath.map((vertex) => ({
|
||
lng: vertex.lng + deltaLng,
|
||
lat: vertex.lat + deltaLat,
|
||
}))
|
||
|
||
this.mapForm.customList[this.mapForm.customActive].oldCenter = e.point
|
||
|
||
this.mapForm.customList[this.mapForm.customActive].polygonPath =
|
||
newVertices
|
||
}
|
||
},
|
||
handleMarkerMouseovert() {
|
||
if (this.form.divideType == 1) {
|
||
this.mapForm.showRadiusDragging = true
|
||
} else {
|
||
this.mapForm.showCustomDragging = true
|
||
}
|
||
},
|
||
initialize({ el, BMap, map, overlay }) {
|
||
var index = this.mapForm.radiusActive
|
||
var item = this.mapForm.radiusList[index]
|
||
|
||
setTimeout(() => {
|
||
let divs = document.querySelectorAll('.BMap_vectex_node')
|
||
|
||
if (divs && divs.length >= 2) {
|
||
let left = parseInt(divs[1].style.left) + 20 + 'px'
|
||
let top = parseInt(divs[1].style.top) + 'px'
|
||
el.style.left = left
|
||
el.style.top = top
|
||
item.radiusInfo = { el, BMap, map }
|
||
}
|
||
}, 1)
|
||
},
|
||
handleOverlayDraw({ el, BMap, map, overlay }) {
|
||
let divs = document.querySelectorAll('.BMap_vectex_node')
|
||
|
||
if (divs && divs.length >= 2) {
|
||
let left = parseInt(divs[1].style.left) + 20 + 'px'
|
||
let top = parseInt(divs[1].style.top) + 'px'
|
||
el.style.left = left
|
||
el.style.top = top
|
||
}
|
||
},
|
||
updatePolygonPath(e) {
|
||
if (this.mapForm.customList.length <= 0) return
|
||
this.mapForm.customList[this.mapForm.customActive].polygonPath =
|
||
e.target.getPath()
|
||
},
|
||
handlePolygonAcitve({ type, target, point, pixel }, index) {
|
||
this.mapForm.customActive = index
|
||
this.mapForm.showCustomDragging = true
|
||
this.mapForm.showCustomEditing = true
|
||
},
|
||
handleSwitchText(isSwitch) {
|
||
if (isSwitch) {
|
||
this.switchText = '开启'
|
||
} else {
|
||
this.switchText = '关闭'
|
||
}
|
||
},
|
||
// 高德地图
|
||
// init(map) {
|
||
// this.map = map;
|
||
// this.initCircle();
|
||
// },
|
||
// initCircle(){
|
||
|
||
// this.mapForm.radiusList.forEach((item,index)=>{
|
||
// this.creatCircle(item);
|
||
// })
|
||
// },
|
||
// editCircle(selectedCircle, selectedEditor){
|
||
|
||
// this.mapForm.circleList.forEach(({circle, editor})=>{
|
||
// if(circle != selectedCircle){
|
||
// editor.close();
|
||
// }else{
|
||
// selectedEditor.open();
|
||
// }
|
||
// })
|
||
// },
|
||
// creatCircle(item){
|
||
|
||
// var circle = new AMap.Circle({
|
||
// center: item.circlePath.center,
|
||
// radius: item.circlePath.radius, //半径
|
||
// borderWeight: 3,
|
||
// strokeColor: "#6fee0c",
|
||
// strokeOpacity: 1,
|
||
// strokeWeight: 3,
|
||
// fillOpacity: 0.4,
|
||
// strokeDasharray: [10, 10],
|
||
// // 线样式还支持 'dashed'
|
||
// fillColor: '#d1f5ad',
|
||
// zIndex: 50,
|
||
// })
|
||
|
||
// this.map.add(circle)
|
||
|
||
// this.map.setFitView([ circle ])
|
||
|
||
// var circleEditor = new AMap.CircleEditor(this.map, circle,{
|
||
// editOptions:{
|
||
// strokeColor: "#6fee0c",
|
||
// fillColor: '#d1f5ad'
|
||
// }
|
||
// })
|
||
|
||
// this.mapForm.circleList.push({circle:circle,editor: circleEditor})
|
||
|
||
// let _this = this;
|
||
|
||
// circle.on('click', function() {
|
||
// _this.editCircle(this, circleEditor); // 当圆形被点击时调用editCircle函数
|
||
// _this.mapForm.radiusActive = item.id;
|
||
// });
|
||
|
||
// circleEditor.on('adjust', function(e) {
|
||
// var adjustedCircle = e.target;
|
||
// var adjustedRadius = adjustedCircle.getRadius();
|
||
// console.log('调整后的半径:', adjustedRadius);
|
||
|
||
// let {lat,lng} = e.lnglat;
|
||
// item.circlePath.center = Object.values({lat,lng});
|
||
// _this.mapForm.radiusList[_this.mapForm.radiusActive].circlePath.radius = e.radius;
|
||
|
||
// })
|
||
|
||
// },
|
||
async handerSubmit() {
|
||
|
||
console.log(this.form)
|
||
if (
|
||
this.form.distance.distanceNum == null ||
|
||
this.form.distance.distanceNum === '' ||
|
||
this.form.distance.weightNum == null ||
|
||
this.form.distance.weightNum === '' ||
|
||
this.form.distance.distributionFreightNum == null ||
|
||
this.form.distance.distributionFreightNum === '' ||
|
||
this.form.distanceAdd.distanceNum == null ||
|
||
this.form.distanceAdd.distanceNum === '' ||
|
||
this.form.distanceAdd.FreightAddNum == null ||
|
||
this.form.distanceAdd.FreightAddNum === '' ||
|
||
this.form.weightAdd.weightAddNum == null ||
|
||
this.form.weightAdd.weightAddNum === '' ||
|
||
this.form.weightAdd.FreightAddNum == null ||
|
||
this.form.weightAdd.FreightAddNum === ''
|
||
) {
|
||
console.log(
|
||
this.form.distance.distanceNum,
|
||
this.form.distance.weightNum,
|
||
this.form.distance.distributionFreightNum,
|
||
this.form.distanceAdd.distanceNum,
|
||
this.form.distanceAdd.FreightAddNum,
|
||
this.form.weightAdd.weightAddNum,
|
||
this.form.weightAdd.FreightAddNum
|
||
)
|
||
this.$baseMessage('请填写完整的信息', 'error')
|
||
return
|
||
}
|
||
|
||
let list =
|
||
this.mapForm.radiusList.map((item) => {
|
||
let obj = {
|
||
transport_id: item.transport_id || null,
|
||
area_type: this.form.divideType,
|
||
max_delivery_radius: item.circlePath.radius,
|
||
min_delivery_amount_type: item.minPriceType + 1,
|
||
min_delivery_amount: item.minPrice,
|
||
delivery_discount_type: item.freightReliefType + 1,
|
||
min_delivery_discount_amount: item.freightReliefAmout,
|
||
delivery_discount: item.derateAmout,
|
||
}
|
||
|
||
return obj
|
||
}) || []
|
||
|
||
let params = {
|
||
transportBase: {
|
||
transport_base_id: null,
|
||
area_type: this.form.dispensingArea,
|
||
store_id:this.store_id,
|
||
basis: 1,
|
||
distance_base: this.form.distance.distanceNum || 0,
|
||
weight_base: this.form.distance.weightNum || 0,
|
||
delivery_base_fee: this.form.distance.distributionFreightNum || 0,
|
||
distance_increase_km: this.form.distanceAdd.distanceNum || 0,
|
||
distance_increase_fee: this.form.distanceAdd.FreightAddNum || 0,
|
||
weight_increase_kg: this.form.weightAdd.weightAddNum || 0,
|
||
weight_increase_fee: this.form.weightAdd.FreightAddNum || 0,
|
||
},
|
||
transportList: list,
|
||
}
|
||
let isValid = true
|
||
if (this.active == 2) {
|
||
this.$refs['formDistribution'].validate((valid) => {
|
||
isValid = valid
|
||
if (valid) {
|
||
params.transportBase.shop_id = this.form.sfData.storeId
|
||
params.transportBase.business_type = this.form.sfData.goodsType
|
||
}
|
||
})
|
||
}
|
||
|
||
if (!isValid) return
|
||
|
||
let res = await saveSameCityTransport(params)
|
||
if (res && res.status == 200) {
|
||
this.$baseMessage('保存成功', 'success')
|
||
} else {
|
||
this.$baseMessage(res.msg, 'error')
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.localDelivery-container {
|
||
background: #f6f8f9 !important;
|
||
padding: 6px !important;
|
||
|
||
.BMap_vectex_node,
|
||
.BMap_vectex_nodeT {
|
||
background-image: url(./../../../../assets/dd-via.png);
|
||
}
|
||
|
||
.item-block {
|
||
background: #fff;
|
||
margin-bottom: 24px;
|
||
|
||
.title {
|
||
height: 46px;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
line-height: 46px;
|
||
color: #333;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.block {
|
||
padding: 20px;
|
||
|
||
.distribution-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
|
||
.distribution-box {
|
||
margin-right: 20px !important;
|
||
margin-bottom: 20px;
|
||
margin-left: 0;
|
||
padding: 0 15px !important;
|
||
width: 154px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
border: 1px solid #dcdfe6;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
border-color: #1890ff;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.active {
|
||
border-color: #1890ff;
|
||
cursor: default;
|
||
}
|
||
}
|
||
|
||
.orderAppointment-time-input {
|
||
margin-left: 10px;
|
||
width: 100px !important;
|
||
|
||
.el-input__inner {
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
.orderAppointment-time-select {
|
||
.el-input {
|
||
width: 60px;
|
||
|
||
.el-input__inner {
|
||
background: #f5f6fa;
|
||
border-left: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.maxAppointment-input {
|
||
width: 80px !important;
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.automatic-delivery-radio {
|
||
display: flex;
|
||
flex-flow: column;
|
||
|
||
.el-radio {
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
|
||
.division {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.error {
|
||
.el-input__inner {
|
||
border: 1px solid #f1495c !important;
|
||
}
|
||
}
|
||
|
||
.error-msg {
|
||
color: #f1495c;
|
||
}
|
||
|
||
.delect-week {
|
||
color: #f1495c;
|
||
}
|
||
|
||
.time-list {
|
||
margin-bottom: 6px;
|
||
|
||
.el-date-editor {
|
||
width: 138px !important;
|
||
}
|
||
|
||
.add {
|
||
margin: 0 0 0 20px;
|
||
color: #1890ff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.btn-week {
|
||
color: #1890ff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-amend {
|
||
color: #f1495c;
|
||
margin-left: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.map-box {
|
||
display: flex;
|
||
|
||
.areas-conetn {
|
||
height: 494px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.areas-block {
|
||
position: relative;
|
||
flex: 0 0 310px;
|
||
height: 540px;
|
||
border: 1px solid #ededed;
|
||
margin-right: 20px;
|
||
border-radius: 4px;
|
||
overflow-y: hidden;
|
||
padding-bottom: 45px;
|
||
|
||
.areas-item {
|
||
&:hover {
|
||
background: #fff7f5;
|
||
}
|
||
|
||
background: #fff;
|
||
|
||
.el-form-item {
|
||
margin-bottom: 10px !important;
|
||
|
||
.el-form-item__content {
|
||
line-height: 38px !important;
|
||
}
|
||
}
|
||
|
||
.areas-head-block {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
background-color: #fafafa;
|
||
color: #666;
|
||
|
||
.title-circle {
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
border: 1px solid;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
transform: translateY(1px);
|
||
overflow: hidden;
|
||
line-height: 12px;
|
||
border-color: rgb(111, 238, 12);
|
||
|
||
.content {
|
||
opacity: 0.3;
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
.btn-delect {
|
||
color: #fb6638;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.areas-item-block {
|
||
padding: 20px 18px;
|
||
|
||
.el-form-item__label {
|
||
text-align: left;
|
||
}
|
||
|
||
.min-price-type-opction {
|
||
margin-left: 6px;
|
||
|
||
.el-input {
|
||
width: 135px;
|
||
height: 38px;
|
||
}
|
||
}
|
||
|
||
.min-price-input {
|
||
margin: 0 6px;
|
||
width: 109px;
|
||
height: 38px;
|
||
|
||
.el-input__inner {
|
||
width: 70px;
|
||
}
|
||
}
|
||
|
||
.el-input-group__append {
|
||
padding: 4px 12px !important;
|
||
}
|
||
|
||
.delivery-cost-amout-input {
|
||
width: 135px;
|
||
height: 38px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.acitve {
|
||
background: #fff7f5;
|
||
}
|
||
|
||
.areas-conetn-footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 45px;
|
||
text-align: center;
|
||
border-top: 1px solid #ededed;
|
||
color: #fb6638;
|
||
line-height: 45px;
|
||
cursor: pointer;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.map-block {
|
||
flex: 1 1 auto;
|
||
border: 1px solid #ededed;
|
||
border-radius: 4px;
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 540px;
|
||
}
|
||
|
||
.sample {
|
||
position: absolute;
|
||
z-index: 2;
|
||
border: 1px solid blue;
|
||
background-color: white;
|
||
white-space: nowrap;
|
||
cursor: default;
|
||
padding: 3px;
|
||
font-size: 12px;
|
||
line-height: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.week-checkbox-group {
|
||
.el-checkbox__label {
|
||
color: #666 !important;
|
||
}
|
||
}
|
||
|
||
.in-advance-block {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title-block {
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.time-input-block {
|
||
width: 135px;
|
||
height: 38px;
|
||
}
|
||
}
|
||
|
||
.distance-input {
|
||
width: 135px;
|
||
|
||
.el-input-group__append {
|
||
padding: 4px 12px !important;
|
||
}
|
||
}
|
||
|
||
.distance-lable {
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.shop-address {
|
||
width: 270px;
|
||
}
|
||
|
||
.distribution-area {
|
||
.el-input__inner {
|
||
line-height: initial !important;
|
||
}
|
||
}
|
||
|
||
.el-form-item {
|
||
margin-bottom: 30px !important;
|
||
}
|
||
|
||
.el-input {
|
||
width: 270px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-form-item__label {
|
||
padding-right: 20px !important;
|
||
}
|
||
|
||
.el-input__inner {
|
||
min-height: 38px !important;
|
||
line-height: 38px !important;
|
||
}
|
||
|
||
.el-input .el-input__count {
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
.el-radio__input {
|
||
transform: scale(130%);
|
||
}
|
||
|
||
.el-radio__inner {
|
||
background: #fff !important;
|
||
}
|
||
|
||
.el-radio__input.is-checked .el-radio__inner::after {
|
||
transform: translate(-50%, -50%) scale(1.2) !important;
|
||
background-color: #1890ff !important;
|
||
width: 5px !important;
|
||
height: 5px !important;
|
||
}
|
||
|
||
.el-checkbox__inner {
|
||
height: 18px;
|
||
width: 18px;
|
||
|
||
&::after {
|
||
box-sizing: content-box;
|
||
content: '';
|
||
border: 2px solid #fff;
|
||
border-left: 0;
|
||
border-top: 0;
|
||
height: 8px;
|
||
width: 4px;
|
||
left: 5px;
|
||
top: 1px;
|
||
position: absolute;
|
||
transition: transform 0.15s ease-in 0.05s;
|
||
transform-origin: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
position: relative;
|
||
|
||
.example {
|
||
color: #fb6638;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
.example-img-box {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
.example-img-box {
|
||
padding: 8px 16px;
|
||
background-color: #fff;
|
||
background-clip: padding-box;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
|
||
position: absolute;
|
||
will-change: top, left;
|
||
top: -174px;
|
||
left: 29%;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.5s ease-out;
|
||
z-index: 1;
|
||
|
||
&::after {
|
||
content: '';
|
||
width: 0px;
|
||
height: 0px;
|
||
display: block;
|
||
border: 5px solid transparent;
|
||
border-right: 5px solid white;
|
||
position: relative;
|
||
top: -222px;
|
||
left: -26px;
|
||
}
|
||
|
||
.example-img {
|
||
width: 200px;
|
||
height: 400px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.distribution-amount {
|
||
.distribution-select {
|
||
.el-input {
|
||
width: 135px;
|
||
}
|
||
}
|
||
|
||
.distribution-input {
|
||
width: 135px !important;
|
||
|
||
.el-input__inner {
|
||
width: 96px !important;
|
||
}
|
||
|
||
.el-input-group__append {
|
||
padding: 4px 12px !important;
|
||
}
|
||
}
|
||
|
||
.distribution-block-lable {
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.distribution-tips {
|
||
margin: 10px;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: fixed; /* 使用fixed定位 */
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 58px;
|
||
background: #fff;
|
||
color: white;
|
||
text-align: center;
|
||
z-index: 1;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10px 0;
|
||
|
||
.btn {
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
|
||
.BMap_vectex_node:first-child {
|
||
display: none;
|
||
}
|
||
}
|
||
</style> |