caimei-applets-hehe/pages/goods/cart.vue

<template>
    <view class="container cart clearfix" v-if="hasLogin" :style="{ paddingTop: CustomBar + 'px' }">
        <headerNavbar
            :systeminfo="systeminfo"
            :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi"
            :page="1"
        ></headerNavbar>
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <view class="container-cart-main tui-skeleton" :style="{ paddingTop: isshowDelbtn ? '0rpx' : '80rpx' }">
            <view
                class="foot-check-delbtn"
                v-if="!isshowDelbtn && goodsList.length > 0"
                :style="{ top: CustomBar + 'px' }"
            >
                <view class="foot-text"
                    >共<text>{{ kindCount }}</text
                    >件商品</view
                >
                <view class="delBtn" @tap.stop="showDelManager">删除</view>
            </view>
            <view v-if="!isEmpty" class="container-cart">
                <view class="cart-content" :style="{ paddingBottom: isIphoneX ? '130rpx' : '100rpx' }">
                    <view class="goods-list">
                        <view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
                            <view class="shoptitle">
                                <!--选择商店的全部商品"-->
                                <view class="checkbox-box" @click.stop="checkShop(item)">
                                    <view
                                        class="checkbox iconfont"
                                        :class="[item.checked ? 'icon-xuanze' : 'icon-weixuanze']"
                                    ></view>
                                </view>
                                <view class="text">{{ item.name }}</view>
                            </view>
                            <view class="productlist">
                                <view class="goods-pros" v-for="(pros, idx) in item.productList" :key="idx">
                                    <view class="goods-pros-t">
                                        <!--选择商品-->
                                        <view class="checkbox-box" @click.stop="ischeck(item, pros)">
                                            <view
                                                class="checkbox iconfont"
                                                :class="[pros.productsChecked ? 'icon-xuanze' : 'icon-weixuanze']"
                                            ></view>
                                        </view>
                                        <view class="pros-img" @click.stop="navToListPage(pros)"
                                            ><image :src="pros.mainImage ? pros.mainImage : ''" alt=""
                                        /></view>
                                        <view class="pros-product">
                                            <view class="producttitle" @click.stop="navToListPage(pros)">{{
                                                pros.productName
                                            }}</view>
                                            <view class="productspec">规格:{{ pros.unit ? pros.unit : '' }}</view>
                                            <view class="floor-item-act" v-if="pros.activeStatus == 1">
                                                <text class="tag tag-01" v-if="!pros.heUserId">自营</text>
                                                <text class="tag tag-01" v-else>促销</text>
                                                <text class="tag tag-02" @click.stop="clickPopupShow(pros, 2)"
                                                    >活动价</text
                                                >
                                            </view>
                                            <view class="productprice">
                                                <!--使用过滤器对总价改变-->
                                                <view class="price"><text>￥</text>{{ pros.price | NumFormat }}</view>
                                                <view class="count">
                                                    <view class="number-box">
                                                        <view
                                                            class="iconfont icon-jianhao"
                                                            @click="changeCountSub(item, pros)"
                                                        ></view>
                                                        <input
                                                            class="btn-input"
                                                            type="number"
                                                            maxlength="4"
                                                            v-model="pros.productCount"
                                                            @blur="changeNnmber($event, item, pros)"
                                                            @focus="changeInput(pros)"
                                                        />
                                                        <view
                                                            class="iconfont icon-jiahao"
                                                            @click="changeCountAdd(item, pros)"
                                                        ></view>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none' : 'show']">
                                <view class="sum-none" v-if="item.reducedPrice > 0">
                                    <text class="money-sign">￥</text>
                                    <text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
                                    <text class="money-reduced"
                                        >减<text>￥{{ item.reducedPrice | NumFormat }}</text></text
                                    >
                                </view>
                                <view class="sum"
                                    >合计:<text class="money"
                                        ><text class="money-sign">￥</text>{{ item.totalPrice | NumFormat }}</text
                                    ></view
                                >
                            </view>
                        </view>
                    </view>
                    <view class="failure-list" v-if="failureList.length > 0">
                        <view class="failure-title">
                            <view class="title-txt"
                                >失效商品<text>{{ failureList.length }}件</text></view
                            >
                            <view class="title-btn" @click.stop="deletefailureList"
                                ><text class="butto">清空失效商品</text></view
                            >
                        </view>
                        <view class="productlist">
                            <view class="goods-pros" v-for="(failure, failureIdx) in failureList" :key="failureIdx">
                                <view class="goods-pros-t" @click.stop="navToListPage(failure)">
                                    <!--选择商品-->
                                    <view
                                        class="checkbox-box"
                                        @click.stop="ischeckFailure(failure)"
                                        v-if="isshowDelbtn"
                                    >
                                        <button
                                            class="checkbox iconfont"
                                            :class="[failure.productsChecked ? 'icon-xuanze' : 'icon-weixuanze']"
                                        ></button>
                                    </view>
                                    <text class="img-tip">失效</text>
                                    <view class="pros-img">
                                        <image :src="failure.image ? failure.image : ''" alt="" />
                                    </view>
                                    <view class="pros-product">
                                        <view class="producttitle">{{ failure.name }}</view>
                                        <view class="productspec">规格:{{ failure.unit ? failure.unit : '' }}</view>
                                        <view class="productstate">商品已下架</view>
                                    </view>
                                    <view class="pros-marks" v-if="failure.isFailureLayer"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 脚部菜单 -->
                <view class="footer" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
                    <view class="footer-le">
                        <view class="foot-check checkbox-box" @tap.stop="checkAll()">
                            <button
                                class="checkbox iconfont"
                                :class="[isCheckAll ? 'icon-xuanze' : 'icon-weixuanze']"
                            ></button>
                            <view class="text">全选</view>
                        </view>

                        <view class="sum">
                            <view v-if="!isshowDelbtn" class="sum-price">
                                总价:<text class="money-sign">￥</text
                                ><text class="money">{{ allPrice | NumFormat }}</text>
                            </view>
                        </view>
                    </view>
                    <view v-if="!isshowDelbtn" class="footer-ri">
                        <view class="btn hanld-btn" @tap="toConfirmation">去结算({{ allCount }})</view>
                    </view>
                    <view v-else class="footer-del">
                        <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
                        <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
                    </view>
                </view>
            </view>
            <view v-else class="cart-content empty">
                <view class="empty-container">
                    <image
                        class="empty-container-image"
                        :src="StaticUrl + 'icon-empty-cart.png'"
                        mode="aspectFit"
                    ></image>
                    <text class="error-text">购物车空空的，快去逛逛吧~</text>
                </view>
            </view>
        </view>
        <!-- 操作弹窗 -->
        <tui-modal
            :show="modal"
            @click="handleClick"
            @cancel="hideMobel"
            :content="contentModalText"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
        <!-- 促销活动弹窗 -->
        <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
        <!-- 透明模态层 -->
        <modal-layer v-if="modallayer"></modal-layer>
    </view>
