关于uniapp，复选框选中

Question

所有数据通过uni.request,动态计算总价，我想了解一下关于uniapp框架的购物页呈现

Answer 1

<template>
    <view class="box">
            <!-- 自定义导航栏 -->
            <view class="border">
                <view class="border_left" @click="onleft()">
                    管理
                </view>
                <view class="border_center">
                    购物车
                </view>
                <view class="border_right">
    
                </view>
            </view>
            <view class="border-lis"></view>
    
            <!-- 购物车内容显示 -->
            <view class="box_content">
                <view class="box_content_one" v-for="item in list" :key='item.id'>
                    <view class="box_content_oput">
                        <view class="box_content_oput_input" >
                            <!-- <label >
                                <checkbox :value="item.id" @change="checkboxChange($event,item.id)" :checked="item.isChecked" />
                            </label> -->
                            <checkbox-group @change="checkboxChange($event,item.id)">
                                <checkbox :value="item.id" :checked="item.isChecked" />
                            </checkbox-group>
                        </view>
                        <view class="box_content_oput_imges">
                            <image :src="item.img" mode=""></image>
                        </view>
                    </view>
                    <view class="box_content_number">
                        <view class="box_content_title">
                            {{item.name}}
                        </view>
                        <view class="box_content_effect">
                            {{item.size}}
                        </view>
                        <view class="box_content_and">
                            <view class="box_content_number_discount">
                                ￥{{item.price}}.00
                            </view>
                            <view class="box_content_number_original">
                                {{item.prcs}}.00
                            </view>
                        </view>
                    </view>
                    <view class="calculator">
                        <text class="left_i" @tap="editNum(item.id,-1)">-</text>
                        <text class="center_con">{{item.count}}</text>
                        <!-- <input class="center_con" type="text" value="1" /> -->
                        <text class="right_i" @tap="editNum(item.id,1)">+</text>
                    </view>
                </view>
            </view>
            
            <view v-if="boton_markes.length != ''" style="text-align: center; margin: auto; font-size: 14px; color: #F0F0F0;margin-bottom: 50rpx;">
                --------------------热卖推荐--------------------
            </view>
    
            <view class="box_botton" v-if="boton_markes.length != ''">
                <view class="box_bottcontent">
                    <!-- goods_id -->
                    <view class="box_bottent" v-for="(hell,indet) in boton_markes" :key="indet">
                        <view class="box_boent_one">
                            <!-- <image src="../../static/image/3_2.jpg" mode=""></image> -->
                            <!--  ${{url}}/api/goods/goodsThumImages?goods_id=${{item.goods_id}}&width=400&height=400-->
                            <image :src="hell.img_url" mode="widthFix">
                        </view>
                        <view class="box_boent_two">
                            {{hell.goods_name}}888{{hell.goods_name}}
                        </view>
                        <view class="box_boent_three">
                            <view class="box_boent_three_ins">
                                <text>￥</text>
                                {{hell.shop_price}}
                                <text>00</text>
                            </view>
                            <view class="box_boent_three_let">
                                已售{{hell.virtual_sales_sum}}件
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 底部导航栏 -->
            <view class="tabbar">
                <view class="all">
                    <checkbox-group @change="checkboxChangeAll">
                        <checkbox :checked="isAllChecked" />全选
                    </checkbox-group>
                </view>
                <view class="totalPrice">
                    <text class="totalPrice_ff">合计:</text>
                    <text class="totalPrice_red">￥{{totalPrice}}.00</text>
                </view>
                <view class="submitOrder" @tap="submitOrder">
                    付款
                </view>
            </view>
            <view style="width: 100%; height: 50rpx; background-color: #F0F0F0; margin-bottom: 50rpx;"></view>
        </view>
</template>

