SpringBoot + Vue 结合支付宝支付（2）-- 项目搭建

已于 2022-06-28 19:36:50 修改
阅读量604 收藏 6
点赞数 1
分类专栏： 开发 文章标签： spring boot vue.js java
于 2022-06-06 18:43:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45803593/article/details/125152161
版权

上一篇 SpringBoot + Vue 结合支付宝支付（1）-- 准备工作

下一篇 SpringBoot + Vue 结合支付宝支付（3）–调用api

直接下载项目demo https://gitee.com/manster1231

1、搭建后端

1、创建后端项目

1、导入 jar

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.manster</groupId>
    <artifactId>pay</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>pay</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--持久层-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
        <!--swagger ui-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
        </dependency>

        <!--   支付宝SDK     -->
        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>4.27.1.ALL</version>
        </dependency>
    </dependencies>

    <build>
        <!-- 项目打包时会将java目录中的*.xml文件也进行打包 -->
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

2、导入数据库

CREATE DATABASE /*!32312 IF NOT EXISTS*/`payment_demo` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci */ /*!80016 DEFAULT ENCRYPTION='N' */;

USE `payment_demo`;


DROP TABLE IF EXISTS `t_order_info`;

CREATE TABLE `t_order_info` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT COMMENT '订单id',
  `title` varchar(256) DEFAULT NULL COMMENT '订单标题',
  `order_no` varchar(50) DEFAULT NULL COMMENT '商户订单编号',
  `user_id` bigint DEFAULT NULL COMMENT '用户id',
  `product_id` bigint DEFAULT NULL COMMENT '支付产品id',
  `total_fee` int DEFAULT NULL COMMENT '订单金额(分)',
  `code_url` varchar(50) DEFAULT NULL COMMENT '订单二维码连接',
  `order_status` varchar(10) DEFAULT NULL COMMENT '订单状态',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `payment_type` varchar(20) DEFAULT NULL COMMENT '支付方式',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;


DROP TABLE IF EXISTS `t_payment_info`;

CREATE TABLE `t_payment_info` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT COMMENT '支付记录id',
  `order_no` varchar(50) DEFAULT NULL COMMENT '商户订单编号',
  `transaction_id` varchar(50) DEFAULT NULL COMMENT '支付系统交易编号',
  `payment_type` varchar(20) DEFAULT NULL COMMENT '支付类型',
  `trade_type` varchar(20) DEFAULT NULL COMMENT '交易类型',
  `trade_state` varchar(50) DEFAULT NULL COMMENT '交易状态',
  `payer_total` int DEFAULT NULL COMMENT '支付金额(分)',
  `content` text COMMENT '通知参数',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;


DROP TABLE IF EXISTS `t_product`;

CREATE TABLE `t_product` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '商Bid',
  `title` varchar(20) DEFAULT NULL COMMENT '商品名称',
  `price` int DEFAULT NULL COMMENT '价格(分)',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;


DROP TABLE IF EXISTS `t_refund_info`;

CREATE TABLE `t_refund_info` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT COMMENT '款单id',
  `order_no` varchar(50) DEFAULT NULL COMMENT '商户订单编号',
  `refund_no` varchar(50) DEFAULT NULL COMMENT '商户退款单编号',
  `refund_id` varchar(50) DEFAULT NULL COMMENT '支付系统退款单号',
  `total_fee` int DEFAULT NULL COMMENT '原订单金额(分)',
  `refund` int DEFAULT NULL COMMENT '退款金额(分)',
  `reason` varchar(50) DEFAULT NULL COMMENT '退款原因',
  `refund_status` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '退款状态',
  `content_return` text COMMENT '申请退款返回参数',
  `content_notify` text COMMENT '退款结果通知参数',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

2、项目配置

1、配置mp

package com.manster.pay.config;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;

/**
 * @Author manster
 * @Date 2022/6/4
 **/
@Configuration
@MapperScan("com.manster.pay.mapper") //持久层扫描
@EnableTransactionManagement //启用事务管理
public class MybatisPlusConfig {
}

2、配置swagger

package com.manster.pay.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

/**
 * @Author manster
 * @Date 2022/6/3
 **/
@Configuration
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket docket(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(new ApiInfoBuilder().title("支付宝支付接口文档").build());
    }

}

