购物车滑动商品卡片

template代码

<!-- 第一层 复选框 -->
    <van-checkbox-group v-model="result">
    <!-- 第二层 滑动单元格 -->
        <van-swipe-cell v-for="(item, index) in goods" :key="index">
            <!-- 第三层 布局 -->
            <van-row>
                <van-col span="2">
                    <van-checkbox :name="item"></van-checkbox>
                </van-col>
                <van-col span="22">
                    <!-- 第四层 商品卡片 -->
                    <van-card
                        :price="item.actualPrice"
                        :desc="item.desc"
                        :title="item.title"
                        :thumb="item.mainPic"
                        >
                        <!-- 第五层  步进器 -->
                        <template #num>
                            <van-stepper v-model="value" theme="round" button-size="22" disable-input />
                        </template>
                    </van-card>
                </van-col>
                </van-row>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
            </van-swipe-cell>
    </van-checkbox-group>

style代码

<style scoped>
.goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
</style>