football/pages/cart/cart.vue

<template>
	<app-layout>
		<view class="app-cart">
			<view class="app-announcement dir-left-nowrap main-between cross-center">
				<text class="app-announcement-text">商品库存有限，请尽快下单</text>
				<app-form-id @click="editSwitch">
					<text class="app-edit-text">{{editStatus ? '完成' : '编辑'}}</text>
				</app-form-id>
			</view>
			<view class="app-item" v-for="(mch, index) in listObj" :key="index" v-if="listObj.length > 0">
				<app-shop-product @change="change" :mch="mch"  :editStatus="editStatus" @changeSingleRadio="changeSingleRadio" @changeRadioAll="changeRadioAll" ></app-shop-product>
			</view>
			<view class="no-cart" v-if="listObj.length === 0">
				<view class="cart-icon">
					<image class="cart-image" src="../../static/image/icon/nav-icon-cart.png"></image>
				</view>
				<view class="cart-text">购物车还是空的哦</view>
			</view>
			<view>
				<app-empty-bottom backgroundColor="#f7f7f7" :botBool="botBool" :height="Number(100)"></app-empty-bottom>
			</view>
			<view v-if="!tabbarbool" :style="{background: 'white', position: 'fixed', bottom: 0, height: `${getEmpty}rpx`, width: '750rpx'}"></view>
			<view class="app-settlement dir-left-nowrap main-between cross-center" :style="{bottom:  `${tabbarbool ? BotHeight : getEmpty}rpx`}">
				<view class="app-radio dir-left-nowrap main-right cross-center">
					<app-radio type="round" @click="setALl" v-model="all"></app-radio>
					<text class="app-all-text">全选</text>
					<text class="app-price" v-if="!editStatus">总计: ￥{{priceNum}}</text>
				</view>
				<button :disabled="submitDis" :class="submitDis ?  'delete-disabled' : ''" class="app-delete" v-if="editStatus" @click="deleteProduct">
						删除
				</button>
				<button :disabled="submitDis" :class="submitDis ? 'disabled-background' : ''" class="app-settlement-button" v-else @click="settlement">
						去结算
				</button>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import { mapState, mapGetters } from 'vuex';
    import appShopProduct from './components/app-shop-product/app-shop-product.vue';
    import appRadio from '../../components/basic-component/app-radio/app-radio.vue';
    import appIphoneX from '../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appEmptyBottom from '../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';
    
    export default {
        name: 'cart',
        components:{
            'app-shop-product': appShopProduct,
	        'app-radio': appRadio,
	        'app-iphone-x': appIphoneX,
	        'app-empty-bottom': appEmptyBottom,
        },
        data() {
            return {
                editStatus: false,
	            listObj: [],
	            all: false,
                editList: [],
	            priceNum: 0,
	            edit: false,
                botBool: true,
                currentRoute: this.$platDiff.route(),
                tabbarbool: false,
                spike: -1,
                submitDis: true,
            }
        },
        computed:{
            ...mapState({
                tabBarHeight: (state) => {
                  return state.gConfig.tabBarHeight;
                },
                iphoneHeight: (state) =>{
	                return  state.gConfig.iphoneHeight;
                },
	            iphone: (state) => {
                    return state.gConfig.iphone
	            }
            }),
            ...mapGetters('iPhoneX', {
                BotHeight: 'getBotHeight',
                getEmpty: 'getEmpty',
            }),
            ...mapState({
                tabBarNavs: state => state.mallConfig.navbar.navs,
            }),
        },
        methods: {

            setALl(data) {
                this.selectAll(data);
            },
	        
            // 编辑
            editSwitch() {
                this.all = false;
                for (let i = 0; i < this.listObj.length; i++) {
                    this.listObj[i].is_active = false;
                    for (let j = 0; j < this.listObj[i].goods_list.length; j++) {
                        this.listObj[i].goods_list[j].is_active = false;
                    }
                }
                this.editStatus = !this.editStatus;
            },
	        
	        async getProductList() {
                uni.showLoading({
	                title: '加载中'
                });
                const res = await this.$request({
	                url: this.$api.cart.list,
	                method: 'get',
                });
                if (res.code === 0) {
                    this.listObj = res.data.list;
                    this.spikeTime(res.data.list);
                }
                uni.hideLoading();
	        },
	        
	        // 商城全选
            changeRadioAll(data) {
                for (let i = 0; i < this.listObj.length; i++) {
                    let {mch_id ,  goods_list } = this.listObj[i];
                    if (data.mch_id === mch_id) {
                        for (let j = 0; j < goods_list.length; j++) {
                            if (!this.editStatus) {
                                if (goods_list[j].new_status === 0) goods_list[j].is_active = !data.is_active;
                            } else {
                                goods_list[j].is_active = !data.is_active;
                            }
                        }
                        this.listObj[i].is_active = !data.is_active;
                    }
                }
            },
	        
	        // 单选
            changeSingleRadio(mch, item) {
                for (let i = 0; i < this.listObj.length; i++) {
                    if (this.listObj[i].mch_id === mch.mch_id) {
                        let goods_list_len = mch.goods_list.length;
                        let active_num = 0;
                        for (let j = 0; j < this.listObj[i].goods_list.length; j++) {
                            
                            if (item.id === this.listObj[i].goods_list[j].id) {
                                this.listObj[i].goods_list[j].is_active  = !this.listObj[i].goods_list[j].is_active;
                            }
                            
                            if (this.listObj[i].goods_list[j].is_active) {
                                active_num++;
                            }
                            
                            if (this.editStatus === false && this.listObj[i].goods_list[j].new_status !== 0) {
                                goods_list_len --;
                            }
                        }
                        if (goods_list_len === active_num) {
                            this.listObj[i].is_active = true;
                        } else {
                            this.listObj[i].is_active = false;
                        }
                    }
                }
            },
	        
            selectAll(bool) {
                this.listObj.map(item => {
                    item.is_active = bool;
                    item.goods_list.map(good => {
                        if (this.editStatus === false) {
                            if (good.new_status === 0) {
                                good.is_active = bool;
                            }
                        } else {
                            good.is_active = bool;
                        }
                    })
                });
            },
	        // 结算
            settlement() {
                let all_product = [];
                let is_miaosha = false;
                for (let i = 0; i < this.listObj.length; i++) {
                    let mch = {
                        mch_id: this.listObj[i].mch_id,
                        goods_list: [],
                    };
                    for (let j = 0; j < this.listObj[i].goods_list.length; j++) {
                        let good = this.listObj[i].goods_list[j];
                        if (good.new_status === 0 && good.is_active) {
                            if (good.sign === 'miaosha') is_miaosha = true;
                            let product = {
                                id: good.goods_id,
                                attr: [
                                ],
                                num: good.num,
                                cart_id: good.id,
                                goods_attr_id: good.attr_id,
                            };
                            for (let n in good.attrs.attr) {
                                let attr = {
                                    attr_id: good.attrs.attr[n].attr_id,
                                    attr_group_id: good.attrs.attr[n].attr_group_id,
                                };
                                product.attr.push(attr);
                            }
                            mch.goods_list.push(product);
                        }
                    }
                    if (mch.goods_list.length > 0) {
                        all_product.push(mch);
                    }
                }
                let jump_url = `/pages/order-submit/order-submit?mch_list=${JSON.stringify(all_product)}`;
                if (is_miaosha) {
                    jump_url += `&preview_url=${encodeURIComponent(this.$api.miaosha.order_preview)}&submit_url=${encodeURIComponent(this.$api.miaosha.order_submit)}`;
                }
                this.$jump({
	                open_type: 'navigate',
	                url: jump_url,
                });
                setTimeout(()=> {
					this.listObj = [];
				}, 1000);
            },
	        editNum() {
                let editList = [];
                for (let i = 0; i < this.listObj.length; i++) {
                    let goods = this.listObj[i].goods_list;
                    for (let j = 0; j < goods.length; j++) {
                        if (goods[j].new_status === 0) {
                            editList.push({
                                goods_id: goods[j].goods_id,
                                num: goods[j].num,
                                attr: goods[j].attr_id,
                            })
                        }
                    }
                }
                if (!editList.length) return;
                this.$request({
                    method: 'post',
                    url: this.$api.cart.edit,
                    data: {
                        list: JSON.stringify(editList)
                    }
                }).then(() => {
                })
	        },
	        
	        // 删除商品
            async deleteProduct() {
                let product_list = [];
                
                for (let i = 0 ; i < this.listObj.length; i++) {
                    let goods = this.listObj[i].goods_list;
                    for (let j = 0 ; j < goods.length; j++) {
                        if (goods[j].is_active) {
                            product_list.push({
	                            mch_id: goods[j].mch_id,
	                            id: goods[j].id,
                            })
                        }
                    }
                }
                
                if (!product_list.length) return;
                const res = await this.$request({
                    method: 'post',
	                url: this.$api.cart.delete,
                    data: {
                        cart_id_list: JSON.stringify(product_list),
                    }
                });
                if (res.code === 0) {
                    this.editStatus = false;
                    for (let j = 0; j < this.listObj.length; j++) {
                        for (let i = 0; i < product_list.length; i++) {
                            if (this.listObj[j].mch_id == product_list[i].mch_id) {
                                for (let k = 0; k < this.listObj[j].goods_list.length; k++) {
                                    if (this.listObj[j].goods_list[k].id == product_list[i].id) {
                                        this.$delete(this.listObj[j].goods_list, k);
                                    }
                                }
                                if (this.listObj[j].goods_list.length === 0) {
                                    this.$delete(this.listObj, j);
                                }
                            }
                        }
                    }
                }
            },
            b() {
                let currentRoute = this.currentRoute;
                for (let i = 0; i < this.tabBarNavs.length; i++) {
                    if(currentRoute.includes(this.tabBarNavs[i].url.split('?')[0])) {
                        return this.tabbarbool = true;
                    }
                }
                return  this.tabbarbool = false;
            },

            change(number, id, mch_id) {
                for (let i = 0; i < this.listObj.length; i++) {
                    if (this.listObj[i].mch_id === mch_id) {
                        for (let j = 0; j < this.listObj[i].goods_list.length; j++) {
                            if (this.listObj[i].goods_list[j].id === id) {
                                this.listObj[i].goods_list[j].num = Number(number);
                                return;
                            }
                        }
                    }
                }
            },
	        
	        setTime(data) {
                let is_spike = false;
                for (let i = 0; i < data.length; i++) {
                    for (let j = 0; j < data[i].goods_list.length; j++) {
                        if (data[i].goods_list[j].sign === 'miaosha' && data[i].goods_list[j].miaosha_status === 1) {
                            is_spike = true;
                            data[i].goods_list[j].miaosha_time--;
                            let second = parseInt(data[i].goods_list[j].miaosha_time);
                            let minute = 0;
                            let hour = 0;
                            if (second > 60) {
                                minute = parseInt(second / 60);
                                second = parseInt(second % 60);
                                if (minute > 60) {
                                    hour = parseInt(minute / 60);
                                    minute = parseInt(minute % 60);
                                }
                            }
                            let timeDaily = {
                                h: hour < 10 ? ('0' + hour) : hour,
                                m: minute < 10 ? ('0' + minute) : minute,
                                s: second < 10 ? ('0' + second) : second,
                            };
                            this.$set(this.listObj[i].goods_list[j], 'miaosha_string',  `${timeDaily.h + ':' + timeDaily.m + ':' + timeDaily.s}`);
                        }
                    }
                }
                return is_spike;
	        },
	        spikeTime(data) {
	            clearInterval(this.spike);
	            let is_spike = this.setTime(data);
	            if (!is_spike) return;
                this.spike = setInterval(() => {
                    let is_spike = this.setTime(data);
                    if (!is_spike) {
                        clearInterval(this.spike);
                    }
                }, 1000);
	        }
        },
        onLoad() {
            setTimeout(() => {
	            this.getProductList();
                this.all = false;
            }, 1000);
        },
	    onShow() {
            this.submitDis = true;
            this.getProductList();
            this.all = false;
        },
        onHide() {
            this.editNum();
            clearInterval(this.spike);
        },
        onUnload() {
            this.editNum();
            clearInterval(this.spike);
        },
	    watch:{
            listObj: {
                handler(listObj) {
                    this.priceNum = 0;
                    let listNum = 0;
                    let activeIndex = 0;
                    for (let i = 0; i < listObj.length; i++) {
                        listNum += listObj[i].goods_list.length;
                        let status = listObj[i].goods_list.length;
                        let newStatus = 0;
                        for (let j = 0; j < listObj[i].goods_list.length;j++) {
                            if (listObj[i].goods_list[j].new_status !== 0) {
                                newStatus++;
                            }
                            if (this.editStatus === false && listObj[i].goods_list[j].new_status !== 0) {
                                listNum --;
                            }
                            if (listObj[i].goods_list[j].is_active) {
                                if (!this.editStatus) {
                                    let num = Number(listObj[i].goods_list[j].attrs.price) * Number(listObj[i].goods_list[j].num);
                                    this.priceNum += num;
                                }
                                activeIndex++;
                            }
                        }
                        if (status === newStatus) {
                            this.listObj[i].new_status = 1;
                        }
                    }
                    if (activeIndex === listNum) {
                        if (listNum === 0 && activeIndex === 0) {
                            this.all = false;
                        } else {
                            this.all = true;
                        }
                    } else {
                        this.all = false;
                    }
                    
                    if (activeIndex > 0) {
                        this.submitDis = false;
                    } else {
                        this.submitDis = true;
                    }
                    this.priceNum = this.priceNum.toFixed(2);
                },
	            deep: true,
            },
            tabBarNavs: {
                handler: function() {
                    this.b();
                },
                immediate: true,
            }
	    }
    }
