vue-组件-购物车页面案例

最新推荐文章于 2024-06-11 12:41:07 发布
最新推荐文章于 2024-06-11 12:41:07 发布
阅读量2.5k 收藏 24
点赞数 8
分类专栏： # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaogzhen/article/details/107589839
版权
vue-组件-购物车页面案例
目录

文章目录



内容

1、 效果图展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p2GpQFLh-1595729196164)(./images/2020-07-25_cart-design-sketch.png)]

2、功能实现步骤

2.1、实现整体布局和样式效果

UI结构和样式不是我擅长的，这里我直接给出代码。

  • 样式代码2.1-1：cart.css

      /* .container {
  } */
  .container .cart {
    width: 300px;
    /*background-color: lightgreen;*/
    margin: auto;
  }
  .container .title {
    background-color: lightblue;
    height: 40px;
    line-height: 40px;
    text-align: center;
    /*color: #fff;*/  
  }
  .container .total {
    background-color: #FFCE46;
    height: 50px;
    line-height: 50px;
    text-align: right;
  }
  .container .total button {
    margin: 0 10px;
    background-color: #DC4C40;
    height: 35px;
    width: 80px;
    border: 0;
  }
  .container .total span {
    color: red;
    font-weight: bold;
  }
  .container .item {
    height: 55px;
    line-height: 55px;
    position: relative;
    border-top: 1px solid #ADD8E6;
  }
  .container .item img {
    width: 45px;
    height: 45px;
    margin: 5px;
  }
  .container .item .name {
    position: absolute;
    width: 90px;
    top: 0;left: 55px;
    font-size: 16px;
  }

  .container .item .change {
    width: 100px;
    position: absolute;
    top: 0;
    right: 50px;
  }
  .container .item .change a {
    font-size: 20px;
    width: 30px;
    text-decoration:none;
    background-color: lightgray;
    vertical-align: middle;
  }
  .container .item .change .num {
    width: 40px;
    height: 25px;
  }
  .container .item .del {
    position: absolute;
    top: 0;
    right: 0px;
    width: 40px;
    text-align: center;
    font-size: 40px;
    cursor: pointer;
    color: red;
  }
  .container .item .del:hover {
    background-color: orange;
  }

  • 页面结构01_cart-tpl.html代码2.1-2：

      <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>购物车</title>
  	<link rel="stylesheet" href="../../assets/css/cart.css">
  </head>
  <body>
  	<div id="app">
  		<div class="container">
  		  <div class="cart">
  			<div class="title">我的商品</div>
  			<div>
  			  <div class="item">
  				<img src="../../assets/images/a.jpg"/>
  				<div class="name">商品</div>
  				<div class="change">
  				  <a href="">－</a>
  				  <input type="text" class="num" />
  				  <a href="">＋</a>
  				</div>
  				<div class="del">×</div>
  			  </div>
  			  <div class="item">
  				<img src="../../assets/images/b.jpg"/>
  				<div class="name">商品</div>
  				<div class="change">
  				  <a href="">－</a>
  				  <input type="text" class="num" />
  				  <a href="">＋</a>
  				</div>
  				<div class="del">×</div>
  			  </div>
  			  <div class="item">
  				<img src="../../assets/images/c.jpg"/>
  				<div class="name">商品</div>
  				<div class="change">
  				  <a href="">－</a>
  				  <input type="text" class="num" />
  				  <a href="">＋</a>
  				</div>
  				<div class="del">×</div>
  			  </div>
  			  <div class="item">
  				<img src="../../assets/images/d.jpg"/>
  				<div class="name">商品</div>
  				<div class="change">
  				  <a href="">－</a>
  				  <input type="text" class="num" />
  				  <a href="">＋</a>
  				</div>
  				<div class="del">×</div>
  			  </div>
  			  <div class="item">
  				<img src="../../assets/images/e.jpg"/>
  				<div class="name">商品</div>
  				<div class="change">
  				  <a href="">－</a>
  				  <input type="text" class="num" />
  				  <a href="">＋</a>
  				</div>
  				<div class="del">×</div>
  			  </div>
  			</div>
  			<div class="total">
  			  <span>总价：123</span>
  			  <button>结算</button>
  			</div>
  		  </div>
  		</div>
  	  </div>
  </body>
  </html>

2.2、运用组件化思想，划分独立的功能组件

根据结构结构功能，划分为3个独立的组件

  • 头部标题组件
  • 主体列表组件
  • 底部结算组件