<script>
    export default {
            data() {
                return {
                    //购物车有无商品
                    show: true,
                    //全选是否选中
                    isAllChecked: false, //是否全选
                    totalPrice: 0, //总价
                    //商品
                    list: [{
                            id: '0',
                            name: '爆款VC精华 韩夕梦377vc乙基醚 精',
                            price: 89.00,
                            prcs: 179.00,
                            count: 1,
                            size: '深层洁净除菌洗衣凝珠',
                            img: '/static/logo.png'
                        },
                        {
                            id: '1',
                            name: '爆款VC精华 韩夕梦37韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦7vc乙基醚 精',
                            price: 89.00,
                            prcs: 179.00,
                            count: 1,
                            size: '深层洁净除菌洗衣凝珠',
                            img: '/static/logo.png'
                        },
                        {
                            id: '2',
                            name: '爆款VC精华 韩夕梦377v韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦c乙基醚 精',
                            price: 89.00,
                            prcs: 179.00,
                            count: 1,
                            size: '深层洁净除菌洗衣凝珠',
                            img: '/static/logo.png'
                        }, {
                            id: '3',
                            name: '爆款VC精华 韩夕梦377vc乙基醚 精',
                            price: 89.00,
                            prcs: 179.00,
                            count: 1,
                            size: '深层洁净除菌洗衣凝珠',
                            img: '/static/logo.png'
                        },
                        {
                            id: '4',
                            name: '爆款VC精华 韩夕梦377vc乙基醚 精',
                            price: 89.00,
                            prcs: 179.00,
                            count: 1,
                            size: '深层洁净除菌洗衣凝珠',
                            img: '/static/logo.png'
                        }
                    ],
                    boton_markes:[]
                }
            },
            methods: {
                setCart() { //计算总价
                    let totalPrice = 0
                    this.list.forEach(v => {
                        if (v.isChecked) {
                            totalPrice += v.count * v.price
                        }
                    })
                    this.totalPrice = totalPrice
                },
    
                editNum(id, type) { //编辑数量
                    const index = this.list.findIndex(v => v.id == id)
                    if (this.list[index].count == 1 && type == -1) {
                        uni.showToast({
                            title: '至少购买一件商品',
                            icon: 'none'
                        })
                    } else {
                        this.list[index].count += type
                    }
                    this.setCart()
                },
    
                // 全选
                checkboxChangeAll(e) {
                    this.isAllChecked = !this.isAllChecked
                    this.list.forEach(v => v.isChecked = this.isAllChecked)
                    this.setCart()
                },
    
                // 选择每一项
                checkboxChange: function(e, id) {
                    console.log(e,id)
                    var temp = []
    
                    // 找到被修改的商品对象
                    let index = this.list.findIndex(v => v.id === id)
                    // 选中状态取反
                    this.list[index].isChecked = !this.list[index].isChecked
    
                    temp = this.list.every(v => v.isChecked)
                    if (temp) {
                        this.isAllChecked = true
                    } else {
                        this.isAllChecked = false
                    }
                    this.setCart()
                },
                // 管理 关闭checkbox标签
                // onleft(){
                    // this.list.forEach(v => {
                    //     console.log('1',v)
                    //     if (v.isChecked) {
                    //         totalPrice += v.count * v.price
                    //     }
                    // })
                // },
                
                submitOrder() { // 提交购物车订单
                    // 判断是否选择购物车商品
                    var bol = this.list.every(el => el.isChecked == false)
                    if (bol) {
                        uni.showToast({
                            title: "这些你都不喜欢吗，你是不是只喜欢喝水，你倒是选一个啊商品啊",
                            icon: "none",
                            duration: 2000
                        })
                    } else {
                        uni.showToast({
                            title: "你肯定没有钱,还是算了吧",
                            icon: "none",
                            duration: 2000
                        })
                    }
                }
            },
        }
