vue实战指南 vue项目购物车的添加删除和状态更改

于 2024-10-11 06:14:10 发布
阅读量293 收藏 7
点赞数 9
分类专栏： Vue实战指南 文章标签： VUE HTML web vue框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/black_cat7/article/details/142836789
版权

在这里插入图片描述

vue实战指南 vue项目购物车的添加删除和状态更改

在现代Web应用中，购物车功能是电商网站不可或缺的一部分。Vue.js作为一个流行的前端框架，提供了强大的数据绑定和组件化机制，使得实现购物车功能变得更加简单和高效。本文将详细介绍如何在Vue项目中实现购物车的添加、删除和状态更改功能，并通过多个具体的代码示例来帮助读者理解其实现过程。

基本概念与作用说明

购物车的基本概念

购物车是一种临时存储用户选购商品的数据结构。用户可以在浏览商品的过程中将喜欢的商品加入购物车，然后在结算时一次性购买。购物车功能通常包括以下操作：

  1. 添加商品：用户将商品添加到购物车中。
  2. 删除商品：用户从购物车中移除商品。
  3. 更改商品数量：用户可以增加或减少购物车中商品的数量。
  4. 查看购物车：用户可以查看购物车中的商品列表。

Vue.js中的数据绑定

Vue.js通过数据绑定机制，使得视图和模型数据保持同步。当我们更改数据模型时，视图会自动更新；反之亦然。这种机制使得处理购物车中的数据变更变得非常直观和高效。

示例一：基本的购物车功能

首先，我们来实现一个基本的购物车功能，包括添加商品、删除商品和更改商品数量。

商品列表组件

<template>
  <div>
    <h3>商品列表</h3>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - 价格：{{ product.price }} 元
        <button @click="addToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        { id: 3, name: '商品C', price: 300 }
      ]
    };
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product);
    }
  }
};
</script>

购物车组件

<template>
  <div>
    <h3>购物车</h3>
    <ul>
      <li v-for="item in cartItems" :key="item.product.id">
        {{ item.product.name }} - 数量：{{ item.quantity }} - 小计：{{ item.product.price * item.quantity }} 元
        <button @click="increaseQuantity(item)">+</button>
        <button @click="decreaseQuantity(item)">-</button>
        <button @click="removeFromCart(item)">删除</button>
      </li>
    </ul>
    <p>总计：{{ total }} 元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: []
    };
  },
  methods: {
    addToCart(product) {
      const existingItem = this.cartItems.find(item => item.product.id === product.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        this.cartItems.push({ product, quantity: 1 });
      }
    },
    increaseQuantity(item) {
      item.quantity++;
    },
    decreaseQuantity(item) {
      if (item.quantity > 1) {
        item.quantity--;
      } else {
        this.removeFromCart(item);
      }
    },
    removeFromCart(item) {
      this.cartItems.splice(this.cartItems.indexOf(item), 1);
    }
  },
  computed: {
    total() {
      return this.cartItems.reduce((total, item) => total + item.product.price * item.quantity, 0);
    }
  }
};
</script>

主组件

<template>
  <div>
    <product-list @add-to-cart="addToCart"></product-list>
    <cart></cart>
  </div>
</template>

<script>
import ProductList from './ProductList.vue';
import Cart from './Cart.vue';

export default {
  components: {
    ProductList,
    Cart
  },
  methods: {
    addToCart(product) {
      this.$refs.cart.addToCart(product);
    }
  }
};
</script>

在这个示例中，我们有两个组件：ProductList 和 Cart。ProductList 组件负责展示商品列表，并允许用户将商品添加到购物车中。Cart 组件负责展示购物车中的商品列表，并提供增加、减少和删除商品的功能。

示例二：使用Vuex管理全局状态