2.3、组合所有的子组件形成整体结构

组合形成的页面02_cart-component.html代码2.3-1：

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="../../assets/css/cart.css">
	</head>
	<body>
		<div id="app">
			<div class="container">
			  <cart></cart>
			</div>
		  </div>
		  <script src="../../assets/js/vue.js"></script>
		  <script>
			  Vue.component('cart-title', {
				template: `
				<div class="title">我的商品</div>
				`
			  })
			  Vue.component('cart-list', {
				  template:`
				  <div>
				<div class="item">
					<img src="../../assets/images/a.jpg"/>
					<div class="name">商品</div>
					<div class="change">
					  <a href="">－</a>
					  <input type="text" class="num" />
					  <a href="">＋</a>
					</div>
					<div class="del">×</div>
				  </div>
				  <div class="item">
					<img src="../../assets/images/b.jpg"/>
					<div class="name">商品</div>
					<div class="change">
					  <a href="">－</a>
					  <input type="text" class="num" />
					  <a href="">＋</a>
					</div>
					<div class="del">×</div>
				  </div>
				  <div class="item">
					<img src="../../assets/images/c.jpg"/>
					<div class="name">商品</div>
					<div class="change">
					  <a href="">－</a>
					  <input type="text" class="num" />
					  <a href="">＋</a>
					</div>
					<div class="del">×</div>
				  </div>
				  <div class="item">
					<img src="../../assets/images/d.jpg"/>
					<div class="name">商品</div>
					<div class="change">
					  <a href="">－</a>
					  <input type="text" class="num" />
					  <a href="">＋</a>
					</div>
					<div class="del">×</div>
				  </div>
				  <div class="item">
					<img src="../../assets/images/e.jpg"/>
					<div class="name">商品</div>
					<div class="change">
					  <a href="">－</a>
					  <input type="text" class="num" />
					  <a href="">＋</a>
					</div>
					<div class="del">×</div>
				  </div>
				</div>
				  `
			  })
			  Vue.component('cart-total', {
				  template:`
				  <div class="total">
				  <span>总价：123</span>
				  <button>结算</button>
				</div>
				  `
			  })
			  Vue.component('cart', {
				  template:`
						<div class="cart">
							<cart-title></cart-title>
							<cart-list ></cart-list>
							<cart-total></cart-total>
						</div>
					`
			  })
			  const vm = new Vue({
				  el: '#app'
			  })
		  </script>
	</body>
	</html>

2.4、逐步实现各个组件功能

2.4.1、数据如下

uname: '张三',
list: [
	{
		id: 1,
		name: 'TCL彩电',
		price: 1000,
		num: 1,
		img: 'images/a.jpg'
	},{
		id: 2,
		name: '机顶盒',
		price: 1000,
		num: 1,
		img: 'images/b.jpg'
	},{
		id: 3,
		name: '海尔冰箱',
		price: 1000,
		num: 1,
		img: 'images/c.jpg'
	},{
		id: 4,
		name: '小米手机',
		price: 1000,
		num: 1,
		img: 'img/d.jpg'
	},{
		id: 5,
		name: 'PPTV电视',
		price: 1000,
		num: 2,
		img: 'images/e.jpg'
	}
]

2.4.2、标题组件

把标题名字‘*的商品’修改为数据中的指定名称。

  • 代码2.4.2-1如下：

      // cart模板修改如下
  <cart-title :uname="uname"></cart-title>
  // cart-title组件修改如下
  props: ['uname'],
  template: `
  	<div class="title">{{ uname }}的商品</div>
   `

  • 效果图2.4.2-1：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DO3AakWN-1595729196165)(./images/2020-07-25_cart-title.png)]

