wip: tiered deliver price

yshop-drink-vue3/src/api/mall/store/shop/index.ts

@@ -1,5 +1,11 @@
 import request from '@/config/axios'
 
+export interface DeliveryRule {
+  minKm: number
+  maxKm: number
+  price: number
+}
+
 export interface ShopVO {
   id: number
   name: string
@@ -13,6 +19,7 @@ export interface ShopVO {
   distance: number
   minPrice: number
   deliveryPrice: number
+  deliveryRules: DeliveryRule[]
   notice: string
   status: boolean
   adminId: string

yshop-drink-vue3/src/views/mall/store/shop/ShopForm.vue

@@ -46,8 +46,23 @@
       <el-form-item label="起送价钱" prop="minPrice">
         <el-input v-model="formData.minPrice" placeholder="请输入起送价钱" />
       </el-form-item>
-      <el-form-item label="配送价格" prop="deliveryPrice">
-        <el-input v-model="formData.deliveryPrice" placeholder="请输入配送价格" />
+      <el-form-item label="默认配送费" prop="deliveryPrice">
+        <el-input v-model="formData.deliveryPrice" placeholder="未配置规则或无匹配时的兜底配送费" />
+      </el-form-item>
+      <el-form-item label="配送规则">
+        <div style="width: 100%;">
+          <div v-for="(rule, index) in formData.deliveryRules" :key="index" class="delivery-rule-row">
+            <el-input v-model="rule.minKm" placeholder="最小km" style="width: 110px;" />
+            <span class="delivery-rule-sep">~</span>
+            <el-input v-model="rule.maxKm" placeholder="最大km" style="width: 110px;" />
+            <span class="delivery-rule-unit">km</span>
+            <el-input v-model="rule.price" placeholder="配送费" style="width: 110px;" />
+            <span class="delivery-rule-unit">元</span>
+            <el-button type="danger" link @click="removeRule(index)">删除</el-button>
+          </div>
+          <el-button type="primary" link @click="addRule">+ 添加规则</el-button>
+          <div class="delivery-rule-tip">区间左闭右开，如 1~3km 含 1 不含 3；不配置规则时使用默认配送费</div>
+        </div>
       </el-form-item>
       <el-form-item label="公告" prop="notice">
         <el-input type="textarea" rows="5"  v-model="formData.notice" placeholder="请输入公告" />
@@ -111,6 +126,7 @@ const formData = ref({
   distance: undefined,
   minPrice: undefined,
   deliveryPrice: undefined,
+  deliveryRules: [],
   notice: undefined,
   status: undefined,
   adminId: undefined,
@@ -159,6 +175,7 @@ const open = async (type: string, id?: number) => {
     try {
       formData.value = await ShopApi.getShop(id)
       formData.value.adminId = formData.value.adminId.map(Number)
+      formData.value.deliveryRules = formData.value.deliveryRules || []
     } finally {
       formLoading.value = false
     }
@@ -197,6 +214,19 @@ const openForm = () => {
   formRef1.value.open()
 }
 
+/** 新增一条配送规则 */
+const addRule = () => {
+  if (!formData.value.deliveryRules) {
+    formData.value.deliveryRules = []
+  }
+  formData.value.deliveryRules.push({ minKm: undefined, maxKm: undefined, price: undefined })
+}
+
+/** 删除一条配送规则 */
+const removeRule = (index: number) => {
+  formData.value.deliveryRules.splice(index, 1)
+}
+
 const mapConfirm = (mapResult) => {
   console.log('mapResult:',mapResult)
   formData.value.addressMap = mapResult.address
@@ -233,6 +263,7 @@ const resetForm = () => {
     distance: undefined,
     minPrice: undefined,
     deliveryPrice: undefined,
+    deliveryRules: [],
     notice: undefined,
     status: 1,
     adminId: undefined,
@@ -248,4 +279,19 @@ const resetForm = () => {
   width: 100%;
   height: 300px;
 }
+.delivery-rule-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: 6px;
+}
+.delivery-rule-sep,
+.delivery-rule-unit {
+  color: #606266;
+}
+.delivery-rule-tip {
+  color: #999;
+  font-size: 12px;
+  margin-top: 4px;
+}
 </style>