</template>
<script>
import authorize from '@/common/config/authorize.js'
import tuiSkeleton from '@/components/tui-skeleton/tui-skeleton'
import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
import tuiNomore from '@/components/tui-components/nomore/nomore'
import headerNavbar from '@/components/cm-module/headerNavbar/headerNavbar.vue' //顶部自定义胶囊'
import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
import modalLayer from '@/components/modal-layer'
import { mapGetters } from 'vuex'
import { cartList } from '@/common/json/data.json.js' //本地数据

export default {
    components: {
        tuiSkeleton,
        tuiLoadmore,
        tuiNomore,
        modalLayer,
        headerNavbar,
        activiPopup
    },
    data() {
        return {
            StaticUrl: this.$Static,
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 0,
                title: '购物车' // 导航栏 中间的标题
            },
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            CustomBar: this.CustomBar, // 顶部导航栏高度
            isIphoneX: this.$store.state.isIphoneX,
            userId: '',
            popupShow: false,
            handlerPros: {}, //监听单挑促销商品
            failureList: [], //失效商品列表
            goodsList: [], //购物车的商品
            delGoodsList: '', //要删除的商品
            setGoodData: '', //确认订单的商品
            isCheckAll: false, //是否全选
            kindCount: 0, //购物车宝贝数量
            allPrice: 0, //所有价格
            totalOriginalPrice: 0, //所有原价价
            reducedPrice: 0, //满减
            allCount: 0, //被选中的产品数量
            isModallayer: false,
            skeletonShow: true,
            isshowDelbtn: false,
            isDisabled: false, // 供应商/店铺全选是否禁用状态
            isEmpty: false, //显示空购物车
            scrollHeight: 'auto',
            nomoreText: '上拉显示更多',
            hasNextPage: false,
            loadding: false,
            pullUpOn: true,
            pullFlag: true,
            pageSize: 10,
            pageNum: 1,
            submitIds: [],
            modal: false,
            contentModalText: '',
            deleteType: 0
        }
    },
    onLoad() {
        this.setScrollHeight()
    },
    computed: {
        ...mapGetters(['hasLogin'])
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        },
        totalprice(val, count) {
            //单件商品的价格 × 数量
            return (val * count).toFixed(2)
        }
    },
    methods: {
        initData() {
            this.isModallayer = false //遮罩层 防止多次点击
            this.isCheckAll = false //是否全选
            this.submitIds = []
            this.$api.getStorage().then(resolve => {
                this.userId = resolve.userId ? resolve.userId : 0
                this.InitGetCartGoodsList()
            })
        },
        clickPopupShow(pros, type) {
            if (pros.ladderList.length > 0) {
                this.popupShow = true
                this.handlerPros = pros
            }
        },
        setScrollHeight() {
            // 窗口高度-footer高度
            const { windowHeight, pixelRatio } = uni.getSystemInfoSync()
            setTimeout(() => {
                const query = uni.createSelectorQuery().in(this)
                query.selectAll('.footer').boundingClientRect()
                query.exec(res => {
                    this.windowHeight = windowHeight
                    if (res[0][0]) {
                        this.scrollHeight = windowHeight - res[0][0].height
                    }
                })
            }, 500)
        },
        InitGetCartGoodsList() {
            //初始化购物车 index:1
            this.ProductService.QueryShoppingCartList({ userId: this.userId })
                .then(response => {
                    this.skeletonShow = false
                    let data = response.data
                    this.kindCount = data.cartQuantity
                    if (data.shopList.length > 0 || data.products.length > 0) {
                        this.isEmpty = false
                    } else {
                        this.isEmpty = true
                    }
                    if (data.shopList && data.shopList.length > 0) {
                        this.goodsList = data.shopList
                        console.log(this.goodsList)
                        this.totalShopPeice()
                    } else {
                        this.goodsList = []
                    }
                    if (data.products && data.products.length > 0) {
                        this.failureList = data.products
                    } else {
                        this.failureList = []
                    }
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        ischeckFailure(failure) {
            failure.productsChecked = !failure.productsChecked
            this.updateCheckAllBtn()
        },
        ischeck(item, pro) {
            //为未选中的时候改变为true，反之为true
            pro.productsChecked = !pro.productsChecked
            if (pro.productsChecked) {
                if (!this.submitIds.includes(pro.productID * 1)) {
                    this.submitIds.push(pro.productID)
                }
            } else {
                var lent = this.submitIds.indexOf(pro.productID * 1)
                if (lent >= 0) {
                    this.submitIds.splice(lent, 1)
                }
            }
            this.updateProductCheckedAllBtn(item)
            this.updateCheckAllBtn()
        },
        updateProductCheckedAllBtn(item) {
            // 单独每个供应商的勾选判断
            let productList = item.productList,
                productsCheckedLength = 0,
                disabledLength = 0
            if (this.isshowDelbtn) {
                productList.forEach(pros => {
                    if (pros.productsChecked) {
                        productsCheckedLength++
                    }
                })
            } else {
                productList.forEach(pros => {
                    if (pros.productsChecked) {
                        productsCheckedLength++
                    }
                })
            }
            item.checked = productsCheckedLength === productList.length
        },
        updateCheckAllBtn() {
            // 全选勾选判断
            let goodsCheckedLength = 0,
                goodsList = this.goodsList,
                failureList = this.failureList
            goodsList.forEach(item => {
                if (item.checked) {
                    goodsCheckedLength++
                }
            })
            failureList.forEach(failureItem => {
                if (failureItem.productsChecked) {
                    goodsCheckedLength++
                }
            })
            if (this.isshowDelbtn) {
                this.isCheckAll = goodsCheckedLength === goodsList.length + failureList.length
            } else {
                this.isCheckAll = goodsCheckedLength === goodsList.length
            }
        },
        checkShop(item) {
            //与单选商品类似
            item.checked = !item.checked
            this.setProductChecked(item)
            this.updateCheckAllBtn()
        },
        setProductChecked(item) {
            item.productList.forEach(pros => {
                if (item.checked) {
                    pros.productsChecked = true
                    if (!this.submitIds.includes(pros.productId * 1)) {
                        this.submitIds.push(pros.productId)
                    }
                } else {
                    pros.productsChecked = false
                    var lent = this.submitIds.indexOf(pros.productId * 1)
                    if (lent >= 0) {
                        this.submitIds.splice(lent, 1)
                    }
                }
            })
        },
        updateBothCheckBtn() {
            if (this.isshowDelbtn) {
                // 当管理删除按钮出现时,失效的商品可被选择
                this.goodsList.forEach(item => {
                    item.checked = this.isCheckAll
                    this.setProductChecked(item)
                })
                //删除按钮 全选包括失效商品勾选
                this.failureList.forEach(failureItem => {
                    failureItem.productsChecked = this.isCheckAll
                })
            } else {
                this.goodsList.forEach(item => {
                    item.checked = this.isCheckAll && !item.isDisabled
                    this.setProductChecked(item)
                })
            }
        },
        checkAll() {
            //全选方法内调用方法
            this.isCheckAll = !this.isCheckAll
            this.updateBothCheckBtn()
        },
        totalShopPeice() {
            //每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
            let touchPrice = 0
            let reducedPrice = 0 //商铺合计满减价
            this.goodsList.map((item, index) => {
                let _totalPrice = 0
                let _reducedPrice = 0
                let _totalOriginalPrice = 0
                item.productList.forEach(pros => {
                    let _price = pros.price * pros.productCount
                    _totalOriginalPrice += pros.price * pros.productCount
                    if (pros.promotion && pros.promotion.type != 2 && pros.promotion.mode == 2) {
                        if (_price >= pros.promotion.touchPrice) {
                            _price = _price - pros.promotion.reducedPrice
                            _reducedPrice += pros.promotion.reducedPrice
                        }
                        _totalPrice += _price
                    } else {
                        _reducedPrice = 0
                        _totalPrice += pros.price * pros.productCount
                    }
                })
                item.reducedPrice = _reducedPrice
                item.totalOriginalPrice = _totalOriginalPrice
                item.totalPrice = _totalPrice
            })
        },
        totalPeice() {
            //计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
            let totalPrice = 0
            let reducedPrice = 0
            let originalPrice = 0
            this.goodsList.forEach((item, index) => {
                let supplierPrice = 0
                let supplierReducedPrice = 0
                item.totalprice = 0
                item.reducedprice = 0
                item.originalprice = 0
                item.productList.forEach(pros => {
                    if (pros.productsChecked) {
                        supplierPrice += pros.price * pros.productCount
                        // 单品满减
                        if (pros.promotion && pros.promotion.type * 1 === 1 && pros.promotion.mode * 1 === 2) {
                            // 单品满减-重新计算供应商总价/满减金额
                            if (pros.price * pros.productCount >= pros.promotion.touchPrice) {
                                supplierPrice -= pros.promotion.reducedPrice
                                supplierReducedPrice += pros.promotion.reducedPrice
                            }
                        }
                    }
                })
                item.totalprice = supplierPrice
                item.reducedprice = supplierReducedPrice
                item.originalprice = supplierPrice + supplierReducedPrice
                totalPrice += item.totalprice
                reducedPrice += item.reducedprice
                originalPrice += item.originalprice
            })
            //最后统计商品原价
            this.totalOriginalPrice = originalPrice
            //最后满减金额 = 店铺减去金额 + 单品减去金额 + 凑单减去金额
            this.reducedPrice = reducedPrice
            //最终合计价格 = 	店铺满减合计 + 单品满减  + 正常合计 + 凑单满减
            this.allPrice = totalPrice
        },
        totalCount() {
            //计算总数量
            this.allCount = 0
            let prosAllCount = 0
            let validCount = 0
            let validList = []
            let productList = []
            this.goodsList.forEach(item => {
                productList = item.productList
                productList.forEach(pros => {
                    if (pros.productsChecked) {
                        prosAllCount += parseInt(pros.productCount)
                        this.allCount = prosAllCount
                    }
                })
            })
        },
        changeCountAdd(item, pros) {
            //商品数量加加
            pros.productCount++
            this.processActivityPrice(pros)
            this.updateShoppogNum(pros)
            this.totalShopPeice()
        },
        changeCountSub(item, pros) {
            //商品数量减减
            if (pros.productCount <= 1) {
                pros.productCount = 1
                this.$util.msg('购买数量不能少于1', 2000)
                return
            } else {
                pros.productCount--
            }
            this.processActivityPrice(pros)
            this.updateShoppogNum(pros)
            this.totalShopPeice()
        },
        changeInput(pros) {
            //输入商品数量更新
        },
        changeNnmber(e, item, pros) {
            //输入商品数量更新
            let _value = Number(e.detail.value)
            if (!this.$api.isNumber(_value)) {
                pros.productCount = 1
            } else if (_value <= 1) {
                this.$util.msg('购买数量不能少于1', 2000)
                pros.productCount = 1
            } else {
                pros.productCount = e.detail.value
            }
            this.processActivityPrice(pros)
            this.updateShoppogNum(pros)
            this.totalShopPeice()
        },
        processActivityPrice(pros) {
            //单独处理活动价格和阶梯价格
            if (pros.activeStatus == 1) {
                pros.ladderList.forEach((item, index) => {
                    if (pros.productCount >= item.buyNum) {
                        pros.price = item.buyPrice
                    }
                })
            } else {
                pros.price = pros.price
            }
        },
        updateShoppogNum(pros) {
            //加减购物车商品更新到后台
            this.ProductService.ShoppingCartUpdate({
                cartId: pros.cartId,
                productCount: pros.productCount
            })
                .then(response => {
                    this.isshowDelbtn = false
                    this.InitGetCartGoodsList()
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        toConfirmation() {
            //跳转确认订单页面
            let setGoodsList = []
            this.goodsList.forEach(res => {
                let products = res.productList
                products.forEach(pros => {
                    if (pros.productsChecked) {
                        setGoodsList.push(pros.productId)
                    }
                })
            })
            if (setGoodsList == '') {
                this.$util.msg('请先选择结算商品~', 2000)
                return
            }
            let cartIds = ''
            this.goodsList.forEach(el => {
                //获取勾选的商品ID拼接字符串逗号隔开，最后一个逗号去掉
                el.productList.forEach(pros => {
                    if (pros.productsChecked) {
                        cartIds += pros.cartId + ','
                    }
                })
            })
            let cartPramsData = {
                allPrice: this.allPrice,
                allCount: this.allCount,
                cartIds: cartIds.substring(0, cartIds.lastIndexOf(',')),
                productCount: ''
            }
            this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({ data: cartPramsData })}`)
        },
        showDelManager() {
            //显示删除商品管理
            this.isshowDelbtn = true
            if (this.isCheckAll) {
                this.updateBothCheckBtn()
            } else {
                this.goodsList.forEach(item => {
                    if (item.checked) {
                        item.productList.forEach(pros => {
                            pros.productsChecked = true
                        })
                    }
                })
                this.updateCheckAllBtn()
            }
            // 失效也被勾选
            this.failureList.forEach(failureItem => {
                if (failureItem.isFailureLayer) {
                    failureItem.isFailureLayer = false
                }
            })
        },
        hideDelManage() {
            //隐藏删除商品管理
            this.isshowDelbtn = false
            let isFailureLayer,
                newFailureList = []
            if (this.isCheckAll) {
                this.updateBothCheckBtn()
            } else {
                // 失效商品取消勾选
                this.goodsList.forEach(item => {
                    if (item.isDisabled) {
                        item.checked = false
                    }
                    item.productList.forEach(pros => {
                        if (pros.validFlag == 3) {
                            pros.productsChecked = false
                        }
                    })
                })
                this.updateCheckAllBtn()
            }
            this.failureList.forEach((failure, index) => {
                if (failure.failureState == 1 || failure.failureState == 2) {
                    isFailureLayer = true
                } else {
                    isFailureLayer = false
                }
                newFailureList.push(Object.assign({}, failure, { isFailureLayer: isFailureLayer }))
            })
            this.failureList = newFailureList
        },
        deleteList() {
            //删除购物车商品
            this.delGoodsList = []
            this.goodsList.forEach(delitem => {
                let products = delitem.productList
                products.forEach(pros => {
                    if (pros.productsChecked) {
                        this.delGoodsList += pros.cartId + ','
                    }
                })
            })
            this.failureList.forEach(failure => {
                if (failure.productsChecked) {
                    this.delGoodsList += failure.cartId + ','
                }
            })
            if (this.delGoodsList.length == 0) {
                this.$util.msg('请选择要删除的商品~', 2000)
                return
            } else {
                this.modal = true
                this.contentModalText = '确定删除选中的商品吗？'
                this.deleteType = 1
            }
        },
        deletefailureList() {
            this.delGoodsList = ''
            this.failureList.forEach(failure => {
                this.delGoodsList += failure.cartId + ','
            })
            this.modal = true
            this.contentModalText = '确定清除所有失效商品吗？'
            this.deleteType = 2
        },
        handleClick(e) {
            //用户操作订单
            let index = e.index
            if (index == 1) {
                this.ProductService.ShoppingCartDelete({
                    cartIds: this.delGoodsList
                })
                    .then(response => {
                        this.$util.msg('删除成功', 2000)
                        setTimeout(() => {
                            this.isshowDelbtn = false
                            this.InitGetCartGoodsList()
                        }, 1000)
                    })
                    .catch(error => {
                        this.$util.msg(error.msg, 2000)
                    })
            }
            this.modal = false
        },
        hideMobel() {
            this.modal = false
        },
        navToListPage(item) {
            this.isModallayer = true
            this.$api.navigateTo(`/pages/goods/product?productId=${item.productId}`)
        },
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        },
        PromotionsFormat(promo) {
            //促销活动类型数据处理
            if (promo != null) {
                if (promo.type == 1 && promo.mode == 1) {
                    return true
                } else {
                    return false
                }
            }
            return false
        }
    },
    watch: {
        //深度监听所有数据，每次改变重新计算总价和总数
        goodsList: {
            deep: true,
            handler(val, oldval) {
                this.totalPeice()
                this.totalCount()
            }
        }
    },
    onPullDownRefresh() {
        //下拉刷新
        this.InitGetCartGoodsList()
        uni.stopPullDownRefresh()
    },
    onShow() {
        if (this.hasLogin) {
            this.initData()
        } else {
            this.$api.redirectTo('/pages/login/login')
        }
    }
}
</script>

<style lang="scss">
page {
    background: #f7f7f7;
    height: auto;
}
.cart-content {
    position: relative;
}
.container-cart-main.none {
    display: none;
}
.container-cart-main.show {
    display: block;
}
.cart-content.empty.none {
    display: none;
}
.cart-content.empty.show {
    display: block;
}
.container-cart.show {
    display: block;
}
.container-cart.none {
    display: none;
}
.empty-container.none {
    display: none;
}
.empty-container.show {
    display: flex;
}
.foot-check-delbtn {
    width: 100%;
    height: 80rpx;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 15rpx 24rpx;
    background-color: #f7f7f7;
    z-index: 990;
    .foot-text {
        font-size: $font-size-26;
        height: 50rpx;
        line-height: 50rpx;
        color: #666666;
        float: left;
        padding-left: 10rpx;
        text {
            margin: 0 6rpx;
        }
    }
    .delBtn {
        width: 100rpx;
        display: inline-block;
        padding: 0 15rpx;
        font-size: $font-size-26;
        height: 50rpx;
        line-height: 50rpx;
        border-radius: 30rpx;
        background: #ffffff;
        border: 1px solid #ff457b;
        color: #ff457b;
        float: right;
        text-align: center;
        &.none {
            display: none;
        }
    }
}
.checkbox-box {
    display: flex;
    align-items: center;
    .checkbox {
        display: flex;
        margin: 0;
        padding: 0 5rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        text-align: center;
        text-decoration: none;
        border-radius: 0;
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        background-color: #ffffff;
        font-size: 36rpx;
        color: #999999;
        &.icon-xuanze {
            color: $color-system;
        }
    }
    &.disabled {
        .checkbox {
            color: #999999;
        }
    }
    .text {
        font-size: $font-size-24;
        margin-left: 10rpx;
    }
}
.goods-list {
    width: 100%;
    height: auto;
    background-color: #f7f7f7;
    .goods-item {
        width: 702rpx;
        padding: 0 24rpx;
        background: #ffffff;
        margin-bottom: 24rpx;
    }
    .shoptitle {
        display: flex;
        align-items: center;
        height: 80rpx;
        line-height: 80rpx;
        .checkbox-box {
            padding: 10rpx;
        }
        .text {
            width: 450rpx;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 20rpx;
            font-size: $font-size-28;
            color: $text-color;
            text-align: left;
            font-weight: bold;
        }
    }
    .goods-pros {
        width: 100%;
        height: auto;
        margin-bottom: 20rpx;
    }
    .goods-pros-t {
        display: flex;
        align-items: center;
        width: 100%;
        height: 210rpx;
        padding: 0 0 26rpx 0;
        .checkbox-box {
            padding: 10rpx;
        }
        .pros-img {
            width: 210rpx;
            height: 100%;
            border-radius: 10rpx;
            margin: 0 20rpx;
            border: 1px solid #f3f3f3;
            image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
            }
        }
    }
    .goods-pros-b {
        width: 100%;
        height: auto;
        padding: 0 0 24rpx 0;
        box-sizing: border-box;
        &.show {
            display: block;
        }
        &.none {
            display: none;
        }
        .sum-none {
            width: 100%;
            height: 48rpx;
            line-height: 48rpx;
            color: $text-color;
            float: left;
            text-align: right;
            .money {
                font-size: $font-size-26;
                color: #999999;
                text-decoration: line-through;
            }
            .money-sign {
                font-size: $font-size-26;
                color: #999999;
                text-decoration: line-through;
            }
            .money-reduced {
                margin-left: 10rpx;
                font-size: $font-size-26;
                color: $color-system;
                .iconfont {
                    font-size: $font-size-34;
                }
            }
        }
        .sum {
            width: 100%;
            height: 40rpx;
            font-size: $font-size-26;
            line-height: 40rpx;
            color: $text-color;
            float: left;
            display: flex;
            justify-content: flex-end;
            font-weight: bold;
            .money {
                color: $color-system;
                font-size: $font-size-26;
            }
            .money-sign {
                font-size: $font-size-24;
                color: $color-system;
            }
        }
    }
    .pros-product {
        width: 416rpx;
        height: 100%;
        line-height: 36rpx;
        font-size: $font-size-28;
        position: relative;
        .producttitle {
            width: 100%;
            display: inline-block;
            height: auto;
            text-overflow: ellipsis;
            display: -webkit-box;
            word-break: break-all;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-bottom: 15rpx;
            .no-text {
                display: inline-block;
                height: 36rpx;
                padding: 0 12rpx;
                line-height: 36rpx;
                background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
                border-radius: 18rpx;
                text-align: center;
                color: #ffffff;
                font-size: $font-size-28;
                margin-right: 24rpx;
            }
        }
        .productspec {
            height: 36rpx;
            color: #999999;
            font-size: $font-size-26;
        }
        .productprice {
            width: 100%;
            height: 48rpx;
            margin: 30rpx 0 0 0;
            .price {
                line-height: 48rpx;
                font-size: $font-size-26;
                width: 48%;
                color: $color-system;
                float: left;
                font-weight: bold;
                &.disabled {
                    color: #999999;
                    text-decoration: line-through;
                }
                .money-sign {
                    font-size: $font-size-24;
                    color: $color-system;
                }
            }
            .count {
                height: 100%;
                float: right;
                position: relative;
                &.show {
                    display: block;
                }
                &.none {
                    display: none;
                }
                .count-tips {
                    width: auto;
                    display: inline-block;
                    padding: 0 15rpx;
                    line-height: 44rpx;
                    height: 44rpx;
                    border-radius: 22rpx;
                    background: $btn-confirm;
                    font-size: $font-size-24;
                    text-align: center;
                    color: #ffffff;
                    position: absolute;
                    top: -60rpx;
                    left: -5rpx;
                    z-index: 5;
                    &.step {
                        left: -217rpx;
                    }
                    &::before {
                        content: '';
                        position: absolute;
                        bottom: -30rpx;
                        right: 15rpx;
                        z-index: 1;
                        width: 0;
                        height: 0;
                        border-width: 18rpx;
                        border-style: solid;
                        border-color: $color-system transparent transparent transparent;
                    }
                }
                .number-box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 2rpx solid #e1e1e1;
                    border-radius: 30rpx;
                    height: 48rpx;
                    margin-left: 20rpx;
                    .iconfont {
                        font-size: $font-size-24;
                        padding: 0 14rpx;
                        color: #666666;
                        text-align: center;
                        line-height: 48rpx;
                        font-weight: bold;
                        background: #ffffff;
                        &.icon-jianhao {
                            border-radius: 30rpx 0 0 30rpx;
                        }
                        &.icon-jiahao {
                            border-radius: 0 30rpx 30rpx 0;
                        }
                    }
                    .btn-input {
                        width: 56rpx;
                        height: 44rpx;
                        line-height: 44rpx;
                        border-radius: 4rpx;
                        text-align: center;
                        font-size: $font-size-24;
                        color: #333333;
                        background-color: #f7f7f7;
                    }
                }
                .uni-numbox {
                    position: absolute;
                    left: 45rpx;
                    bottom: 0;
                    .uni-numbox-minus,
                    .uni-numbox-plus {
                        width: 50rpx;
                        line-height: 40rpx;
                    }
                    .uni-numbox-value {
                        font-size: $font-size-28;
                        width: 60rpx;
                    }
                }
            }
        }
        .floor-item-act {
            width: 100%;
            height: 30rpx;
            margin-top: 8rpx;
            float: left;
            .tag {
                display: inline-block;
                height: 32rpx;
                font-size: 22rpx;
                line-height: 30rpx;
                text-align: center;
                color: #f83c6c;
                float: left;
                margin-right: 10rpx;
                &.tag-02 {
                    width: 80rpx;
                    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
                        no-repeat;
                    background-size: contain;
                }
                &.tag-01 {
                    width: 56rpx;
                    color: #fff;
                    background-color: #f83c6c;
                    border-radius: 4rpx;
                }
            }
        }
    }
}
.failure-list {
    width: 702rpx;
    height: auto;
    padding: 0 24rpx;
    margin-top: 20rpx;
    background: #ffffff;
    .failure-title {
        width: 100%;
        height: 82rpx;
        line-height: 82rpx;
        font-size: $font-size-28;
        border-bottom: 1px solid #ebebeb;
        .title-txt {
            float: left;
            color: #666666;
            text-align: left;
        }
        .title-btn {
            float: right;
            color: $color-system;
            text-align: right;
            line-height: 80rpx;
            .butto {
                display: inline-block;
                padding: 0 15rpx;
                font-size: $font-size-26;
                height: 50rpx;
                line-height: 50rpx;
                border-radius: 30rpx;
                background: #fff8fd;
                border: 1px solid #ff457b;
                color: #ff457b;
                margin-top: 15rpx;
            }
        }
    }
    .productlist {
        padding-top: 10rpx;
        .goods-pros {
            width: 100%;
            height: auto;
            padding: 20rpx 0;
        }
        .goods-pros-t {
            display: flex;
            align-items: center;
            width: 100%;
            height: 210rpx;
            position: relative;
            .img-tip {
                display: block;
                width: 72rpx;
                height: 36rpx;
                line-height: 36rpx;
                font-size: $font-size-24;
                text-align: center;
                color: #ffffff;
                border-radius: 24rpx;
                background: rgba(51, 51, 51, 0.3);
                // position: absolute;
                // left: 0;
                // top: 0;
            }
            .checkbox-box {
                padding: 10rpx;
            }
            .pros-img {
                width: 180rpx;
                height: 100%;
                border-radius: 10rpx;
                margin: 0 20rpx;
                border: 1px solid #f3f3f3;
                position: relative;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
            }
            .pros-marks {
                width: 730rpx;
                height: 250rpx;
                z-index: 90;
                background: rgba(0, 0, 0, 0.05);
                position: absolute;
                left: -20rpx;
                top: -20rpx;
            }
        }
        .goods-pros-b {
            width: 622rpx;
            margin-left: 84rpx;
            height: 40rpx;
            padding: 0 0 26rpx 0;
            // border-top: 1px solid #EBEBEB;
            &.show {
                display: block;
            }
            &.none {
                display: none;
            }
            .sum {
                font-size: $font-size-28;
                line-height: 40rpx;
                color: $text-color;
                display: flex;
                justify-content: flex-end;
                .money {
                    color: #ff2a2a;
                    font-size: $font-size-28;
                }
                .money-sign {
                    font-size: $font-size-24;
                    color: #ff2a2a;
                }
            }
        }
        .pros-product {
            width: 402rpx;
            height: 100%;
            line-height: 36rpx;
            font-size: $font-size-28;
            position: relative;
            .producttitle {
                width: 100%;
                display: inline-block;
                height: auto;
                text-overflow: ellipsis;
                display: -webkit-box;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 8rpx;
                .no-text {
                    display: inline-block;
                    height: 36rpx;
                    padding: 0 12rpx;
                    line-height: 36rpx;
                    background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
                    border-radius: 18rpx;
                    text-align: center;
                    color: #ffffff;
                    font-size: $font-size-28;
                    margin-right: 24rpx;
                }
            }
            .productspec {
                height: 36rpx;
                color: #999999;
                font-size: $font-size-26;
                margin-top: 20rpx;
            }
            .productstate {
                font-size: $font-size-28;
                height: 44rpx;
                color: #ff2a2a;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
    }
}
.footer {
    width: 100%;
    background-color: #ffffff;
    height: 100rpx;
    position: fixed;
    bottom: 0rpx;
    z-index: 100;
    .footer-le {
        width: 520rpx;
        height: 100%;
        padding: 10rpx 24rpx;
        float: left;
        box-sizing: border-box;
        .foot-check {
            width: 100rpx;
            float: left;
            line-height: 80rpx;
            font-size: $font-size-24;
            .checkbox {
                width: 40rpx;
                text-align: center;
            }
            .text {
                width: 60rpx;
                float: right;
            }
        }
        .sum {
            width: 360rpx;
            height: 100%;
            float: right;
            box-sizing: border-box;
            padding: 0 10rpx;
            .sum-price {
                text-align: right;
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                font-size: $font-size-30;
                color: $text-color;
                float: left;
                font-weight: normal;
                .money {
                    color: $color-system;
                }
                .money-sign {
                    font-size: $font-size-24;
                    color: $color-system;
                }
            }
        }
    }
    .footer-ri {
        width: 230rpx;
        height: 100%;
        float: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 999;
        box-sizing: border-box;
        padding: 13rpx 15rpx;
        &.none {
            display: none;
        }
        .btn {
            width: 200rpx;
            height: 100%;
            background: $btn-confirm;
            font-size: $font-size-28;
            line-height: 80rpx;
            color: #ffffff;
            display: flex;
            border-radius: 40rpx;
            justify-content: center;
            align-items: center;
        }
    }
    .footer-del {
        width: 420rpx;
        height: 100rpx;
        position: absolute;
        padding-left: 200rpx;
        background: #ffffff;
        right: 0;
        top: 0;
        z-index: 1000;
        box-sizing: border-box;
        padding: 10rpx 0;
        display: flex;
        &.show {
            animation: showDelbtn 0s linear both;
        }
        &.none {
            animation: hideDelbtn 0s linear both;
        }
        .btn {
            flex: 1;
            margin: 0 8rpx;
            height: 100%;
            line-height: 80rpx;
            font-size: $font-size-28;
            color: #ffffff;
            text-align: center;
            float: left;
            border-radius: 40rpx;
        }
        .btn.btn-cancel {
            background: #f7f7f7;
            color: #b2b2b2;
        }
        .btn.btn-confirm {
            background: $btn-confirm;
            color: #ffffff;
        }
        @keyframes showDelbtn {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        @keyframes hideDelbtn {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(0);
            }
        }
    }
}
</style>