2.4.3、列表组件

  • 循环结构渲染列表

    • 修改商品名称

    • 初始化商品数量

        // cart模板修改如下
  <cart-list :list="list"></cart-list>
  // cart-list组件修改如下
  props: ['list'],
  template:`
  <div>
  <div class="item" v-for="goods in list" :key="goods.id">
  	<img :src="'../../assets/'+goods.img"/>
  	<div class="name">{{ goods.name }}</div>
  	<div class="change">
  	<a href="">－</a>
  	<input type="text" class="num" :value="goods.num"/>
  	<a href="">＋</a>
  	</div>
  	<div class="del">×</div>
  </div>
  </div>
  `

    • 效果图2.4.3-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZ0SmcXc-1595729196167)(./images/2020-07-25_cart-list-init.png)]

  • 实现点击叉号删除相应列表的功能

      // cart-list模板叉号绑定事件，通过$emit把对应商品ID传给父组件cart
  <div class="del" @click="del(goods.id)">×</div>

  methods: {
  				  del(id) {
  					this.$emit('delete-goods', id)  
  				  }
   },
   // cart组件接收cart-list子组件传递的ID删除对应的商品
   <cart-list :list="list" @delete-goods="deleteGoods"></cart-list>
    methods: {
  				  deleteGoods(id) {
  					//   console.log(id);
  					  this.list = this.list.filter(goods => {
  						  return goods.id !== id
  					  })
  				  }
   },
    • 效果图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zQyGhw5r-1595729196168)(./images/2020-07-25_cart-list-delete.png)]

  • 实现编辑修改输入框数字，修改对应商品数量功能

      // 修改cart-list模板添加输入框内容改变事件
  <input type="text" class="num" :value="goods.num" @change="change(goods.id, $event.target.value)"/>

  change(id, num) {
  					  this.$emit('change-num', {
  						  id,
  						  num: parseInt(num)
  					  })
  }

  // cart组件接收ID和改变后的数值，修改对应的商品信息

  <cart-list :list="list" @delete-goods="deleteGoods" @change-num="changeNum"></cart-list>

    // 根据子组件cart-list修改的商品ID，数量，修改对应的商品信息
    changeNum(goods) {
  	// console.log(goods);
  	this.list.some( item => {
  		if(item.id === goods.id) {
  			// console.log('前：', item.num);
  			item.num = goods.num
  			// console.log('后：', item.num);
  			return true
  		}
  	})
   }
    • 效果图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mby0eUCG-1595729196170)(./images/2020-07-25_cart-list-edit.png)]

  • 实现点击±号按钮修改对应商品数量的功能

这里+ - 和上面的直接修改商品数量，都是在修改数量，只是修改的方式不同，这里我们添加个type标识修改方式；我们根据修改方式的不同，更改商品数量；相应的逻辑代码就可以重用。

	// + - 号添加点击事件，触发父组件cart的修改数量方法
	<a href="" @click.prevent="change(goods.id, 0,'sub')">－</a>
	<a href="" @click.prevent="change(goods.id, 0, 'add')">＋</a>

	 change(id, num, type) {
						  this.$emit('change-num', {
							  id,
							  num: parseInt(num),
							  type
						  })
	}

	// 父组件cart相应修改

	  // 根据子组件cart-list修改的商品ID，数量，修改对应的商品信息
	  changeNum(goods) {
		// console.log(goods);
		this.list.some( item => {
			if(item.id === goods.id) {
				// console.log('前：', item.num);
				if(goods.type === 'edit') {
					item.num = goods.num
				} else if (goods.type === 'sub') {
					item.num--
				}else if (goods.type ==='add') {
					item.num++
				}
				// console.log('后：', item.num);
				return true
			}
		})
	  }

2.4.4、结算组件

// cart-total
 Vue.component('cart-total', {
			  props: ['list'],
			  template:`
			  <div class="total">
			  <span>总价：{{ totalPrice }}</span>
			  <button>结算</button>
			</div>
			  `,
			  computed: {
				  totalPrice() {
					let total = 0
					this.list.forEach(goods => {
						total += goods.num * goods.price
					})
					return total
				  }
			  },
 })
 // cart组件
 <cart-total :list="list"></cart-total>

