template view view class=margin block v-for=goodsindex in goodsList key=index view class=u-flex u-checkbox v-model=goodsis_checked change=changeChoose shape=circle name=goodsidu-checkbox

该页面组件为购物车页面，展示用户添加到购物车中的商品列表，并提供购物车中商品的数量修改、删除、全选/取消全选、结算等功能。

关键代码：

1. 获取购物车数据并渲染：

async getCartData(){
    const cartData = await this.$u.api.cartDataList({include: 'goods'})
    const {data} = cartData			
    data.forEach((value,index,data) =>{
        data[index].is_checked = (data[index].is_checked == 1) ? true : false
        return data
    })
    this.goodsList = data
}

2. 修改商品数量：

async minusNum(e){
    let cartId = e.index
    let params = {num: e.value}
    await this.$u.api.cartNumChange(cartId,params)
},
async plusNum(e){
    let cartId = e.index
    let params = {num: e.value}
    await this.$u.api.cartNumChange(cartId,params)
},

3. 移除购物车商品：

async removeCart(id){
    await this.$u.api.cartRemove(id)
    this.getCartData()
    this.$u.toast('删除成功')
},

4. 改变商品选中状态：

async changeChoose(e){
    const {name,value} = e // name为id value为true或者false
    for (let i = 0; i < this.goodsList.length; i++) {
        if(this.goodsList[i].id == name){
            this.goodsList[i].is_checked = !this.goodsList[i].is_checked
        }
    }
    let adArr = this.goodsList.filter(function (value){
        return value.is_checked == true
    })
    let newArr = []
    for (let i = 0; i < adArr.length; i++) {
        newArr.push(adArr[i].id)
    }
    await this.$u.api.cartChangeChosen({cart_ids: newArr})
},

5. 全选/取消全选：

async changeAllBtn(e){
    const {name,value} = e
    if(value == false){
        for (let i = 0; i < this.goodsList.length; i++) {
            this.goodsList[i].is_checked = false
        }
        await this.$u.api.cartChangeChosen({cart_ids: []})
        this.getCartData()
    }else {
        for (let i = 0; i < this.goodsList.length; i++) {
            this.goodsList[i].is_checked = true
        }
        let newArr = []
        for (let i = 0; i < this.goodsList.length; i++) {
            newArr.push(this.goodsList[i].id)
        }
        await this.$u.api.cartChangeChosen({cart_ids: newArr})
        this.getCartData()
    }
},

6. 跳转结算页面：

toOrder(){
    this.$u.route({url: 'pages/cart/order'})
}

样式：

1. 商品列表样式：

.flex{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flex-top{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.price{
    color: red;
}

2. 底部结算栏样式：

.bottom{
    display: flex;
    position: fixed;
    width: 100%;
    bottom: 100rpx;
    justify-content: space-between;
    background-color: #fff;
}

组件内外部通信说明：

1. 使用uView提供的组件进行选中状态的改变和商品数量的修改，通过调用API实现购物车数据的获取、修改、删除等操作。
2. 跳转结算页面通过路由实现