fix: 代客下单优惠券显示调整

2025-10-10 15:24:34 +08:00
parent 89a23613b0
commit d6cc5a00cc
5 changed files with 207 additions and 122 deletions
--- a/src/views/tool/Instead/components/order.vue
+++ b/src/views/tool/Instead/components/order.vue
@@ -81,15 +81,14 @@
              <el-icon><ArrowDown /></el-icon>
            </div>
          </div>
-          {{ carts.orderCostSummary }}
-          <div class="u-m-t-20" v-if="carts.coupons.length > 0">
+          <div class="u-m-t-20" v-if="quansSelArr.length > 0">
            <div class="font-bold u-m-b-10">已选优惠券</div>
-            <el-table empty-text="未选择优惠券" :data="carts.coupons">
+            <el-table empty-text="未选择优惠券" :data="quansSelArr">
              <el-table-column type="index" width="50" label="#"></el-table-column>
              <el-table-column prop="name" label="券名称"></el-table-column>
              <el-table-column label="券类型" width="80">
                <template v-slot="scope">
-                  {{ scope.row.type == 1 ? "优惠券" : "商品券" }}
+                  {{ UTILS.returnCoupType(scope.row.type) }}
                </template>
              </el-table-column>
              <el-table-column label="商品信息">
@@ -232,6 +231,8 @@
 </template>

 <script  setup>
+import * as UTILS from "@/utils/coupon-utils.js";
+
 import * as quanUtil from "../quan_util.js";
 import { OrderPriceCalculator } from "@/utils/goods";
 import { useCartsStore } from "@/store/modules/carts";
@@ -302,6 +303,7 @@ function delQuan(row) {
  if (index != -1) {
    quansSelArr.value.splice(index, 1);
  }
+  carts.setCoupons(quansSelArr.value);
 }
 function couponChange(data) {}

--- a/src/views/tool/Instead/components/popup-coupon.vue
+++ b/src/views/tool/Instead/components/popup-coupon.vue
@@ -32,7 +32,11 @@
              </el-table-column>
              <el-table-column prop="discountAmount" label="最大抵扣金额" align="center">
                <template v-slot="scope">
-                  <span class="color-red">￥{{ scope.row.maxDiscountAmount }}</span>
+                  <span class="color-red">
+                    {{
+                      !scope.row.maxDiscountAmount ? "无上限" : "￥" + scope.row.maxDiscountAmount
+                    }}
+                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="限制" width="180">
@@ -70,21 +74,9 @@

              <el-table-column label="商品信息" width="220">
                <template v-slot="scope">
-                  <div class="u-flex" v-if="scope.row.useFoods.length">
-                    <div class="u-flex">
-                      <el-image
-                        :src="scope.row.productImg"
-                        fit="cover"
-                        style="width: 40px; height: 40px"
-                        :preview-src-list="[scope.row.productImg]"
-                      ></el-image>
-                    </div>
-                    <div class="u-p-l-10">
-                      <!-- <div class="">{{ scope.row.productName }}</div> -->
-                      <div class="">x{{ scope.row.discountNum || 1 }}</div>
-                    </div>
+                  <div class="u-flex">
+                    {{ scope.row.foods }}
                  </div>