</script>
<style lang="less">
    .box {
            width: 100%;
            // background-color: #F0F0F0;
            background-color: #aaff7f;
    
            .border {
                width: 100%;
                height: 130rpx;
                line-height: 160rpx;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                position: fixed;
                z-index: 999;
                top: 0;
    
                .border_left {
                    padding: 14rpx 20rpx;
                    font-size: 28rpx;
                    color: #333333;
                }
    
                .border_center {
                    padding-right: 96rpx;
                    font-size: 36rpx;
                    font-weight: 600;
                }
            }
    
            .border-lis {
                width: 100%;
                height: 130rpx;
            }
    
            .box_content {
                .box_content_one {
                    width: 712rpx;
                    height: 244rpx;
                    background: #FFFFFF;
                    border-radius: 20rpx;
                    margin: 20rpx auto;
                    margin-top: 30rpx;
                    display: flex;
                    box-sizing: border-box;
                    position: relative;
    
                    .box_content_oput {
                        display: flex;
    
                        .box_content_oput_input {
                            padding: 92rpx 10rpx;
    
                            /* #ifdef APP-PLUS ||MP-WEIXIN */
                            checkbox .wx-checkbox-input {
                                border-radius: 50% !important;
                                /* color: #ffffff !important; */
                            }
    
                            checkbox .wx-checkbox-input.wx-checkbox-input-checked {
                                color: #fff;
                                background-image: linear-gradient(to right, #39FDCE, #48E3FD);
                            }
    
                            /* .wx-checkbox-input.wx-checkbox-input-checked {
                                        border: none !important;
                                    } */
                            /* #endif */
                        }
    
                        .box_content_oput_imges {
                            width: 100%;
                            margin: 30rpx 0rpx auto;
    
                            image {
                                width: 180rpx;
                                height: 180rpx;
                            }
                        }
    
                    }
    
                    .box_content_number {
                        padding: 35rpx 20rpx;
    
                        .box_content_title {
                            width: 412rpx;
                            height: 52rpx;
                            font-size: 28rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            line-height: 28rpx;
                            //字体超出俩行 隐藏显示省略号
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
    
                        .box_content_effect {
                            width: 242rpx;
                            height: 24rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #7E7E7E;
                            line-height: 24rpx;
                            background-color: #f9f5f5;
                            margin: 20rpx 0rpx;
                        }
    
                        .box_content_and {
                            display: flex;
                            padding: 10rpx 0rpx;
    
                            .box_content_number_discount {
                                font-size: 40rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #FF4E3B;
                            }
    
                            .box_content_number_original {
                                color: #999999;
                                font-size: 22rpx;
                                padding: 15rpx 20rpx;
                            }
                        }
    
                    }
    
                    .calculator {
                        position: absolute;
                        display: flex;
                        top: 62%;
                        left: 78%;
    
                        .left_i {
                            width: 30rpx;
                        }
    
                        .center_con {
                            width: 40rpx;
                            background-color: #F6F6F6;
                            padding: 0rpx 20rpx;
                            text-align: center;
                        }
    
                        .right_i {
                            width: 30rpx;
                        }
                    }
                }
    
            }
    
            .box_botton {
                width: 100%;
                margin-bottom: 50rpx;
                font-family: PingFangSC-Regular, PingFang SC;
    
                .box_bottcontent {
                    width: 95%;
                    margin: auto;
                    display: flex;
                    flex-flow: initial;
                    flex-wrap: wrap;
                    align-items: center;
    
                    .box_bottent {
                        // width: 330rpx;
                        width: 46%;
                        background: #ffffff;
                        border-radius: 12rpx;
                        margin: 15rpx 14rpx;
                        box-sizing: border-box;
    
                        .box_boent_one {
                            width: 330rpx;
                            height: 330rpx;
                        }
    
                        .box_boent_one image {
                            width: 100%;
                            height: 100%;
                            border-radius: 12rpx;
                        }
    
                        .box_boent_two {
                            width: 300rpx;
                            height: 58rpx;
                            padding: 20rpx 20rpx;
                            font-size: 28rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #0F0C10;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
    
                        .box_boent_three {
                            display: flex;
                            flex-flow: initial;
                            justify-content: space-between;
                            padding: 20rpx 10rpx;
    
                            .box_boent_three_ins {
                                width: 130rpx;
                                height: 28rpx;
                                line-height: 28rpx;
                                font-size: 36rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 600;
                                color: #FF4E3B;
                                display: flex;
                                flex-direction: row;
    
                                text {
                                    font-size: 20rpx;
                                    padding-top: 8rpx;
                                }
                            }
    
                            .box_boent_three_let {
                                font-size: 20rpx;
                                color: #999999;
                                background: #FFFFFF;
                            }
                        }
                    }
                }
            }
    
            // 底部导航
            .tabbar {
                width: 100%;
                height: 112rpx;
                background-color: #ffffff;
                position: fixed;
                bottom: -5rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;
    
                // border-radius: 8% 8%;
                .all {
                    font-size: 32rpx;
                    color: #3E3E3E;
                    letter-spacing: 2.29rpx;
                    display: flex;
    
                    /* #ifdef APP-PLUS ||MP-WEIXIN */
                    checkbox .wx-checkbox-input {
                        border-radius: 50% !important;
                        /* color: #ffffff !important; */
                    }
    
                    checkbox .wx-checkbox-input.wx-checkbox-input-checked {
                        color: #fff;
                        background-image: linear-gradient(to right, #39FDCE, #48E3FD);
                    }
    
                    /* .wx-checkbox-input.wx-checkbox-input-checked {
                                border: none !important;
                            } */
                    /* #endif */
                }
    
                .totalPrice {
                    letter-spacing: 2.29rpx;
                    padding-left: 200rpx;
    
                    .totalPrice_ff {
                        font-size: 24rpx;
                        color: #999999;
                    }
    
                    .totalPrice_red {
                        font-size: 32rpx;
                        color: #FF4E3B;
                    }
                }
    
                .submitOrder {
                    width: 208rpx;
                    height: 80rpx;
                    background-image: linear-gradient(to right, #38FFCB, #49E1FF);
                    border-radius: 60rpx;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    letter-spacing: 2.57rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    

</style>