From 9cd2a71df93b11bc7837bb3f83a6e77c944c9c64 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Tue, 16 Sep 2025 13:36:12 +0800
Subject: [PATCH] 1

---
 pages.json                           |   7 +
 pages/order/order.vue                |   9 +-
 pagesA/order-detail/order-detail.vue | 293 +++++++++++++++++++++++++++
 3 files changed, 305 insertions(+), 4 deletions(-)
 create mode 100644 pagesA/order-detail/order-detail.vue

diff --git a/pages.json b/pages.json
index 994afcd..c43a692 100644
--- a/pages.json
+++ b/pages.json
@@ -85,6 +85,13 @@
         		"navigationBarTitleText" : "编辑资料"
         	}
         },
+        {
+        	"path" : "order-detail/order-detail",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "订单详情"
+        	}
+        },
         {
         	"path" : "recharge/recharge",
         	"style" : 
diff --git a/pages/order/order.vue b/pages/order/order.vue
index 8d83adf..09839e6 100644
--- a/pages/order/order.vue
+++ b/pages/order/order.vue
@@ -85,7 +85,7 @@
 							<uv-button type="default" size="small" @click="deleteOrder(order)">
 								删除订单
 							</uv-button>
-							<uv-button type="primary" size="small" @click="viewOrderDetail(order)">
+							<uv-button type="primary" color="#3F70FF" size="small" @click="viewOrderDetail(order)">
 								查看详情
 							</uv-button>
 						</template>
@@ -213,7 +213,7 @@
 	// 查看订单详情
 	const viewOrderDetail = (order) => {
 		uni.navigateTo({
-			url: `/pages/order-detail/order-detail?id=${order.id}`
+			url: `/pagesA/order-detail/order-detail?id=${order.id}`
 		})
 	}
 
@@ -320,6 +320,7 @@
 	.container {
 		font-size: 14px;
 		min-height: 100vh;
+		padding-bottom: 50px;
 		background-color: #f8f8f8;
 	}
 
@@ -453,7 +454,7 @@
 
 			.order-actions {
 				display: flex;
-				justify-content: space-between;
+				justify-content: space-between;
 				align-items: center;
 				gap: 8px;
 				padding: 0 16px 16px;
@@ -466,7 +467,7 @@
 				}
 
 				.buttonBox {
-					display: flex;
+					display: flex;
 					align-items: center;
 					gap: 10px;
 					justify-content: flex-end;
diff --git a/pagesA/order-detail/order-detail.vue b/pagesA/order-detail/order-detail.vue
new file mode 100644
index 0000000..0c557ba
--- /dev/null
+++ b/pagesA/order-detail/order-detail.vue
@@ -0,0 +1,293 @@
+<template>
+  <view class="order-detail-page">
+    <!-- 顶部状态栏 -->
+    <view class="status-bar">
+      <text class="status-text">交易成功</text>
+    </view>
+
+    <!-- 主要内容区域 -->
+    <view class="content-container">
+      <!-- 用户信息卡片 -->
+      <view class="user-card">
+        <view class="user-info">
+          <image class="avatar" :src="orderDetail.userAvatar" mode="aspectFill"></image>
+          <view class="user-details">
+            <view class="user-name-row">
+              <text class="user-name">{{ orderDetail.userName }}</text>
+              <view class="vip-badge">
+                <text class="vip-text">V</text>
+              </view>
+            </view>
+            <text class="vip-expire">VIP有效时间：{{ orderDetail.vipExpireTime }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 订单详情 -->
+      <view class="order-info">
+        <view class="info-row">
+          <text class="label">订单编号：</text>
+          <text class="value">{{ orderDetail.orderNo }}</text>
+          <text class="copy-btn" @tap="copyOrderNo">复制</text>
+        </view>
+        
+        <view class="info-row">
+          <text class="label">用户名称：</text>
+          <text class="value">{{ orderDetail.realName }}</text>
+        </view>
+        
+        <view class="info-row">
+          <text class="label">用户ID：</text>
+          <text class="value">{{ orderDetail.userId }}</text>
+        </view>
+        
+        <view class="info-row">
+          <text class="label">订单类型：</text>
+          <text class="value">{{ orderDetail.orderType }}</text>
+        </view>
+        
+        <view class="info-row">
+          <text class="label">订单金额：</text>
+          <text class="value price">¥{{ orderDetail.originalAmount }}</text>
+        </view>
+        
+        <view class="info-row">
+          <text class="label">折扣金额：</text>
+          <text class="value discount">-¥{{ orderDetail.discountAmount }}</text>
+        </view>
+        
+        <view class="info-row">
+          <text class="label">实付金额：</text>
+          <text class="value price">¥{{ orderDetail.paidAmount }}</text>
+        </view>
+        
+        <view class="info-row">
+          <text class="label">支付时间：</text>
+          <text class="value">{{ orderDetail.payTime }}</text>
+        </view>
+      </view>
+
+      <!-- 联系客服按钮 -->
+      <view class="contact-service">
+        <button class="service-btn" @tap="contactService">联系客服</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// 订单详情数据
+const orderDetail = ref({
+  userAvatar: '/static/images/default-avatar.png',
+  userName: '尊敬的包年会员',
+  vipExpireTime: '2026/05/15',
+  orderNo: 'ORD20230515001',
+  realName: '张三',
+  userId: 'U12345678',
+  orderType: '线上交易 包年会员',
+  originalAmount: '1200.00',
+  discountAmount: '200.00',
+  paidAmount: '1000.00',
+  payTime: '2025-05-15 10:30'
+})
+
+onMounted(() => {
+  // 获取订单详情
+  getOrderDetail()
+})
+
+// 获取订单详情
+const getOrderDetail = () => {
+  // 这里可以根据路由参数获取订单ID，然后调用API获取详情
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  const orderId = currentPage.options.orderId
+  
+  if (orderId) {
+    // 调用API获取订单详情
+    // fetchOrderDetail(orderId)
+  }
+}
+
+// 复制订单号
+const copyOrderNo = () => {
+  uni.setClipboardData({
+    data: orderDetail.value.orderNo,
+    success: () => {
+      uni.showToast({
+        title: '订单号已复制',
+        icon: 'success'
+      })
+    }
+  })
+}
+
+// 联系客服
+const contactService = () => {
+//   uni.showActionSheet({
+//     itemList: ['在线客服', '电话客服'],
+//     success: (res) => {
+//       if (res.tapIndex === 0) {
+//         // 跳转到在线客服页面
+//         uni.navigateTo({
+//           url: '/pages/customer-service/customer-service'
+//         })
+//       } else if (res.tapIndex === 1) {
+//         // 拨打客服电话
+        uni.makePhoneCall({
+          phoneNumber: '400-123-4567'
+    //     })
+    //   }
+    // }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.order-detail-page {
+    min-height: 100vh;
+  background-color: #f8f8f8;;
+}
+
+.status-bar {
+  padding: 20px 10px 50px;
+  background: linear-gradient(180deg, #8B9DC3 0%, #DFE3EC 100%);
+  
+  .status-text {
+    font-size: 18px;
+    font-weight: bold;
+    color: #FFFFFF;
+  }
+}
+
+.content-container {
+  padding: 0 32rpx;
+  margin-top: -30px;
+}
+
+.user-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  
+  .user-info {
+    display: flex;
+    align-items: center;
+    
+    .avatar {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 60rpx;
+      margin-right: 24rpx;
+    }
+    
+    .user-details {
+      flex: 1;
+      
+      .user-name-row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12rpx;
+        
+        .user-name {
+          font-size: 36rpx;
+          font-weight: bold;
+          color: #333333;
+          margin-right: 16rpx;
+        }
+        
+        .vip-badge {
+          width: 48rpx;
+          height: 48rpx;
+          background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          
+          .vip-text {
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #FFFFFF;
+          }
+        }
+      }
+      
+      .vip-expire {
+        font-size: 28rpx;
+        color: #999999;
+      }
+    }
+  }
+}
+
+.order-info {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 60rpx;
+  
+  .info-row {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 0;
+    border-bottom: 1rpx solid #F5F5F5;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .label {
+      font-size: 32rpx;
+      color: #666666;
+      width: 180rpx;
+    }
+    
+    .value {
+      flex: 1;
+      font-size: 32rpx;
+      color: #333333;
+      text-align: right;
+      
+      &.price {
+        color: #333333;
+        font-weight: bold;
+      }
+      
+      &.discount {
+        color: #FF4444;
+      }
+    }
+    
+    .copy-btn {
+      font-size: 28rpx;
+      color: #4A90E2;
+      margin-left: 16rpx;
+      padding: 8rpx 16rpx;
+      border: 1rpx solid #4A90E2;
+      border-radius: 8rpx;
+    }
+  }
+}
+
+.contact-service {
+  padding: 0 32rpx 60rpx;
+  
+  .service-btn {
+    width: 100%;
+    height: 96rpx;
+    background: #3F70FF;
+    border-radius: 48rpx;
+    border: none;
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file