写出下面的html代码：用vue框架写出商品订单界面，使用vant组件，每个订单展示发货状态，价格信息，商品名称，商品图片，还有查看物流按钮。

很高兴为您提供帮助！下面是示例代码：

<template>
  <div>
    <van-card v-for="(item, index) in orderList" :key="index" num="{{item.num}}">
      <template #thumb>
        <img :src="item.image" />
      </template>
      <div class="card-content">
        <div class="card-content-title">{{ item.title }}</div>
        <div class="card-content-desc">{{ item.desc }}</div>
        <div class="card-content-price">{{ item.price }}</div>
        <div class="card-content-status">{{ item.status }}</div>
        <van-button type="default" size="small" @click="checkLogistics(item)">
          查看物流
        </van-button>
      </div>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        {
          title: "商品名称1",
          desc: "商品描述1",
          price: "￥100",
          status: "待发货",
          image: "https://img.yzcdn.cn/vant/ipad.jpeg",
          num: 1
        },
        {
          title: "商品名称2",
          desc: "商品描述2",
          price: "￥200",
          status: "已发货",
          image: "https://img.yzcdn.cn/vant/ipad.jpeg",
          num: 2
        },
        {
          title: "商品名称3",
          desc: "商品描述3",
          price: "￥300",
          status: "已完成",
          image: "https://img.yzcdn.cn/vant/ipad.jpeg",
          num: 3
        }
      ]
    };
  },
  methods: {
    checkLogistics(item) {
      // TODO：查看物流逻辑
    }
  }
};
</script>

需要注意的是，上述代码中使用了vant组件库中的van-card和van-button组件。其中，van-card组件用于展示订单信息，van-button组件用于查看物流。另外，代码中的数据均为示例数据，实际开发中需要根据具体需求进行修改。