feat：积分详情基础提交

src/points/home/index.vue

@@ -130,10 +130,9 @@ export default {
     <!-- 商品列表组件 -->
     <ProductList ref="productRef" :scrollTop="scrollTop" />
     <!-- 积分订单跳转 -->
-     <view @click="orderGo" class="orderIcons">
-        <ImageItem src="/static/points/orderGo.png"/>
-     </view>
-    
+   <view @click="orderGo" class="orderIcons">
+      <ImageItem src="/static/points/orderGo.png"/>
+   </view>
   </view>
 </template>
 

src/points/order/orderDetails.vue

@@ -1,13 +1,266 @@
 <script>
 export default {
-  name: "orderDetails"
+  name: "orderDetails",
+  data() {
+    return {
+      orderInfo: {
+        status: 'refund',
+        statusText: '同意退货',
+        product: {
+          name: '广誉源会员定制玻璃杯',
+          spec: '大号,白色',
+          price: 10,
+          points: 1000,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        orderTime: '2025-09-14 17:21:55',
+        shipTime: '2026-1-26 10:00:00',
+        orderNo: '2026147852369',
+        logisticsNo: 'SF852147896',
+        recipient: {
+          name: '张*',
+          phone: '150****3265',
+          address: '山西省太原市小店区*******************'
+        },
+        refund: {
+          reason: '不想要了',
+          applyTime: '2026-1-26 10:00:00'
+        }
+      },
+      // 设备信息
+      deviceInfo: uni.getSystemInfoSync(),
+      show:false,
+      title:'',
+      content:''
+    }
+  },
+  computed: {
+    // 判断是否为有底部安全区域的设备
+    hasSafeArea() {
+      const safeArea = this.deviceInfo.safeArea
+      return safeArea && safeArea.bottom < this.deviceInfo.screenHeight
+    }
+  },
+  methods: {
+    // 处理退货操作
+    handleRefund() {
+      this.title = '确认收货';
+      this.content = '为了保障您的权益，请收到商品确认无误后再确认收货'
+      this.show = true;
+    }
+  }
 }
 </script>
 
 <template>
+  <view class="order-details">
+    <!-- 顶部标题 -->
+    <view class="header">
+      <text class="header-title">{{ orderInfo.statusText }}</text>
+    </view>
+    
+    <!-- 商品信息 -->
+    <view class="product-info">
+      <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>
+        <text class="product-price">¥{{ orderInfo.product.price }}+{{ orderInfo.product.points }}积分</text>
+      </view>
+    </view>
+    
+    <!-- 订单信息 -->
+    <view class="order-info">
+      <view class="info-item">
+        <text class="info-label">下单时间</text>
+        <text class="info-value">{{ orderInfo.orderTime }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">发货时间</text>
+        <text class="info-value">{{ orderInfo.shipTime }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">订单号</text>
+        <text class="info-value">{{ orderInfo.orderNo }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">物流单号</text>
+        <text class="info-value">{{ orderInfo.logisticsNo }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">收货信息</text>
+        <text class="info-value">{{ orderInfo.recipient.name }}, {{ orderInfo.recipient.phone }}, {{ orderInfo.recipient.address }}</text>
+      </view>
+    </view>
+    
+    <!-- 退货信息 -->
+    <view class="refund-info">
+      <view class="info-item">
+        <text class="info-label">退货原因</text>
+        <text class="info-value">{{ orderInfo.refund.reason }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">申请时间</text>
+        <text class="info-value">{{ orderInfo.refund.applyTime }}</text>
+      </view>
+    </view>
+    
+    <!-- 操作按钮 -->
+    <view class="action-buttons" :class="{ 'safe-area': hasSafeArea }">
+      <button class="detail-button">退款\售后</button>
+      <button class="action-button" @click="handleRefund">同意退货</button>
+    </view>
 
+    <u-modal :show="show" :title="title" :content='content'>
+
+    </u-modal>
+  </view>
 </template>
 
 <style scoped lang="scss">
+.order-details{
+  width: 750rpx;
+  min-height: 100vh;
+  background-image: url("@/static/points/orderBg.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-color: #F5F8F8;
+  padding-top: 54rpx;
+  .u-modal{
+    .u-modal__title{
 
+    }
+  }
+  .header{
+    width: 100%;
+    margin-bottom: 38rpx;
+    text-align: center;
+    .header-title{
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 36rpx;
+      color: #FFFFFF;
+      line-height: 40rpx;
+    }
+  }
+  .product-info{
+    width: 686rpx;
+    height: 168rpx;
+    background: #FFFFFF;
+    border-radius: 16rpx;
+    margin: 0 auto 24rpx;
+    padding: 24rpx;
+    display: flex;
+    .product-image{
+      width: 120rpx;
+      height: 120rpx;
+      margin-right: 24rpx;
+      image{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .product-details{
+      flex: 1;
+      .product-name{
+        font-family: PingFang SC, PingFang SC;
+        font-weight: bold;
+        font-size: 28rpx;
+        line-height: 28rpx;
+        color: #333333;
+        margin-bottom: 24rpx;
+        display: block;
+      }
+      .product-spec{
+        font-family: PingFang SC, PingFang SC;
+        font-size: 26rpx;
+        line-height: 26rpx;
+        color: #999999;
+        margin-bottom: 2rpx;
+        display: block;
+      }
+      .product-price{
+        font-family: PingFang SC, PingFang SC;
+        font-weight: bold;
+        line-height: 26rpx;
+        font-size: 26rpx;
+        color: #333333;
+      }
+    }
+  }
+  .order-info,
+  .refund-info{
+    width: 686rpx;
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    margin: 0 auto 24rpx;
+    padding: 26rpx 24rpx;
+    .info-item{
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 22rpx;
+      &:last-child{
+        margin-bottom: 0;
+      }
+      .info-label{
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #666666;
+      }
+      .info-value{
+        flex: 1;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #2F3437;
+        text-align: right;
+      }
+    }
+  }
+  .action-buttons{
+    width: 750rpx;
+    background: #FFFFFF;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 20rpx 32rpx;
+    display: flex;
+    justify-content: flex-end;
+    // 正常手机的高度
+    height: auto;
+    min-height: 100rpx;
+    // 有安全区域的设备的高度
+    &.safe-area {
+      height: 164rpx;
+    }
+    .detail-button{
+      width: 152rpx;
+      height: 56rpx;
+      border-radius: 98rpx;
+      font-size: 26rpx;
+      color: #999999;
+      text-align: center;
+      line-height: 53rpx;
+      border: 2rpx solid #999999;
+      margin: 0;
+      padding: 0;
+    }
+    .action-button{
+      width: 152rpx;
+      height: 56rpx;
+      background: #03C1B8;
+      border-radius: 98rpx;
+      font-size: 26rpx;
+      color: #FFFFFF;
+      text-align: center;
+      line-height: 56rpx;
+      margin: 0 0 0 20rpx;
+      padding: 0;
+    }
+  }
+}
 </style>

src/points/order/orderList.vue

@@ -207,8 +207,9 @@ export default {
       }, 1000)
     },
     viewDetail(order){
-      console.log('查看详情:', order)
-      // 这里可以跳转到订单详情页面
+      uni.navigateTo({
+        url: '/points/order/orderDetails?orderId=' + order.id,
+      });
     }
   }
 }