<template>
  <view class="order-list">
    <block v-for="(item, index) in orderList" :key="index">
      <view class="order-details">
        <view class="left-column">
          <view class="userName">订单派送-{{ item.username }}</view>
          <view class="orderTime">{{ item.orderStartTime.slice(0,10) }}</view>
        </view>
        <view class="right-column">
          <view class="orderMoney">
            +{{ item.income }}
          </view>
          <view class="orderState" :style="{color: item.errandState === 0 ? '#ff9900' : '#00cc66'}">
            {{ item.errandState === 0 ? '待结算' : '已结算' }}
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { apiImageUrl } from '../../API/api';

const orderList = ref([])

const getOrder = () => {
  uni.request({
    url: apiImageUrl + '/api/bill/list',
    method: 'POST',
    header: {
      'Content-Type': 'application/json',
      'cookie': uni.getStorageSync("cookie") || ''
    },
    success(res) {
		console.log(res);
      if (res.data.code === 0) {
        console.log(res.data.data);
        orderList.value = res.data.data
      }
    },
    fail(err) {
      console.log(err);
    }
  })
}

onMounted(() => {
  getOrder()
})
</script>

<style scoped>
/* 保持原有样式不变 */
.order-list {
  display: flex;
  flex-direction: column;
}

.order-details {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  border-bottom: 1px solid #f6f6f6;
}

.left-column,
.right-column {
  display: flex;
  flex-direction: column;
}

.userName,
.orderMoney {
  margin: 5px 0;
  font-size: 14px;
}

.orderTime,
.orderState {
  font-size: 12px;
  margin-bottom: 5px;
}

.userName {
  color: #333;
}

.orderTime {
  color: #666;
}

.orderMoney {
  color: #007bff;
}
</style>