sessionStorage存储购物车

最新推荐文章于 2021-07-28 20:48:47 发布
最新推荐文章于 2021-07-28 20:48:47 发布
阅读量172 收藏 1
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/MR-cui/p/8479050.html
版权 
<template>
    <div id="mall" class="mall">
        <div class="mask" v-show="showShopcart" @click="toggleShopcart"></div>

        <flexbox :gutter="0" class="cart-box">
            <flexbox-item :span="1/3">
                <div  style="height: 100%" style="position: relative;margin-left: 20px;" @click="toggleShopcart">
                    <icon name="cart" scale="4"></icon>
                    <span class="cartNum">{{shopCart.number}}</span>
                </div>
            </flexbox-item>
            <flexbox-item :span="1/3">
                <div class="totalMoney" @click="toggleShopcart" style="line-height: 60px;">￥{{shopCart.price}}</div>
            </flexbox-item>
            <flexbox-item :span="1/3" class="order">
                <span @click="takeMeal" style="height: 60px;display: block;">下单</span>
            </flexbox-item>
        </flexbox>
        <flexbox :gutter="0" id="all-order" v-show="showShopcart">
            <flexbox-item style="width: 100%;">
                <scroller lock-x height="300px" ref="scroller" @on-scroll="scrolling">
                    <div>
                        <div class="cart-title">购物车</div>
                        <div class="mealOrder-list" v-for="(item,index) in shopCart.items">
                            <div class="left-border">
                                <p class="order-date inner-box" v-for="(i,index) in item" v-if="index<1">{{i.sale_date}}</p>
                                <div class="inner-box food-box" v-for="(i,index) in item">
                                    <flexbox>
                                        <flexbox-item :span="1/2" class="meal-detial">
                                            <span>{{i.food_id}}</span>
                                            <span>{{i.food_name}}</span>
                                        </flexbox-item>
                                        <flexbox-item :span="1/6" class="money">
                                            ￥<span>{{i.price*i.number/100}}</span>
                                        </flexbox-item>
                                        <flexbox-item :span="1/3" class="pay-number" style="margin-left: 0">
                                            <div class="mealNumber">
                                                <span @click="minusCount(i)" class="changeButton leftButton">-</span>
                                                <span class="changeNumber">{{i.number}}</span>
                                                <span @click="addCart(i)" class="changeButton rightButton">+</span>
                                            </div>
                                        </flexbox-item>
                                    </flexbox>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroller>
            </flexbox-item>
        </flexbox>
        <flexbox :gutter="0" id="wrapper">
            <flexbox-item>
                <scroller lock-x height="-55" ref="scroller" @on-scroll="scrolling">
                    <div id="scroller-wrapper">
                        <swiper height="150px" :loop="true" dotsPosition="center" :auto="true">
                            <swiper-item v-for="(item, index) in ads" :key="index">
                                <img :src="imgUrl+item.url" alt="" class="imgSize" style="height: 150px;width: 100%;">
                            </swiper-item>
                        </swiper>
                        <flexbox class="selectMeal">
                            <flexbox-item :span="6">
                                <flexbox class="selectTime">
                                    <flexbox-item :span="1/6">
                                        <icon name="time" scale="3"></icon>
                                    </flexbox-item>
                                    <flexbox-item :span="2/3">
                                        <div style="height: 30px;margin-top: -26px;">
                                            <group>
                                                <selector placeholder="请选择日期" v-model="weekDateSelect" :value-map="['date','label']" :options="weekDate" @on-change="changeMenu()">
                                                </selector>
                                            </group>
                                        </div>
                                    </flexbox-item>
                                    <flexbox-item :span="1/6" class="good-list__buy" >
                                    </flexbox-item>
                                </flexbox>
                            </flexbox-item>
                            <flexbox-item :span="6">
                                <flexbox class="meal">
                                    <flexbox-item :span="1/6">
                                        <icon name="knife" scale="4"></icon>
                                    </flexbox-item>
                                    <flexbox-item :span="2/3">
                                        <div style="height: 30px;margin-top: -26px;">
                                            <group>
                                                <selector placeholder="请选择" v-model="foodTypeSelect" :options="foodType" :value-map="['food_type', 'type_name']" @on-change="changeMenu()">
                                                </selector>
                                            </group>
                                        </div>
                                    </flexbox-item>
                                    <flexbox-item :span="1/6">
                                    </flexbox-item>
                                </flexbox>
                            </flexbox-item>
                        </flexbox>
                        <div id="product" class="product clearfix">
                            <div id="product_nav" :class="[{'sticky': sticky}, 'product_nav']">
                                <template v-for="(item,index) in cells">
                                    <div class="sortList" @click="changeMenu(item.id)">
                                        <div class="nav__item-label">{{item.name}}</div>
                                    </div>
                                </template>
                            </div>
                            <div id="product_list" class="product_list">
                                <div class="good-list vux-1px-b" v-for="(item,index) in menu" v-if="menu.length > 0">
                                    <flexbox>
                                        <flexbox-item :span="1/3" class="good-list__img">
                                            <img width="100%" height="100px" src="http://mjd-midas.b0.upaiyun.com/store_food_img/10126/2017/02/07/kfh8ehud5a0s5c6m.jpg">
                                        </flexbox-item>
                                        <flexbox-item :span="1/2">
                                            <div class="good-list__name">
                                                 <span class="good-list__name-cell">{{item.food_name}}</span>
                                            </div>
                                            <div class="good-list__price">￥{{item.price/100}}</div>
                                        </flexbox-item>
                                        <flexbox-item :span="1/6" class="good-list__buy"
                                                      @click.native="addCart(item)">
                                            <div class="addToCart" style="position: relative;right: 20px;top: 20px;">
                                                <icon name="cart" scale="3" style="position: absolute;left: 4px;bottom: 4px;"></icon>
                                            </div>
                                        </flexbox-item>
                                    </flexbox>
                                </div>
                                <div v-if="menu.length === 0" style="text-align: center">
                                    <img src="/img/nothing.jpg" alt="" style="width: 50%;margin-top: 20px;">
                                    <h4 style="color: #9ea0a0;">暂无菜品销售</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroller>
            </flexbox-item>
        </flexbox>
    </div>
