vue进阶04-vue组件库iview

最新推荐文章于 2024-07-04 19:00:34 发布
最新推荐文章于 2024-07-04 19:00:34 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaomin416100569/article/details/102918130
版权

文章目录

iview简介

View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于
PC 界面的中后台产品。
该项目即为原先的 iView，从 2019 年 10 月起正式更名为 View UI，并使用全新的 Logo 。iView 作者将在新仓库（https://github.com/view-design/ViewUI）继续开发 iView 4.0 和后续版本，以及维护工作。原仓库 iView 作者不再继续提交内容。

iview快速上手

iview安装

cnpm install view-design --save

安装viewui loader

npm i iview-loader --save-dev

修改webpack.config.js(给出了iview修改部分)

{
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-loader',
                    options: {
                        
                    }
                },
                {
                    loader: 'iview-loader',
                    options: {
                        prefix: false
                    }
                }
            ]
}
,
{
    test:/(png|jpg|svg|woff|woff2|ttf|gif)$/,
    use: {
        loader: "file-loader",
        options: {
            name: "[name].[hash].[ext]"
        }
    }

}

注意iview中有些许文件svg和woff2和ttf等需要通过file-loader拷贝到dist目录

main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
//统一设置认证头
axios.interceptors.request.use(config=>{
    config.headers.common["Authorization"]="eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwidWlkIjoiMSIsInVzZXJuYW1lIjoiYWRtaW4iLCJ0eXBlIjoiMCIsInN5c3RlbSI6MSwidXNlclR5cGUiOjEsImV4cCI6MTU3Mzg3NTAzMX0.kBnV0g3Fy7OS9XDEkD-kL0B_-2FvCVqhzg49VtvO5MGeFgwrLhK7XLSJg4deRCdrY3aIGoy_nOjKwXspx1akZAuBZFhuO8p4zI2faDhb6KjeP-PEVV4SOW4fsd8JgNd7D-mggRo7hVVFjB1lOgcXATLOtm0ZEdODzBZctei-HxQ"
    return config;
},error=>{
    return Promise.reject(error)
})

new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

iview组件

布局

