vue3 el 写一个订单详情

以下是一个使用Vue3和Element Plus编写的订单详情页面示例：

<template>
  <div class="order-detail">
    <el-card>
      <div slot="header" class="order-header">
        <h3>{{ orderNo }}</h3>
        <el-tag class="order-status">{{ orderStatus }}</el-tag>
      </div>
      <div class="order-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <h4>订单信息</h4>
            <p>下单时间：{{ createTime }}</p>
            <p>支付方式：{{ paymentMethod }}</p>
            <p>收货地址：{{ address }}</p>
          </el-col>
          <el-col :span="12">
            <h4>商品信息</h4>
            <el-table :data="orderItems" style="width: 100%">
              <el-table-column prop="productName" label="商品名称"></el-table-column>
              <el-table-column prop="price" label="单价"></el-table-column>
              <el-table-column prop="quantity" label="数量"></el-table-column>
              <el-table-column prop="subtotal" label="小计"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <h4>订单备注</h4>
        <p>{{ remark }}</p>
      </div>
      <div slot="footer">
        <el-button type="primary">返回订单列表</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'OrderDetail',
  setup() {
    const order = reactive({
      orderNo: '2021123456789',
      orderStatus: '待支付',
      createTime: '2021-12-01 10:00:00',
      paymentMethod: '支付宝',
      address: '中国广东省深圳市南山区科技园南区',
      orderItems: [
        {
          productName: '商品1',
          price: 100,
          quantity: 1,
          subtotal: 100
        },
        {
          productName: '商品2',
          price: 200,
          quantity: 2,
          subtotal: 400
        }
      ],
      remark: '无'
    })

    return {
      order,
      orderNo: order.orderNo,
      orderStatus: order.orderStatus,
      createTime: order.createTime,
      paymentMethod: order.paymentMethod,
      address: order.address,
      orderItems: order.orderItems,
      remark: order.remark
    }
  }
}
</script>

<style scoped>
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-status {
  font-size: 16px;
}

.order-content {
  margin-top: 20px;
}

.el-table th,
.el-table td {
  text-align: center;
}

.el-divider {
  margin: 20px 0;
}
</style>

在这个示例中，我们使用了Vue3和Element Plus库。在setup()函数中，我们使用reactive()函数创建了一个响应式的order对象，用于存储订单数据。然后，我们将order对象的属性绑定到模板中，以显示订单详情。例如，我们使用order.orderNo来显示订单号，使用order.orderItems来渲染商品列表。最后，我们在底部添加了一个按钮，用于返回订单列表页面。