3、完整代码

  • 页面代码：

      <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>购物车</title>
  	<link rel="stylesheet" href="../../assets/css/cart.css">
  </head>
  <body>
  	<div id="app">
  		<div class="container">
  		  <cart></cart>
  		</div>
  	  </div>
  	  <script src="../../assets/js/vue.js"></script>
  	  <script>
  		  Vue.component('cart-title', {
  			  props: ['uname'],
  			  template: `
  				<div class="title">{{ uname }}的商品</div>
  			  `
  		  })
  		  Vue.component('cart-list', {
  			  props: ['list'],
  			  template:`
  			  <div>
  				<div class="item" v-for="goods in list" :key="goods.id">
  					<img :src="'../../assets/'+goods.img"/>
  					<div class="name">{{ goods.name }}</div>
  					<div class="change">
  					<a href="" @click.prevent="change(goods.id, 0,'sub')">－</a>
  					<input type="text" class="num" :value="goods.num" @change="change(goods.id, $event.target.value, 'edit')"/>
  					<a href="" @click.prevent="change(goods.id, 0, 'add')">＋</a>
  					</div>
  					<div class="del" @click="del(goods.id)">×</div>
  				</div>
  			  </div>
  			  `,
  			  methods: {
  				  // 根据ID删除商品
  				  del(id) {
  					this.$emit('delete-goods', id)  
  				  },
  				  // 编辑商品数量，修改商品信息
  				  change(id, num, type) {
  					  this.$emit('change-num', {
  						  id,
  						  num: parseInt(num),
  						  type
  					  })
  				  }
  			  },
  		  })
  		  Vue.component('cart-total', {
  			  props: ['list'],
  			  template:`
  			  <div class="total">
  			  <span>总价：{{ totalPrice }}</span>
  			  <button>结算</button>
  			</div>
  			  `,
  			  computed: {
  				  totalPrice() {
  					let total = 0
  					this.list.forEach(goods => {
  						total += goods.num * goods.price
  					})
  					return total
  				  }
  			  },
  		  })
  		  Vue.component('cart', {
  			data() {
  				return {
  					uname: '张三',
  					list: [
  						{
  							id: 1,
  							name: 'TCL彩电',
  							price: 1000,
  							num: 1,
  							img: 'images/a.jpg'
  						},{
  							id: 2,
  							name: '机顶盒',
  							price: 1000,
  							num: 1,
  							img: 'images/b.jpg'
  						},{
  							id: 3,
  							name: '海尔冰箱',
  							price: 1000,
  							num: 1,
  							img: 'images/c.jpg'
  						},{
  							id: 4,
  							name: '小米手机',
  							price: 1000,
  							num: 1,
  							img: 'images/d.jpg'
  						},{
  							id: 5,
  							name: 'PPTV电视',
  							price: 1000,
  							num: 2,
  							img: 'images/e.jpg'
  						}
  			  ]}},
  			  template:`
  					<div class="cart">
  						<cart-title :uname="uname"></cart-title>
  						<cart-list :list="list" @delete-goods="deleteGoods" @change-num="changeNum"></cart-list>
  						<cart-total :list="list"></cart-total>
  					</div>
  			  `,
  			  methods: {
  				  // 根据子组件传递的ID值，删除对应的商品
  				  deleteGoods(id) {
  					//   console.log(id);
  					  this.list = this.list.filter(goods => {
  						  return goods.id !== id
  					  })
  				  },
  				  // 根据子组件cart-list修改的商品ID，数量，修改对应的商品信息
  				  changeNum(goods) {
  					// console.log(goods);
  					this.list.some( item => {
  						if(item.id === goods.id) {
  							// console.log('前：', item.num);
  							if(goods.type === 'edit') {
  								item.num = goods.num
  							} else if (goods.type === 'sub') {
  								item.num--
  							}else if (goods.type ==='add') {
  								item.num++
  							}
  							// console.log('后：', item.num);
  							return true
  						}
  					})
  				  } 
  			  },
  		  })
  		  const vm = new Vue({
  			  el: '#app'
  		  })
  	  </script>
  </body>
  </html>

  • 样式代码：同上

  • 图片

    • a.jpg:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oETj70S0-1595729196171)(./images/a.jpg)]

    • b.jpg:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYtpoagX-1595729196172)(./images/b.jpg)]

    • c.jpg:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JasYSNp5-1595729196173)(./images/c.jpg)]

    • d.jpg:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MBvfpQav-1595729196173)(./images/d.jpg)]

    • e.jgg:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnqrSqMx-1595729196174)(./images/e.jpg)]

