简单的购物车实现

html

<view class="container">
    <view class="goods-item" v-for="(item,index) of cartList" :key="index">
        <uni-swipe-action :options="option" @click="cancel(item.id)">
            <view class="goods-list">
                <!-- 是否选中 -->
                <view class="checkbox-box"  @click="select(item)">
                    <view class="checkbox">
                        <view :class="item.select==1?'select':''"></view>
                    </view>
                </view>
                <!--商品信息 -->
                <view class="goods">
                    <view class="goods-img">
                        <image class="goods-img-size" :src="item.goods.img" mode=""></image>
                    </view>
                    <view class="goods-info">
                        <view class="goods-info-title">{{item.goods.title}}</view>
                        <view class="goods-info-np">
                            <view class="goods-info-price">￥{{item.goods.price}}</view>
                            <view class="goods-info-num">
                                <i class="iconfont cut" @click="cut(item)" :style="{color:setting.backgroundcolor}">&#xe6ce;</i>
                                <view class="number">{{item.num}}</view>
                                <i class="iconfont add" @click="add(item)" :style="{color:setting.backgroundcolor}">&#xe6db;</i>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </uni-swipe-action>
    </view>
    <!-- 底部 -->
    <view class="cart-footer" :style="{bottom:footerbottom + 'px'}">
        <view class="checkbox-all-box" @click="selectAll">
            <view class="checkbox-all">
                <view :class="selectAllStatus==1?'select':''"></view>
            </view>
            <view>全选</view>
            <view class="deleteAll" v-if="selectAllStatus==1" @click="cancelAll">删除</view>
        </view>
        <view class="account">
            <view class="account-info">合计：￥{{totalPrice}}</view>
            <view class="account-btn" @click="account">结算</view>
        </view>
    </view>
</view>

<script>
import uniSwipeAction from '../../component/uni-swipe-action/uni-swipe-action.vue'
import app from '../../common/config.js';
import { mapState, mapMutations } from 'vuex';
export default {
    data() {
        return {
            cartList: [] ,// 购物车列表
            footerbottom: 50,
            option:[{text: '删除',style: { backgroundColor: '#dd524d'}}],
            selectAllStatus:0 ,//是否全选 1是 0否
            totalPrice: 0 ,// 结算金额
            cartid:[] //选中的购物车id
        };
    },
    components: {
        uniSwipeAction
    },
    computed: mapState({
        setting: state => state.setting,
        userinfo: state => state.userinfo
    }),
    onLoad () {
        this.judgeIphone()
    },
    onShow() {
        this.getCartInfo()
    },
    onHide() {
        this.cartid = []
        this.selectAllStatus = 0
        this.totalPrice = 0
    },
    methods: {
        // 判断是否是iphonex
        judgeIphone() {
            var that = this 
            uni.getSystemInfo({
                success: function (res) {
                    let name = 'iPhone X'
                    if(res.model.indexOf(name) > -1){
                        that.footerbottom = 70
                    }
                }
            });
        },
        // 获取购物车列表
        getCartInfo() {
            app.vipidRequest({
                url:'Index/cartinfo',
                method: 'GET',
                header: {
                    'content-type': 'application/x-www-form-urlencoded', 
                },
                success:(res) => {
                    if(res.data.status) {
                        this.cartList = res.data.cartlist
                        for(let i=0; i<this.cartList.length;i++) {
                            this.$set(this.cartList[i],'select',0)
                        }
                    }
                }
            })
        },
        // 添加删减
        add(item) {
            this.add_cut(item.id,1) // 调接口
            // 恢复默认值
            this.cartid = []
            this.selectAllStatus = 0
            this.totalPrice = 0
        },
        cut(item) {
            this.add_cut(item.id,2)
            this.cartid = []
            this.selectAllStatus = 0
            this.totalPrice = 0
        },
        // 添加删减接口
        add_cut(id,status) {
            uni.request({
                url:app.appUrl + 'Index/cartup',
                data: {
                    id,
                    status
                },
                method: 'POST',
                header: {
                    'content-type': 'application/x-www-form-urlencoded', 
                },
                success: (res) => {
                    if(res.data.status) {
                        this.getCartInfo()
                    }else {
                        uni.showToast({
                            title:res.data.msg,
                            duration:2000,
                            icon:'none'
                        })
                    }
                }
            })
        },
        // 单选
        select(item) {
            if(item.select) {
                item.select = 0
                this.totalPrice = this.totalPrice - (item.num*item.goods.price)                
// 表示取消选择，则选中的购物车id中需要删除掉改点击的id 

this.cartid.splice(this.cartid.indexOf(item.id),1)
            }else {
                item.select = 1
                this.totalPrice = this.totalPrice + (item.num*item.goods.price)
                // 表示添加选择，则需要往cartid添加点击的id
                this.cartid.push(item.id)
            }
            // 判断cartid的长度是否等于购物车列表长度，是的话就是全选
            if(this.cartid.length == this.cartList.length) {
                this.selectAllStatus = 1
            }else {
                this.selectAllStatus = 0
            }
            // console.log(this.cartid)
        },
        // 全选
        selectAll() {
            if(this.selectAllStatus==1) {
                this.selectAllStatus = 0
                for(let i=0; i<this.cartList.length;i++) {
                    this.$set(this.cartList[i],'select',0)
                }
                this.totalPrice = 0
                this.cartid = []
            }else{
                this.selectAllStatus = 1
                for(let i=0; i<this.cartList.length;i++) {
                    this.$set(this.cartList[i],'select',1)
                    this.totalPrice = this.totalPrice+(this.cartList[i].num*this.cartList[i].goods.price)
                    if(!this.cartid.includes(this.cartList[i].id)) {
                        this.cartid.push(this.cartList[i].id)
                    }
                }
            }
            // console.log(this.cartid)
        },
        // 删除购物车
        cancel(id) {
            uni.request({
                url:app.appUrl + 'Index/cartdelete',
                data: {
                    id
                },
                method: 'GET',
                header: {
                    'content-type': 'application/x-www-form-urlencoded', 
                },
                success: (res) => {
                    if(res.data.status) {
                        this.getCartInfo()
                    }else {
                        uni.showToast({
                            title:res.data.msg,
                            duration:2000,
                            icon:'none'
                        })
                    }
                }
            })
        },
        // 全选删除
        cancelAll() {
            uni.request({
                url:app.appUrl + 'Index/cartdelete',
                data: {
                    id: this.cartid.join(',')
                },
                method: 'GET',
                header: {
                    'content-type': 'application/x-www-form-urlencoded', 
                },
                success: (res) => {
                    if(res.data.status) {
                        this.getCartInfo()
                    }else {
                        uni.showToast({
                            title:res.data.msg,
                            duration:2000,
                            icon:'none'
                        })
                    }
                }
            })
        },
        // 结算
        account() {
            if(this.cartid.length==0) {
                uni.showToast({
                    title:'请选择商品',
                    duration:2000,
                    icon:'none'
                })
            }else {
                uni.navigateTo({
                    url:'../comfirmOrder/comfirmOrder?cartid='+this.cartid.join(',')
                })
            }
        }
    }
};
</script>

这样的写法不是最简单，交互上也有瑕疵，希望大神有更完美的方法可以与我交流