优惠卷选择显示

pages/detail/serviceDetail.vue

@@ -102,8 +102,8 @@
     <!-- 底部结算栏（固定） -->
     <view class="checkout-footer">
       <view class="total-info">
-        <text class="total-label">总金额¥</text>
+        <text class="total-label">应付¥</text>
-        <text class="total-amount">{{ totalAmount.toFixed(2) }}</text>
+        <text class="total-amount">{{ payableAmountYuan.toFixed(2) }}</text>
         <view class="member-benefit">
           <image
             class="crown-icon"
@@ -113,6 +113,12 @@
           <text class="benefit-text">{{ memberLevelName }}优惠</text>
         </view>
       </view>
+      <view class="coupon-brief" @click="openCouponSelect">
+        <image class="coupon-icon" src="/static/service/coupon-icon.png" mode="aspectFill"></image>
+        <text class="coupon-text">{{ selectedCoupon ? selectedCoupon.name : '选择优惠卷' }}</text>
+        <text class="coupon-deduction" v-if="selectedCoupon && couponDiscountFen > 0">-¥{{ (couponDiscountFen / 100).toFixed(2) }}</text>
+        <text class="coupon-arrow">›</text>
+      </view>
       <button
         class="checkout-btn"
         :class="{ disabled: totalAmount <= 0 }"
@@ -131,7 +137,8 @@ import {
   getGuildStoreDetail,
   getGuildVoucher,
   getPaySign,
-  appBuy
+  appBuy,
+  getLuCouponPage
 } from "@/api/service";
 import NavHeader from "@/components/NavHeader/NavHeader.vue";
 
@@ -149,6 +156,10 @@ export default {
       userInfo: {},
       distance: null,
       paying: false,
+      coupons: [],
+      selectedCoupon: null,
+      selectedCouponId: null,
+      couponLoading: false,
     };
   },
   computed: {
@@ -166,6 +177,36 @@ export default {
         return total;
       }, 0);
     },
+    totalAmountFen() {
+      return Math.round(this.totalAmount * 100);
+    },
+    couponDiscountFen() {
+      if (!this.selectedCoupon) return 0;
+      const now = Date.now();
+      if ((this.selectedCoupon.validStartTime && now < this.selectedCoupon.validStartTime) ||
+          (this.selectedCoupon.validEndTime && now > this.selectedCoupon.validEndTime)) {
+        return 0;
+      }
+      if (!this.isCouponApplicable(this.selectedCoupon)) return 0;
+      const totalFen = this.totalAmountFen;
+      if (this.selectedCoupon.type === 2) {
+        const percent = this.selectedCoupon.discountPercent || 0;
+        const raw = Math.round(totalFen * (1 - percent / 100));
+        const limit = this.selectedCoupon.discountLimit || 0;
+        const val = limit > 0 ? Math.min(raw, limit) : raw;
+        return Math.max(0, val);
+      }
+      const amt = this.selectedCoupon.discountAmount || this.selectedCoupon.discountPrice || this.selectedCoupon.price || 0;
+      return Math.max(0, Math.min(amt, totalFen));
+    },
+    payableAmountFen() {
+      const val = this.totalAmountFen - this.couponDiscountFen;
+      if (val <= 0 && this.totalAmountFen > 0) return 1;
+      return Math.max(0, val);
+    },
+    payableAmountYuan() {
+      return this.payableAmountFen / 100;
+    },
     // 是否有会员优惠
     hasMemberDiscount() {
       return this.menuList.some((item) => item.selected && item.discount);
@@ -295,6 +336,7 @@ export default {
         // 选中时，如果当前数量为 0 或未设置，则默认数量为 1
         item.quantity = 1;
       }
+      this.autoSelectBestCoupon();
     },
 
     // 增加数量
@@ -310,6 +352,7 @@ export default {
       }
       // 增加数量
       item.quantity = (item.quantity || 0) + 1;
+      this.autoSelectBestCoupon();
     },
 
     // 减少数量
@@ -328,6 +371,7 @@ export default {
           item.selected = false;
         }
       }
+      this.autoSelectBestCoupon();
     },
 
     // 格式化价格：将分转换为元（除以100，保留两位小数）
@@ -341,6 +385,94 @@ export default {
       return yuan.toFixed(2);
     },
 