后记 ：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
gaog2zh
关注
  • 8
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue购物车案例（基于组件）
代码在路上的博客
02-03 873
效果图如下： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container .cart { width: 300px; margin: auto; } .container .title
前端笔记Vue项目day3(八）
czbkzmj的博客
09-18 278
4. 实现组件更新数据功能上 将输入框中的默认数据动态渲染出来 输入框失去焦点的时候 更改商品的数量 子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据 父组件中接收子组件传递过来的数据并处理 [mw_shl_code=applescript,true]<div id="app"> <div cl...
Vue组件化开发 购物车小案例
weixin_44717047的博客
07-05 327
Vue组件化开发 购物车小案例
【VUE】VUE2实现购物车案例-代码分享
qiaomm的个人博客
06-11 434
【代码分享】【VUE】VUE2实现购物车案例。
VUE---组件---购物车案例
Tonyhnv的博客
05-04 717
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .
vue组件创建购物车列表
桃桃雾的博客
09-05 544
vue组件创建购物车列表
案例:购物车案例（vue组件总结）
酷爱前端的小陈博客
04-25 2536
1. 案例效果 2. 实现步骤 ① 初始化项目基本结构 ② 封装MyHeader 组件 ③ 基于axios 请求商品列表数据（ GET 请求，地址为 https://www.escook.cn/api/cart） ④ 封装MyFooter 组件 ⑤ 封装MyGoods 组件 ⑥ 封装MyCounter 组件 3. 完整代码： 项目目录： main.js部分： import Vue from 'vue' import App from './App.vue' ...
vue实现购物车小案例
12-13
Vue.js 是一个流行的轻量级前端框架，用于构建用户界面。...总的来说，这个购物车案例展示了 Vue.js 如何结合 HTML、CSS 和 JavaScript 来构建一个简单的交互式应用，通过数据驱动视图，简化了前端开发过程。
从零开始打造vue---购物车案例
m0_67390788的博客
03-06 449
目录 ?购物车案例 1. 案例效果 ?2. 实现步骤 1. 初始化项目结构 2. 封装 es-header 组件 3. 基于 axios 请求商品列表数据 4. 封装 es-footer 组件 5. 封装 es-goods 组件 实现合计、结算数量、全选功能 6.1 动态统计已勾选商品的总价格 6.2 动态统计已勾选商品的总数量 6.3 实现全选功能 7. 封装 es-counter 组件 购物车案例 1. 案例效果 2. 实现步骤 ① 初始化项目基本结构 ② 封装 EsHeader 组件 ③ 基于
vue案例---简易购物车
qq_58167492的博客
10-12 796
vue案例 简易购物车
vue-购物车实例
05-02
这是一个Vue实例，其主要实现一个简单的购物车功能。用于实践Vue的数据绑定，条件，循环，父子通信，组件化等功能。 这个实例详细的实现说明，可查看博客：...
Vue购物车——组件化.rar
05-01
Vue购物车——组件化 涉及 Vue组件的全局注册 和 Vue组件的局部注册，父组件向子组件传值，子组件向父组件传值，数据的单向绑定
完整的vue开发的购物车组件
07-03
是一个完整的用vue开发的购物车组件，可以实现全选，取消全选，以及单选显示总价，未选中则不显示总价等功能。
vue2.0实现购物车小案例
07-11
运用vue2.0实现的购物车demo，供大家共同学习参考,欢迎评论指正。
vue组件开发的购物车
07-03
是一个用vue开发的购物车组件，主要解决的问题是input的双向绑定问题，能够实现遍历在data中的数组里面的json对象中的值。
Vue基础第三天Vue组件化开发案例：购物车
m0_46597922的博客
05-18 560
基于组件的案例：购物车 需求分析: 1. 按照组件化方式实现业务需求 根据业务功能进行组件化划分 ① 标题组件（展示文本） ② 列表组件（列表展示、商品数量变更、商品删除） ③ 结算组件（计算商品总额） 2. 功能实现步骤 实现整体布局和样式效果 划分独立的功能组件 组合所有的子组件形成整体结构 逐个实现各个组件功能 标题组件 列表组件 结算组件 实现代码 1.组件化布局 <style type="text/css"> .container .cart {
使用 （Vue.js）实现 购物车功能（包含全选、分类、删除）
weixin_43748615的博客
02-14 1831
在当前示例的基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价 同时提供一个全选的按钮。 思路： 添加input元素，为其属性checked赋予动态变量，变量可在商品属性中增加一个值加以判断. 通过判断checked属性的值，确定是否添加计算到总价. 全选：也是通过添加input元素和判断checked属性，不同的是，增加其与物品的联系。 全选思考：首先是点击全选本身...
Vue 商城购物车 细节处理优化版 ：组件化开发综合案例 （详细代码分析在底部）
Specif1c的博客
04-03 435
需求： 案例展示： 代码展示： HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
vue.js可结算购物车案例代码
最新发布
06-21
在这个例子中，`App.vue` 负责渲染购物车组件并管理购物车状态，`Cart.vue` 是购物车的界面，展示商品列表并提供添加和删除按钮，`vuex` 存储购物车的状态。当用户点击“添加到购物车”时，通过 Vuex 的 `actions` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值