布局参考(https://www.iviewui.com/components/layout)

菜单数据

curl http://192.168.1.35/ums/auth/getUserRelateDataByUrl/management.gvtdev.com
{"success":true,"code":"200","message":"成功","time":1572940293644,"data":
{"user":{"id":1,"name":"管理员","userName":"admin","state":1,"system":1,"userType":1,"code":null,"remark":null,"timezoneDTO":null},"tenant":null,"oem":{"domain":null,"domainIcpNo":null,"companyLogoUrl":null,"loginUrl":null,"loginBackUrl":null,"startUrl":null,"appUrl":null},"roles":null,"apps":[{"id":11,"name":"统一管理平台","enName":"ums","code":"ums","appLogo":"group1/M00/00/F8/wKi5SlvhjaSAQZ9JAAF1sEdJZIk74.jpeg","type":"1","bisFunctions":[{"id":55,"code":"ums_app_management","name":"应用管理","enName":null,"sid":"3","uri":"/umsf/#/1","icon":"icon-cargo","allocation":null,"type":"menu","childBisFunction":[{"id":56,"code":"ums_product_management","name":"产品管理","enName":"Product Manager","sid":"3","uri":"/umsf/#/application-manage/product-manage","icon":null,"allocation":null,"type":"menu","childBisFunction":null,"sort":1},{"id":57,"code":"ums_business_function_Management","name":"业务功能管理","enName":null,"sid":"3","uri":"/umsf/#/application-manage/business-function-manage","icon":"icon-client","allocation":null,"type":"menu","childBisFunction":null,"sort":2}],"sort":33},{"id":58,"code":"ums_Module_Management","name":"模块管理","enName":null,"sid":"3","uri":null,"icon":"icon-date","allocation":null,"type":"menu","childBisFunction":[{"id":60,"code":"ums_frontend_system","name":"前端系统","enName":null,"sid":"3","uri":"/umsf/#/module-manage/frontend-system","icon":null,"allocation":null,"type":"menu","childBisFunction":null,"sort":1},{"id":59,"code":"ums_backend_module","name":"后台模块","enName":null,"sid":"3","uri":"/umsf/#/module-manage/background-module","icon":"icon-client","allocation":null,"type":"menu","childBisFunction":null,"sort":2}],"sort":34},{"id":54,"code":"ums_authority_management","name":"权限管理","enName":null,"sid":"3","uri":"/umsf/#/authority-manage","icon":"icon-flock","allocation":null,"type":"menu","childBisFunction":null,"sort":40},{"id":61,"code":"ums_role_management","name":"角色管理","enName":null,"sid":"3","uri":"/umsf/#/platform/role-manage","icon":"icon-market","allocation":null,"type":"menu","childBisFunction":null,"sort":41},{"id":62,"code":"ums_user_management","name":"用户管理","enName":null,"sid":"3","uri":"/umsf/#/user-manage","icon":"icon-member","allocation":null,"type":"menu","childBisFunction":null,"sort":42},{"id":63,"code":"ums_merchant_management","name":"商户管理","enName":null,"sid":"3","uri":null,"icon":"icon-mywork","allocation":null,"type":"menu","childBisFunction":[{"id":201969469861577100,"code":"product-role","name":"产品角色","enName":"product-role","sid":"3","uri":"/umsf/#/product-role/list","icon":null,"allocation":null,"type":"menu","childBisFunction":null,"sort":1},{"id":64,"code":"ums_merchantList","name":"商户列表","enName":null,"sid":"3","uri":"/umsf/#/merchant-manage","icon":null,"allocation":null,"type":"menu","childBisFunction":null,"sort":1}],"sort":43},{"id":264,"code":"synchronous","name":"系统设置","enName":null,"sid":"3","uri":"/umsf/#/settings","icon":null,"allocation":null,"type":"menu","childBisFunction":null,"sort":49}]}],"employee":null,"shops":null,"warehouses":null,"organs":null}}

App.vue中新增布局

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        height:100%
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    /* 注意如果希望布局高度100% 可设置
        index.html
            html body #app{
                height:100%
            }
        .layout{
            height:100%
        }
        .ivu-layout{
            height: 100%;
        }
        */
    .ivu-layout{
        height: 100%;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
<template>
    <div class="layout">
        <Layout>
            <Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed" :style="{maxHeight:'300'}">
                <div style="min-width: 200px;display:flex;">
                <img src="http://47.75.105.17:22124/group1/M00/01/07/wKi5SlvrjQCAANGMAAAR2Ug-7l4909.png" style="margin:0 auto;align-items: center;"/>
                </div>
                <Menu active-name="2-2" theme="dark" width="auto" :class="menuitemClasses" >

                    <Submenu  v-for="m in bisFunctions" v-if="m.childBisFunction!=null && m.childBisFunction.length>0" :name="m.name" @click.native="alert()">
                        <template slot="title">
                            <Icon type="ios-arrow-dropright-circle" />
                            {{m.name}}
                        </template>
                        <MenuItem  v-for="cm in m.childBisFunction" :name="cm.code" to="/userManager">{{cm.name}}</MenuItem>
                    </Submenu>
                    <MenuItem v-for="m in bisFunctions" style="padding-left: 23px"  v-if="m.childBisFunction==null || m.childBisFunction.length==0" :name="m.code" to="/userManager">
                        <!--<template slot="title1">-->
                            <Icon type="ios-arrow-dropright-circle" style="padding-right: 7px" />{{m.name}}
                        <!--</template>-->
                    </MenuItem>


                </Menu>
                <div slot="trigger"></div>
            </Sider>
            <Layout>
                <Header class="layout-header-bar"></Header>
                <Content name="content" :style="{margin: '20px', background: '#fff'}">
                    <!--
                       注意右侧main区就是路由的空间内容
                    -->
                    <router-view></router-view>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import Vue from 'vue';
    import ViewUI from 'view-design';
    import axios from 'axios'
    import 'view-design/dist/styles/iview.css';
    Vue.use(ViewUI);
    export default {
        data () {
            return {
                isCollapsed: false,
                bisFunctions:[]
            };
        }
        ,mounted(){

            var instance = axios.create({
                headers:{
                    "Authorization":"eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwidWlkIjoiMSIsInVzZXJuYW1lIjoiYWRtaW4iLCJ0eXBlIjoiMCIsInN5c3RlbSI6MSwidXNlclR5cGUiOjEsImV4cCI6MTU3Mzg3NTAzMX0.kBnV0g3Fy7OS9XDEkD-kL0B_-2FvCVqhzg49VtvO5MGeFgwrLhK7XLSJg4deRCdrY3aIGoy_nOjKwXspx1akZAuBZFhuO8p4zI2faDhb6KjeP-PEVV4SOW4fsd8JgNd7D-mggRo7hVVFjB1lOgcXATLOtm0ZEdODzBZctei-HxQ"
                }
            });
            instance.get("http://192.168.1.35/ums/auth/getUserRelateDataByUrl/management.gvtdev.com").then(resp=>{
                console.log(resp.data)
                this.bisFunctions=resp.data.data.apps[0].bisFunctions;
            }).catch(error=>{
                Promise.reject(error);
            });
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        }
    }
</script>

最终效果：
在这里插入图片描述

路由

router.js代码:

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserManager from "./UserManager.vue"
Vue.use(VueRouter)
// 这里直接默认导出 new 出来的 router 实例
export default new VueRouter({
    routes: [
        {
            path:"/userManager",
            component:UserManager
        }
    ]
})

UserManager编写增删改查代码

<template>
    <div id="um" style="margin-left:40px">
        <div style="height:20px"></div>
       系统名称： <Input enter-button placeholder="Enter something..." v-model="queryName" style="width: 300px"/>&nbsp;&nbsp;&nbsp; <Button type="primary" @click="query">搜索</Button>
        &nbsp;&nbsp;&nbsp; <Button type="primary" @click="showAddModel=true;">新增前端系统</Button>
        <div style="height:50px"></div>
        <Table border :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="curUpdateRow=row;showUpdateModel=true">编辑</Button>
                <Button type="error" size="small" @click="deleteConfirm(index,row)">删除</Button>
            </template>

        </Table>
        <Page :total="total" show-elevator show-sizer    show-total @on-change="handlePage" @on-page-size-change='handlePageSize' />

        <!--修改对话框-->
        <Modal
                v-model="showUpdateModel"
                title="编辑前端系统"
                @on-ok="updateOk"
                @on-cancel="updateCancel">
            <Form :model="curUpdateRow" :label-width="80">
                <FormItem label="系统名称">
                    <Input v-model="curUpdateRow.name" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem label="URL地址">
                    <Input v-model="curUpdateRow.url" placeholder="Enter something..."></Input>
                </FormItem>
            </Form>
        </Modal>

        <!--修改对话框-->
        <Modal
                v-model="showAddModel"
                title="新增前端系统"
                @on-ok="addOk"
                @on-cancel="addCancel">
            <Form :model="curAddRow" :label-width="80">
                <FormItem label="系统名称">
                    <Input v-model="curAddRow.name" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem label="URL地址">
                    <Input v-model="curAddRow.url" placeholder="Enter something..."></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import axios from "axios"
    export default{
        data () {
            return {
                columns1: [
                    {
                        title: 'id',
                        key: 'id'
                    },
                    {
                        title: '系统名称',
                        key: 'name'
                    },
                    {
                        title: '地址',
                        key: 'url'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data1:[],
                total:0,
                curPage:0,
                pageNum:10,
                queryName:"",
                showUpdateModel:false,
                showAddModel:false,
                curUpdateRow:{name:null,url:null},
                curAddRow:{name:null,url:null}
            }
        },
        mounted(){
            this.query();
        },

        methods:{
            addOk(){
                var cthis=this;
                axios({
                    url:"http://192.168.1.35/ums/frontSystemController/saveOrEdit",
                    method:"post",
                    headers:{
                        "Content-Type": "application/json;charset=UTF-8"
                    },
                    data:this.curAddRow
                }).then(resp=>{
                    if(resp.data.success){
                        cthis.query()
                        cthis.$Message.error({
                            content:"新增成功",
                            duration:1
                        })
                    }
                })
                this.showAddModel=false;
            },
            addCancel(){
                this.showAddModel=true;
            },
            updateOk(){
                axios({
                    url:"http://192.168.1.35/ums/frontSystemController/saveOrEdit",
                    method:"post",
                    headers:{
                        "Content-Type": "application/json;charset=UTF-8"
                    },
                    data:this.curUpdateRow
                })
                this.showUpdateModel=false;
            },
            updateCancel(){
                this.showUpdateModel=true;
            },
            deleteConfirm(index,row){
                var cthis=this;
                this.$Modal.confirm({
                    title:"前端系统",
                    content:"请是否删除该数据，删除将无法恢复",
                    onOk:function(){
                        axios({
                            url:"http://192.168.1.35/ums/frontSystemController/delete",
                            method:"post",
                            headers:{
                                "Content-Type": "application/json;charset=UTF-8"
                            },
                            data:{id:row.id}
                        }).then(resp=>{
                            if(resp.data.success){
                                cthis.query()
                                cthis.$Message.error({
                                    content:"删除成功",
                                    duration:1
                                })
                            }
                        })

                    }
                })

            },
            handlePage(curPage){
                this.curPage=curPage
                this.query();
            },
            handlePageSize(pageNum){
                this.pageNum=pageNum;
                this.query();
            },
            query(){
                var url="http://192.168.1.35/ums/frontSystemController/list/"+this.curPage+"/"+this.pageNum;
                axios({
                    url:url,
                    method:"post",
                    data:{"name":this.queryName},
                    headers:{
                        "Content-Type": "application/json;charset=UTF-8"
                    }
                }).then(res=>{
                        this.data1=res.data.data.rows;
                        this.total=res.data.data.total;
                });
            }
        }
    }
</script>
<style>
    div#um{
        font-size:12px;
    }
</style>

最终效果（点击左侧菜单）
在这里插入图片描述
其他组件（table 分页 表单）参考官网

liaomin416100569
关注
专栏目录
iView组件Axure组件库
01-16
依据 iView3.x 和 iViewAdmin2.x 绘制,如果你正在使用iView前端框架开发项目,这个资源库可以提供项目前期UI设计的常用组件,包含按钮、文本、卡片、表格、表单、弹窗、步骤、导航菜单8个类别的若干组件，可搭建出最接近iView风格的原型设计。
my-vue-iview-admin:使用vue和iview实现vue-element-admin
04-05
在my-vue-iview-admin中，各个功能模块通常被封装为独立的组件，通过Vue的路由系统（vue-router）进行组织和导航。开发者可以自由定义新的路由和组件，实现功能的扩展。iView提供的组件可以无缝融入到项目中，如使用...
iView：一套基于 Vue 的高质量 UI 组件库
weixin_33935777的博客
03-14 176
基于Vue的UI组件库现在已经有很多了，尤其是移动端的。现在又多了一个 iView 。 先睹为快 iView 主要服务于PC界面的中后台业务，是一套高质量的开源UI组件库，先上地址： https://github.com/iview/iview 官网是： https://www.iviewui.com/ 特性 使用单文件的Vue组件化...
iview踩坑记录（使用iview组件你不得不看的坑点和妙用指南！）
最新发布
2401_85124286的博客
07-04 291
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料o’,h(‘img’, {attrs: {})])},你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
基于 Vue.js 的 UI 组件库 iView
前端栈开发
07-13 340
iView 详细介绍iView 是一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。特性高质量、功能丰富友好的 API ，自由灵活地使用空间使用单文件的 Vue 组件化开发模式基于 npm + webpack + babel 开发，支持 ES2015安装使用 npm$ npm install iview --save或使用 &lt;script&gt; 全局引用&lt;...
Vue----组件库
emmmm.....
04-27 4312
文章目录组件库1. 什么是 vue 组件库2. 最常用的 vue 组件库3. Element UI3.1 在 vue2 的项目中安装 element-ui3.2 引入 element-ui4. 把组件的导入和注册封装为独立的模块 组件库 1. 什么是 vue 组件库 在实际开发中，前端开发者可以把自己封装的 .vue 组件整理、打包、并发布为 npm 的包，从而供其他人下载和使用。 这种可以直接下载并在项目中使用的现成组件，就叫做 vue 组件库。 2. 最常用的 vue 组件库 PC 端 Ele
iView 桌面端组件库
asing1elife's blog
04-12 250
一套基于 Vue.js 的高质量 UI 组件库 更多精彩 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线 相关网址 iView-doc GitHub - iview/iview: A high quality UI Toolkit built on Vue.js 2.0 使用指南 激活kebab-case命名风格 iView默认使用的组件命名风格是 PascalC...
vue-iview-tableSearch:一个适用于iview的vue表格搜索组件，支持下拉选择指定列进行搜索
05-13
1. **组件封装**：`vue-iview-tableSearch`是对Iview Table组件的扩展，它将搜索功能封装为一个新的组件，可以方便地与其他Vue项目集成，通过props传递配置，实现搜索功能。 2. **属性与事件**：组件通常会提供一...
vue-table-with-tree-grid：用于Vue.js 2.0的表（带有tree-grid）组件。 （其样式扩展了@iView）
02-06
Vue.js 2.0的表格（带有树网格）组件。 （其样式扩展了 ） 例 安装 使用npm： npm i vue-table-with-tree-grid -S 或使用纱线： yarn add vue-table-with-tree-grid 用法 import Vue from 'vue' import ZkTable ...
vue-admin-iview：基于ui组件iview的vue引入管理系统界面
02-06
iview的vue-admin ^ _ ^ 演示 ant-design版本 （推荐） 元素版 项目截图 登录 注册 首页 主题切换 搜寻 编辑 图表 字体图标 响应式 技术栈 Vue Vue-Cli 威克斯 Vue路由器 轴距 i18n es6 / 7 webpack2 / 3 减 ....
vue-tree-color:漂亮的树看看那个
05-31
最后在GitHub上面找到了一款插件是 iview 的组织结构树 vue-org-tree ,但是由于文档不是特别易懂，自己踩了很多坑。不过定制性特别高，基本上会用到的方法都有了。所以今天来给大家讲解下。 自己也根据业务需求修改...
iView组件Axure组件库-v2
02-14
依据 iView3.x 和 iViewAdmin2.x 绘制,如果你正在使用iView前端框架开发项目,这个资源库可以提供项目前期UI设计的常用组件,包含按钮、文本、卡片、表格、表单、弹窗、步骤、导航菜单8个类别的若干组件，可搭建出最接近iView风格的原型设计。
iView一套基于Vuejs的高质量UI组件库
08-08
iView 一套基于 Vue.js 的高质量UI组件库
Vue-iview-admin-demo
05-07
Web admin demo client based on Vue + iview component
iview-vue-admin:iView vue Admin管理员管理系统模板
03-11
iview-vue-admin iView Vue管理员 现场演示： 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 链接 执照 该项目基于，一些代码来自iview官方演示 罗（Tony Luo）版权所有（c）2017年至今
vue+iview后台管理系统
10-19
1.使用webpac构建vue项目 2.在此过程中使用了iview-ui资源 3.使用mockjs作为前后端通信
Vue使用iview组件库
越努力越幸运的博客
07-11 3180
步骤一、使用npm下载ivew组件库步骤二、在main.js中配置iview 步骤三、使用iview组件 在官网随便找一个来看看效果。这里以官网的按钮为例： 我们直接抄他代码就完事了，比如，在我们的App.vue里面我们打算加一个蓝色的按钮和红色的按钮，那么就是： 效果如下： 其他的组件也是这么扣，然后我们再给他写个样式啥的，这不就搞定了嘛。...
Vue.js安装及引入iview组件库
04-20 5946
Vue安装 在项目中使用Vue的方式有两种，一种是通过CDN引入Vue.js <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script...
在旧项目引入Vue，iview组件库
yangzixiansheng的博客
05-15 538
1.旧项目都是用html+jq插件，决定引入vue+iview组件库 有两种方法，一个是cdn引入，一个是本地文件引入 iview官网的cdn引入是能正常使用的 2.将三个文件下载下来本地引入 会报找不到iconfXXX 地址：font：https://github.com/view-design/ViewUI/tree/master/dist/styles ...
vue3 router-iview的v-slot
05-25
Vue3的Router-iview是一个基于Vue3和iview框架开发的路由管理器。v-slot是Vue3新增的一种插槽语法，用于更灵活地定义组件的插槽。在Router-iview中，v-slot主要用于自定义路由导航的内容。 使用v-slot可以将路由导航的默认内容替换为自定义内容。例如，在Router-iview中，可以使用v-slot:header自定义导航栏的头部内容，v-slot:menu自定义菜单内容，v-slot:footer自定义底部内容等。 具体来说，通过在Router-iview中使用v-slot，可以让开发者更加方便地定制化路由导航的样式和功能，增强了框架的灵活性和扩展性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值