vue3+vant3实现手机端购物车选择计算页代码-html代码-BFW代码库

vue3+vant3实现手机端购物车选择计算页代码

代码语言：html

代码描述：vue3+vant3实现手机端购物车选择计算页代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vant.3.index.css">

    <!-- 自定义样式 -->
    <style>
        body {
            color: #333;
            background-color: #f8f8f8;
          }
    .card-goods {
      padding: 10px 0;
      background-color: #fff;
    }
    .card-goods__item {
      position: relative;
      background-color: #fafafa;
    }
    .card-goods__item .van-checkbox__label {
      width: 100%;
      height: auto;
      padding: 0 10px 0 15px;
      box-sizing: border-box;
    }
    .card-goods__item .van-checkbox__icon {
      top: 50%;
      left: 10px;
      z-index: 1;
      position: absolute;
      margin-top: -10px;
    }
    .card-goods__item .van-card__price {
      color: #f44;
    }
    </style>
</head>

<body>
    <div id="app">
        <!-- 模板 -->
        <div>
            <van-checkbox-group class="card-goods" v-model="checkedGoods">
                <van-checkbox class="card-goods__item" v-for="item in goods" :key="item.id" :name="item.id">
                    <van-card :title="item.title" :desc="item.desc" :num="item.num" :price="formatPrice(item.price)" :thumb="item.thumb" />
                </van-checkbox>
            </van-checkbox-group>
            <van-submit-bar :price="totalPrice" :disabled="!checkedGoods.length" :button-text="submitBarText" @submit="onSubmit" />
        </div>
    </div>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
    <script type="text/javascript" src="//repo..........完整代码请登录后点击上方下载按钮下载查看