uni-app求一个好看的订单详情界面

当然，为了构建一个美观且功能齐全的订单详情界面，我们可以利用uni-app框架的丰富组件和样式系统。以下是一个简单的示例代码，展示了如何设计一个订单详情页面。为了保持简洁和美观，我们会使用uni-app自带的组件和一些基本的样式。

<template>
  <view class="container">
    <view class="order-header">
      <text class="order-number">订单号：{{ order.orderNumber }}</text>
      <text class="order-status">{{ order.status }}</text>
    </view>
    <view class="order-info">
      <view class="info-item">
        <text>收货人：</text>
        <text>{{ order.recipientName }}</text>
      </view>
      <view class="info-item">
        <text>联系电话：</text>
        <text>{{ order.recipientPhone }}</text>
      </view>
      <view class="info-item">
        <text>收货地址：</text>
        <text>{{ order.recipientAddress }}</text>
      </view>
    </view>
    <view class="order-items">
      <view v-for="(item, index) in order.items" :key="index" class="order-item">
        <text class="item-name">{{ item.name }}</text>
        <text class="item-price">￥{{ item.price }}</text>
        <text class="item-quantity">x{{ item.quantity }}</text>
      </view>
    </view>
    <view class="order-summary">
      <text>订单总价：￥{{ order.totalPrice }}</text>
      <button @click="goToPayment">去支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: {
        orderNumber: '1234567890',
        status: '待支付',
        recipientName: '张三',
        recipientPhone: '13800000000',
        recipientAddress: '北京市朝阳区某街道123号',
        items: [
          { name: '商品A', price: 100, quantity: 1 },
          { name: '商品B', price: 200, quantity: 2 }
        ],
        totalPrice: 500
      }
    };
  },
  methods: {
    goToPayment() {
      // 跳转到支付页面
      uni.navigateTo({
        url: '/pages/payment/payment'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.order-info, .order-items {
  margin-bottom: 20px;
}
.info-item, .order-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.order-summary {
  display: flex;
  justify-content: space-between;
}
button {
  padding: 10px 20px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

这个示例展示了一个基本的订单详情页面，包括订单号、状态、收货信息、商品列表以及订单总价。你可以根据实际需求进一步美化和扩展这个页面。