3、配置文件

server:
  port: 8090 #服务端口
spring:
  application:
    name: payment # 应用名称
  jackson: #json时间格式
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
  datasource: #mysql数据库连接
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/payment_demo?serverTimezone=GMT%2B8&characterEncoding=utf-8
    username: root
    password: 123456
mybatis-plus:
  configuration: #sql日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:com/manster/pay/mapper/xml/*.xml

3、实体类

公共父类

@Data
public class BaseEntity {

    @TableId(value = "id", type = IdType.AUTO)
    private String id;

    private Date createTime;

    private Date updateTime;

}

订单实体类

 **/
@Data
@TableName("t_order_info")
public class OrderInfo extends BaseEntity {

    private String title;//订单标题

    private String orderNo;//商户订单编号

    private Long userId;//用户id

    private Long productId;//支付产品id

    private Integer totalFee;//订单金额(分)

    private String codeUrl;//订单二维码连接

    private String orderStatus;//订单状态
    
    private String paymentType;//支付类型
    
}

支付实体类

@Data
@TableName("t_payment_info")
public class PaymentInfo extends BaseEntity {

    private String orderNo;//商户订单编号

    private String transactionId;//支付系统交易编号

    private String paymentType;//支付类型

    private String tradeType;//交易类型

    private String tradeState;//交易状态

    private Integer payerTotal;//支付金额(分)

    private String content;//通知参数

}

商品实体类

@Data
@TableName("t_product")
public class Product extends BaseEntity {

    private String title;//商品名称

    private Integer price;//价格(分)

}

退款实体类

@Data
@TableName("t_refund_info")
public class RefundInfo extends BaseEntity {

    private String orderNo;//商户订单编号

    private String refundNo;//商户退款单编号

    private String refundId;//支付系统退款单号

    private Integer totalFee;//原订单金额(分)

    private Integer refund;//退款金额(分)

    private String reason;//退款原因

    private String refundStatus;//退款状态

    private String contentReturn;//申请退款返回参数

    private String contentNotify;//退款结果通知参数

}

4、mapper层

首先我们创建 mapper 包，根据每一个实体建立对应的 mapper 接口

package com.manster.pay.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.manster.pay.entity.OrderInfo;

/**
 * @Author manster
 * @Date 2022/6/4
 **/
public interface OrderInfoMapper extends BaseMapper<OrderInfo> {
}

然后我们在 mapper 包下创建 xml 包，并在 xml 包下创建 mapper 对应的 xml 文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.manster.pay.mapper.OrderInfoMapper">


</mapper>

5、service层

首先我们创建 service 包，根据每一个实体建立对应的 service 接口

package com.manster.pay.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.manster.pay.entity.OrderInfo;

/**
 * @Author manster
 * @Date 2022/6/4
 **/
public interface OrderInfoService extends IService<OrderInfo> {
}

然后我们在 service 包下创建 impl 包，并在 impl 包下创建 service 对应的 serviceImpl 文件

package com.manster.pay.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.manster.pay.entity.OrderInfo;
import com.manster.pay.mapper.OrderInfoMapper;
import com.manster.pay.service.OrderInfoService;
import lombok.Data;

/**
 * @Author manster
 * @Date 2022/6/4
 **/
@Data
public class OrderInfoServiceImpl extends ServiceImpl<OrderInfoMapper, OrderInfo> implements OrderInfoService {
}

6、测试

最后我们创建公共的实体返回类型

package com.manster.pay.util;

import lombok.Data;
import lombok.experimental.Accessors;

import java.util.HashMap;
import java.util.Map;

/**
 * @Author manster
 * @Date 2022/6/3
 **/
@Data
@Accessors(chain = true)
public class R {

    private Integer code;
    private String message;
    private Map<String, Object> data = new HashMap<>();
    public static R ok(){
        R r = new R();
        r.setCode(0);
        r.setMessage("成功");
        return r;
    }
    public static R error(){
        R r = new R();
        r.setCode(-1);
        r.setMessage("失败");
        return r;
    }
    public R data(String key, Object value){
        this.data.put(key, value);
        return this;
    }

}

并创建对应的 controller 进行访问配置

package com.manster.pay.controller;