</script>

<style lang="scss" scoped>
	.app-cart {
		background-color: #f7f7f7;
		position: absolute;
		top: 0;
		left: 0;
		width: #{750rpx};
		.app-announcement {
			width: 100%;
			height: #{72rpx};
			background-color: #ffffff;
			.app-announcement-text {
				font-size: #{26rpx};
				color: #999999;
				margin-left: #{24rpx};
			}
			.app-edit-text {
				font-size: #{26rpx};
				color: #353535;
				margin-right: #{32rpx};
			}
		}
		.app-settlement {
			width: 100%;
			height: #{100rpx};
			z-index: 1500;
			position: fixed;
			left: 0;
			border-top: #{1rpx} solid #e2e2e2;
			background-color: white;
			.app-radio {
				padding-left: #{23rpx};
				.app-price {
					margin-left: #{24rpx};
					font-size: #{28rpx};
					color: #ff4544;
				}
			}
			.app-all-text {
				margin-left: #{9rpx};
				font-size: #{25rpx};
				color: #3f3f3f;
			}
			.app-delete {
				width: #{140rpx};
				height: #{64rpx};
				line-height: #{64rpx};
				text-align: center;
				background-color: white;
				border-radius: #{32rpx};
				border: #{1rpx} solid #ff4544;
				color: #ff4544;
				font-size: #{28rpx};
				margin: #{0 24rpx 0 0};
				padding: 0;
			}
			.delete-disabled {
				color: #989898;
				border: #{1rpx} solid #989898;
			}
			.app-settlement-button {
				background-color: #ff4544;
				height: #{100rpx};
				width: #{250rpx};
				color: #ffffff;
				font-size: #{30rpx};
				line-height: #{100rpx};
				text-align: center;
				border-radius: 0;
				margin: 0;
				padding: 0;
				border: none;
			}
			
			.disabled-background {
				background-color: #989898;
			}
		}
		.no-cart {
			width: 100%;
			.cart-icon {
				width: #{160rpx};
				height: #{160rpx};
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.1);
				margin: #{150rpx auto 40rpx};
				.cart-image {
					height: #{80rpx};
					width: #{80rpx};
					margin: #{40rpx};
				}
			}
			.cart-text {
				font-size: #{30rpx};
				color: #888;
				text-align: center;
				
			}
		}
	}
</style>