对于大型应用，可能需要在多个组件之间共享购物车数据。这时可以使用Vuex来集中管理状态。

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    products: [
      { id: 1, name: '商品A', price: 100 },
      { id: 2, name: '商品B', price: 200 },
      { id: 3, name: '商品C', price: 300 }
    ],
    cartItems: []
  },
  mutations: {
    addToCart(state, product) {
      const existingItem = state.cartItems.find(item => item.product.id === product.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        state.cartItems.push({ product, quantity: 1 });
      }
    },
    increaseQuantity(state, item) {
      item.quantity++;
    },
    decreaseQuantity(state, item) {
      if (item.quantity > 1) {
        item.quantity--;
      } else {
        state.cartItems.splice(state.cartItems.indexOf(item), 1);
      }
    },
    removeFromCart(state, item) {
      state.cartItems.splice(state.cartItems.indexOf(item), 1);
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('addToCart', product);
    },
    increaseQuantity({ commit }, item) {
      commit('increaseQuantity', item);
    },
    decreaseQuantity({ commit }, item) {
      commit('decreaseQuantity', item);
    },
    removeFromCart({ commit }, item) {
      commit('removeFromCart', item);
    }
  },
  getters: {
    total(state) {
      return state.cartItems.reduce((total, item) => total + item.product.price * item.quantity, 0);
    }
  }
});

商品列表组件

<template>
  <div>
    <h3>商品列表</h3>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - 价格：{{ product.price }} 元
        <button @click="addToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['products'])
  },
  methods: {
    ...mapActions(['addToCart'])
  }
};
</script>

购物车组件

<template>
  <div>
    <h3>购物车</h3>
    <ul>
      <li v-for="item in cartItems" :key="item.product.id">
        {{ item.product.name }} - 数量：{{ item.quantity }} - 小计：{{ item.product.price * item.quantity }} 元
        <button @click="increaseQuantity(item)">+</button>
        <button @click="decreaseQuantity(item)">-</button>
        <button @click="removeFromCart(item)">删除</button>
      </li>
    </ul>
    <p>总计：{{ total }} 元</p>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['cartItems']),
    ...mapGetters(['total'])
  },
  methods: {
    ...mapActions(['increaseQuantity', 'decreaseQuantity', 'removeFromCart'])
  }
};
</script>

在这个示例中，我们使用Vuex来管理商品列表和购物车数据，并通过映射方法和计算属性来访问和修改状态。

示例三：动态计算折扣和税费

在实际应用中，购物车可能需要动态计算折扣和税费。我们可以通过计算属性来实现这一功能。

购物车组件

<template>
  <div>
    <h3>购物车</h3>
    <ul>
      <li v-for="item in cartItems" :key="item.product.id">
        {{ item.product.name }} - 数量：{{ item.quantity }} - 小计：{{ item.product.price * item.quantity }} 元
        <button @click="increaseQuantity(item)">+</button>
        <button @click="decreaseQuantity(item)">-</button>
        <button @click="removeFromCart(item)">删除</button>
      </li>
    </ul>
    <p>总计：{{ total }} 元</p>
    <p>折扣：{{ discount }} 元</p>
    <p>税费：{{ tax }} 元</p>
    <p>最终总价：{{ finalTotal }} 元</p>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['cartItems']),
    ...mapGetters(['total']),
    discount() {
      // 计算折扣
      return this.total * 0.1; // 10% 折扣
    },
    tax() {
      // 计算税费
      return this.total * 0.05; // 5% 税费
    },
    finalTotal() {
      // 计算最终总价
      return this.total - this.discount + this.tax;
    }
  },
  methods: {
    ...mapActions(['increaseQuantity', 'decreaseQuantity', 'removeFromCart'])
  }
};
</script>

在这个示例中，我们添加了折扣和税费的计算，并在购物车组件中展示了最终总价。

示例四：使用插槽实现灵活的商品展示

在某些场景下，我们可能需要在购物车中展示更多的商品信息，例如图片、描述等。这时可以使用Vue的插槽功能来实现灵活的商品展示。

商品列表组件

<template>
  <div>
    <h3>商品列表</h3>
    <ul>
      <li v-for="product in products" :key="product.id">
        <slot name="product" :product="product">
          {{ product.name }} - 价格：{{ product.price }} 元
        </slot>
        <button @click="addToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['products'])
  },
  methods: {
    ...mapActions(['addToCart'])
  }
};
</script>

购物车组件

<template>
  <div>
    <h3>购物车</h3>
    <ul>
      <li v-for="item in cartItems" :key="item.product.id">
        <slot name="cart-item" :item="item">
          {{ item.product.name }} - 数量：{{ item.quantity }} - 小计：{{ item.product.price * item.quantity }} 元
        </slot>
        <button @click="increaseQuantity(item)">+</button>
        <button @click="decreaseQuantity(item)">-</button>
        <button @click="removeFromCart(item)">删除</button>
      </li>
    </ul>
    <p>总计：{{ total }} 元</p>
    <p>折扣：{{ discount }} 元</p>
    <p>税费：{{ tax }} 元</p>
    <p>最终总价：{{ finalTotal }} 元</p>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['cartItems']),
    ...mapGetters(['total']),
    discount() {
      return this.total * 0.1;
    },
    tax() {
      return this.total * 0.05;
    },
    finalTotal() {
      return this.total - this.discount + this.tax;
    }
  },
  methods: {
    ...mapActions(['increaseQuantity', 'decreaseQuantity', 'removeFromCart'])
  }
};
</script>

