<template>
  <view class="container">
    <u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
      <u-tabs lineWidth="40" :list="list" :current="current"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
    </u-sticky>

    <view class='order-box'>
      <view class="order-item" v-for="(item,index) of 3">
        <view class="item-top">
          <view class="top-left">
            <image src="@/static/home/icon_home_detail_shop.png" class='img'></image>
            <view class="left-name"> 聚鑫（途虎养车店）</view>
          </view>
          <view class="top-right"> 待付款 </view>
        </view>

        <view class="goods-item" v-for="item of 3">
          <view class='item-left'>
            <image src="@/static/QR57a.jpg" class='img'></image>
          </view>
          <view class='item-right'>
            <view class="right-top">
              38号轮胎38号轮胎38号轮胎38号轮胎38号轮号轮号轮胎
            </view>
            <view class="right-bottom">
              <view class="bottom-left"> ¥20.00 </view>
              <view class="bottom-right"> X1 </view>
            </view>
          </view>
        </view>

        <u-line margin='24rpx 0'></u-line>

        <view class='price-box'>
          <view class="price">需付款￥1559.9</view>
        </view>

        <view class="btn-box">
          <button class='btn btn2'>继续付款</button>
          <button class='btn btn1'>查看卷码</button>
          <button class='btn btn2'>再来一单</button>
          <button class='btn btn2'>退款进度</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        list: [{
            name: '待付款',
            type: 0,
          },
          {
            name: '已付款',
            type: 1,
          },
          {
            name: '已完成',
            type: 3,
          },
          {
            name: '已关闭',
            type: 4,
          }

        ],
      };
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    font-size: 28rpx;
    padding: 0 0 30rpx;
    .order-box {
      margin-top: 18rpx;

      .order-item {
        padding: 34rpx 32rpx;
        background-color: #fff;
        margin-bottom: 18rpx;
        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx;

          .top-left {
            display: flex;
            align-items: center;

            .img {
              width: 32rpx;
              height: 32rpx;
            }

            .left-name {
              margin-left: 8rpx;
              font-weight: bold;
            }
          }

          .top-right {
            color: #ED4444;
          }
        }

        .goods-item {
          display: flex;
          margin-bottom: 24rpx;
          .item-left {
            margin-right: 24rpx;

            .img {
              width: 160rpx;
              height: 160rpx;
              border-radius: 16rpx;
            }
          }

          .item-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .right-top {
              color: #333333;
            }

            .right-bottom {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .bottom-left {
                color: #EB3636;
                font-weight: bold;
                font-size: 32rpx;
              }

              .bottom-right {
                color: #616570;
                font-size: 24rpx;
              }
            }
          }
        }
        .goods-item:last-child{
          margin:0;
        }
        .price-box {
          display: flex;
          justify-content: flex-end;
          margin-bottom: 24rpx;
          font-size: 30rpx;
          font-weight: bold;
        }

        .btn-box {
          display: flex;
          justify-content: flex-end;

          .btn {
            padding: 0 24rpx;
            border-radius: 8rpx;
            box-sizing: border-box;
            margin-right: 24rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 28rpx;
          }

          .btn:last-child {
            margin: 0;
          }

          .btn1 {
            color: #616570;
            border: 2rpx solid #616570;
          }

          .btn2 {
            color: #215EBE;
            border: 2rpx solid #215EBE;
          }
        }
      }
    }
  }
</style>

<style scope>
  ::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
  }

  /* //选中蓝色滑块对应 */
  ::v-deep .u-tabs__wrapper__nav__item {
    flex: 1 1 0% !important;
  }
</style>
