uni-app购物车功能

实现效果:

image.png

实现功能:

商品数量的增加与减少,多选与全选,商品删除,总价的计算,数量的计算

实现代码:

<template>
    <view class="">
        <view class="notGoods" v-if="show == false">
            <image src="../../static/not.png" mode="widthFix" style="width: 400rpx;"></image>
            <view class="notGoods-text">
                购物车暂无商品
            </view>
            <view class="notGoods-button" @click="placeOrder">
                去下单
            </view>
        </view>
        <view v-if="show == true">
            <!-- <view class="goods" v-for="(item,index) in goods" :key="index"> -->
                <!-- <view class="goods-top">
                    <view class="name">
                        {{item.name}}
                    </view>
                    <image src="../../static/del.png" mode="widthFix" style="width: 30rpx;" @click="delht"></image>
                </view> -->
                <view class="goods-detail" v-for="(item,index) in size" :key="index">
                    <view class="detail-left">
                        <view class="left">
                            <checkbox-group @change="selected(item)">
                                    <checkbox class="xuanzhong" color="#E36452" :checked="checked" />
                                    </checkbox-group>
                            <image :src="item.goodsImage" mode="widthFix" style="width: 150rpx;"></image>
                        </view>
                        <view class="size">
                            <text style="font-size: 25rpx;">尺码:{{item.size}}</text>
                            <text class="goods-price">¥{{item.price}}/件</text>
                        </view>
                    </view>
                    <view class="right">
                        <!-- <ypNumberBox :min="0" :max="9"@change="change" :value="size.num" style="width: 160rpx;height:50rpx;"></ypNumberBox> -->
                        <text class="subtract" @click="reduce(item)">-</text>
                            <text class="num">{{item.num}}</text>
                        <text @click="add(item)" class="add">+</text>
                        <image src="../../static/del.png" mode="widthFix" style="width: 35rpx;" @click="delht(item,index)"></image>
                    </view>
                </view>
            <!-- </view> -->
        </view>
        <view class="end">
            <view class="end-left">
                    <checkbox-group @change="selectedall()">
                        <checkbox class="" :checked="allchecked" />全选
                    </checkbox-group>
                <view>总计:<text  style="color: #f00;font-weight: bold;">¥ {{totalPrice}}</text></view>
            </view>
            <view class="end-right">
                结算({{totalNum}})
            </view>
        </view>
    </view>
</template>
<script>
    import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
    import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
    import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"
    export default{
        components: { wybPopup,ypNumberBox,uniNumberBox},
        data(){
            return{
                show:true,
                allchecked:true,
                checked:true,
                size:[
                    {
                        size:"女款-XXL",
                        num:2,
                        flag:true,
                        price:149,
                        goodsImage:"https://img.alicdn.com/imgextra/i1/33174842/O1CN0141Hygt1ldgNvqvmeW_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
                    },
                    {
                        size:"女款-XL",
                        num:1,
                        flag:true,
                        price:149,
                        goodsImage:"https://img.alicdn.com/imgextra/i1/33174842/O1CN0141Hygt1ldgNvqvmeW_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
                    },],
            
            }
        },
        methods:{
            placeOrder(){
                uni.navigateTo({
                    url:'../order/index'
                })
            },
            delht(item,index){
                // this.size.splice(index, 1)
                uni.showModal({
                                    content:'是否删除此商品',
                                    success:(res)=>{
                                        if(res.confirm) {
                                            console.log('确定');
                                            this.size.splice(index,1)
                                            if(this.size.length ==0){
                                                this.show = false
                                            }
                                        }else if(res.cancel){
                                            console.log('取消')
                                        }
                                    }
                                })
            },
            change(e){
                console.log(e)
                
            },
            selected(item){
                item.flag = !item.flag
                                if (!item.flag) {
                                    this.allchecked = false
                                } else {
                                    const test =this.size.every(item => {
                                        return item.flag === true
                                    })
                                    if (test) {
                                        this.allchecked = true
                                    } else {
                                        this.allchecked = false
                                    }
                                }
                // this.checked=!this.checked
                // this.totalNum()
            },
            
            selectedall(){
                this.allchecked = !this.allchecked
                                if (this.allchecked) {
                                    this.size.map(item => {
                                        this.checked = true
                                        item.flag = true
                                    })
                                } else {
                                    this.checked = false
                                    this.size.map(item => {
                                        item.flag = false
                                        
                                })
                    }
            },
            reduce(item){
                let num =item.num
                // item.num = num-1
                // if(num <=0){
                //  return;
                // }
                if(num>0){
                    num-=1
                }else{
                    num=0
                    return
                }
                item.num =num
            },
            add(item){
                console.log(item.num)
                let num =item.num
                item.num=num+1
            }
        },
        computed: {
                    
                    //计算选中商品的总价
                    totalNum() {
                                    let totalNum = 0;
                                    this.size.map(item => {
                                        item.flag ? totalNum += item.num : totalNum += 0
                                    })
                                    return totalNum

                                },

                    totalPrice() {
                        let totalPrice = 0;
                        this.size.map(item => {
                            item.flag ? totalPrice += item.num * item.price : totalPrice += 0
                        })
                        return totalPrice
                    }
                },
    }
</script>
<style lang="scss">
    .goods{
        line-height: 80rpx;
        background-color: #fff;
        &-top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx;
            border-bottom: 8rpx solid #F1F1F1;
            .name{
                color: #333;
                font-size: 31rpx;
                font-weight: bold;
            }
        }
        &-detail{
            display: flex;
            padding: 30rpx 15rpx 30rpx 30rpx;
            background-color: #fff;
            justify-content: space-between;
            border-bottom: 5rpx solid #F1F1F1;
            align-items: center;
            .detail-left{
                display: flex;
                .left{
                    display: flex;
                    align-items: center;
                }
            }
            .size{
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                margin-left: 30rpx;
                .goods-price{
                    font-size: 25rpx;
                    color: #F44545;
                    
                }
            }
            .right{
                text{
                    width: 50rpx;
                    line-height: 50rpx;
                    text-align: center;
                    display: inline-block;
                    background-color: #F7F7F7;
                    margin-right: 10rpx;
                }
                .add {
                    color: #FA4305;
                    border-radius: 10rpx 30rpx 30rpx 10rpx;
                    margin-right: 20rpx;
                }
                .subtract{
                    border-radius: 30rpx 10rpx 10rpx 30rpx;
                }
            }
        }
        
    }
    .notGoods{
        position: relative;
        top: 220rpx;
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        // line-height: 1334rpx;
        &-text{
            color: #808080;
            margin-bottom: 50rpx;
        }
        &-button{
            width: 260rpx;
            height: 70rpx;
            color:#F44545;
            border: 1rpx solid #F44545;
            text-align: center;
            line-height: 70rpx;
            border-radius: 48rpx;
        }
    }
    .end{
        width: 100%;
        height: 90rpx;
        background-color:#fff;
        position: fixed;
        bottom: 100rpx;
        left: 0;
        display: flex;
        align-items: center;
        &-left{
            width: 70%;
            display: flex;
            justify-content: space-between;
            padding: 0 30rpx;
            .end-flex{
                display: flex;
                align-items: center;
            }
        }
        &-right{
            width: 30%;
            line-height: 90rpx;
            background-color: #F44545;
            text-align: center;
            color: #fff;
        }
    }
</style>

推荐阅读更多精彩内容