主组件

<template>
  <div>
    <product-list>
      <template v-slot:product="{ product }">
        <div>
          <img :src="product.image" alt="商品图片" />
          <p>{{ product.name }}</p>
          <p>价格：{{ product.price }} 元</p>
        </div>
      </template>
    </product-list>
    <cart>
      <template v-slot:cart-item="{ item }">
        <div>
          <img :src="item.product.image" alt="商品图片" />
          <p>{{ item.product.name }}</p>
          <p>数量：{{ item.quantity }}</p>
          <p>小计：{{ item.product.price * item.quantity }} 元</p>
        </div>
      </template>
    </cart>
  </div>
</template>

<script>
import ProductList from './ProductList.vue';
import Cart from './Cart.vue';

export default {
  components: {
    ProductList,
    Cart
  }
};
</script>

在这个示例中，我们使用插槽在商品列表和购物车中展示更详细的商品信息。

实际工作中的使用技巧

在实际开发过程中，处理购物车功能可能会遇到各种挑战。以下是一些有用的技巧：

  1. 性能优化：对于大数据量的购物车，可以使用虚拟滚动技术来优化性能。
  2. 错误处理：在网络请求中添加错误处理逻辑，确保用户在遇到网络问题时能够得到友好的反馈。
  3. 用户体验：提供加载指示器和错误提示，提升用户体验。
  4. 代码复用：将常用的购物车组件封装成可复用的组件，减少重复代码。
  5. 测试：编写单元测试和端到端测试，确保功能的正确性和稳定性。

