vue项目的增删改查

最新推荐文章于 2023-07-22 16:50:54 发布
最新推荐文章于 2023-07-22 16:50:54 发布
阅读量131 收藏
点赞数 1
分类专栏： 增删改查 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46079080/article/details/120541317
版权

vue项目的增删改查

增加

 data(){
            return {
addForm: {
                    inWarehouseNumber:this.$route.query.inWarehouseNumber,
                    contractNumber:'',
                    rawSerial:'',
                    rawName:'',
                    rawSpecification:'',
                    rawUnit:'',
                    rawShouldAccount:'',
                    rawArrivedAccount:'',
                    warehouseName:'',
                    contractDetailPrice:'',
                    inWarehouseDetailBatch:'',
                    inWarehouseDetailId:''
                },
                }
                }


 methods:{
//新增取消按钮
            cancelBtn(){
                this.addFormVisible = false;
                this.$refs.addForm.resetFields();
            },
            //新增（新增弹出框中的确认按钮）
            addSureBtn(){
                this.$axios.post(this.$api.InventoryManagement.addCaigouDetailTableData,this.addForm).then((res)=>{
                    if (res.data.code == 200){
                        this.getCaigouDetailTableData();
                        this.$nextTick(()=>{
                            this.$refs.addForm.resetFields();
                        });
                        this.addFormVisible = false;
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                    }else {
                        this.$message.error('新增失败！');
                    }
                })
            },
            }

修改

 data(){
            return {
 //修改表单
                editFormVisible: false,
                editForm: {
                    inWarehouseDetailId:'',
                    contractNumber:'',
                    rawSerial:'',
                    rawName:'',
                    rawSpecification:'',
                    rawUnit:'',
                    rawShouldAccount:'',
                    rawArrivedAccount:'',
                    warehouseName:'',
                    contractDetailPrice:'',
                    inWarehouseNumber:'',
                    inWarehouseDetailBatch:''
                },
                }
                }


 methods:{
 //修改（将表格行的数据获取到修改表单中）
            editBtn(obj){
                this.editFormVisible = true;
                this.editForm.inWarehouseDetailId = obj.inWarehouseDetailId;
                this.editForm.contractNumber = obj.contractNumber;
                this.editForm.rawSerial = obj.rawSerial;
                this.editForm.rawName = obj.rawName;
                this.editForm.rawSpecification = obj.rawSpecification;
                this.editForm.rawUnit = obj.rawUnit;
                this.editForm.rawShouldAccount = obj.rawShouldAccount;
                this.editForm.rawArrivedAccount = obj.rawArrivedAccount
            },
            //修改弹出框中的确认按钮
            editSureBtn(){
                this.$axios.post(this.$api.InventoryManagement.editCaigouDetailTableData,this.editForm).then((res)=>{
                    if (res.data.code == 200){
                        this.getCaigouDetailTableData();
                        this.editFormVisible = false;
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                    }else {
                        this.$message.error('修改失败！');
                    }
                })
            },
            }

删除和查询

//删除
            delBtn(id){
                this.$axios.post(this.$api.InventoryManagement.delCaigouDetailTableData,this.$qs.stringify({id:id})).then((res)=>{
                    if (res.data.code == 200){
                        this.$message({
                            message:res.data.message,
                            type:'success'
                        });
                        this.getCaigouDetailTableData()
                    }else {
                        this.$message.error('删除失败！')
                    }
                })
            },
//查询
            queryBtn(){
                this.$axios.get(this.$api.InventoryManagement.queryCaigouDetailTableData,{
                    params:{
                        limit:this.limit,
                        page:this.currentPage,
                        rawSerial:this.searchForm.rawSerial,
                        rawName:this.searchForm.rawName,
                        inWarehouseNumber:this.$route.query.inWarehouseNumber,
                    }
                }).then((res)=>{
                    if (res.data.code == 200){
                        this.tableData = res.data.data;
                    }else {
                        this.$message(res.data.msg);
                    }
                })
            },

所有代码

