<script setup lang="ts">

const orderTypes = [
  { type: 1, url:'/pages/fullOrder/fullOrder',title:'未支付', imgUrl: '../../static/small/order.png' },
  { type: 2, url:'/pages/fullOrder/fullOrder',title:'已支付', imgUrl: '../../static/small/noComplete.png' },
  { type: 3, url:'/pages/fullOrder/fullOrder',title:'已退款', imgUrl: '../../static/small/complete.png' },
   { type: 4, url:'/pages/fullOrder/fullOrder',title:'已出餐', imgUrl: '../../static/small/complete.png' },
    { type: 5, url:'/pages/fullOrder/fullOrder',title:'已完成', imgUrl: '../../static/small/complete.png' },
]
</script>

<template>
    <!-- 我的订单 -->
    <view class="orders">
      <view class="title">
        订单
        <navigator class="navigator" url="/pages/fullOrder/fullOrder" hover-class="none">
          全部订单
        </navigator>
      </view>
      <!--首页分类-->
      <view class="section">
         <!-- 修改后的navigator组件 -->
         <navigator
           class="navigator"
           :url="`${item.url}?type=${item.type}`"
           v-for="(item, index) in orderTypes" 
           :key="index"
         >
		  <text class="text">{{item.title}}</text>
            <image
              class="icon"
              :src="item.imgUrl"
            ></image>
            
          </navigator>
        </view>
    </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f7f7f8;
}

/* 我的订单 */
.orders {
  position: relative;
  z-index: 99;
  padding: 30rpx;
  margin: 50rpx 20rpx 0;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

  .title {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    color: #1e1e1e;

    .navigator {
      font-size: 24rpx;
      color: #939393;
      float: right;
    }
  }

  .section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 40rpx 20rpx 10rpx 10rpx;
    .navigator,
    .contact {
      text-align: center;
      font-size: 24rpx;
      color: #333;
      &::before {
        display: block;
        font-size: 60rpx;
        color: #ff9545;
      }
    }
    .contact {
      padding: 0;
      margin: 0;
      border: 0;
      background-color: transparent;
      line-height: inherit;
    }
  }
}
.icon {
	display:block;
	margin-top:10px;
    width: 70rpx;
    height: 70rpx;
}
</style>