<template>
  <!-- 订单页 -->
  <div class="order">
    <!-- 头部标题 -->
    <div class="headerTitle">盒柜</div>
    <!-- 订单状态 -->
    <div class="orderStatus">
      <!-- 提货 -->
      <div
        class="extract"
        :class="index == 1 ? 'active' : ''"
        @click="extractFn"
      >
        待提货
      </div>
      <!-- 收货 -->
      <div
        class="receive"
        :class="index == 2 ? 'active' : ''"
        @click="receiveFn"
      >
        待收货
      </div>
    </div>
    <!-- 通知栏 -->
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      class="notice"
      text="滚动信息条,产品送达时间请参考个人中心物流时间"
    />
    <!-- 订单列表-->
    <!-- 待提货 -->
    <div class="orderList" v-show="index == 2">   
      <!-- 每一个订单 -->
      <div class="every">
        <!-- 信息 -->
        <div class="information">
          <!-- 图片 -->
          <div class="goodsImg"></div>
          <!-- 标题和时间 -->
          <div class="goodsTitleTime">
            <!-- 标题 -->
            <div class="title">
              限时活动【40元抽手机】苹果现货 iPhone12 256G
            </div>
            <!-- 时间 -->
            <div class="time">2022/07/28 15:19:23</div>
          </div>
          <!-- 状态 -->
          <div class="stay">待发货</div>
        </div>
        <!-- 奖品 -->
        <div class="prize">
          <!-- 每一个奖品 -->
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
        </div>
        <!-- 价钱 发货 -->
        <div class="priceSend">
          <div class="price">
            ¥
            <span>40.00</span>
          </div>
          <!-- 发货 -->
          <div class="send">立即发货</div>
        </div>
      </div>
      <!-- 每一个订单 -->
      <div class="every">
        <!-- 信息 -->
        <div class="information">
          <!-- 图片 -->
          <div class="goodsImg"></div>
          <!-- 标题和时间 -->
          <div class="goodsTitleTime">
            <!-- 标题 -->
            <div class="title">
              限时活动【40元抽手机】苹果现货 iPhone12 256G
            </div>
            <!-- 时间 -->
            <div class="time">2022/07/28 15:19:23</div>
          </div>
          <!-- 状态 -->
          <div class="stay">待发货</div>
        </div>
        <!-- 奖品 -->
        <div class="prize">
          <!-- 每一个奖品 -->
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
        </div>
        <!-- 价钱 发货 -->
        <div class="priceSend">
          <div class="price">
            ¥
            <span>40.00</span>
          </div>
          <!-- 发货 -->
          <div class="send">立即发货</div>
        </div>
      </div>
    </div>
     <!-- 待收货 -->
    <div class="orderList" v-show="index == 2"> 
      <!-- 每一个订单 -->
      <div class="every">
        <!-- 信息 -->
        <div class="information">
          <!-- 图片 -->
          <div class="goodsImg"></div>
          <!-- 标题和时间 -->
          <div class="goodsTitleTime">
            <!-- 标题 -->
            <div class="title">
              限时活动【40元抽手机】苹果现货 iPhone12 256G
            </div>
            <!-- 时间 -->
            <div class="time">2022/07/28 15:19:23</div>
          </div>
          <!-- 状态 -->
          <div class="stay">待收货</div>
        </div>
        <!-- 奖品 -->
        <div class="prize">
          <!-- 每一个奖品 -->
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
        </div>
        <!-- 价钱 发货 -->
        <div class="priceSend">
          <div class="price">
            ¥
            <span>40.00</span>
          </div>
          <!-- 发货 -->
          <div class="send">确认收货</div>
        </div>
      </div>
       <!-- 每一个订单 -->
      <div class="every">
        <!-- 信息 -->
        <div class="information">
          <!-- 图片 -->
          <div class="goodsImg"></div>
          <!-- 标题和时间 -->
          <div class="goodsTitleTime">
            <!-- 标题 -->
            <div class="title">
              限时活动【40元抽手机】苹果现货 iPhone12 256G
            </div>
            <!-- 时间 -->
            <div class="time">2022/07/28 15:19:23</div>
          </div>
          <!-- 状态 -->
          <div class="stay">待收货</div>
        </div>
        <!-- 奖品 -->
        <div class="prize">
          <!-- 每一个奖品 -->
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
          <div class="eachPrize"></div>
        </div>
        <!-- 价钱 发货 -->
        <div class="priceSend">
          <div class="price">
            ¥
            <span>40.00</span>
          </div>
          <!-- 发货 -->
          <div class="send">确认收货</div>
        </div>
      </div>
    </div>
    <!-- 空状态 -->
    <van-empty :image="require('../image/empty.png')" image-size="110" description="空空如也"/>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      index: 1,
    };
  },
  methods: {
    // 待提货订单
    extractFn() {
      this.index = 1;
    },
    // 待收货订单
    receiveFn() {
      this.index = 2;
    },
  },
};
</script>