<template>
    <div class="myContainer">
        <!--            查询栏-->
        <div class="searchBox">
            <!--                手动输入的input统一放在第一排
                                下拉框、时间选择器在第二排-->
            <el-form :model="searchForm" :inline="true" ref="searchForm">
                <el-form-item prop="rawSerial">
                    <input type="text" placeholder="请输入物资编号" v-model="searchForm.rawSerial">
                </el-form-item>
                <el-form-item prop="rawName">
                    <input type="text" placeholder="请输入品名" v-model="searchForm.rawName">
                </el-form-item>
            </el-form>

            <div class="btnBox">
                <button type="button" class="searchBtn" @click="queryBtn"><i class="el-icon-search"></i>搜索</button>
                <button type="button" class="resetBtn" @click="resetBtn('searchForm')"><i class="el-icon-refresh-right"></i>重置</button>
            </div>
        </div>
        <!--            表格-->
        <el-card>
            <!--                表格名称-->
            <div slot="header" class="Title">
                <span>采购入库明细表</span>
            </div>
            <!--                工具栏-->
            <div class="tools">
                <button type="button" class="batchDelBtn">批量删除</button>
                <button type="button" class="addBtn" @click="addFormVisible = true"><i class="el-icon-plus"></i>新增</button>
                <div class="backBtn" @click="goBack"><i class="el-icon-back"></i></div>
            </div>
            <!--                表格-->
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="contractNumber"
                        label="合同号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="rawSerial"
                        label="物资编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rawName"
                        label="品名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rawSpecification"
                        label="规格"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rawUnit"
                        label="单位"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rawShouldAccount"
                        label="应到数量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="rawArrivedAccount"
                        label="实到数量"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <span class="editBtn" @click="editBtn(scope.row)"><i class="el-icon-edit"></i>修改</span>
                        <span class="delBtn" @click="delBtn(scope.row.inWarehouseDetailId)"><i class="el-icon-delete"></i>删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <!--            分页-->
            <div class="pageBox">
                <el-pagination
                        background
                        @next-click="nextPage"
                        @prev-click="prevPage"
                        @current-change="handleCurrentChange"
                        :current-page=currentPage
                        :page-size=limit
                        layout="total, prev, pager, next, jumper"
                        :total=totalSize>
                </el-pagination>
            </div>
        </el-card>

        <!--        弹出框-->
        <!--        增加弹出框-->
        <el-dialog title="新增信息" :visible.sync="addFormVisible" width="60%">
            <el-form :model="addForm" :rules="rules" ref="addForm" :inline="true">
                <el-form-item label="合同号" :label-width="addFormLabelWidth" prop="contractNumber">
                    <el-input v-model="addForm.contractNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物资编号" :label-width="addFormLabelWidth" prop="rawSerial">
                    <el-input v-model="addForm.rawSerial" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="品名" :label-width="addFormLabelWidth" prop="rawName">
                    <el-input v-model="addForm.rawName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="规格" :label-width="addFormLabelWidth" prop="rawSpecification">
                    <el-input v-model="addForm.rawSpecification" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位" :label-width="addFormLabelWidth" prop="rawUnit">
                    <el-input v-model="addForm.rawUnit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="应到数量" :label-width="addFormLabelWidth" prop="rawShouldAccount">
                    <el-input v-model="addForm.rawShouldAccount" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="实到数量" :label-width="addFormLabelWidth" prop="rawArrivedAccount">
                    <el-input v-model="addForm.rawArrivedAccount" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelBtn">取 消</el-button>
                <el-button type="primary" @click="addSureBtn">确 定</el-button>
            </div>
        </el-dialog>
        <!--        修改弹出框-->
        <el-dialog title="修改信息" :visible.sync="editFormVisible" width="60%">
            <el-form :model="editForm" :inline="true">
                <el-form-item label="合同号" :label-width="editFormLabelWidth" prop="ContractNo">
                    <el-input v-model="editForm.contractNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物资编号" :label-width="editFormLabelWidth" prop="rawSerial">
                    <el-input v-model="editForm.rawSerial" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="品名" :label-width="editFormLabelWidth">
                    <el-select v-model="editForm.rawName" placeholder="请选择商品名称">
                        <el-option label="电路板" value="电路板"></el-option>
                        <el-option label="螺丝" value="螺丝"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="规格" :label-width="editFormLabelWidth">
                    <el-input v-model="editForm.rawSpecification" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位" :label-width="editFormLabelWidth">
                    <el-select v-model="editForm.rawUnit" placeholder="请选择商品单位">
                        <el-option label="块" value="块"></el-option>
                        <el-option label="个" value="个"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应到数量" :label-width="editFormLabelWidth">
                    <el-input v-model="editForm.rawShouldAccount" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="实到数量" :label-width="editFormLabelWidth">
                    <el-input v-model="editForm.rawArrivedAccount" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editSureBtn">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "CaigouDetailTable",
        data(){
            return {
                //接收采购入库表的入库单号
                inWarehouseNumber:this.$route.query.inWarehouseNumber,
                tableData: [],
                rules:{
                    contractNumber:[{required:true, message:'请输入合同号', trigger:'blur'}],
                    rawSerial:[{required:true, message:'请输入物资编号', trigger:'blur'}],
                    rawName:[{required:true, message:'请输入品名', trigger:'blur'}],
                    rawSpecification:[{required:true, message:'请输入规格', trigger:'blur'}],
                    rawUnit:[{required:true, message:'请输入单位', trigger:'blur'}],
                    rawShouldAccount:[{required:true, message:'请输入应到数量', trigger:'blur'}],
                    rawArrivedAccount:[{required:true, message:'请输入实到数量', trigger:'blur'}]
                },
                //分页
                currentPage:1,
                limit:5,
                totalSize:0,
                //搜索表单
                searchForm:{
                    // contractNumber:'',
                    rawSerial:'',
                    rawName:'',
                },
                searchFormLabelWidth:'120px',
                //增加表单
                addFormVisible: false,
                addForm: {
                    inWarehouseNumber:this.$route.query.inWarehouseNumber,
                    contractNumber:'',
                    rawSerial:'',
                    rawName:'',
                    rawSpecification:'',
                    rawUnit:'',
                    rawShouldAccount:'',
                    rawArrivedAccount:'',
                    warehouseName:'',
                    contractDetailPrice:'',
                    inWarehouseDetailBatch:'',
                    inWarehouseDetailId:''
                },
                addFormLabelWidth: '120px',
                //修改表单
                editFormVisible: false,
                editForm: {
                    inWarehouseDetailId:'',
                    contractNumber:'',
                    rawSerial:'',
                    rawName:'',
                    rawSpecification:'',
                    rawUnit:'',
                    rawShouldAccount:'',
                    rawArrivedAccount:'',
                    warehouseName:'',
                    contractDetailPrice:'',
                    inWarehouseNumber:'',
                    inWarehouseDetailBatch:''
                },
                editFormLabelWidth: '120px',
            }
        },
        created(){
            this.getCaigouDetailTableData()
        },
        methods:{
            //下一页
            nextPage(){
                this.currentPage++
            },
            //上一页
            prevPage(){
                this.currentPage--
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.getCaigouDetailTableData();
            },
            //获取采购入库明细表的数据
            getCaigouDetailTableData(){
                this.$axios.get(this.$api.InventoryManagement.getCaigouDetailTableData,{
                    params:{
                        inWarehouseNumber:this.$route.query.inWarehouseNumber,
                        limit:this.limit,
                        page:this.currentPage,
                    }
                }).then((res)=>{
                    if(res.data.code == 200){
                        this.tableData = res.data.data;
                        this.totalSize = res.data.count;
                    }else {
                        this.$message(res.data.msg);
                    }
                }).catch((res)=>{
                    this.$message.error('数据库出错！');
                })
            },
            //删除按钮
            delBtn(id){
                this.$axios.post(this.$api.InventoryManagement.delCaigouDetailTableData,this.$qs.stringify({id:id})).then((res)=>{
                    if (res.data.code == 200){
                        this.$message({
                            message:res.data.message,
                            type:'success'
                        });
                        this.getCaigouDetailTableData()
                    }else {
                        this.$message.error('删除失败！')
                    }
                })
            },
            //新增取消按钮
            cancelBtn(){
                this.addFormVisible = false;
                this.$refs.addForm.resetFields();
            },
            //新增（新增弹出框中的确认按钮）
            addSureBtn(){
                this.$axios.post(this.$api.InventoryManagement.addCaigouDetailTableData,this.addForm).then((res)=>{
                    if (res.data.code == 200){
                        this.getCaigouDetailTableData();
                        this.$nextTick(()=>{
                            this.$refs.addForm.resetFields();
                        });
                        this.addFormVisible = false;
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                    }else {
                        this.$message.error('新增失败！');
                    }
                })
            },
            //修改（将表格行的数据获取到修改表单中）
            editBtn(obj){
                this.editFormVisible = true;
                this.editForm.inWarehouseDetailId = obj.inWarehouseDetailId;
                this.editForm.contractNumber = obj.contractNumber;
                this.editForm.rawSerial = obj.rawSerial;
                this.editForm.rawName = obj.rawName;
                this.editForm.rawSpecification = obj.rawSpecification;
                this.editForm.rawUnit = obj.rawUnit;
                this.editForm.rawShouldAccount = obj.rawShouldAccount;
                this.editForm.rawArrivedAccount = obj.rawArrivedAccount
            },
            //修改弹出框中的确认按钮
            editSureBtn(){
                this.$axios.post(this.$api.InventoryManagement.editCaigouDetailTableData,this.editForm).then((res)=>{
                    if (res.data.code == 200){
                        this.getCaigouDetailTableData();
                        this.editFormVisible = false;
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                    }else {
                        this.$message.error('修改失败！');
                    }
                })
            },
            //查询
            queryBtn(){
                this.$axios.get(this.$api.InventoryManagement.queryCaigouDetailTableData,{
                    params:{
                        limit:this.limit,
                        page:this.currentPage,
                        rawSerial:this.searchForm.rawSerial,
                        rawName:this.searchForm.rawName,
                        inWarehouseNumber:this.$route.query.inWarehouseNumber,
                    }
                }).then((res)=>{
                    if (res.data.code == 200){
                        this.tableData = res.data.data;
                    }else {
                        this.$message(res.data.msg);
                    }
                })
            },
            //重置
            resetBtn(searchForm){
                this.$refs[searchForm].resetFields();
                this.getCaigouDetailTableData();
            },
            goBack(){
                this.$router.push('/home/CaiGouReceiptTable')
            }
        }
    }
