uniapp-ZHSQ/packages/shop/shopCar/index.vue

<template>
    <view>
        <div class="header">
            <div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
                <div class="searchBox_left" @click="back">
                    <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
                </div>
                <div class="searchBox_mid">购物车({{ shopCarTotal }}) </div>
                <div class="searchBox_right">
                    <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
                </div>
            </div>
        </div>

        <div class="main">
            <div class="deleteIcon" @click="deleteItem">
                <u-icon name="trash" size="50rpx"></u-icon>
            </div>

            <div class="goodsList">
                <div class="goodsItem" v-for="item, index in shopCarList" :key="item.id">
                    <div class="goodsItem_left" @click="changeChecked(item, index)">
                        <image v-if="!item.checked" src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image>
                        <image v-if="item.checked" src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image>
                    </div>
                    <div class="goodsItem_right">
                        <div class="goodsItem_msg">
                            <div class="goodsItem_msg_img">
                                <image :src="picUrl + item.commodity_goods_info.commodity_pic">
                                </image>
                            </div>
                            <div class="goodsItem_msg_right">
                                <div class="goodsItem_msg_right_tit">{{ item.commodity_goods_info.goods_name }}</div>
                                <div class="goodsItem_msg_right_subTit">{{ item.commodity_goods_info.goods_intro }}</div>
                                <div class="goodsItem_msg_right_msg">
                                    <div class="goodsItem_msg_right_msg_left">
                                        <span>￥</span>{{ item.commodity_goods_info.sales_price }} <span>/{{ item.commodity_goods_info.goods_unit }}</span>
                                    </div>
                                    <div class="goodsItem_msg_right_msg_right">
                                        <u-number-box v-model="item.count">
                                            <view slot="minus" class="minus">
                                                <u-icon name="minus" size="32" bold></u-icon>
                                            </view>
                                            <text slot="input" style="width: 80rpx;text-align: center;" class="input">{{
                                                item.count }}</text>
                                            <view slot="plus" class="plus">
                                                <u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
                                            </view>
                                        </u-number-box>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer">
                <div class="footer_left">
                    <div class="footer_all" @click="allChecked">
                        <image v-if="!isAllchecked"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
                        </image>
                        <image v-if="isAllchecked"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
                        </image>
                        全选
                    </div>
                    <div class="footer_total">
                        <span>合计</span>
                        ￥{{ shopMoney }}
                    </div>
                </div>
                <div class="footer_right" @click="submitOrder">
                    结算
                </div>

            </div>
        </div>

        <div class="empty" v-if="false">
            <image src="http://192.168.0.172:5500/7.15/shop_empty.png"></image>
            <div>
                啥也没有 <br>
                赶紧去shopping吧~
            </div>
        </div>

    </view>
</template>

<script>
import {
    apiArr
} from '../../../api/shop';
import {
    picUrl,
    menuButtonInfo,
    request,
    NavgateTo
} from '../../../utils';
export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            value: 3,
            type: "error",
            shopCarList: [],
            shopCarTotal: 0,
            shopMoney: 0,
            isAllchecked: false
        }
    },
    methods: {
        back() {
            NavgateTo("1")
        },
        submitOrder() {
            NavgateTo("../submitOrder/index")
        },

        getShopCar() {
            request(apiArr.getCar, 'POST', {}).then(res => {
                res.commodity_cart_list.forEach(item => {
                    item.checked = false
                });
                console.log(res.commodity_cart_list);
                this.shopCarTotal = res.total
                this.shopCarList = res.commodity_cart_list
            })
        },

        // 单个修改
        changeChecked(item, index) {
            this.shopCarList[index].checked = !this.shopCarList[index].checked
            this.calcTotal()
            // 计算是否全选
            this.isAllchecked = this.shopCarList.every(item => item.checked)
        },
        // 全选
        allChecked() {
            this.isAllchecked = !this.isAllchecked
            // Bug 修复：将 !this.allChecked 改为 !this.isAllchecked
            if (this.isAllchecked) {
                this.shopCarList.forEach(item => {
                    item.checked = true
                });
            } else {
                this.shopCarList.forEach(item => {
                    item.checked = false
                });
            }
            this.calcTotal()
        },
        // 计算金额
        calcTotal() {
            let total = 0
            this.shopCarList.forEach(item => {
                if (item.checked) {
                    total += item.commodity_goods_info.sales_price * item.count
                }
            });
            this.shopMoney = total
        },

        deleteItem() {
            let that = this
            uni.showModal({
                title: '提示',
                content: '确定删除所选商品吗',
                success: function (res) {
                    if (res.confirm) {
                        let ids = []
                        that.shopCarList.forEach(item => {
                            if(item.checked){
                                ids.push(item.id)
                            }
                        })
                        request(apiArr.deleteCar, "POST", {
                            ids
                        }).then(res=>{
                            uni.showToast({
                                title: '删除成功',
                                duration: 2000
                            });
                            that.getShopCar()
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        this.localHeight = meun.height;
        this.getShopCar()
    },
    onReachBottom() {

    },
}
</script>

<style>
@import url("./index.css");
</style>