+    async openCouponSelect() {
+      if (this.totalAmountFen <= 0) {
+        uni.showToast({ title: "请先选择商品", icon: "none" });
+        return;
+      }
+      await this.loadUserCoupons();
+      const eventChannelData = {
+        coupons: this.coupons,
+        selectedCouponId: this.selectedCouponId,
+      };
+      uni.navigateTo({
+        url: "/pages/detail/selectCoupon",
+        success: (res) => {
+          res.eventChannel.emit("acceptDataFromOpenerPage", eventChannelData);
+          res.eventChannel.on("acceptDataFromOpenedPage", ({ coupon }) => {
+            this.selectedCoupon = coupon;
+            this.selectedCouponId = coupon ? coupon.id : null;
+          });
+        },
+      });
+    },
+    async loadUserCoupons() {
+      if (this.couponLoading) return;
+      this.couponLoading = true;
+      try {
+        const res = await getLuCouponPage({ pageNo: 1, pageSize: 100, status: 0 });
+        const list = (res && res.list) || [];
+        const enhanced = list.map((c) => {
+          const copy = { ...c };
+          copy.isApplicable = this.isCouponApplicable(copy);
+          return copy;
+        });
+        this.coupons = enhanced;
+        if (!this.selectedCoupon && enhanced.length > 0) {
+          this.autoSelectBestCoupon();
+        }
+      } finally {
+        this.couponLoading = false;
+      }
+    },
+    isCouponApplicable(coupon) {
+      const now = Date.now();
+      if (coupon.status !== 0) return false;
+      if (coupon.validStartTime && now < coupon.validStartTime) return false;
+      if (coupon.validEndTime && now > coupon.validEndTime) return false;
+      const totalFen = this.totalAmountFen;
+      if (coupon.usePrice && totalFen < coupon.usePrice) return false;
+      const selectedIds = this.menuList.filter(i => i.selected && i.quantity > 0).map(i => i.id);
+      if (selectedIds.length === 0) return false;
+      if (coupon.productScope === 1) return true;
+      if (coupon.productScope === 2) {
+        const ids = Array.isArray(coupon.voucherIds)
+          ? coupon.voucherIds
+          : (typeof coupon.voucherIds === "string" ? coupon.voucherIds.split(",").map(s => Number(s.trim())).filter(Boolean) : []);
+        return selectedIds.some(id => ids.includes(id));
+      }
+      return true;
+    },
+    autoSelectBestCoupon() {
+      if (!this.coupons || this.coupons.length === 0) return;
+      const applicable = this.coupons.filter(c => this.isCouponApplicable(c));
+      if (applicable.length === 0) {
+        this.selectedCoupon = null;
+        this.selectedCouponId = null;
+        return;
+      }
+      let best = null;
+      let maxDeduct = -1;
+      applicable.forEach(c => {
+        const deduct = (() => {
+          if (c.type === 2) {
+            const percent = c.discountPercent || 0;
+            const raw = Math.round(this.totalAmountFen * (1 - percent / 100));
+            const limit = c.discountLimit || 0;
+            return Math.max(0, limit > 0 ? Math.min(raw, limit) : raw);
+          }
+          return Math.max(0, Math.min(c.discountAmount || c.discountPrice || c.price || 0, this.totalAmountFen));
+        })();
+        if (deduct > maxDeduct) {
+          maxDeduct = deduct;
+          best = c;
+        }
+      });
+      this.selectedCoupon = best || null;
+      this.selectedCouponId = best ? best.id : null;
+      this.coupons = this.coupons.map(c => ({ ...c, isApplicable: this.isCouponApplicable(c) }));
+    },
+
     // 去结算
     async handleCheckout() {
       if (this.totalAmount <= 0) {
@@ -365,8 +497,8 @@ export default {
         .map((item) => `${item.id}:${item.quantity}`)
         .join(";");
 
-      //  this.totalAmount 是元, 要转换成分
+      const trxamtFen = this.payableAmountFen;
-      const trxamt = (this.totalAmount * 100).toFixed(0);
+      const trxamt = String(trxamtFen);
 
       console.log("购买信息: " + voucherStr);
       console.log("金额:" + trxamt);
@@ -374,6 +506,7 @@ export default {
         shopId: this.shopId,
         voucherData: voucherStr,
         payableAmount: trxamt,
+        couponId: this.selectedCouponId || undefined,
       });
       console.log(res);
       if (!res) {
@@ -810,6 +943,41 @@ export default {
     }
   }
 
+  .coupon-brief {
+    position: absolute;
+    left: 20rpx;
+    top: -68rpx;
+    display: inline-flex;
+    align-items: center;
+    padding: 8rpx 12rpx;
+    background: #fff7f8;
+    border: 1rpx dashed #ffd4d8;
+    border-radius: 10rpx;
+    color: #d51c3c;
+  }
+  .coupon-icon {
+    width: 24rpx;
+    height: 24rpx;
+    margin-right: 8rpx;
+  }
+  .coupon-text {
+    font-size: 24rpx;
+    margin-right: 8rpx;
+    max-width: 280rpx;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .coupon-deduction {
+    font-size: 24rpx;
+    color: #d51c3c;
+    margin-right: 8rpx;
+  }
+  .coupon-arrow {
+    font-size: 28rpx;
+    color: #d51c3c;
+  }
+
   .checkout-btn {
     color: #ffffff;
     font-family: PingFang-SC, PingFang-SC;