</script>

<style scoped>
    .fanhui{
        float: right;
        background-color: #7A8CFE;
    }
    .fanhui i{
        color: white;
    }
</style>
IDIOT?LIFE
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue后台管理项目增删改查规范代码
08-24
vue后台管理项目增删改查规范代码
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
VUE通用后台管理系统（三）页面增删查改
最新发布
qq_45600228的博客
07-22 1989
VUE通用后台管理系统（三）页面增删查改
用vue实现增删改查
m0_64344470的博客
05-08 2858
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
vue增删改查
weixin_49393290的博客
10-09 5338
大家好，我是青豆恩，今天我给大家讲解一下前端 vue做增删改查。它使用到的技术栈是vue+element+es6 我们先来看一下页面，点击查询可以查询到想要的信息 点击新增会有一个弹出框，点击修改也是，点击查看就会 有一个不可编辑的弹出框。点击删除可以删除一条信息。 我们使用的编辑器是vscode，文件代码分为三部分。 <template></template> <script> export default{ } </script> 我们重点关注<t
Vs Code Vue实现增删改查
01-07
本教程将重点讲解如何使用Visual Studio Code（简称Vs Code）这个强大的代码编辑器来实现Vue项目中的增删改查功能。首先，我们来看看Vue的基本概念。 Vue.js是尤雨溪开发的一个渐进式JavaScript框架，它具有轻量级...
vue的增删改查
11-19
在Web开发中，"增删改查"（CRUD）是基本操作，对于任何数据驱动的应用来说都是核心功能。Vue.js 提供了丰富的特性来支持这些操作，使得在Vue项目中实现CRUD变得简单高效。 1. **创建（Create）**： 在Vue中创建新...
vue实现表格数据的增删改查
08-30
Vue 实现表格数据的增删改查是指在 Vue 项目中实现对表格数据的增删改查操作，包括展示数据、增加数据、删除数据和修改数据四个功能。本文将详细介绍 Vue 实现表格数据的增删改查，主要包括数据展示、增加和删除功能...
vue文件源代码增删改查
07-27
在这个"vue文件源代码增删改查"的主题中，我们将深入探讨如何在Vue.js项目中实现CRUD（创建、读取、更新和删除）操作，结合SpringBoot后端服务和数据库交互。 首先，让我们从Vue.js的角度出发。在Vue应用中，CRUD...
vue 动态添加form表单
weixin_38673922的博客
04-18 6327
一、效果图 二、代码块 <template> <!-- 动态添加form表单--> <div class="hello"> <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" /> <!-- 动态表单增加 --> <div v-for="(item,index) in list"
127.(前端)富文本的使用——vue使用超文本
m0_63953077的博客
11-03 604
vue使用超文本
Vue对数据的增删改
weixin_47174945的博客
09-26 640
Vue对数据的增删改 <!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> table
保姆级教学，让你用VUE来轻松实现简单的增删改查操作，不来看看吗
qq_52340302的博客
02-20 6406
文章目录1. HTML部分2. CSS部分3. JS部分源码 因为我是用vue来练练手，所以我并没有采用Element去实现，如果赶时间或者追求美观的各位推荐使用element。 下面直接就开门见山了，html和css部分就不多做介绍了，简易版本的增删改查也没有太过复杂的样式，js我会做很详细的讲解。 可分为三个部分：搜索和添加部分，编辑框部分(添加用户和修改共用)，列表部分。编辑框用v-show来决定显隐。 下面是简单的实现图： 1. HTML部分 <div class="add_info"&g
vue.js+Element 增删改查
janessssss的博客
11-22 3万+
新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的css以及js<link rel="stylesheet"
使用 vue2.x + ElementUI 快速搭建一个后台 增删改查 管理界面
热门推荐
IT小村
02-01 6万+
一、前言 CRUD 自从使用了 vue2.0，就不想过多地去使用其他的含 JS 代码的前端框架如 BootStrap4、jQuery 等，想全程使用 vue 去搭建前端界面，因为 vue 的生态系统十分繁荣，ui 方面的库有 element-ui、iview 等。 这次①使用了vue搭建前端页面架构，绑定数据，②使用element-ui修饰界面。 二、搭建项目架构 具体可以去看之前的...
用vue实现简单的增删改查
qq_39288987的博客
10-24 7080
封装一个增删改查的基本操作，在vue项目的src文件夹下再建一个文件夹untils,并在它下面新建一个js文件,名为db.js（可随便取名） /** * 获取所有的数据 */ export function getAllpeople () { var people = [] if (localStorage.getItem('people')) { people = JSON....
vue学习-增删改查
aresblank的博客
12-01 3492
1、axios配置、封装。 2、加载使用element-ui 3、增删改查示例
Vue页面实现简单的增删改查
小道仙的后宫
08-16 1万+
目的：用vue实现简单的增删该查 注：我自己测试的后台是java+mysql。 这里提供前端页面。 只需要连接你的后台url就好了 需要准备 vue.js 和 bootstrap.css 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title...
知识点14--vue-axios与element ui配合示例
别人笑我太疯癫，我笑他人看不穿。
07-16 835
前面几篇知识点已经被大家介绍了vue的element和axios，但是只是在各自介绍时顺带着有两个demo，并不是很全面，本篇使用两个模块一起开发几个功能demo，帮助大家在理解上更容易一点，项目沿用知识点13在知识点13的项目中，我们将前后端分离模块式开发，并使用两者展现了一个列表，下面我们在当前列表页面下，再扩展几个功能demo我们使用element的对话框功能实现添加，其实就是bootstrap的模态框第一步：使用我们前面知识点说过的普通布局组件以及在合适的地方配合按钮组件准备一个添加用户的按钮，并在
springboot加vue项目增删改查逻辑
06-01
在一个基于 SpringBoot 和 Vue 的项目中，实现增删改查的逻辑可以分为以下几个步骤： 1. 查询数据：在 SpringBoot 中，可以使用 Spring Data JPA 来访问数据库，并通过 JPA Repository 接口定义方法来实现查询数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值