（笔记10）React共享单车后台管理系统开发——城市管理

最新推荐文章于 2023-06-20 17:19:25 发布
最新推荐文章于 2023-06-20 17:19:25 发布
阅读量887 收藏 1
点赞数
分类专栏： 共享单车后台管理系统笔记 文章标签： react全家桶 共享单车后台管理系统封
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41846861/article/details/88750493
版权

城市管理

效果

一、基础页面拆分

Easy Mock城市管理的数据接口：

/open_city

{
  "code": 0,
  "msg": "",
  "result": {
    "item_list|10": [{
      "id|+1": 1,
      "name": "@city",
      "mode|1-2": 1,
      "op_mode|1-2": 1,
      "franchisee_id": 77,
      "franchisee_name": "松果自营",
      "city_admins|1-2": [{
        "user_name": "@cname",
        "user_id|+1": 10001
      }],
      "open_time": "@datetime",
      "sys_user_name": "@cname",
      "update_time": 1546580667000
    }]
  },
  page: 1,
  page_size: 10,
  total: 20
}

顶部子组件一:选择表单

class FilterForm extends React.Component{
 
    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id')(
                            <Select
                                style={{width:100}}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式">
                    {
                        getFieldDecorator('mode')(
                            <Select
                                style={{ width: 120 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">指定停车点模式</Option>
                                <Option value="2">禁停区模式</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式">
                    {
                        getFieldDecorator('op_mode')(
                            <Select
                                style={{ width: 80 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="加盟商授权状态">
                    {
                        getFieldDecorator('auth_status')(
                            <Select
                                style={{ width: 100 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">已授权</Option>
                                <Option value="2">未授权</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin:'0 20px'}}>查询</Button>
                    <Button>重置</Button>
                </FormItem>
            </Form>
        );
    }
}
FilterForm = Form.create({})(FilterForm);

componentDidMount():

调用 this.requestList()，默认请求接口数据

 componentDidMount() {
    this.requestList();
  }

  // 默认请求我们的接口数据
  requestList = ()=>{
    let _this = this;
    axios.ajax({
      url: '/open_city',
      data:{
        params:{
          page:this.params.page
        }
      }
    }).then((res)=>{
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item; // 注:这里要返回item的值
      });
      this.setState({
        list:list,
        pagination:Utils.pagination(res,(current)=>{
          _this.params.page = current;
          _this.requestList();
        })
      })
    })
  }
  
  render(){
      ...
  }

在这里插入图片描述

实例代码

// src/pages/city/index.js
import React from 'react';
import {Card, Table, Form, Modal, Button, message, Input, Icon, Select,} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils';

const FormItem = Form.Item;
const Option = Select.Option;

export default class City extends React.Component {

  state = {
    list: [],
  };

  params = {
    page: 1
  };

  componentDidMount() {
    this.requestList();
  }

  // 默认请求我们的接口数据
  requestList = ()=>{
    let _this = this;
    axios.ajax({
      url: '/open_city',
      data:{
        params:{
          page:this.params.page
        }
      }
    }).then((res)=>{
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item;
      });
      this.setState({
        list:list,
        pagination:Utils.pagination(res,(current)=>{
          _this.params.page = current;
          _this.requestList();
        })
      })
    })
  }

  render() {
    const columns = [
      {
        title: '城市ID',
        dataIndex: 'id'
      }, {
        title: '城市名称',
        dataIndex: 'name'
      }, {
        title: '用车模式',
        dataIndex: 'mode',
        render(mode) {
          return mode === 1 ? '停车点' : '禁停区';
        }
      }, {
        title: '营运模式',
        dataIndex: 'op_mode',
        render(op_mode) {
          return op_mode === 1 ? '自营' : '加盟';
        }
      }, {
        title: '授权加盟商',
        dataIndex: 'franchisee_name'
      }, {
        title: '城市管理员',
        dataIndex: 'city_admins',
        render(arr) {  //处理数组类型
          return arr.map((item) => {
            return item.user_name;
          }).join(',');
        }
      }, {
        title: '城市开通时间',
        dataIndex: 'open_time'
      }, {
        title: '操作时间',
        dataIndex: 'update_time',
        render: Utils.formateDate //格式化时间戳
      }, {
        title: '操作人',
        dataIndex: 'sys_user_name'
      }
    ];
    return (
      <div>
        <Card>
          <FilterForm/>
        </Card>
        <Card style={{marginTop: 10}}>
          <Button type="primary">开通城市</Button>
        </Card>

        <div className="content-wrap">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.list}
          />
        </div>
      </div>
    );
  }

}


class FilterForm extends React.Component {

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
        <Form layout="inline">
          <FormItem label="城市">
            {
              getFieldDecorator('city_id')(
                <Select
                  style={{width: 100}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">北京市</Option>
                  <Option value="2">天津市</Option>
                  <Option value="3">深圳市</Option>
                </Select>
              )
            }
          </FormItem>
          <FormItem label="用车模式">
            {
              getFieldDecorator('mode')(
                <Select
                  style={{width: 120}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">指定停车点模式</Option>
                  <Option value="2">禁停区模式</Option>
                </Select>
              )
            }
          </FormItem>
          <FormItem label="营运模式">
            {
              getFieldDecorator('op_mode')(
                <Select
                  style={{width: 80}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">自营</Option>
                  <Option value="2">加盟</Option>
                </Select>
              )
            }
          </FormItem>
          <FormItem label="加盟商授权状态">
            {
              getFieldDecorator('auth_status')(
                <Select
                  style={{width: 100}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">已授权</Option>
                  <Option value="2">未授权</Option>
                </Select>
              )
            }
          </FormItem>

          <FormItem>
            <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
            <Button>重置</Button>
          </FormItem>
        </Form>
    );
  }
}

FilterForm = Form.create({})(FilterForm);

注：这里使用 div 容器 嵌套 Table表格的用法

二、开通城市——弹框功能

  • 为以上组件,增加点击按钮 弹窗(Modal)功能

    • [开通城市]按钮:监听 onClick 事件,调用this.handleOpenCity()显示弹框

      state = {
    list:[],
+   isShowOpenCity:false      // 默认不可见
}

// 开通城市
+ handleOpenCity = ()=>{
+    this.setState({
+            isShowOpenCity:true
+    })
+ }

  • Modal 部分默认隐藏,触发事件进行显示

  • onOk:点击确定回调，参数为关闭函数，

  • onCancel:取消回调，参数为关闭函数

    <Modal
       title="开通城市"
       visible={this.state.isShowOpenCity}
       onCancel={()=>{
           this.setState({
                isShowOpenCity:false
           })
       }}
       onOk={this.handleSubmit}
>
       <OpenCityForm wrappedComponentRef={(inst)=>{this.cityForm = inst;}}/>
</Modal>

  • wrappedComponentRef属性：

    • 拿到表单中的信息对象inst，通过this.cityForm存到state中
      在这里插入图片描述

  • 城市开通提交

    // 城市开通提交
handleSubmit = ()=>{
        let cityInfo = this.cityForm.props.form.getFieldsValue();
        console.log(cityInfo);
        axios.ajax({
            url:'/city/open',
            data:{
                params:cityInfo
            }
        }).then((res)=>{
            if(res.code === 0){
                message.success('开通成功');
                this.setState({
                    isShowOpenCity:false
                })
                this.requestList();
            }
        })
}

  • 弹框子组件二：开通城市表单

    class OpenCityForm extends React.Component {
  render() {
    const formItemLayout = {
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 19
      }
    };
    const {getFieldDecorator} = this.props.form;
    return (
      <Form layout="horizontal">
        <FormItem label="选择城市"  {...formItemLayout}>
          {
            getFieldDecorator('city_id', {
              initialValue: '1'
            })(
              <Select style={{width: 100}}>
                <Option value="">全部</Option>
                <Option value="1">北京市</Option>
                <Option value="2">天津市</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem label="营运模式"  {...formItemLayout}>
          {
            getFieldDecorator('op_mode', {
              initialValue: '1'
            })(
              <Select style={{width: 100}}>
                <Option value="1">自营</Option>
                <Option value="2">加盟</Option>
              </Select>
            )
          }

        </FormItem>
        <FormItem label="用车模式"  {...formItemLayout}>
          {
            getFieldDecorator('use_mode', {
              initialValue: '1'
            })(
              <Select style={{width: 100}}>
                <Option value="1">指定停车点</Option>
                <Option value="2">禁停区</Option>
              </Select>
            )
          }
        </FormItem>
      </Form>
    );
  }
}

OpenCityForm = Form.create({})(OpenCityForm);

  • Easy Mock城市管理的数据接口： /open_city1

    {
  "code": 0,
  "list": "开通成功"
}

三、实例代码

// src/pages/city/index.js
import React from 'react';
import {Card, Table, Form, Modal, Button, message, Select,} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils';

const FormItem = Form.Item;
const Option = Select.Option;

export default class City extends React.Component {

state = {
 list: [],
 isShowOpenCity: false
};

params = {
 page: 1
};

componentDidMount() {
 this.requestList();
}

// 默认请求我们的接口数据
requestList = () => {
 let _this = this;
 axios.ajax({
   url: '/open_city',
   data: {
     params: {
       page: this.params.page
     }
   }
 }).then((res) => {
   let list = res.result.item_list.map((item, index) => {
     item.key = index;
     return item;
   });
   this.setState({
     list: list,
     pagination: Utils.pagination(res, (current) => {
       _this.params.page = current;
       _this.requestList();
     })
   });
 });
};

// 开通城市
handleOpenCity = () => {
 this.setState({
   isShowOpenCity: true
 });
};

// 城市开通提交
handleSubmit = () => {
 let cityInfo = this.cityForm.props.form.getFieldsValue();
 console.log(cityInfo);
 axios.ajax({
   url: '/city/open',
   data: {
     params: cityInfo
   }
 }).then((res) => {
   if (res.code == 0) {
     message.success('开通成功');
     this.setState({
       isShowOpenCity:false
     });

     this.requestList();
   }
 });
};

render() {
 const columns = [
   {
     title: '城市ID',
     dataIndex: 'id'
   }, {
     title: '城市名称',
     dataIndex: 'name'
   }, {
     title: '用车模式',
     dataIndex: 'mode',
     render(mode) {
       return mode === 1 ? '停车点' : '禁停区';
     }
   }, {
     title: '营运模式',
     dataIndex: 'op_mode',
     render(op_mode) {
       return op_mode === 1 ? '自营' : '加盟';
     }
   }, {
     title: '授权加盟商',
     dataIndex: 'franchisee_name'
   }, {
     title: '城市管理员',
     dataIndex: 'city_admins',
     render(arr) {  //处理数组类型
       return arr.map((item) => {
         return item.user_name;
       }).join(',');
     }
   }, {
     title: '城市开通时间',
     dataIndex: 'open_time',
     render:Utils.formateDate
   }, {
     title: '操作时间',
     dataIndex: 'update_time',
     render: Utils.formateDate //格式化时间戳
   }, {
     title: '操作人',
     dataIndex: 'sys_user_name'
   }
 ];
 return (
   <div>
     <Card>
       <FilterForm/>
     </Card>
     <Card style={{marginTop: 10}}>
       <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
     </Card>

     <div className="content-wrap">
       <Table
         bordered
         columns={columns}
         dataSource={this.state.list}
       />
     </div>
     <Modal
       title="开通城市"
       visible={this.state.isShowOpenCity}
       onCancel={() => {
         this.setState({
           isShowOpenCity: false
         });
       }}

       onOk={this.handleSubmit}
     >
       <OpenCityForm wrappedComponentRef={(inst) => {
         this.cityForm = inst;
       }}/>
     </Modal>
   </div>
 );
}

}

//子组件一：选择表单
class FilterForm extends React.Component {

render() {
 const {getFieldDecorator} = this.props.form;
 return (
     <Form layout="inline">
       <FormItem label="城市">
         {
           getFieldDecorator('city_id')(
             <Select
               style={{width: 100}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">北京市</Option>
               <Option value="2">天津市</Option>
               <Option value="3">深圳市</Option>
             </Select>
           )
         }
       </FormItem>
       <FormItem label="用车模式">
         {
           getFieldDecorator('mode')(
             <Select
               style={{width: 120}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">指定停车点模式</Option>
               <Option value="2">禁停区模式</Option>
             </Select>
           )
         }
       </FormItem>
       <FormItem label="营运模式">
         {
           getFieldDecorator('op_mode')(
             <Select
               style={{width: 80}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">自营</Option>
               <Option value="2">加盟</Option>
             </Select>
           )
         }
       </FormItem>
       <FormItem label="加盟商授权状态">
         {
           getFieldDecorator('auth_status')(
             <Select
               style={{width: 100}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">已授权</Option>
               <Option value="2">未授权</Option>
             </Select>
           )
         }
       </FormItem>

       <FormItem>
         <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
         <Button>重置</Button>
       </FormItem>
     </Form>
 );
}
}

FilterForm = Form.create({})(FilterForm);

//子组件二：开通城市
class OpenCityForm extends React.Component {
render() {
 const formItemLayout = {
   labelCol: {
     span: 5
   },
   wrapperCol: {
     span: 19
   }
 };
 const {getFieldDecorator} = this.props.form;
 return (
   <Form layout="horizontal">
     <FormItem label="选择城市"  {...formItemLayout}>
       {
         getFieldDecorator('city_id', {
           initialValue: '1'
         })(
           <Select style={{width: 100}}>
             <Option value="">全部</Option>
             <Option value="1">北京市</Option>
             <Option value="2">天津市</Option>
           </Select>
         )
       }
     </FormItem>
     <FormItem label="营运模式"  {...formItemLayout}>
       {
         getFieldDecorator('op_mode', {
           initialValue: '1'
         })(
           <Select style={{width: 100}}>
             <Option value="1">自营</Option>
             <Option value="2">加盟</Option>
           </Select>
         )
       }

     </FormItem>
     <FormItem label="用车模式"  {...formItemLayout}>
       {
         getFieldDecorator('use_mode', {
           initialValue: '1'
         })(
           <Select style={{width: 100}}>
             <Option value="1">指定停车点</Option>
             <Option value="2">禁停区</Option>
           </Select>
         )
       }
     </FormItem>
   </Form>
 );
}
}

OpenCityForm = Form.create({})(OpenCityForm);
Dream_Lee_1997
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
共享单车管理系统
02-04
基于react+antd项目搭建成一个简单的共享单车系统，此项目可以帮你熟悉antd常用的组件，另外可以熟悉react
加盟店管理系统 加盟店铺会员管理 加盟店店铺管理 加盟店如何提高区域影响力 加盟店的痛点 加盟店如何解决痛点
qinsisijie的博客
07-08 176
加盟管理系统选择的要点
加盟店铺管理门道多，国内十大加盟店管理软件来帮你！
qinsisijie的博客
01-31 689
加盟店铺管理好帮手。
react组件穿梭框
m0_71955188的博客
06-20 311
【代码】react组件穿梭框。
react 拖拽实现一个穿梭框效果
weixin_45750771的博客
06-30 1176
借鉴了网上大佬的一些文章，记录实现一个react的穿梭框的效果 实现拖拽效果的实现我们需要用到关于拖拽的事件，而在html5中刚好就有原生的拖拽api。拖拽元素事件 dragstart 当一个元素开始被拖拽的时候触发 drag 这个事件在拖拽源触发 dragend 拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否目标元素触发事件 dragenter 当拖拽中的鼠标第一次进入一个元素时触发 dragover 当拖拽中的鼠标移动经过一个元素时触发 dragleave 当拖拽中的鼠标
【React】Ant Design穿梭框Target栏的显示以及禁用问题
AcongMiss的博客
03-20 5938
Ant Design 穿梭框官方文档：https://ant.design/components/transfer-cn/ 在使用的过程中我遇到了两个小问题，其实知道原因和解决方法之后真的觉得是特别特别简单的问题。 1.穿梭框右侧Target栏不显示的问题。 问题具体描述：对 targetKeys（显示在右侧框数据的key集合）进行初始化后，右侧框内数据不显示。 原因：初始化后的 targetK...
前端react+Ant Design 给穿梭框Transfer 添加导入导出按钮，难点在于导入数据后怎么赋值给右侧
m0_72154126的博客
06-04 769
react+Ant Design 给穿梭框Transfer
穿梭框封装组件
qq_56348427的博客
07-08 617
效果一 效果二 封装的组件 /* eslint-disable max-statements */ /* eslint-disable react-hooks/exhaustive-deps */ /** * @file 自定义画像 */ import React, {Key, useEffect, useMemo, useRef, useState} from 'react'; import {Button, Checkbox, Form, Input, message, Modal,
React:React全家桶+AntD 共享单车后台管理系统开发
04-27
React全家桶+AntD 共享单车后台管理系统开发 课程导学 拿到产品需求，怎么做？ 如何技术选型？ 如何项目架构？ 如何项目规范？ 如何封装项目公共机制？ 如何提高开发效率 课程概述 React 全家桶 React基础知识、生命...
【毕业设计】基于React全家桶实现的共享单车后台管理系统（前端源码）.zip
最新发布
03-22
【毕业设计】基于React全家桶实现的共享单车后台管理系统（前端源码）.zip
共享单车后台管理web
04-08
基于react框架，引用蚂蚁金服组件，写的共享单车后台管理web端。
基于react的共享单车管理系统
12-11
本资源为基于react的共享单车管理系统的前端部分的源码，具体实现流程参考相关网站视频。所使用到的语言主要是Javascript
单车共享租用系统
07-08
基于Spring+SpringMvc+Mybatis+Mysql的单体项目，前端技术使用jsp。项目功能涵盖基本的租车系统应用，当然也需要进一步的优化。后台用户有管理员、客服、维修人员，前端人员有用户，每一个角色进入对应的界面进行相关的操作。页面的样式是来源于网络。但是经过本人改造。
共享单车管理系统 c++
06-14
目前大家比较熟悉共享单车的使用。请编制一个共享单车的管理程序，实现如下基本功能。假设有5种品牌的共享单车（品牌内容自定）。 针对该5种品牌的共享单车，自行设计一套包含每种单车的品牌名称、投放量、投放点、某一时间点的在用数量、每辆车的每天骑行次数及单次里程和总里程、开锁过程中发现的损坏次数等信息(所有相关数据均自行设计)的数据结构； 随着骑行活动的开展，待使用单车的数量将发生变化。要求能对每种单车的使用数量及待使用的数量进行查询统计并输出； 对于某一投放点的某一品牌的单车，如果无备用车（待使用的车均为备用车），或备用车均为损坏的车，系统应能给出信息提示； 对于损坏报修的车辆，系统能够进行及时的统计，并能在投放数量中削减损坏车辆的数量，形成真实的有效投放量； 能够对客户信息进行处理，包括注册的用户名、电话号码、骑行里程、骑行习惯（比如70%以上的出行时间集中在某个时间段，时间段按时钟整点划分）、每天平均的骑行时间等； 该系统能进行当日使用状况的统计，请用链表排序（排序算法不限）提示交易使用次数排在前三名的单车品牌； 假设每种单车的使用是收费的，如第一个小时是免费的，第二个小时开始每小时收费0.5元，各品牌可各自推出优惠收费条件（优惠条件请自定义），然后根据假设的使用情况，统计出各种品牌的日营业额，并对各品牌的受欢迎程度进行排序。
react-这是Reactjs的简单示例集合
08-15
这是React.js的简单示例集合
react-bike:react和antd 共享单车后台管理系统
05-06
react-bick react和antd 学习项目体验地址：项目wiki地址： 项目截图后台城市列表开通城市表单订单管理用户管理 项目初始 2019-06-26添加json-server 和mock.js 产生mock数据添加后台的接口模拟假数据 2019-06-16...
【毕业设计】学习用react写共享单车后台管理系统（前端源码）.zip
03-22
【毕业设计】学习用react写共享单车后台管理系统（前端源码）.zip 主页面架构设计 React Router 4.0+ 入门 Antd UI组件和表格 城市管理、订单管理 地图功能 项目工程化开发 员工管理、车辆地图 图表模块、富...
react.js 如何二次封装antd Select组件加入穿梭框Transfer
weixin_47433173的博客
09-10 1243
react.js 如何二次封装antd Select组件加入穿梭框Transfer 1.新增一个组件文件：ToMultiselect import React, { Component } from 'react'; import { Modal, Transfer, message, Popover, Input, Card, Button } from 'antd'; import fetch from 'dva/fetch'; import { object2formdata } from '@/ut
PHP基于thinkphp+vue共享单车系统 nodejs前后端分离
QQ123311197的博客
10-16 661
随着社会科技的发展进步，机动车已经成为大众消费品，发展初期较少的机动车方便了人们的交流，给人们带来了极大的便利，但随着数量的持续增长，依据辩证法之对立统一及质量互变两个哲学规律，我们可以清晰的得到私家车的激增已经从给人们带来方便转化为给人们造成困扰：环境污染，能源短缺，交通拥堵，交通噪音，停车困扰。这些问题或多或少都与机动车交通直接或间接相关。日益尖锐的问题已经不得不让人们引起注意了。为了应对这些困扰人们日常生活的问题，一个新的概念已经被提出：共享单车。早在建国初期，我国是自行车大国，自行车承担了主要的出行
react全家桶+antd框架开发共享单车后台管理系统
12-14
综上所述，使用React全家桶和Ant Design框架开发共享单车后台管理系统，可以提高开发效率、代码可维护性和用户体验。同时，Ant Design的美观、可靠的组件库能够有效地帮助我们构建一个优质的后台管理系统。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值