<style lang="scss">
// 适配函数计算
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #f1f1f1;
}
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}

// 订单页
.order {
  width: vw(720);
  height: vh(10);
  display: flex;
  align-items: center;
  flex-direction: column;
  // 头部标题
  .headerTitle {
    width: vw(680);
    height: vw(180);
    line-height: vw(180);
    font-size: vw(50);
    font-weight: 600;
  }
  // 订单状态
  .orderStatus {
    width: vw(680);
    height: vw(100);
    display: flex;
    font-size: vw(32);
    align-content: center;
    justify-content: space-between;
    margin-bottom: vw(18);
    // 提货
    .extract {
      width: vw(220);
      height: vw(100);
      border-radius: vw(15);
      text-align: center;
      line-height: vw(100);
      background-color: gainsboro;
    }
    //收货
    .receive {
      width: vw(220);
      height: vw(100);
      font-size: vw(32);
      text-align: center;
      line-height: vw(100);
      border-radius: vw(15);
      background-color: gainsboro;
    }
    //高亮
    .active {
      background-color: aqua;
    }
  }
  //通知栏
  .notice {
    width: vw(680);
  }
  // 订单列表
  .orderList {
    width: vw(660);
    margin-top: vw(30);
    display: flex;
    align-items: center;
    flex-direction: column;
    // 每一个
    .every {
      padding: vw(26) 0;
      width: vw(660);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      margin-bottom: vw(20);
      flex-direction: column;
      border-radius: vw(16);
      // 信息
      .information {
        width: vw(612);
        height: vw(160);
        display: flex;
        margin-bottom: vw(39);
        align-items: flex-start;
        justify-content: space-between;
        // 图片
        .goodsImg {
          width: vw(160);
          height: vw(160);
          background: #f4f4f4;
        }
        // 标题和时间
        .goodsTitleTime {
          width: vw(334);
          height: vw(158);
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          // 标题
          .title {
            width: vw(334);
            font-size: vw(26);
            font-weight: 400;
            color: #000000;
            letter-spacing: vw(1);
          }
          //时间
          .time {
            width: vw(334);
            font-size: vw(23);
            font-weight: 400;
            color: #999999;
          }
        }
        //待发货
        .stay {
          width: vw(94);
          height: vw(42);
          font-size: vw(30);
          font-weight: 400;
          color: #d34431;
          line-height: vw(42);
          letter-spacing: vw(1);
        }
      }
      // 奖品
      .prize {
        width: vw(620);
        height: vw(124);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: vw(26);
        // 每一个奖品
        .eachPrize{
          width: vw(124);
          height: vw(124);
          
background: #D8D8D8;
        }
      }
      // 价钱 发货
      .priceSend {
        width: vw(610);
        height: vw(70);
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        // 价钱
        .price {
          font-size: vw(24);
          span {
            font-size: vw(52);
            color: #000000;
            font-weight: 500;
          }
        }
        // 发货
        .send {
          width: vw(162);
          height: vw(70);
          line-height: vw(70);
          text-align: center;
          background: linear-gradient(140deg, #ff9a4d 0%, #f72934 100%);
          border-radius: vw(12);
          font-size: vw(28);
          color: white;
        }
      }
    }
  }
}
</style>