</template>
<script>
    import Client from '../../service/Client'
    import { Swiper, SwiperItem, Flexbox, FlexboxItem, Scroller, Tab, TabItem ,XNumber, Group,Alert, XHeader, Selector } from 'vux'

    export default {
        data() {
            return {
                cells:[],
                foodTypeSelect: '',
                weekDateSelect:'',
                cellIdSelect:"",
                menu:{},
                foodType:[],
                weekDate:{},
                ads:[],
                imgUrl:'',
                showShopcart:false,
                shopCart:{
                    number:0,
                    price:0,
                    totalMoney:0,
                    items: {
                    }
                },
            }
        },
        created(){
            this.getMenuData()
            this.getStorage()
        },
        methods: {
            minusCount(i){
                if(i.number==0){
                    return
                }else{
                    i.number -=1;
                    this.shopCart.number -=1;
                    this.shopCart.totalMoney -=Number(i.price);
                    this.shopCart.price = this.shopCart.totalMoney/100;
                    var storage = window.sessionStorage;
                    storage.clear();
                    if(i.number==0){
                        var deleteShopCart=this.shopCart.items[i.sale_date];
                        for(var j=0;j<deleteShopCart.length;j++){
                            if(i.food_id==deleteShopCart[j].food_id){
                                deleteShopCart.splice(j,1);
                            }
                        }
                    }
                    if(this.shopCart.number==0){
                        this.showShopcart = !this.showShopcart;
                    }
                    storage.setItem('shopCart',JSON.stringify(this.shopCart));
                }
            },
            takeMeal(){
                if(this.shopCart.number === 0){
                    this.$vux.alert.show({
                        title: '您的购物车是空的',
                        content: '请将菜品加入购物车'
                    })
                }else{
                    this.$router.push({ path: 'pay' });
                }
            },
            toggleShopcart:function () {
                this.showShopcart = !this.showShopcart;
            },
            addCart:function (item) {
                if (this.shopCart.items[item.sale_date] === undefined) {
                    this.shopCart.items[item.sale_date] = []
                }

                let isExist = false
                for( let i in this.shopCart.items[item.sale_date]) {
                    let inCartItem = this.shopCart.items[item.sale_date][i]

                    if (inCartItem.id === item.id) {
                        inCartItem.number += 1
                        isExist = true
                        break
                    }
                }

                if (!isExist) {
                    item.number = 1
                    this.shopCart.items[item.sale_date].push(item)
                }
                this.shopCart.number +=1
                this.shopCart.totalMoney +=Number(item.price);
                this.shopCart.price = this.shopCart.totalMoney/100;
                window.sessionStorage.setItem('shopCart',JSON.stringify(this.shopCart))
            },
            changeMenu(cellId){
                if (cellId !== undefined) {
                    this.cellIdSelect = cellId
                }
                this.$set(this.shopCart, 'items', {})
                this.shopCart.price = 0
                this.shopCart.number = 0
                this.shopCart.totalMoney=0
                window.sessionStorage.clear()
                this.getMenuData(this.weekDateSelect, this.foodTypeSelect, this.cellIdSelect)
            },
            getStorage(){
                  let cartStorage = JSON.parse(window.sessionStorage.getItem('shopCart'))
            if(cartStorage){
                this.shopCart = cartStorage
            }
            },
            getMenuData(date, type, cell){

                this.$vux.loading.show({
                    text: '加载中'
                })

                let postData = {
                    mealType:type,
                    mealDate:date,
                    cellId:cell
                }

                Client.post('/mobile/api/get-data', postData).then((response) => {
                    this.$vux.loading.hide()
                    let result = response.data.data
                    if (response.status === 200 && response.data.status === 1) {
                        this.foodType = result.foodType
                        this.cells = result.cells
                        this.weekDate = result.weekDate
                        this.menu = result.storeFoodMenu
                        this.foodTypeSelect = result.mealType
                        this.weekDateSelect = result.mealDate
                        this.cellIdSelect = result.cellId
                        this.ads = result.storeAd
                        this.imgUrl = result.url
                    } else if (response.status === 200 && response.data.status === 0) {
                        this.menu = []
                    } else {
                        this.$vux.toast.show({
                            text: response.data.message,
                            type: 'cancel'
                        })
                    }
                }).catch((error)=>{
                    this.$vux.loading.hide()
                    this.$vux.toast.show({
                        text: '服务器错误',
                        type: 'cancel'
                    })
                })
            }
        },
        components: {
            Flexbox,
            FlexboxItem,
            Scroller,
            Swiper,
            SwiperItem,
            XNumber,
            Group,
            Alert,
            XHeader,
            Selector
        }
    }
