feat:优惠券

pages.json

@@ -563,6 +563,12 @@
             "navigationStyle": "custom"
           }
         },
+        {
+           "path": "productInfo/evaluateDetail",
+           "style": {
+            "navigationBarTitleText": ""
+          }
+        },
         {
           "path": "pointsRedemption/pointsRedemption",
           "style": {

pages/order_package/order_submit/cpoun-dialog.vue

@@ -0,0 +1,383 @@
+<template>
+  <view class="content">
+    <up-popup
+      :show="show"
+      :round="20"
+      :closeOnClickOverlay="false"
+      :closeable="true"
+      :safeAreaInsetBottom="false"
+      @close="handleClose"
+    >
+      <view class="coupon-popup">
+        <!-- 固定的标题头部 -->
+        <view class="popup-header">
+          <text class="title">选择优惠券</text>
+        </view>
+
+        <!-- 固定的切换标签 -->
+        <view class="tab-container">
+          <view
+            v-for="(tab, index) in tabs"
+            :key="index"
+            :class="['tab-item', { active: activeTab === index }]"
+            @click="activeTab = index"
+          >
+            <text class="tab-text">{{ tab.name }}</text>
+            <view class="active-line" v-if="activeTab === index"></view>
+          </view>
+        </view>
+
+        <!-- 可上下滚动的优惠券列表区域 -->
+        <scroll-view
+          class="coupon-scroll"
+          scroll-y
+          :enhanced="true"
+          :show-scrollbar="false"
+        >
+          <view class="coupon-list">
+            <view
+              class="coupon-card"
+              v-for="(coupon, index) in filteredCoupons"
+              :key="index"
+              :class="{ 'disabled': coupon.status === 'expired' }"
+            >
+              <!-- 左侧：金额与门槛 -->
+              <view class="card-left">
+                <view class="price-box">
+                  <text class="currency">¥</text>
+                  <text class="amount">{{ coupon.amount }}</text>
+                </view>
+                <text class="condition">{{ coupon.condition }}</text>
+              </view>
+              
+              <!-- 带有上下半圆凹槽的虚线分割线 -->
+              <view class="divider-wrapper">
+                <view class="notch top-notch"></view>
+                <view class="divider-line"></view>
+                <view class="notch bottom-notch"></view>
+              </view>
+
+              <!-- 右侧：详细内容 -->
+              <view class="card-right">
+                <view class="info-content">
+                  <view class="title">{{ coupon.title }}</view>
+                  <view class="description">{{ coupon.description }}</view>
+                  
+                  <!-- 状态/倒计时文本 -->
+                  <view v-if="coupon.status === 'active'" class="countdown">
+                    仅剩 {{ coupon.timeLeft }}
+                  </view>
+                  <view v-else class="expired-text">
+                    已失效
+                  </view>
+                </view>
+                
+                <!-- 按钮：仅在有效状态下显示 -->
+                <view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
+                  使用
+                </view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "CouponDialog",
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      activeTab: 0,
+      tabs: [
+        { name: "全部", value: "all" },
+        { name: "可使用", value: "active" },
+        { name: "已失效", value: "expired" },
+      ],
+      coupons: [
+        {
+          amount: 12,
+          condition: "无门槛",
+          title: "限时秒杀优惠券",
+          description: "云南白药牙膏儿膏儿膏儿...",
+          timeLeft: "14:20:55",
+          status: "active"
+        },
+        {
+          amount: 12,
+          condition: "无门槛",
+          title: "限时秒杀优惠券",
+          description: "云南白药牙膏儿膏儿膏儿...",
+          timeLeft: "14:20:55",
+          status: "active"
+        },
+      ],
+    };
+  },
+  computed: {
+    filteredCoupons() {
+      if (this.activeTab === 0) {
+        return this.coupons;
+      } else if (this.activeTab === 1) {
+        return this.coupons.filter(c => c.status === 'active');
+      } else if (this.activeTab === 2) {
+        return [];
+      } else {
+        return this.coupons.filter(c => c.status === 'expired');
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit("close");
+    },
+    useCoupon(coupon) {
+      this.$emit("select", coupon);
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.coupon-popup {
+  height: 85vh;
+  background-color: #f6f6f6;
+  border-radius: 20rpx 20rpx 0 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-header {
+  text-align: center;
+  font-size: 32rpx;
+  background-color: #ffffff;
+  color: #333333;
+  font-weight: 500;
+  padding: 30rpx 0;
+  position: relative;
+  border-radius: 20rpx 20rpx 0 0;
+}
+
+.tab-container {
+  display: flex;
+  width: 100%;
+  background-color: #ffffff;
+  height: 88rpx;
+  align-items: center;
+  padding-left: 28rpx;
+  box-sizing: border-box;
+  border-top: 2rpx solid #f6f6f6;
+
+  .tab-item {
+    margin-right: 48rpx;
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .tab-text {
+      font-size: 28rpx;
+      color: #7f7f7f;
+      transition: all 0.2s ease;
+    }
+
+    &.active {
+      .tab-text {
+        color: #7A35F6;
+        font-weight: bold;
+      }
+    }
+
+    .active-line {
+      position: absolute;
+      bottom: 4rpx;
+      width: 44rpx;
+      height: 4rpx;
+      background-color: #7A35F6;
+      border-radius: 2rpx;
+    }
+  }
+}
+
+.coupon-scroll {
+  flex: 1;
+  height: 0;
+  overflow: hidden;
+}
+
+.coupon-list {
+  padding: 28rpx 28rpx;
+  box-sizing: border-box;
+  display: flex;
+  background-color: #ffffff;
+  flex-direction: column;
+  gap: 32rpx;
+
+  .coupon-card {
+    background: rgba(102,102,102,0.06);
+    border-radius: 16rpx;
+    display: flex;
+    height: 196rpx;
+    position: relative;
+
+    .card-left {
+      width: 190rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+
+      .price-box {
+        display: flex;
+        align-items: flex-end;
+        color: #ff1224;
+        font-weight: bold;
+        margin-bottom: 10rpx;
+
+        .currency {
+          font-size: 32rpx;
+          margin-right: 2rpx;
+        }
+
+        .amount {
+          font-size: 64rpx;
+          line-height: 64rpx;
+        }
+      }
+
+      .condition {
+        font-size: 24rpx;
+        color: #ff1224;
+        margin-top: 10rpx;
+      }
+    }
+
+    .divider-wrapper {
+      width: 2rpx;
+      position: relative;
+      margin: 10rpx 0;
+      display: flex;
+      justify-content: center;
+
+      .divider-line {
+        width: 0;
+        height: 100%;
+        border-left: 2rpx dashed rgba(253,28,36,0.3);
+      }
+
+      .notch {
+        position: absolute;
+        width: 16rpx;
+        height: 16rpx;
+        background-color: #f7f8fa;
+        border-radius: 50%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .top-notch {
+        top: -18rpx;
+      }
+      .bottom-notch {
+        bottom: -18rpx;
+      }
+    }
+
+    .card-right {
+      flex: 1;
+      padding: 26rpx 24rpx 24rpx 36rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+
+      .info-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex: 1;
+        overflow: hidden;
+
+        .title {
+          font-size: 36rpx;
+          color: #2c2c2c;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .description {
+          font-size: 28rpx;
+          color: #6a6a6a;
+          margin-top: 8rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .countdown {
+          font-size: 24rpx;
+          color: #ff5260;
+          margin-top: 14rpx;
+        }
+      }
+
+      .use-btn {
+        width: 116rpx;
+        height: 56rpx;
+        background-color: #FD1C24;
+        color: #ffffff;
+        font-size: 28rpx;
+        border-radius: 8rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-left: 16rpx;
+        font-weight: 500;
+
+        &:active {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    &.disabled {
+      background-color: #f4f4f4;
+
+      .card-left {
+        .price-box { color: #9c9c9c; }
+        .condition { color: #9c9c9c; }
+      }
+
+      .divider-wrapper {
+        .divider-line { border-left-color: #e2e2e2; }
+      }
+
+      .card-right {
+        .info-content {
+          .title { color: #2c2c2c; }
+          .description { color: #9c9c9c; }
+        }
+        .expired-text {
+          font-size: 22rpx;
+          color: #bcbcbc;
+          margin-top: 14rpx;
+        }
+      }
+    }
+  }
+}
+</style>

pages/order_package/order_submit/order_submit.vue

@@ -134,7 +134,9 @@
     <view class="order_way_warp_two" v-if="isCoupon">
       <view class="price-view">
         <text class="text-32 text-zu">数字积分余额</text>
-        <text class="text-32 text-zu text-bold">{{ couponData.balance || 0 }}</text>
+        <text class="text-32 text-zu text-bold">{{
+          couponData.balance || 0
+        }}</text>
       </view>
 
       <view class="price-view">
@@ -169,19 +171,32 @@
       <view class="price-view">
         <text class="text-32 text-zu">商品总价</text>
         <text class="text-32 text-zu text-bold" v-if="isCoupon">
-          {{ `${buyCouponvalue}数字积分+${orderInfo.amount - (orderInfo.postage || 0) +
+          {{
-            (orderInfo.enterpriseAmount
+            `${buyCouponvalue}数字积分+${orderInfo.amount -
-              || 0)}元` }}
+            (orderInfo.postage || 0) +
+            (orderInfo.enterpriseAmount || 0)
+            }元`
+          }}
         </text>
-        <text class="text-32 text-zu text-bold" v-else>￥{{ orderInfo.amount - orderInfo.postage +
+        <text class="text-32 text-zu text-bold" v-else>￥{{
-          (orderInfo.enterpriseAmount
+          orderInfo.amount -
-            || 0) }}</text>
+          orderInfo.postage +
+          (orderInfo.enterpriseAmount || 0)
+        }}</text>
       </view>
       <view class="price-view">
         <text class="text-32 text-zu">运费</text>
         <text class="text-32 text-zu text-bold">￥{{ orderInfo.postage }}</text>
       </view>
-
+      <view class="price-view" @click="couponShow = true">
+        <text class="text-32 text-zu">优惠券</text>
+        <view style="display: flex; align-items: center;">
+          <view class="text-24 " style="margin-right:4rpx;color:#999;">{{ selectedCoupon ? `-${selectedCoupon.amount}` :
+            '请选择' }}</view>
+          <up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"
+            style="display:inline-block;vertical-align: middle;"></up-image>
+        </view>
+      </view>
       <view class="price-view" v-if="isCoupon">
         <text class="text-32 text-zu">数字积分</text>
         <text class="text-32 text-zu text-bold">{{ buyCouponvalue }}数字积分</text>
@@ -270,6 +285,9 @@
     </u-keyboard>
 
     <up-toast ref="uToastRef"></up-toast>
+
+    <!-- 优惠券选择弹框 -->
+    <CouponDialog :show="couponShow" @close="couponShow = false" @select="handleCouponSelect"></CouponDialog>
   </view>
 </template>
 
@@ -288,7 +306,7 @@ import {
   getSettleList,
   settle,
   settlementOrder,
-  updateGoodsNum
+  updateGoodsNum,
 } from "@/api/cart.js";
 import { getSupportPay } from "@/api/order.js";
 import { feedback } from "@/api/payment.js";
@@ -303,8 +321,14 @@ import {
 } from "@/utils/payUtils.js";
 
 import CryptoJS from "crypto-js";
+import CouponDialog from "./cpoun-dialog.vue";
 
 export default {
+  components: {
+    Address,
+    Header,
+    CouponDialog,
+  },
   computed: {
     PRODUCT_DELIVERY_TIME() {
       return PRODUCT_DELIVERY_TIME;
@@ -325,12 +349,6 @@ export default {
       }
       return num;
     },
-
-  },
-
-  components: {
-    Address,
-    Header,
   },
   data() {
     return {
@@ -368,6 +386,8 @@ export default {
       allOrderInfo: {}, // 所有订单信息
       buyCouponvalue: 0, // 实付数字积分积分
       buyCouponAmount: 0, // 实付数字积分对应的钱
+      couponShow: false, // 优惠券弹框显示
+      selectedCoupon: null, // 选中的优惠券
     };
   },
   async onLoad(option) {
@@ -376,7 +396,7 @@ export default {
     if (option.address) {
       this.defaultAddress = option.address;
     }
-    console.log('-------', option.isCoupon)
+    console.log("-------", option.isCoupon);
     if (option.isCoupon) {
       this.isCoupon = option.isCoupon;
     }
@@ -417,12 +437,19 @@ export default {
     assembleAddress,
     // 实付数字积分
     onBuyCouponvalue(currentQuantity) {
-      this.buyCouponvalue = Number((this.allOrderInfo.buyDeductionValue * (currentQuantity || 1)).toFixed(2)) || 0;
+      this.buyCouponvalue =
-
+        Number(
+          (
+            this.allOrderInfo.buyDeductionValue * (currentQuantity || 1)
+          ).toFixed(2),
+        ) || 0;
     },
     // 实付数字积分对应的钱
     onBuyCouponAmount() {
-      this.buyCouponAmount = Number((this.sed.goodsNum * this.allOrderInfo.buyDeduction).toFixed(2)) || 0;
+      this.buyCouponAmount =
+        Number(
+          (this.sed.goodsNum * this.allOrderInfo.buyDeduction).toFixed(2),
+        ) || 0;
     },
     async addressList() {
       const res = await getAddress();
@@ -502,7 +529,7 @@ export default {
       } else {
         parmas["types"] = "1,2,3";
       }
-      console.log('parmas-----', this.isCoupon)
+      console.log("parmas-----", this.isCoupon);
 
       if (this.isCoupon) {
         parmas["types"] = "1,2,3";
@@ -522,8 +549,8 @@ export default {
         // 	const balanceFlag = data.some(item => item.type === "balance" && item.balance < amount);
         // 	this.isShowBalance = balanceFlag;
         // }
-        this.wayOption = data.filter(item => item.type !== "vcoin");
+        this.wayOption = data.filter((item) => item.type !== "vcoin");
-        this.couponData = data.filter(item => item.type === "vcoin")[0] || {};
+        this.couponData = data.filter((item) => item.type === "vcoin")[0] || {};
         console.log("getWayOption", this.wayOption, this.couponData);
       }
     },
@@ -544,7 +571,7 @@ export default {
       let address = null;
       if (this.defaultAddress) {
         address = this.addressListOne.find(
-          (item) => item.id == this.defaultAddress
+          (item) => item.id == this.defaultAddress,
         );
       } else {
         if (this.addressListOne.length) {
@@ -631,14 +658,28 @@ export default {
             },
           ],
         };
-        console.log('this.defaultAddress', this.defaultAddress, this.addressListOne)
+        console.log(
-        if (this.defaultAddress && this.addressListOne && this.addressListOne.length) {
+          "this.defaultAddress",
-          let arr = this.addressListOne.filter(i => i.id == this.defaultAddress);
+          this.defaultAddress,
+          this.addressListOne,
+        );
+        if (
+          this.defaultAddress &&
+          this.addressListOne &&
+          this.addressListOne.length
+        ) {
+          let arr = this.addressListOne.filter(
+            (i) => i.id == this.defaultAddress,
+          );
           if (arr.length) {
             this.orderInfo.address = arr[0];
           }
         }
-        if (!this.orderInfo.address && this.addressListOne && this.addressListOne.length) {
+        if (
+          !this.orderInfo.address &&
+          this.addressListOne &&
+          this.addressListOne.length
+        ) {
           this.orderInfo.address = this.addressListOne[0];
         }
         this.allOrderInfo = data;
@@ -711,7 +752,7 @@ export default {
         goodsNum: currentQuantity,
       };
       const result = await updateGoodsNum(params);
-      console.log("-----1")
+      console.log("-----1");
       if (result && result.bizcode === 100) {
         this.orderInfo.shops[index].addrTimes[addIndex].goods[pIndex].num =
           currentQuantity;
@@ -845,7 +886,7 @@ export default {
         params["goodsId"] = this.sed.id;
         params["specsId"] = this.sed.specsId.id;
         params["goodsNum"] = this.orderInfo.shops[0].addrTimes[0].goods[0].num;
-        if (this.isCoupon) params.payway2 = 'vcoin';
+        if (this.isCoupon) params.payway2 = "vcoin";
 
         resp = await settlementOrder(params);
       } else {
@@ -964,6 +1005,9 @@ export default {
         url: "/pages/other_package/productInfo/productInfo?id=" + item.goodsId,
       });
     },
+    handleCouponSelect(coupon) {
+      this.selectedCoupon = coupon;
+    },
     /**
      * 去充值
      */
@@ -1284,4 +1328,4 @@ export default {
     color: $app-bt-bj;
   }
 }
-</style>
+</style>

pages/other_package/coupon/coupon.vue

@@ -109,11 +109,6 @@ export default {
 	},
 	computed: {
 		filteredCoupons() {
-			if (this.currentTab === 1) {
-				return this.coupons.filter(item => item.status === 'active');
-			} else if (this.currentTab === 2) {
-				return this.coupons.filter(item => item.status === 'expired');
-			}
 			return this.coupons;
 		}
 	},
@@ -133,21 +128,22 @@ export default {
 
 <style lang="scss" scoped>
 .content {
-	background-color: #f7f8fa;
+	background-color: #F5F5F5;
 	min-height: 100vh;
 }
 
-/* ================= 顶部分类 Tab 栏像素级还原 ================= */
 .tab-container {
 	display: flex;
+	width: 100%;
 	background-color: #ffffff;
-	padding: 0 40rpx;
+	height: 88rpx;             
-	height: 100rpx;
 	align-items: center;
-	border-bottom: 2rpx solid #fcfcfc;
+	padding-left: 28rpx;        /* 关键：左侧对齐优惠券卡片的边距 */
+	box-sizing: border-box;
+	border-top: 2rpx solid #f6f6f6; /* 隐约的底部分割线 */
 	
 	.tab-item {
-		margin-right: 54rpx;
+		margin-right: 48rpx;    /* 增大字与字之间的间距 */
 		position: relative;
 		height: 100%;
 		display: flex;
@@ -158,41 +154,40 @@ export default {
 		
 		.tab-text {
 			font-size: 28rpx;
-			color: #9c9c9c; /* 未激活时为较淡的灰色 */
+			color: #7f7f7f;     /* 未激活时是略深一点的灰色 */
 			transition: all 0.2s ease;
 		}
 		
 		&.active {
 			.tab-text {
-				color: #692bc7; /* 完美的深紫激活色 */
+				color: #7A35F6; /* 完美还原原图中的亮紫色 */
 				font-weight: bold;
 			}
 		}
 
-		/* 独立的底部短下划线控制 */
+		/* 底部指示线：缩短宽度并适当下移 */
 		.active-line {
 			position: absolute;
-			bottom: 12rpx;
+			bottom: 4rpx;       /* 贴近底部边缘 */
-			width: 52rpx; /* 缩短下划线宽度，完美贴合字宽 */
+			width: 44rpx;       /* 缩短下划线宽度，原图横线比“全部”两个字还要窄一点 */
-			height: 5rpx;  /* 加粗 */
+			height: 4rpx;       /* 适中的粗细 */
-			background-color: #692bc7;
+			background-color: #7A35F6;
-			border-radius: 4rpx;
+			border-radius: 2rpx;
 		}
 	}
 }
 
-/* ================= 优惠券列表区域 ================= */
 .coupon-list {
-	padding: 30rpx 24rpx;
+	padding: 28rpx 28rpx;
 	box-sizing: border-box;
 	display: flex;
+	background-color: #ffffff;
 	flex-direction: column;
-	gap: 24rpx;
+	gap: 32rpx;
 }
 
-/* 优惠券单卡片基本样式 */
 .coupon-card {
-	background-color: #fff4f4; /* 淡淡的红粉色底 */
+	background: rgba(102,102,102,0.06);
 	border-radius: 16rpx;
 	display: flex;
 	height: 196rpx;
@@ -209,14 +204,14 @@ export default {
 		
 		.price-box {
 			display: flex;
-			align-items: flex-end; /* 底部对齐 */
+			align-items: flex-end;
 			color: #ff1224;
 			font-weight: bold;
+			margin-bottom: 10rpx;
 			
 			.currency {
-				font-size: 26rpx;
+				font-size: 32rpx;
 				margin-right: 2rpx;
-				margin-bottom: 6rpx; /* 让¥符号优雅落地 */
 			}
 			
 			.amount {
@@ -243,7 +238,7 @@ export default {
 		.divider-line {
 			width: 0;
 			height: 100%;
-			border-left: 2rpx dashed #ffcbd0;
+			border-left: 2rpx dashed  rgba(253,28,36,0.3);
 		}
 		
 		/* 模拟卡片边缘剪票口的半圆凹槽 */
@@ -281,16 +276,15 @@ export default {
 			overflow: hidden;
 			
 			.title {
-				font-size: 30rpx;
+				font-size: 36rpx;
 				color: #2c2c2c;
-				font-weight: bold;
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
 			
 			.description {
-				font-size: 24rpx;
+				font-size: 28rpx;
 				color: #6a6a6a;
 				margin-top: 8rpx;
 				white-space: nowrap;
@@ -299,7 +293,7 @@ export default {
 			}
 			
 			.countdown {
-				font-size: 22rpx;
+				font-size: 24rpx;
 				color: #ff5260;
 				margin-top: 14rpx;
 			}
@@ -307,12 +301,12 @@ export default {
 		
 		/* 立即使用按钮 */
 		.use-btn {
-			width: 120rpx;
+			width: 116rpx;
 			height: 56rpx;
-			background-color: #ff1a2e;
+			background-color: #FD1C24;
 			color: #ffffff;
-			font-size: 24rpx;
+			font-size: 28rpx;
-			border-radius: 12rpx; /* 原图接近微圆角矩形，而非纯半圆 */
+			border-radius: 8rpx; /* 原图接近微圆角矩形，而非纯半圆 */
 			display: flex;
 			align-items: center;
 			justify-content: center;

pages/other_package/productInfo/evaluate-dialog.vue

@@ -127,7 +127,7 @@ export default {
     },
     handleClick(item) {
       uni.navigateTo({
-        url: "/pages/other_package/productInfo/evaluateDetail?item=" + JSON.stringify(item),
+        url: "/pages/other_package/productInfo/evaluateDetail",
       });
     },
   },
@@ -152,6 +152,7 @@ export default {
   padding: 30rpx 0 20rpx;
   position: relative;
   border-radius: 20rpx 20rpx 0 0;
+  margin: 0 20rpx;
 }
 
 .filter-tabs {
@@ -159,6 +160,8 @@ export default {
   background-color: #ffffff;
   padding: 10rpx 30rpx 30rpx;
   gap: 24rpx; /* 标签之间的标准间距 */
+  margin: 0 20rpx;
+  border-top: 1rpx solid #f6f6f6;
 
   .filter-tab {
     text-align: center;
@@ -193,6 +196,8 @@ export default {
   .eval-item {
     padding: 30rpx 30rpx 20rpx;
     background-color: #ffffff;
+    border-radius: 16rpx;
+    margin: 0 20rpx;
   }
 
   .user-info-row {