feat：积分详情 - 填写物流单号弹窗

src/points/order/orderDetails.vue

@@ -31,7 +31,10 @@ export default {
       deviceInfo: uni.getSystemInfoSync(),
       show:false,
       title:'',
-      content:''
+      content:'',
+      // 物流单号弹窗
+      showLogistics: false,
+      logisticsNumber: ''
     }
   },
   computed: {
@@ -47,6 +50,23 @@ 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;
     }
   }
 }
@@ -111,11 +131,43 @@ export default {
     <view class="action-buttons" :class="{ 'safe-area': hasSafeArea }">
       <button class="detail-button">退款\售后</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>
   </view>
 </template>
 
@@ -128,9 +180,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 +337,7 @@ export default {
       height: 164rpx;
     }
     .detail-button{
-      width: 152rpx;
+      padding: 0 30rpx;
       height: 56rpx;
       border-radius: 98rpx;
       font-size: 26rpx;
@@ -247,10 +346,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 +357,58 @@ 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;
+      }
+      .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;
+      }
     }
   }
 }