</script>
<style lang="less">
    @import "~vux/src/styles/1px.less";
</style>
<style lang="scss">
    .mask{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left:0;
        z-index: 10;
        background: rgba(0,0,0,0.5);
    }
    .mall {
        position: relative;
        .store {
            background-color: rgba(0, 0, 0, 0.4);
            border: 1px #dddddd solid;
            border-radius: 8px;
            position: absolute;
            left: 15px;
            top: 15px;
            z-index: 2;
            line-height: 25px;
            padding: 0 5px;
            color: #f0f0f0;
            font-size: 14px;

            &__icon-right, &__icon-location {
                vertical-align: top;
                height: 18px;
                margin: 3px;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        .product {
            &_nav{
                width: 22%;
                float: left;
                height: 100%;
                background-color: #F6F1E9;

                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;

                .nav__item {
                    text-align: center;
                    padding: 0.5em 0;

                    &-img{
                        width: 40%;
                        margin-bottom: 5px;
                    }

                    &-label{
                        font-size: 12px;
                        color: #5e5e5e;
                    }

                    &.active {
                        background-color: white;
                    }
                }

                &.sticky {
                    position: fixed;
                    top:0;
                }
            }

            &_list{
                width: 78%;
                float: right;
            }
        }

        .good-list {
            padding: 1rem 0.5rem;
            background-color: white;

            &__img {
                max-height: 80px;
                height: 80px;
                overflow: hidden;
            }
            &__name {

                font-size: 14px;
                display: table;

                &-cell{
                    display: table-cell;
                    vertical-align:middle;
                }
            }

            &__price {
                margin-top: 10px;
                font-size: 0.9rem;
                color: red;
            }

            &__spec{
                color: rgb(154, 154, 154);
            }

            &__buy {
                img {
                    margin-left: -4px
                }
                .addToCart{
                    height: 38px;
                    border:1px solid #6B7D8E;
                    border-radius: 50%;
                }
            }
        }

        .sticky-tab {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            z-index: 2;
        }
        #element {
            background: red;
            position: absolute;
            border-radius: 50%;
            z-index: 100
        }
    }
    #all-order{
        max-height: 300px;
        position: fixed;
        z-index: 30;
        bottom: 60px;
        left: 0;
        background: #ffffff;
        .mealOrder-list{
            .order-date{
                padding-bottom:10px;
                border-bottom:2px solid #666;
            }
            .left-border{
                border-left:2px solid #0DD874;
                margin-bottom: 20px;
                .food-box{
                    padding: 15px 0;
                    .mealNumber{
                        border:1px solid #666666;
                        width: 112px;
                        height: 30px;
                        span{
                            display: inline-block;
                        }
                        .changeButton{
                            width: 30px;
                            line-height:30px;
                            text-align: center;
                        }
                        .leftButton{
                            border-right: 1px solid #cccccc;
                            color: #ff4500;
                        }
                        .rightButton{
                            border-left: 1px solid #cccccc;
                            color: #ff4500;
                        }
                        .changeNumber{
                            text-align: center;
                            line-height: 30px;
                            width: 40px;
                        }
                    }
                }
            }
        }
        .cart-title{
            background: #efefef;
            line-height: 50px;
            padding-left: 15px;
            color:#888;
            font-size: 18px;
        }
        .inner-box{
            margin-left: 10px;
            .meal-detial{
                font-weight: 600;
            }
            .money{
                color: orangered;
            }
            .pay-number{
                margin-left: 0;
                .weui-cell{
                    padding: 10px 0;
                }
            }
        }
        .food-box{
            border-bottom: 1px solid #cccccc;
        }
    }
    .cart-box{
        position: fixed;
        bottom: 0px;
        left:0;
        z-index: 40;
        height: 60px;
        width: 100%;
        cursor:pointer;
        border-radius:3px;
        background: #ffffff;
        border-top: 1px solid #ccc;
        .totalMoney{
            color:red;
            font-size: 18px;
            font-weight: 600;
        }
        .order{
            background: #1dc01e;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
        }
        .cartNum{
            position: absolute;
            left:26px;
            top:-6px;
            display: inline-block;
            height: 16px;
            width: 16px;
            line-height: 16px;
            text-align: center;
            background: #F74C31;
            color: #FFFFFF;
            border:1px solid #F74C31;
            border-radius: 50%;
            font-size: 13px;
        }
    }
    .selectMeal{
        background: #6B7D8E;
        color: #fff;
        .selectTime{
            margin:10px 6px;
            border-right: 1px solid #ffffff;
        }
        select{
            width:100%;
            height: 30px;
            line-height: 30px;
        }
    }
    #product{
        overflow: hidden;
        #product_nav{
            width:30%;
            min-height: 394px;
            float: left;
            background: #e4e4e4;
            padding-top: 8px;
            .sortList{
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            .sortList:hover{
                background: #6b7d8e;
            }
        }
        #product_list{
            float: right;
            width: 65%;
            height: 100%;
            .good-list{
                /*border: 1px solid #333399;*/
                margin: 10px 0;
            }
        }
    }
