Merge branch 'v2' of http://39.101.143.165:8090/wrj/GuangYuYuan-app into v2

src/points/order/orderDetails.vue

@@ -31,7 +31,14 @@ export default {
       deviceInfo: uni.getSystemInfoSync(),
       show:false,
       title:'',
-      content:''
+      content:'',
+      // 物流单号弹窗
+      showLogistics: false,
+      logisticsNumber: '',
+      // 售后弹窗
+      afterSalesShow: false,
+      receiptStatus: 'received', // 收货状态：notReceived(未收到货), received(已收到货)
+      afterSalesType: 'exchange' // 售后类型：refund(退货), exchange(换货)
     }
   },
   computed: {
@@ -47,6 +54,36 @@ export default {
       this.title = '确认收货';
       this.content = '为了保障您的权益，请收到商品确认无误后再确认收货'
       this.show = true;
+    },
+    // 确认收货
+    confirmReceive() {
+      console.log('确认收货')
+      // 这里可以调用确认收货API
+      this.show = false;
+    },
+    // 提交物流单号
+    submitLogistics() {
+      console.log('提交物流单号:', this.logisticsNumber)
+      // 这里可以调用提交物流单号API
+      this.showLogistics = false;
+      this.logisticsNumber = '';
+    },
+    // 填写物流单号
+    handleLogistics() {
+      this.showLogistics = true;
+    },
+    // 打开售后弹窗
+    handleAfterSales() {
+      this.afterSalesShow = true;
+    },
+    // 售后下一步
+    nextStep() {
+      console.log('售后下一步:', {
+        receiptStatus: this.receiptStatus,
+        afterSalesType: this.afterSalesType
+      });
+      // 这里可以调用售后API
+      this.afterSalesShow = false;
     }
   }
 }
@@ -109,13 +146,111 @@ 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>
-
-    <u-modal :show="show" :title="title" :content='content'>
-
+    <!-- 弹出层 -->
+    <u-modal :show="show" :title="title" :content='content' :show-cancel="false">
+        <view slot="default" class="modal-content">
+            <text class="modal-text">为了保障您的权益，请收到商品确认无误后再确认收货</text>
+        </view>
+        <view slot="confirmButton" class="modal-footer">
+            <button class="modal-cancel" @click="show = false">取消</button>
+            <button class="modal-confirm" @click="confirmReceive">确认收货</button>
+        </view>
     </u-modal>
+    <!-- 填写物流单号 -->
+    <u-popup :show="showLogistics" mode="bottom"  @close="showLogistics = false" round="20rpx">
+      <view class="logistics-popup">
+        <!-- 标题 -->
+        <view class="popup-header">
+          <text class="popup-title">填写物流单号</text>
+          <text class="popup-close" @click="showLogistics = false">取消</text>
+        </view>
+        
+        <!-- 输入框 -->
+        <view class="popup-content">
+          <u--textarea v-model="logisticsNumber"
+                       placeholder="请输入物流单号"
+                       border="surround"
+                       :border-radius="10"
+                       class="logistics-input"
+          ></u--textarea>
+        </view>
+        
+        <!-- 提交按钮 -->
+        <view class="popup-footer">
+          <button class="submit-button" @click="submitLogistics">提交</button>
+        </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>
 
@@ -128,9 +263,56 @@ export default {
   background-repeat: no-repeat;
   background-color: #F5F8F8;
   padding-top: 54rpx;
-  .u-modal{
+  ::v-deep .u-modal{
     .u-modal__title{
+      background: #E8FFFD;
+      height: 92rpx;
+      padding: 0;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: bold;
+      font-size: 32rpx;
+      color: #000000;
+      line-height: 92rpx;
+    }
+    .u-modal__content,.u-modal__button-group--confirm-button{
+      padding: 0;
+    }
+  }
 
+  // 模态框样式
+  .modal-content{
+    padding: 40rpx 32rpx;
+    text-align: center;
+    .modal-text{
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #333333;
+      line-height: 39rpx;
+    }
+  }
+  .modal-footer{
+    border-top: 1rpx solid #EEEEEE;
+    display: flex;
+    justify-content: center;
+    padding: 24rpx 58rpx;
+    button{
+      width: 225rpx;
+      height: 68rpx;
+      border-radius: 60rpx;
+      font-size: 28rpx;
+      text-align: center;
+      line-height: 68rpx;
+      margin: 0 20rpx;
+      padding: 0;
+    }
+    .modal-cancel{
+      border: 1rpx solid #999999;
+      color: #333333;
+    }
+    .modal-confirm{
+      background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
+      color: #FFFFFF;
     }
   }
   .header{
@@ -238,7 +420,7 @@ export default {
       height: 164rpx;
     }
     .detail-button{
-      width: 152rpx;
+      padding: 0 30rpx;
       height: 56rpx;
       border-radius: 98rpx;
       font-size: 26rpx;
@@ -247,10 +429,9 @@ export default {
       line-height: 53rpx;
       border: 2rpx solid #999999;
       margin: 0;
-      padding: 0;
     }
     .action-button{
-      width: 152rpx;
+      padding: 0 30rpx;
       height: 56rpx;
       background: #03C1B8;
       border-radius: 98rpx;
@@ -259,7 +440,182 @@ export default {
       text-align: center;
       line-height: 56rpx;
       margin: 0 0 0 20rpx;
-      padding: 0;
+    }
+  }
+  
+  // 物流单号弹出框样式
+  .logistics-popup{
+    width: 100%;
+    padding: 40rpx;
+    background: #F5F8F8;
+    border-radius: 32rpx 32rpx 0 0;
+    
+    .popup-header{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 32rpx;
+      .popup-title{
+        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;
+        color: #999999;
+      }
+    }
+    
+    .popup-content{
+      margin-bottom: 32rpx;
+      .logistics-input{
+        width: 100%;
+        height: 180rpx;
+        padding: 20rpx;
+        font-size: 28rpx;
+        background: #F8F8F8;
+        border-radius: 16rpx;
+        border: 1rpx solid #DCDCDC;
+      }
+    }
+    
+    .popup-footer{
+      .submit-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;
+      }
+    }
+  }
+  
+  // 售后弹出框样式
+  .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;
+      }
     }
   }
 }