feat：积分详情 - 售后弹窗提交

src/points/order/orderDetails.vue

@@ -34,7 +34,11 @@ export default {
       content:'',
       // 物流单号弹窗
       showLogistics: false,
-      logisticsNumber: ''
+      logisticsNumber: '',
+      // 售后弹窗
+      afterSalesShow: false,
+      receiptStatus: 'received', // 收货状态：notReceived(未收到货), received(已收到货)
+      afterSalesType: 'exchange' // 售后类型：refund(退货), exchange(换货)
     }
   },
   computed: {
@@ -67,6 +71,19 @@ export default {
     // 填写物流单号
     handleLogistics() {
       this.showLogistics = true;
+    },
+    // 打开售后弹窗
+    handleAfterSales() {
+      this.afterSalesShow = true;
+    },
+    // 售后下一步
+    nextStep() {
+      console.log('售后下一步:', {
+        receiptStatus: this.receiptStatus,
+        afterSalesType: this.afterSalesType
+      });
+      // 这里可以调用售后API
+      this.afterSalesShow = false;
     }
   }
 }
@@ -129,7 +146,7 @@ export default {
     
     <!-- 操作按钮 -->
     <view class="action-buttons" :class="{ 'safe-area': hasSafeArea }">
-      <button class="detail-button">退款\售后</button>
+      <button class="detail-button" @click="handleAfterSales">退款\售后</button>
       <button class="action-button" @click="handleRefund">同意退货</button>
       <button class="action-button" @click="handleLogistics">填写物流单号</button>
     </view>
@@ -168,6 +185,72 @@ export default {
         </view>
       </view>
     </u-popup>
+    <!-- 售后 -->
+    <u-popup :show="afterSalesShow" mode="bottom"  @close="afterSalesShow = false" round="20rpx">
+      <view class="after-sales-popup">
+        <!-- 标题 -->
+        <view class="popup-header">
+          <text class="popup-title">请选择售后商品</text>
+          <text class="popup-close" @click="afterSalesShow = false">×</text>
+        </view>
+        
+        <!-- 收货状态选择 -->
+        <view class="popup-section">
+          <text class="section-title">请选择收货状态</text>
+          <view class="option-group">
+            <button 
+              class="option-button" 
+              :class="{ active: receiptStatus === 'notReceived' }"
+              @click="receiptStatus = 'notReceived'"
+            >未收到货</button>
+            <button 
+              class="option-button" 
+              :class="{ active: receiptStatus === 'received' }"
+              @click="receiptStatus = 'received'"
+            >已收到货</button>
+          </view>
+        </view>
+        
+        <!-- 售后类型选择 -->
+        <view class="popup-section" v-if="receiptStatus === 'received'">
+          <text class="section-title">请选择售后类型</text>
+          <view class="option-group">
+            <button 
+              class="option-button" 
+              :class="{ active: afterSalesType === 'refund' }"
+              @click="afterSalesType = 'refund'"
+            >退货</button>
+            <button 
+              class="option-button" 
+              :class="{ active: afterSalesType === 'exchange' }"
+              @click="afterSalesType = 'exchange'"
+            >换货</button>
+          </view>
+        </view>
+        
+        <!-- 商品选择 -->
+        <view class="popup-section">
+          <text class="section-title">
+            请选择商品
+            <text v-if="receiptStatus === 'received'" class="time-limit">(2026-4-1  24时之前可申请)</text>
+          </text>
+          <view class="product-item">
+            <view class="product-image">
+              <image :src="orderInfo.product.image" mode="aspectFill"></image>
+            </view>
+            <view class="product-details">
+              <text class="product-name">{{ orderInfo.product.name }}</text>
+              <text class="product-spec">已选: {{ orderInfo.product.spec }}</text>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 下一步按钮 -->
+        <view class="popup-footer">
+          <button class="next-button" @click="nextStep">下一步</button>
+        </view>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -376,6 +459,9 @@ export default {
         font-size: 40rpx;
         font-weight: bold;
         color: #333333;
+        background-image: url("@/static/points/logisticspopu.png");
+        background-repeat: no-repeat;
+        background-position: 20rpx 40rpx;
       }
       .popup-close{
         font-size: 28rpx;
@@ -411,5 +497,126 @@ export default {
       }
     }
   }
+  
+  // 售后弹出框样式
+  .after-sales-popup{
+    width: 100%;
+    background: #F8F8F8;
+    border-radius: 32rpx 32rpx 0 0;
+    
+    .popup-header{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 92rpx;
+      padding: 0 32rpx;
+      .popup-title{
+        width: 100%;
+        text-align: center;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333333;
+      }
+      .popup-close{
+        font-size: 32rpx;
+        color: #999999;
+      }
+    }
+    
+    .popup-section{
+      width: 686rpx;
+      min-height: 202rpx;
+      background: #FFFFFF;
+      border-radius: 16rpx;
+      margin: 0 auto 24rpx;
+      padding: 24rpx;
+      .section-title{
+        font-family: PingFang SC, PingFang SC;
+        font-weight: bold;
+        font-size: 28rpx;
+        color: #333333;
+        display: block;
+        margin-bottom: 24rpx;
+        .time-limit{
+          font-size: 24rpx;
+          color: #f53e54;
+          font-weight: normal;
+        }
+      }
+      
+      .option-group{
+        display: flex;
+        justify-content: space-between;
+        .option-button{
+          flex: 1;
+          height: 72rpx;
+          border-radius: 38rpx;
+          font-size: 28rpx;
+          color: #333333;
+          background: #F0F0F0;
+          border-color: #F0F0F0;
+          text-align: center;
+          line-height: 72rpx;
+          margin: 0 10rpx;
+          padding: 0;
+          &.active{
+            background: #1AD8CF;
+            border-color: #1AD8CF;
+            color: #FFFFFF;
+          }
+        }
+      }
+      
+      .product-item{
+        display: flex;
+        padding: 20rpx;
+        background-color: #F5F8F8;
+        border-radius: 10rpx;
+        .product-image{
+          width: 100rpx;
+          height: 100rpx;
+          margin-right: 20rpx;
+          image{
+            width: 100%;
+            height: 100%;
+            border-radius: 10rpx;
+          }
+        }
+        .product-details{
+          flex: 1;
+          .product-name{
+            font-size: 28rpx;
+            color: #333333;
+            margin-bottom: 10rpx;
+            display: block;
+          }
+          .product-spec{
+            font-size: 24rpx;
+            color: #999999;
+            display: block;
+          }
+        }
+      }
+    }
+    
+    .popup-footer{
+      width: 750rpx;
+      height: 124rpx;
+      background: #FFFFFF;
+      padding: 20rpx 40rpx;
+      .next-button{
+        width: 100%;
+        height: 80rpx;
+        background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
+        border-radius: 40rpx;
+        font-size: 32rpx;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 80rpx;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
 }
 </style>