</style>

 

转载于:https://www.cnblogs.com/MR-cui/p/8479050.html

diboxuan0073
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 本地存储实现购物车功能
12-14
在家休陪产假，无聊，看自己以前的项目，突然发现之前写的购物车都是用数据库实现的，数据库实现购物车原则上没什么问题，但是需要和数据库交互，这样无意之间降低了程序的效率。今天突发奇想，如果能用HTML5本地存储实现，就会大大增高程序效率。当然，HTML5 本地存储涉及到各个浏览器的兼容性，涉及存储数据的大小(NKB)等问题。在这儿需要说明的是：如果你做一个不大不小的微商城项目，那么你可以尝试使用HTML5本地存储过程实现购物车！ 本节和大家探讨下HTML5本地存储实现购物车的功能！ 需要说明的是：上篇转发了别人的博客：HTML5本地存储用法，本节利用上节知识实现购物车！ 首先讲解下大致思路： 一个
sessionStorage 购物车
virgilSparta的博客
03-01 1653
会话存储(Session storage)技术是由W3C的Web Storage提供的一项新特性。这个新特性可以被Explorer 8+、Firefox、Chrome、Safari 和 Opera的桌面浏览器支持，完整的浏览器支持列表可以查看Can I Use。在这篇文章中，我们将使用session storage会话存储技术的sessionStorage对象和jQuery来实现一个完整的客户端电...
购物车实现
li1484155613的博客
10-13 184
html代码： <body onselectstart="return false;"> <template id="temp"> <tr> <td> <input type="checkbox" class="check" checked> </td> ...
利用localStorage做一个类似于购物车的功能
swagLi的博客
04-30 1150
一、利用localStorage做一个类似与购物车功能的效果，具体如下图把选中的列表点击添加到配置，那么选中的那些用户变成取消配置状态，批量配置里面有相应的选中用户进行配置。 (1)页面已加载完成就判断localStorage是否有选中待配置的数据，有就弹框让用户选择是否继续配置 mounted:function(){ //配置列表中的用户 this.choosedUser =...
购物车的实现localstorage和sessionstorage
u013056785的博客
03-21 1399
localstorage保存以开发者的准则为标准，而sessionstorage则以页面的开始和结束为标准，因此localstorage用来实现购物车的比较多，window.localstorage("你的保存内容","用户数据"); var 用户数据=window.localstorage["你的保存内容"];
JS localStorage存储对象，sessionStorage存储数组对象操作示例
11-21
在实际开发中，`localStorage` 和 `sessionStorage` 常用于实现页面状态的保存，比如用户的偏好设置、购物车商品信息、表单数据等。此外，它们还可以用于实现离线应用的缓存，提高用户体验。 六、总结 JavaScript ...
jQuery外卖订餐购物车代码
06-24
可以使用Cookie、LocalStorage或SessionStorage等前端存储技术来维护用户购物车的信息。 7. **UI设计**：虽然这里没有具体提及UI设计，但实现美团外卖风格的界面，需要对HTML和CSS有一定的了解，包括布局、响应式...
购物车html代码
03-19
4. `localStorage`和`sessionStorage`：HTML5提供了本地存储机制，可以用来保存用户的购物车信息，即使页面刷新也不会丢失。 5. `<audio>`和`<video>`元素：如果项目包含音频或视频介绍商品，这些元素将用于播放...
js购物车demo.zip
08-11
3. **数据存储**：为了保留用户的购物车状态，通常需要将商品信息存储在本地。可以使用`localStorage`或`sessionStorage`来实现数据的持久化。 4. **计算与格式化**：购物车需要实时计算总价、总数量等信息，并可能...
常见的浏览器存储方式（cookie、localStorage、sessionStorage）
11-27
今天我们从前端的角度了解一下浏览器存储，我们常见且常用的存储方式主要由两种：cookie、webStorage（localStorage和sessionStorage）。下面我们来一一认识它们。 Cookie基于HTTP规范，用来识别用户。 Cookie是服务器发送到浏览器的一小段数据，会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 Cookie诞生之初的作用就是解决HTTP的无状态请求，用来记录一些用户相关的一些状态。 •会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） •个性化设置（如用户自定义设置、主题等） •浏览器行为跟踪（如跟踪分析用户行为等）
demo-购物车（localstorage）
DcTbnk的博客
06-09 257
需要的文件 cart.js class Cart { constructor() { this.cartData = localStorage.getItem("cartData") ? JSON.parse(localStorage.getItem("cartData")) : {}; } saveData(id, num, terminal) { if (!this.cartData[id] || terminal) { this.car
用session解决临时购物车以及ajax分页
theowl的专栏
05-27 1170
解决全局变量刷新问题，以及构建临时购物车， 项目实例： window.onload=function(){ sessionStorage.setItem("up",1); sessionStorage.setItem("timeup",1); } 待续。。。。
js中如何判断session的缓存数据是否清空_你会不会用Redis实现购物车的增删改与清空...
weixin_39746869的博客
11-26 90
购物车管理包含功能：提交商品到购物车、显示购物车列表、删除购物车里商品、修改购物车、清空购物车等等1、 购物车的实现方式：① 可以把购物车的数据，给存储到 session 里面，一旦关闭浏览器，则商品数据就丢失；②可以把购物车的数据，给存储到 cookie 里面，可以长久的保存购物车里面的数据；③可以把购物车的数据，给存储到数据库里面，可以长久的保存购物车里面的数据；④可以把购物车的数据，给存储到...
利用html5的本地存储写的一个购物车
weixin_30559481的博客
05-14 201
好久没有写博客园了，很多知识没有记录下来；可惜； 这几天在开发微信，也写了一个订餐平台的微网站，里面需要写一个购物车； 这里主要是把商品的部分信息以json格式保存在sessionstorage中，还有商店信息也是； 以json格式保存有什么好处呢，轻量级的传输，大概是这样吧！另外，如果我们把商品信息分开存储，就会导致有多条的sessionstorage项，那以后实现在两家商店同时...
购物车的几种实现方式
点滴记忆，分享成长之路
07-28 573
实现方式一:存储到数据库 性能存在瓶颈 实现方式二:前端本地存储-localstorage-sessionstorage 未登陆的时候，可以暂存在前端本地存储的方式 localstorage在浏览器中存储 key/value 对，没有过期时间。 sessionstorage在浏览器中存储 key/value 对,在关闭会话窗口后将会删除这些数据。 实现方式三:后端存储到缓存如redis 可以开启AOF持久化防止重启丢失(推荐) 实现方式四:后端存储到缓存如redis-并同步更新到数据库 大家可能会想.
购物车的实现的三种方法
lushuifa的专栏
05-26 1830
购物车3种实现方式 详解2010-12-27 20:45<br />购物车相当于现实中超市的购物车，不同的是一个是实体车，一个是虚拟车而已。用户可以在购物网站的不同页面之间跳转，以选购自己喜爱的商品，点击购买时，该商品就自动保存到你的购物车中，重复选购后，最后将选中的所有商品放在购物车中统一到付款台结账，这也是尽量让客户体验到现实生活中购物的感觉。服务器通过追踪每个用户的行动，以保证在结账时每件商品都物有其主。 <br /><br />     购物车的功能包括以下几项： <br /><br />n    
html5购物车源代码本地存储,利用html5的本地存储写的一个购物车
weixin_39788703的博客
06-09 668
好久没有写博客园了，很多知识没有记录下来；可惜；这几天在开发微信，也写了一个订餐平台的微网站，里面需要写一个购物车；这里主要是把商品的部分信息以json格式保存在sessionstorage中，还有商店信息也是；以json格式保存有什么好处呢，轻量级的传输，大概是这样吧！另外，如果我们把商品信息分开存储，就会导致有多条的sessionstorage项，那以后实现在两家商店同时购物的话，就不可能区分...
cookie与sessionstorage存储的数据类型的区别
最新发布
04-18
Cookie主要用于存储浏览器与Web服务器之间的会话信息，比如用户的登录状态、购物车内容等。它的存储方式是将数据编码后存储在客户端浏览器的Cookie文本文件中，每次浏览器请求该域名的相关资源时都会自动将Cookie...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值