lift-drawing-wechat/pagesA/order-detail/order-detail.vue

<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>