vue实现购物车案例

话不多说，先上效果图。

安装elementui组件库，可直接食用。

<template>
  <div>
    <!-- 购物车部分 -->
    <el-container>
      <el-header><h1>购物车案例一条龙</h1></el-header>
      <el-main>
        <!-- 折叠面板展示不同商店的商品 -->
        <el-collapse v-model="activeNames" accordion>
          <!-- 遍历商店列表 -->
          <el-collapse-item
            v-for="(store, index) in stores"
            :title="store.name"
            :name="'store' + index"
            :key="store.name"
          >
            <!-- 使用表格展示商品信息 -->
            <el-table :data="store.items" style="width: 100%">
              <el-table-column prop="name" label="商品名称"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <!-- 使用输入框控件调整商品数量 -->
                  <el-input-number
                    v-model="scope.row.quantity"
                    :min="1"
                    @change="updateQuantity(scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!-- 移除商品按钮 -->
                  <el-button
                    type="danger"
                    @click="removeItem(store, scope.$index)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-main>
      <el-footer>
        <!-- 显示购物车总计价格 -->
        <div>总计：{{ getTotalPrice() }}</div>
        <!-- 结算按钮 -->
        <el-button type="primary" @click="showCheckout">结算</el-button>
      </el-footer>
    </el-container>

    <!-- 收货流程模态框 -->
    <el-dialog :visible.sync="dialogVisible" width="60%" center>
      <!-- 步骤条 -->
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="选择收货地址" icon="el-icon-location"></el-step>
        <el-step title="付款" icon="el-icon-bank-card"></el-step>
        <el-step title="完成" icon="el-icon-check"></el-step>
      </el-steps>

      <div v-show="active === 0" class="center-content">
        <!-- 显示收货地址选择 -->
        <h2>请选择收货地址：</h2>
        <el-radio-group v-model="selectedAddress">
          <el-radio
            :label="address"
            v-for="(address, index) in addresses"
            :key="index"
            >{{ address.name }} - {{ address.address }} - {{ address.city }} -
            {{ address.zip }}</el-radio
          >
        </el-radio-group>
      </div>

      <div v-show="active === 1" class="center-content">
        <!-- 显示付款信息 -->
        <h2>请完成付款</h2>
        <!-- 可以放置付款表单或者其他付款相关内容 -->
        <div style="margin-top: 20px">
          <el-button @click="pay" type="primary">确认付款</el-button>
          <el-button @click="prevStep">返回</el-button>
        </div>
      </div>

      <div v-show="active === 2" class="center-content">
        <!-- 显示付款完成信息 -->
        <h2>付款完成</h2>
        <!-- 展示购买的商品信息、总计和收货地址 -->
        <div v-if="selectedAddress">
          <h3>购买的商品信息：</h3>
          <!-- 使用 el-table-tree 来展示购买的商品信息 -->
          <el-table :data="selectedItems" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <!-- 子商品信息 -->
                <el-table :data="props.row.children" style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="商品名称"
                  ></el-table-column>
                  <el-table-column prop="price" label="价格"></el-table-column>
                  <el-table-column
                    prop="quantity"
                    label="数量"
                  ></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <!-- 商店名称列 -->
            <el-table-column
              prop="storeName"
              label="商店名称"
            ></el-table-column>
          </el-table>
          <!-- 收货地址信息 -->
          <div>
            收货地址：{{ selectedAddress.name }} -
            {{ selectedAddress.address }} - {{ selectedAddress.city }} -
            {{ selectedAddress.zip }}
          </div>
        </div>
        <!-- 关闭模态框按钮 -->
        <div style="margin-top: 20px">
          <el-button @click="closeDialog" type="primary">关闭</el-button>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" v-show="active !== 2">
        <!-- 下一步按钮 -->
        <el-button @click="nextStep" type="primary">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      active: 0,
      addresses: [
        { name: "张三", address: "北京市朝阳区", city: "北京", zip: "100000" },
        {
          name: "李四",
          address: "上海市浦东新区",
          city: "上海",
          zip: "200000",
        },
        { name: "王五", address: "广州市天河区", city: "广州", zip: "300000" },
        { name: "赵六", address: "深圳市南山区", city: "深圳", zip: "400000" },
      ],
      selectedAddress: null, // 存储选中的收货地址
      stores: [
        {
          name: "阳光超市",
          items: [
            { id: 1, name: "红烧肉", price: 28, quantity: 2 },
            { id: 2, name: "麻辣香锅", price: 38, quantity: 1 },
            { id: 3, name: "西湖醋鱼", price: 48, quantity: 3 },
          ],
        },
        {
          name: "小龙虾馆",
          items: [
            { id: 4, name: "香辣小龙虾", price: 58, quantity: 1 },
            { id: 5, name: "麻辣小龙虾", price: 68, quantity: 2 },
            { id: 6, name: "蒜蓉小龙虾", price: 78, quantity: 2 },
          ],
        },
      ],
      activeNames: [], // 折叠面板激活的面板名称数组
    };
  },
  computed: {
    selectedItems() {
      // 获取选中的商品列表
      const selectedItems = [];
      for (const store of this.stores) {
        const storeItems = store.items.filter((item) => item.quantity > 0);
        if (storeItems.length > 0) {
          selectedItems.push({ storeName: store.name, children: storeItems });
        }
      }
      return selectedItems;
    },
  },
  methods: {
    removeItem(store, index) {
      // 移除商品
      store.items.splice(index, 1);
    },
    updateQuantity(item) {
      // 更新商品数量
      item.quantity = Math.max(1, parseInt(item.quantity) || 1);
    },
    getTotalPrice() {
      // 计算购物车总价
      let totalPrice = 0;
      for (const store of this.stores) {
        totalPrice += store.items.reduce(
          (total, item) => total + item.price * item.quantity,
          0
        );
      }
      return totalPrice;
    },
    showCheckout() {
      // 显示结算模态框
      this.dialogVisible = true;
    },
    nextStep() {
      // 进入下一步
      this.active++;
    },
    prevStep() {
      // 返回上一步
      this.active--;
    },
    pay() {
      // 处理付款逻辑，这里可以放置付款的相关操作
      // 付款成功后进入下一步
      this.nextStep();
    },
    closeDialog() {
      // 关闭模态框
      this.dialogVisible = false;
      // 重置步骤状态
      this.active = 0;
    },
  },
};
</script>

<style>
.center-content {
  text-align: center;
}
</style>