用vue写一个vantcard展示商品积分数量，选中后可以积分兑换。并展示兑换后剩余积分。

好的，这是一个比较具体的问题，以下是实现的步骤：

1. 安装Vant组件库，可以使用npm或yarn安装。具体命令如下：

   npm install vant -S

或者

   yarn add vant

2. 在Vue项目中引入Vant组件库，可以在main.js中全局引入：

   import Vue from 'vue'
   import Vant from 'vant'
   import 'vant/lib/index.css'

   Vue.use(Vant)

3. 创建一个Card组件用于展示商品信息和积分数量。代码如下：

   <template>
     <van-card
       :thumb="imageUrl"
       :title="title"
       :desc="desc"
       :num="points"
       :price="price"
       :lazy-load="lazyLoad"
       :tag="tag"
       @click="onClick"
     />
   </template>

   <script>
     export default {
       props: {
         imageUrl: String,
         title: String,
         desc: String,
         points: Number,
         price: Number,
         lazyLoad: Boolean,
         tag: String
       },
       methods: {
         onClick() {
           this.$emit('exchange-points', this.points)
         }
       }
     }
   </script>

4. 在父组件中使用Card组件，并传入相应的props。同时在父组件中维护一个points变量用于记录当前剩余积分。代码如下：

   <template>
     <div class="container">
       <h2>当前积分：{{ points }}</h2>
       <div class="card-list">
         <card
           v-for="item in goods"
           :key="item.id"
           :image-url="item.imageUrl"
           :title="item.title"
           :desc="item.desc"
           :points="item.points"
           :price="item.price"
           :lazy-load="lazyLoad"
           :tag="item.tag"
           @exchange-points="onExchangePoints"
         />
       </div>
     </div>
   </template>

   <script>
     import Card from './Card.vue'

     export default {
       components: {
         Card
       },
       data() {
         return {
           goods: [
             {
               id: 1,
               imageUrl: 'https://img.yzcdn.cn/vant/ipad.jpeg',
               title: 'iPad',
               desc: 'Apple平板电脑',
               points: 100,
               price: 2999,
               tag: 'hot'
             },
             {
               id: 2,
               imageUrl: 'https://img.yzcdn.cn/vant/macbook.jpeg',
               title: 'MacBook',
               desc: 'Apple笔记本电脑',
               points: 200,
               price: 9999,
               tag: 'new'
             }
           ],
           points: 1000,
           lazyLoad: true
         }
       },
       methods: {
         onExchangePoints(points) {
           if (this.points >= points) {
             this.points -= points
             alert('兑换成功')
           } else {
             alert('积分不足')
           }
         }
       }
     }
   </script>

5. 最后，为了让页面看起来更美观，可以在样式中添加一些样式。代码如下：

   .container {
     padding: 10px;
   }

   h2 {
     margin-bottom: 10px;
   }

   .card-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
   }

   .van-card__thumb {
     height: 100px;
     object-fit: cover;
   }

   .van-card__num {
     font-size: 16px;
     color: #f60;
     margin-top: 10px;
   }

   .van-card__price {
     font-size: 14px;
     color: #999;
   }

   .van-tag--hot {
     background-color: #f60;
   }

   .van-tag--new {
     background-color: #ff5b05;
   }

以上就是一个简单的实现了，可以根据自己的需求进行调整和优化。