请用vue2+vant2封装商品Item组件，要求item中，上面是图片，下面是商品名称、价格、描述，和一个购物车按钮

在Vue2中使用Vant UI库封装一个商品Item组件可以这样设计：

<template>
  <div class="product-item">
    <van-image :src="product.image" placeholder="https://placehold.cdn.bcebos.com/image/large/holder_202008/d7/4e/94d74eebdcf94f7a.png" :ratio="1.5"></van-image>
    
    <div class="product-info">
      <h2>{{ product.name }}</h2>
      <p>价格：{{ product.price }}</p>
      <p>描述：{{ product.description }}</p>
    </div>

    <!-- 购物车按钮 -->
    <van-button type="primary" @click="addToCart">加入购物车</van-button>
  </div>
</template>

<script>
export default {
  name: 'ProductItem',
  props: {
    product: {
      type: Object,
      required: true,
      // 根据实际需求填充产品对象的结构
      default: () => ({
        image: '',
        name: '',
        price: '',
        description: ''
      })
    }
  },
  methods: {
    addToCart() {
      // 这里只是一个示例，实际应用中你需要处理添加到购物车的行为
      console.log('商品已加入购物车');
    }
  }
}
</script>

<style scoped>
.product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.product-info {
  flex: 1;
  margin-left: 20px;
}

.product-image {
  width: calc(100% - 20px);
  height: auto;
}
</style>

这个组件接收一个`product`对象作为props，包含了商品的基本信息，并且有一个`addToCart`方法用于模拟购物车操作。你可以将此组件嵌入到其他需要显示商品详情的地方。