uni-app购物车功能

作者: 吃肉肉不吃肉肉 | 来源:发表于2021-01-16 15:11 被阅读0次

    实现效果:

    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>
    
    

    相关文章

      网友评论

        本文标题:uni-app购物车功能

        本文链接:https://www.haomeiwen.com/subject/egunaktx.html