<template>
  <view class="container">
    <view class="header">
      <text class="title">我的订单</text>
    </view>
    <view class="order-list">
      <view v-for="order in orders" :key="order.id" class="order-item">
        <text class="order-no">{{ order.orderNo }}</text>
        <text class="order-amount">¥{{ order.amount }}</text>
        <text class="order-status">{{ order.status }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const orders = ref([
  { id: 1, orderNo: 'O202401010001', amount: '199.99', status: '已完成' },
  { id: 2, orderNo: 'O202401010002', amount: '99.99', status: '待支付' }
])
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.order-list {
  margin-top: 20rpx;
}

.order-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.order-amount {
  color: #ff0000;
  font-weight: bold;
}
</style>
