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

好的，下面是一个简单的示例代码，可以作为您的参考：

<template>
  <div class="order-list">
    <van-card v-for="(order, index) in orderList" :key="index">
      <div slot="header">{{ order.status }}</div>
      <div class="order-item">
        <van-image class="order-img" :src="order.image" />
        <div class="order-info">
          <div class="order-name">{{ order.name }}</div>
          <div class="order-price">{{ order.price }}</div>
        </div>
        <div class="order-operation">
          <van-button type="primary" size="small" @click="handleViewLogistics(index)">查看物流</van-button>
        </div>
      </div>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        {
          status: '待发货',
          name: '商品名称1',
          image: 'https://img.yzcdn.cn/vant/ipad.jpeg',
          price: '¥999.00'
        },
        {
          status: '已发货',
          name: '商品名称2',
          image: 'https://img.yzcdn.cn/vant/ipad.jpeg',
          price: '¥1999.00'
        },
        {
          status: '已完成',
          name: '商品名称3',
          image: 'https://img.yzcdn.cn/vant/ipad.jpeg',
          price: '¥2999.00'
        }
      ]
    }
  },
  methods: {
    handleViewLogistics(index) {
      // TODO: 处理查看物流逻辑
    }
  }
}
</script>

<style>
.order-list {
  padding: 20px;
}

.order-item {
  display: flex;
  align-items: center;
}

.order-img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}

.order-info {
  flex: 1;
}

.order-name {
  font-size: 16px;
  margin-bottom: 10px;
}

.order-price {
  font-size: 18px;
  font-weight: bold;
  color: #f60;
  margin-bottom: 10px;
}

.order-operation {
  margin-left: 10px;
}
</style>

在这个示例代码中，我们使用了`van-card`组件来展示订单列表，使用`van-image`组件来展示商品图片，使用`van-button`组件来展示“查看物流”按钮。并且在数据中，我们存储了订单的状态、商品名称、商品图片、价格信息等数据。您可以根据自己的需求进行修改和定制。