<script setup>
import Container from "@/components/Container.vue";

const orders = ["已生效", "已失效"];

const getStatusColor = (status) => {
  switch (status) {
    case "已生效":
      return "#35CD67";
    case "已失效":
      return "#EF4848";
    default:
      return "#999999";
  }
};

const toDetailPage = (id) => {
  uni.navigateTo({
    url: `/pages/order-detail?id=${id}`,
  });
};
</script>

<template>
  <Container title="订单">
    <view class="container">
      <view
        v-for="(item, index) in orders"
        :key="index"
        class="order-item"
        @click="() => toDetailPage(item)"
      >
        <view :style="{ backgroundColor: getStatusColor(item) }">{{
          item
        }}</view>
        <text>会员一个月</text>
        <text>支付时间：2025-01-31 09:27:34</text>
        <text>金额：10 元</text>
        <text>支付方式：支付宝</text>
      </view>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #e4e4e4;
  padding-top: 10px;
}
.order-item {
  position: relative;
  background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.order-item > view:first-child {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  color: #fff;
  text-align: center;
  font-size: 11px;
}
.order-item > text:nth-child(2) {
  color: #000;
  font-size: 16px;
}
.order-item > text {
  color: #666666;
  font-size: 13px;
  margin-top: 5px;
}
</style>