-                  <div class="u-flex" v-else>任意商品 x{{ scope.row.discountNum || 1 }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="抵扣">
@@ -107,9 +99,9 @@
            </el-table>
          </el-tab-pane>
        </el-tabs>
-        <div v-if="quansSelArr.length > 0">
-          <div class="font-bold u-m-b-10">已选优惠券</div>
-          <el-table empty-text="未选择优惠券" :data="quansSelArr" max-height="20vh">
+        <div class="u-m-t-10" v-if="noUseCoupon.length > 0">
+          <div class="font-bold u-m-b-10">不可用优惠券</div>
+          <el-table empty-text="无" :data="noUseCoupon" max-height="30vh">
            <el-table-column type="index" width="50" label="#"></el-table-column>
            <el-table-column prop="name" label="券名称"></el-table-column>
            <el-table-column label="券类型" width="80">
@@ -119,21 +111,38 @@
            </el-table-column>
            <el-table-column label="商品信息" width="120">
              <template v-slot="scope">
-                <div class="u-flex" v-if="scope.row.type == 2">
-                  <div v-if="scope.row.useFoods.length">
-                    <div class="u-flex">
-                      <el-image
-                        :src="scope.row.productImg"
-                        fit="cover"
-                        style="width: 40px; height: 40px"
-                      ></el-image>
-                    </div>
-                    <div class="u-p-l-10">
-                      <div class="">{{ scope.row.productName }}</div>
-                      <div class="">x{{ scope.row.discountNum || 1 }}</div>
-                    </div>
-                  </div>
-                  <div v-else>任意商品 x{{ scope.row.discountNum || 1 }}</div>
+                <div class="u-flex">
+                  {{ scope.row.foods }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="discountAmount" label="抵扣">
+              <template v-slot="scope">
+                <span class="color-red">￥{{ scope.row.discountAmount }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="useRestrictions" label="描述"></el-table-column>
+            <el-table-column label="不可用原因">
+              <template v-slot="scope">
+                <span class="color-red">{{ scope.row.canuseResult.reason }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="u-m-t-10" v-if="quansSelArr.length > 0">
+          <div class="font-bold u-m-b-10">已选优惠券</div>
+          <el-table empty-text="无" :data="quansSelArr" max-height="20vh">
+            <el-table-column type="index" width="50" label="#"></el-table-column>
+            <el-table-column prop="name" label="券名称"></el-table-column>
+            <el-table-column label="券类型" width="80">
+              <template v-slot="scope">
+                {{ UTILS.returnCoupType(scope.row) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="商品信息" width="120">
+              <template v-slot="scope">
+                <div class="u-flex">
+                  {{ scope.row.foods }}
                </div>
              </template>
            </el-table-column>
@@ -237,7 +246,7 @@ const {
  isSetProductCoup,
 } = toRefs(state);
 const quansSelArr = computed(() => {
-  return [couponSel.value, goodsCouponSel.value].filter((v) => v.id);
+  return [goodsCouponSel.value, couponSel.value].filter((v) => v.id);
 });
 const refTable = ref();
 const refTable1 = ref();
@@ -246,6 +255,8 @@ let orderPrice = ref(0);
 //可以抵扣的商品列表
 let canDikouGoodsArr = [];
 let goodsArr = [];
+//不可用优惠券列表
+const noUseCoupon = ref([]);

 function open(money, orderInfo) {
  let arr = [];
@@ -260,70 +271,93 @@ function open(money, orderInfo) {
  show.value = true;
 }

+let couponList = [];
 async function getcoup() {
  const res = await couponApi.findCoupon({ shopUserId: props.user.id });
-  console.log(res);
+  couponList = res || [];
+  let canUseGoodsCoupon = [];
+  let canUseDiscountCoupon = [];
+
+  let noUseGoodsCoupon = [];
+  let noUseDiscountCoupon = [];
+  for (let i = 0; i < couponList.length; i++) {
+    const coupon = couponList[i];
+    const selCoupon =
+      activeName.value == "goods"
+        ? quansSelArr.value.filter((v) => v.type != 2)
+        : quansSelArr.value.filter((v) => v.type == 2);
+    const canuseResult = UTILS.returnCouponCanUse({
+      canDikouGoodsArr,
+      coupon,
+      orderPrice: orderPrice.value,
+      user: props.user,
+      selCoupon,
+      shopInfo: shopUser.userInfo,
+    });
+    const { canUse, reason } = canuseResult;
+    if (coupon.type == 2) {
+      if (canUse || goodsCouponSel.value.id == coupon.id) {
+        canUseGoodsCoupon.push(coupon);
+      } else {
+        noUseGoodsCoupon.push({
+          ...coupon,
+          canuseResult,
+        });
+      }
+    } else {
+      if (canUse || couponSel.value.id == coupon.id) {
+        canUseDiscountCoupon.push(coupon);
+      } else {
+        noUseDiscountCoupon.push({
+          ...coupon,
+          canuseResult,
+        });
+      }
+    }
+  }
+
+  //商品券
+  canUseGoodsCoupon = canUseGoodsCoupon.map((v) => {
+    const discount = UTILS.returnCouponDiscount(
+      canDikouGoodsArr,
+      v,
+      props.user,
+      orderPrice.value,
+      quansSelArr.value,
+      shopUser.userInfo
+    );
+    return {
+      ...v,
+      discount,
+      discountAmount: discount ? discount.discountPrice : v.discountAmount,
+    };
+  });
  //非商品券
-  quans.value.coupon = res
-    .filter((v) => v.type != 2)
-    .filter((coupon) => {
-      const { canUse, msg } = UTILS.returnCouponCanUse({
-        canDikouGoodsArr,
-        coupon,
-        orderPrice: orderPrice.value,
-        user: props.user,
-        selCoupon: quansSelArr.value,
-        shopInfo: shopUser.userInfo,
-      });
-      return canUse;
-    })
-    .map((v) => {
-      const discount = UTILS.returnCouponDiscount(
-        canDikouGoodsArr,
-        v,
-        props.user,
-        orderPrice.value,
-        quansSelArr.value,
-        shopUser.userInfo
-      );
-      return {
-        ...v,
-        discount,
-        discountAmount: discount ? discount.discountPrice : v.discountAmount,
-      };
-    });
-  quans.value.productCoupon = res
-    .filter((v) => v.type == 2)
-    .filter((coupon) => {
-      const { canUse, msg } = UTILS.returnCouponCanUse({
-        canDikouGoodsArr,
-        coupon,
-        orderPrice: orderPrice.value,
-        user: props.user,
-        selCoupon: quansSelArr.value,
-        shopInfo: shopUser.userInfo,
-      });
-      return canUse;
-    })
-    .map((v) => {
-      const findGoods = goodsArr.find((goods) => goods.productId == v.proId);
-      const discount = UTILS.returnCouponDiscount(
-        canDikouGoodsArr,
-        v,
-        props.user,
-        orderPrice.value,
-        quansSelArr.value,
-        shopUser.userInfo
-      );
-      return {
-        ...v,
-        productImg: findGoods ? findGoods.productImg : "",
-        productName: findGoods ? findGoods.productName : "",
-        discount,
-        discountAmount: discount ? discount.discountPrice : v.discountAmount,
-      };
-    });
+  canUseDiscountCoupon = canUseDiscountCoupon.map((v) => {
+    const discount = UTILS.returnCouponDiscount(
+      canDikouGoodsArr,
+      v,
+      props.user,
+      orderPrice.value,
+      quansSelArr.value,
+      shopUser.userInfo
+    );
+    return {
+      ...v,
+      discount,
+      discountAmount: discount ? discount.discountPrice : v.discountAmount,
+    };
+  });
+
+  quans.value.productCoupon = canUseGoodsCoupon;
+  quans.value.coupon = canUseDiscountCoupon;
+  if (activeName.value == "goods") {
+    noUseCoupon.value = [...noUseGoodsCoupon];
+  } else {
+    noUseCoupon.value = [...noUseDiscountCoupon];
+  }
 }
+
 function couponClick(checked, row) {
  couponSel.value = checked ? row : { id: "" };
 }
@@ -371,7 +405,44 @@ watch(
 );
 watch(
  () => quansSelArr.value,
-  () => {
+  (newval) => {
+    console.log("quansSelArr", newval);
+    if (newval.length >= 2) {
+      let goodsCoupon = newval.filter((v) => v.type == 2);
+      let otherCoupon = newval.filter((v) => v.type != 2);
+      goodsCoupon = goodsCoupon.map((v) => {
+        const discount = UTILS.returnCouponDiscount(
+          canDikouGoodsArr,
+          v,
+          props.user,
+          orderPrice.value,
+          [],
+          shopUser.userInfo
+        );
+        return {
+          ...v,
+          discount,
+          discountAmount: discount ? discount.discountPrice : v.discountAmount,
+        };
+      });
+      otherCoupon = otherCoupon.map((v) => {
+        const discount = UTILS.returnCouponDiscount(
+          canDikouGoodsArr,
+          v,
+          props.user,
+          orderPrice.value,
+          goodsCoupon,
+          shopUser.userInfo
+        );
+        return {
+          ...v,
+          discount,
+          discountAmount: discount ? discount.discountPrice : v.discountAmount,
+        };
+      });
+      couponSel.value = otherCoupon[0];
+      goodsCouponSel.value = goodsCoupon[0];
+    }
    getcoup();
  }
 );