import com.manster.pay.entity.Product;
import com.manster.pay.service.ProductService;
import com.manster.pay.util.R;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.Date;
import java.util.List;

/**
 * @Author manster
 * @Date 2022/6/3
 **/
@Api(tags = "商品管理")
@RestController
@RequestMapping("/api/product")
@CrossOrigin //跨域
public class ProductController {

    @Resource
    private ProductService productService;

    @ApiOperation("测试接口")
    @GetMapping("/test")
    public R test(){
        return R.ok().data("message", "hello").data("now", new Date());
    }

    @ApiOperation("获取商品列表")
    @GetMapping("/list")
    public R list(){
        List<Product> list = productService.list();
        return R.ok().data("productList", list);
    }

}

此时访问 http://localhost:8090/swagger-ui.html#/ 即可点击请求接口获取数据

整体项目结构

2、搭建前端

直接下载项目demo https://gitee.com/manster1231

下载依赖

npm install

运行项目

npn run serve

上一篇 SpringBoot + Vue 结合支付宝支付（1）-- 准备工作

下一篇 SpringBoot + Vue 结合支付宝支付（3）–调用api

manster1231
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot+Vue支付宝沙箱支付
06-16
SpringBoot+Vue支付宝沙箱支付
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
01-21
1. 什么是支付宝接口（沙箱环境）？ 记录时间：2020年10月15日3:55 现如今，手机支付已相当普遍，而作为开发人员应该对手机支付操作有所了解。而支付宝接口是支付宝提供的一个接口，用来对接软件应用程序在进行金钱交易使用。然后对于编程爱好者而言，想学习这一点就有点难，因为要想使用支付宝接口，必须前提是使用软件应用程序，软件应用程序需要向支付宝申请，提交一系列资料，这一点是实现不了的。这就对开发者增加了一定的难度，因为产品没有上线，然后需要对接支付宝接口就是很大的问题，所以出现了沙箱环境，具有虚拟的用户和管理员账户，进行实验测试是否对接成功。接下来就根据我的经验，简单的介绍一下我的使用
基于SpringBoot实现扫码支付.rar
02-02
众多的App或Web网站，一个二维码扫码支付功能是必备 的，那么如何实现支付功能呢？这里有详细的教程包括代码！
2024年最新版 springboot+vue整合支付宝沙箱支付功能，一步一步带您实现完整的支付宝支付功能
最新发布
weixin_52536274的博客
01-14 6123
本文介绍了如何使用Springboot与Vue整合支付宝沙箱支付功能，知识点含有内网穿透等，详细的与您一同实现支付功能！如遇到问题可以在评论区留言1
Springboot+MyBatisPlus+Mysql+vue实现支付宝支付
qq_37400096的博客
10-04 3686
本篇通过使用Springboot+MybatisPlus+Mysql+vue实现支付宝网页支付，下单，下单通知，查询订单，关闭订单，退款等功能，前端使用单页面的Vue+elementui+axiso发送请求后台。
node+vue实现支付宝支付沙箱demo完整版.zip
03-02
支付宝沙箱支付前后端独立开来,单独的.可以直接移植到你的项目中,非常方便.完整版的独立demo.正式只需要修改配置即可 免积分下载地址:https://download.lllomh.com/cliect/#/product/J302659722615829
springboot2.x+vue3.x整合支付宝支付
05-31
基于springboot2.x和vue3.x整合开发的支付宝支付功能，实现了支付宝中的当面付和网站支付以及退款
一个基于SpringBoot2+Vue+Redis的企业级聚合支付系统，可二次开发接私活！
纯洁的微笑
01-18 254
项目介绍Jeepay是一套适合互联网企业使用的开源支付系统，支持多渠道服务商和普通商户模式。已对接微信支付，支付宝，云闪付官方接口，支持聚合码支付。Jeepay使用Spring Boot和...
Vue2和SpringBoot实现支付宝二维码支付
qq_56921846的博客
08-03 942
在这个API中，我们注入了AlipayService，并定义了一个payCallback()方法，该方法接收一个HttpServletRequest对象作为请求。在这个API中，我们注入了AlipayService，并定义了一个pay()方法，该方法接收一个PayRequestDto对象作为请求体。在这个页面中，我们添加了一个div元素，用于加载Vue.js应用程序和支付组件。在这个组件中，我们使用qrcode.vue来生成支付宝支付二维码，并使用axios来发送支付请求。
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...
Java-SSM+SpringBoot+Vue-elment-ui-大学生志愿者管理系统-参考
06-24
内容概要：该系统采用JavaEE企业级开发，SSM+SpringBoot+Vue-elment-ui来实现，数据库使用mysql8.0，采用集成开发工具IDEA进行开发。其主要是针对管理员、大学生、大学生志愿者三个不同用户角色的功能权限的划分和...
带进度条文件上传springboot+vue+axios+mint-ui
07-27
springboot开发服务后台，提供文件上传接口，vue.js搭建前端项目，mint-ui做为UI界面，axios与后端服务接口交互，axios可实时监控文件上传进度，通过mint-ui实时展示当前文件上传进度
基于SpringBoot+Vue+sa-token前后端分离的科研项目管理平台源代码
06-16
基于SpringBoot+Vue+sa-token前后端分离的科研项目管理平台 前端采用Vue、Element UI 后端采用Spring Boot、Redis & Jwt。 Sa-Token：一个轻量级 java 权限认证框架，让鉴权变得简单、优雅！ 权限认证使用Jwt，支持...
推荐七个略火的 SpringBoot+Vue 项目
热门推荐
江南一点雨的专栏
04-15 2万+
前后端分离已经在慢慢走进各公司的技术栈，根据松哥了解到的消息，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，松哥也非常建议大家学习一下前后端分离开发，以免在公司干了两三年，SSH 框架用的滚瓜烂熟，出来却发现自己依然没有任何优势！ 其实前后端分离本身并不难，后段提供接口，前端做数据展示，关键是这种思想。很多人做惯了前后端不分的开发，在做前后端分离的时候，很容易带进来一...
Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码
无解的菜鸟晖 的博客
05-27 8948
Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码。在表格点击“支付”按钮，跳出支付弹窗，有微信支付和支付宝支付的两种方式按钮选择，当点击某个方式会跳出相应的二维码，并设置定时器去查询支付状态是否支付成功。
vue支付宝pc支付的扫码支付和跳转支付两种支付方式
姚辉乾
05-12 1万+
支付宝的PC支付 分为两种 前置模式支付 和 跳转模式支付 前置模式和跳转模式，需要后台在支付宝的api中配置（无关前端） 跳转模式。 前置模式是将二维码前置到商户 的订单确认页的模式。需要商户在 自己的页面中以 iframe 方式请求 支付宝页面。具体分为以下几种： 0：订单码-简约前置模式，对应 iframe 宽度不能小于600px，高度不能小于300px； 1：订单码-前置模式，对应iframe 宽度不能小于 300px，高度不能小于600px； 3：订单码-迷你前置模式，对应...
vue项目生成二维码功能使用QRCode（接入微信和支付宝支付接口）
黄哈哈的博客
08-09 1574
微信： 需求：微信支付 跳出弹框 二维码 下载二维码生成器 npm i qrcodejs2 --save
vue2/3 - 【超详细】最新网站接入使用支付宝支付功能，点击支付跳转新页面后生成订单及支付二维码，实现支付宝在线付款详细的教程（整个支付的完整配置及支付流程，一键复制源码开箱即用）！
高级前端工程师
05-19 4774
vue支付宝付款，vue支付宝支付，vue如何实现支付宝在线付款，vue网页pc项目接入支付宝支付，vue支付宝支付详细教程，vue2支付宝在线支付的详细示例代码，vue如何做支付宝付款，vue怎么实现支付宝的付款功能，vue调用支付宝进行付款支付，vue PC项目实现 支付宝支付，vue h5页面调用支付宝支付，vue页面唤起支付宝支付功能，vue支付宝支付跳转到新页面，vue如何跳转新开一页展示支付宝二维码支付，vue怎么新开页面进行支付宝在线支付，vue新页面支付宝支付功能，前端vue支付宝支付教程，
springboot+vue前后分离项目实战-在线教育系统源码
09-10
通过使用springboot的优秀特性，可以快速搭建项目的基础框架，并集成常用的开发组件，如Spring MVC、Spring Data JPA等。 而在前端方面，可以使用vue来开发用户界面。vue是一个轻量级的JavaScript框架，可以帮助...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值