caimei-applets-hehe/pages/tabBar/cart/index.vue

<template>
    <view class="container cart clearfix" v-if="hasLogin">
        <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">
                <view class="foot-text">
                    共<text>{{ kindCount }}</text
                    >件商品</view
                >
                <view class="delBtn" @tap.stop="showDelManager">删除</view>
            </view>
            <view v-if="!isEmpty" class="container-cart">
                <!-- TODO -->
                <view class="receive-coupon">
                    <view class="tip-text">还差￥200可用“满200元减50元”优惠券</view>
                    <view class="btn" @click="couponVisible = true">领券</view>
                </view>
                <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="checkProduct(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="changeNumber($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.mainImage ? failure.mainImage : ''" 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>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 脚部菜单 -->
                <view class="footer">
                    <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">
                                <view class="row">
                                    <text>总价:</text> <text class="money-sign">￥</text>
                                    <text class="money">{{ allPrice | NumFormat }}</text>
                                </view>
                                <view class="row">
                                    <text>共减</text> <text class="discounted-price">￥200.00</text>
                                    <text @click="showDiscountedDetail">优惠明细</text>
                                    <text
                                        class="iconfont"
                                        :class="showDitail ? 'tui-icon-arrowdown' : 'tui-icon-arrowup'"
                                    ></text>
                                </view>
                            </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="hideModal"
            :content="contentModalText"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
        <!-- 促销活动弹窗 -->
        <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
        <!-- 优惠券列表 TODO-->
        <cm-coupon-list
            title="优惠券"
            listType="search"
            :visible="couponVisible"
            @close="closeCouponList"
        ></cm-coupon-list>
        <!-- 优惠明细 -->
        <cm-drawer
            title="优惠明细"
            :visible="showDitail"
            position="bottom"
            :offset="100"
            @close="showDitail = false"
            zIndex="99"
        >
            <template>
                <view class="discounted-ditail">
                    <view class="row"> <text>商品总额</text> <text>￥450.00</text> </view>
                    <view class="row"> <text>促销满减</text> <text class="red">-￥180.00</text> </view>
                    <view class="row"> <text>优惠券</text> <text class="red">-￥20.00</text> </view>
                    <view class="row total"> <text>总计</text> <text>￥250.00</text> </view>
                    <view class="tip"> 实际订单金额以结算页为准 </view>
                </view>
            </template>
        </cm-drawer>
        <!-- 透明模态层 -->
        <modal-layer v-if="modallayer"></modal-layer>
    </view>
</template>
<script>
import authorize from '@/common/authorize.js'
import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
import modalLayer from '@/components/cm-module/modal-layer/modal-layer'
import CmCouponList from '@/components/cm-module/cm-coupon-list/cm-coupon-list'
import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'

export default {
    components: {
        activiPopup,
        modalLayer,
        CmCouponList,
        CmDrawer
    },
    data() {
        return {
            StaticUrl: this.$Static,
            CustomBar: this.CustomBar, // 顶部导航栏高度
            popupShow: false,
            handlerPros: {}, //监听单挑促销商品
            isCheckAll: false, //是否全选
            allPrice: 0, //所有价格
            totalOriginalPrice: 0, //所有原价价
            reducedPrice: 0, //满减
            skeletonShow: true,
            isshowDelbtn: false,
            scrollHeight: 'auto',
            hasNextPage: false,
            modal: false,
            contentModalText: '',
            deleteType: 0,
            couponVisible: false,
            showDitail: false
        }
    },
    onLoad() {
        this.setScrollHeight()
    },
    computed: {
        ...mapGetters([
            'hasLogin',
            'isIphoneX',
            'isEmpty',
            'goodsList',
            'failureList',
            'kindCount',
            'userId',
            'cartIds'
        ]),
        //被选中的产品数量
        allCount() {
            return this.cartIds.length
        }
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        },
        totalprice(val, count) {
            //单件商品的价格 × 数量
            return (val * count).toFixed(2)
        }
    },
    watch: {
        //深度监听所有数据，每次改变重新计算总价和总数
        goodsList: {
            deep: true,
            handler(val, oldval) {
                this.totalPeice()
            }
        }
    },
    //下拉刷新
    onPullDownRefresh() {
        this.initCart().finally(() => {
            setTimeout(() => {
                uni.stopPullDownRefresh()
            }, 2000)
        })
    },
    onShow() {
        if (this.hasLogin) {
            this.initData()
        } else {
            this.$api.redirectTo('/pages/login/login')
        }
    },
    onHide() {
        this.saveCartIds([])
    },
    methods: {
        ...mapActions('cart', ['initCart', 'updateShoppogCount', 'removeFromCart', 'removeFailureFromCart']),
        ...mapMutations('cart', [
            'selectProduct',
            'selectAllShopProduct',
            'selectAllProduct',
            'saveCartIds',
            'selectFailure',
            'selectAllFailure'
        ]),
        initData() {
            this.initCart().finally(() => {
                this.skeletonShow = false
            })
        },
        // 关闭优惠券弹窗
        closeCouponList() {
            this.couponVisible = false
        },
        // 活动价弹窗
        clickPopupShow(pros, type) {
            if (pros.ladderList.length > 0) {
                this.popupShow = true
                this.handlerPros = pros
            }
        },
        // 优惠明细 TODO
        showDiscountedDetail() {
            this.showDitail = true
        },
        // 勾选单个失效商品
        ischeckFailure(failure) {
            this.selectFailure({
                productId: failure.productId,
                checked: !failure.productsChecked
            })
            this.getCheckedProductId()
        },
        // 勾选单个商品
        checkProduct(shop, product) {
            this.selectProduct({
                shopId: shop.shopId,
                productId: product.productId,
                checked: !product.productsChecked
            })
            this.isSelectAll()
        },
        // 勾选商店所有商品
        checkShop(shop) {
            this.selectAllShopProduct({
                shopId: shop.shopId,
                checked: !shop.checked
            })
            this.isSelectAll()
        },
        // 勾选全部商品
        checkAll() {
            this.isCheckAll = !this.isCheckAll
            this.selectAllProduct(this.isCheckAll)
            // 删除商品的全选也要选中失效商品
            if (this.isshowDelbtn) {
                this.selectAllFailure(this.isCheckAll)
            }
            this.isSelectAll()
        },
        // 判断是否全选商品
        isSelectAll() {
            this.isCheckAll = this.goodsList.every(shop => shop.checked)
            this.getCheckedProductId()
        },
        // 获取勾选商品的id
        getCheckedProductId() {
            const cartIds = []
            this.goodsList.forEach(shop => {
                const ids = shop.productList.reduce((cartIds, prod) => {
                    if (prod.productsChecked) cartIds.push(prod.cartId)
                    return cartIds
                }, [])
                cartIds.push(...ids)
            })
            if (this.isshowDelbtn) {
                const ids = this.failureList.reduce((cartIds, prod) => {
                    if (prod.productsChecked) cartIds.push(prod.cartId)
                    return cartIds
                }, [])
                cartIds.push(...ids)
            }
            console.log(cartIds)
            this.saveCartIds(cartIds)
        },
        //计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
        totalPeice() {
            const priceObj = this.goodsList.reduce(
                (priceObj, shop) => {
                    shop.productList.forEach(prod => {
                        if (prod.productsChecked) {
                            priceObj.totalOriginalPrice += prod.price * prod.productCount
                            // 单品满减
                            if (prod.promotion && prod.promotion.type * 1 === 1 && prod.promotion.mode * 1 === 2) {
                                // 单品满减-重新计算供应商总价/满减金额
                                if (prod.price * prod.productCount >= prod.promotion.touchPrice) {
                                    priceObj.reducedPrice += prod.promotion.reducedPrice
                                }
                            }
                        }
                    })
                    priceObj.allPrice = priceObj.totalOriginalPrice - priceObj.reducedPrice
                    return priceObj
                },
                {
                    totalOriginalPrice: 0,
                    reducedPrice: 0,
                    allPrice: 0
                }
            )
            this.allPrice = priceObj.allPrice
        },
        //商品数量加加
        changeCountAdd(item, pros) {
            const productCount = pros.productCount + 1
            this.updateShoppogCount({
                cartId: pros.cartId,
                productCount
            })
        },
        //商品数量减减
        changeCountSub(item, pros) {
            let productCount = pros.productCount
            if (productCount <= 1) {
                productCount = 1
                this.$util.msg('购买数量不能少于1', 2000)
                return
            } else {
                productCount--
            }
            this.updateShoppogCount({
                cartId: pros.cartId,
                productCount
            })
        },
        //输入商品数量更新
        changeInput(pros) {},
        //输入商品数量更新
        changeNumber(e, item, pros) {
            let _value = Math.abs(Number(e.detail.value))
            let productCount = pros.productCount
            if (_value <= 1) {
                this.$util.msg('购买数量不能少于1', 2000)
                productCount = 1
            } else {
                productCount = _value
            }
            this.updateShoppogCount({
                cartId: pros.cartId,
                productCount
            })
        },
        //显示删除商品管理
        showDelManager() {
            this.isshowDelbtn = true
        },
        //隐藏删除商品管理
        hideDelManage() {
            this.selectAllFailure(false)
            this.getCheckedProductId()
            this.isshowDelbtn = false
        },
        //删除购物车商品
        deleteList() {
            if (this.cartIds.length <= 0) {
                return this.$util.msg('请选择要删除的商品~', 2000)
            } else {
                this.modal = true
                this.contentModalText = '确定删除选中的商品吗？'
                this.deleteType = 1
            }
        },
        // 清空失效商品
        deletefailureList() {
            this.modal = true
            this.contentModalText = '确定清除所有失效商品吗？'
            this.deleteType = 2
        },
        //从购物车移除商品
        handleClick(e) {
            if (e.index !== 1) return (this.modal = false)
            if (this.deleteType === 1) {
                // 删除所有勾选的商品
                this.removeFromCart().finally(() => {
                    this.isshowDelbtn = false
                })
            } else {
                //一键删除失效商品
                this.removeFailureFromCart().finally(() => {
                    this.isshowDelbtn = false
                })
            }
            this.modal = false
        },
        //跳转确认订单页面
        toConfirmation() {
            if (this.cartIds.length <= 0) {
                return this.$util.msg('请先选择结算商品~', 2000)
            }
            let cartPramsData = {
                allPrice: this.allPrice,
                allCount: this.allCount,
                cartIds: this.cartIds.join(','),
                productCount: ''
            }
            this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({ data: cartPramsData })}`)
        },
        hideModal() {
            this.modal = false
        },
        navToListPage(item) {
            this.$api.navigateTo(`/pages/goods/product?productId=${item.productId}`)
        },
        // 窗口高度-footer高度
        setScrollHeight() {
            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)
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background: #f7f7f7;
    height: auto;
}
.discounted-ditail {
    padding: 52rpx 8rpx 0;
    .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12rpx 0;
        text {
            font-size: 30rpx;
            color: #333333;
            &.red {
                color: #f94b4b;
            }
        }
        &.total{
            font-size: 30rpx;
            font-weight: 600;
        }
    }
    .tip {
        padding: 12rpx 0;
        font-size: 26rpx;
        color: #999999;
    }
}
.receive-coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background: #fff;
    .tip-text {
        font-size: 26rpx;
        color: #ff457b;
    }
    .btn {
        width: 88rpx;
        height: 42rpx;
        background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
        border-radius: 28rpx;
        font-size: 26rpx;
        color: #ffffff;
        text-align: center;
        line-height: 42rpx;
    }
}
.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 {
            position: absolute;
            bottom: 0;
            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;
    border-top: 1px solid #EFEFEF;
    .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 {
                display: flex;
                justify-content: center;
                align-items: flex-end;
                flex-direction: column;
                width: 100%;
                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;
                }
                .discounted-price {
                    margin-right: 32rpx;
                }
                .row {
                    &:nth-child(2) {
                        font-size: 24rpx;
                        color: #ff457b;
                    }
                }
            }
        }
    }
    .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>