总之，通过上述示例和技巧，我们可以看到Vue框架在处理购物车功能方面的强大能力和灵活性。希望本文能为你的Vue项目开发带来启发和帮助。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁）学习路线(点击解锁）知识定位
《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。
通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》持续更新中~Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》持续更新中~SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》持续更新中~算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》持续更新中~基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

在这里插入图片描述

在这里插入图片描述

DTcode7
关注
专栏目录
前端项目(二) vue项目实战-尚品汇
m0_74151862的博客
05-25 3615
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
Vue 项目性能优化 — 实践指南
猫老板的豆
08-29 1012
Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验本文通过以下三部分组成：Vue 代码层面的优化、webpack 配置层面的优化、基础的 Web 技术层面的优化；来介绍怎么去优化 Vue 项目的性能。
vue2实战指南【目录】
大剑师兰特的GIS世界
06-10 1332
本目录主要列出vue2的基础知识和常用的经典示例，目的是简化编程脑力的思考。时常我们会因为一时的脑子短路，忘记某个知识点怎么应用了，这里的示例变相的给予了脑子的充电过程，让你思路瞬间打开，通向成功的彼岸。希望能给广大前端开发工作者提供到帮助。
毕设项目-基于Springboot和Vue实现蛋糕商城系统
热门推荐
软件开发实战项目分享
12-12 2万+
本项目基于Spring Boot搭建的蛋糕商城系统主要有用户管理功能、商品管理功能、购物车管理功能、订单管理功能、角色管理功能等，一共分为七个大的核心模块： 前台管理系统： （1）用户功能模块：用户可以进行登录注册与注销操作，并且可以对个人信息进行响应的修改。 （2）商品功能模块：用户可以搜索查看自己想要的商品，也可以点击商品进行查看商品的详细信息。 （3）购物车管理模块：用户可以把自己感兴趣的商品加入购物车，点击购物车查看购物车信息，可以的对购物车内的商品进行修改，用账号余额对购物车进行结算。
Vue源码篇
深夜代码酒神
06-27 1706
Vue源码篇
前端框架vue和react
weixin_53809558的博客
09-18 2477
Vue能力的提升是一个综合性的过程，涉及多个方面的学习和实践。以下是一些具体的例子和策略，可以帮助你提升Vue开发能力：1. 深入理解Vue的核心概念11响应式系统：深入理解Vue的响应式原理，包括数据绑定、依赖追踪和视图更新机制。Vue 的响应式系统是其核心，它允许 Vue 组件响应数据的变化。这是通过 Vue 的内部机制实现的，包括使用 ES5 的 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来劫持对象的 getter 和 setter。
项目实战【vue，react，微信小程序】（1705E）
徐同保的专栏
12-30 2187
目录 一、git 1、git简介 2、github简介 3、在github上创建项目 4、克隆代码 5、提交代码 6、git工作区 7、分支 8、对比分支 9、生成ssh key 10、安装git 11、安装小乌龟 12、忽略提交.gitignore 13、git配置用户名和邮箱 14、git免密 参考链接 二、MySql 1、安装mys......
Vue项目构建开发入门
YunWisdom
08-03 2210
开篇：Vue CLI 3 项目构建基础 大家好，当你点进这个标题，开始阅读本章的时候，说明你对 Vue.js 是充满好奇心和求知欲的。我之前写过一篇文章，这样评价 Vue.js，称它是“简单却不失优雅，小巧而不乏大匠”的作品，正如其官网介绍的“易用，灵活和高效”那样。其实框架是 Vue.js 的本质，而真正了解它的人则会把它当成一件作品来欣赏。 Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js
Vue.js 核心精要实战解析
GitChat
04-12 4681
课程简介 前端框架领域，Angular、React、Vue.js 三足鼎立，而 Vue.js 因其性能、通用、易用、体积、学习成本低等特点深受广大前端们的追捧，并吸引了一大批前端初学者。作为 Vue.js 的入门教程，此达人课共计16篇文章，涵盖了所需了解的核心基础知识，并通过小小电商网站的搭建，在实战过程中带大家快速掌握 Vue.js。 本课程共包含三大部分。第一部分（第1-2篇）带你初步认识 ...
vue 购物车实例.7z
05-16
在这个购物车实例中，可能有一个全局的Vuex store来存储和管理购物车中的所有商品信息，包括添加、删除和修改商品等操作。 5. **路由管理（Vue Router）**： 如果实例包含了address.html和index.html，这可能意味...
Vue.js 状态管理：Vuex实战指南
# 1. 介绍 ## Vue.js 及其特点 Vue.js 是一款轻量级的JavaScript框架，用于构建用户界面。它采用了MVVM（模型-视图-...- **组件化**：Vue.js将应用抽象成一个一个的组件，每个组件都拥有自己独立的状态和视图。组件之
vue.js前端开发基础与项目实战pdf
07-22
总的来说，《vue.js前端开发基础与项目实战pdf》是一本适合初学者和有一定经验的开发者的实用指南。通过学习这本书，读者可以从零开始掌握Vue.js的基础知识，并通过实践项目提升自己的开发能力。无论是对于想要学习...
基于Java+SpringBoot+vue+elementui的校园文具商城系统详细设计和实现_基于springboot的文具商品销售系统
2401_84446963的博客
04-21 1034
一次偶然，从朋友那里得到一份“java高分面试指南”，里面涵盖了25个分类的面试题以及详细的解析：JavaOOP、Java集合/泛型、Java中的IO与NIO、Java反射、Java序列化、Java注解、多线程&并发、JVM、Mysql、Redis、Memcached、MongoDB、Spring、Spring Boot、Spring Cloud、RabbitMQ、Dubbo 、MyBatis 、ZooKeeper 、数据结构、算法、Elasticsearch 、Kafka 、微服务、Linux。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1308
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
Vue根实例、实例总结
m0_54007573的博客
10-04 664
Vue根实例、实例总结
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 277
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
前端--深入了解es6语法
最新发布
weixin_50559423的博客
10-10 410
ECMAScript是JavaScript的。
使用浏览器原生API实现录屏功能
m0_51431448的博客
10-10 34
本地开发环境中使用正常没问题，但是在生产环境中可能会报错，原因是因为navigator.mediaDevices为undefined了，其实除了navigator.mediaDevices，navigator.clipboard.writeText(‘复制的文本’) 这个复制到剪切板的API也是同样的问题。出现这些问题的原因是浏览器这些自带的一些API都有局限性，可能是为了安全考虑，只有在。好早之前写了个小deme，本来都忘了，现在无意中又翻出来了，所以也来记录一下吧！或者直接先不用图片都可以。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DTcode7

客官，赏个铜板吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值