<template>
    <div
        class="page"
        :class="{
            'page--bottom': isShowBottom,
            bTip: minChaPrice > 0,
            page_red: theme === 1,
            bTip2:
                cartList.length &&
                (deliveryConfig.packageFee || deliveryConfig.deliveryFee),
        }"
    >
        <nav-bar :title="'购物车'"></nav-bar>

        <div class="cart-main" v-if="cartList.length">
            <div class="cart-head">
                <img
                    v-if="allSelect"
                    class="bottom__select select-btn"
                    @click="selectAllGoods"
                    :src="
                        theme === 2
                            ? '/static/icon/select.png'
                            : '/static/icon/select_red.png'
                    "
                    alt
                />
                <div
                    v-else
                    class="bottom__select--null select-btn"
                    @click="selectAllGoods"
                ></div>
                店铺
            </div>
            <ul class="cart">
                <li
                    class="cart__item"
                    v-for="(item, index) in cartList"
                    :key="index"
                >
                    <img
                        v-if="item.active"
                        class="cart__select"
                        :src="
                            theme === 2
                                ? '/static/icon/select.png'
                                : '/static/icon/select_red.png'
                        "
                        @click.stop="selectGoods(item)"
                        alt
                    />
                    <div
                        v-else
                        class="cart__select--null"
                        @click.stop="selectGoods(item)"
                    ></div>
                    <div class="cart__left" @click="jumpGoodsDetail(item)">
                        <my-image
                            class="cart__img"
                            :src="item.productImage"
                        ></my-image>
                        <div
                            v-if="item.stock <= 0 || item.productStatus !== 1"
                            class="cart__disabled"
                        >
                            <div class="cart__disabled--text">
                                {{
                                    item.productStatus === 0
                                        ? "已下架"
                                        : item.productStatus === 2
                                        ? "未开售"
                                        : "售罄"
                                }}
                            </div>
                        </div>
                    </div>
                    <div class="cart__content">
                        <div class="cart__top">
                            <div
                                class="cart__title"
                                @click="jumpGoodsDetail(item)"
                            >
                                {{ item.productName || "" }}
                            </div>
                            <div class="cart__price">
                                {{ "¥" + (item.price || "0.00") }}
                            </div>
                        </div>
                        <div class="cart__spec">{{ item.skuName || "" }}</div>
                        <div class="cart__bottom">
                            <f-input-number
                                v-model="item.count"
                                :max="item.stock"
                                @change="setCaetNum(item)"
                            ></f-input-number>
                            <i
                                class="iconfont iconremove cart__remove"
                                @click.stop="remove(item)"
                            ></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="cart-main" v-if="youxuanItemList.length">
            <div class="cart-head">
                <img
                    v-if="youxuanAllSelect"
                    class="bottom__select select-btn"
                    @click="selectYouXuanAllGoods"
                    :src="
                        theme === 2
                            ? '/static/icon/select.png'
                            : '/static/icon/select_red.png'
                    "
                    alt
                />
                <div
                    v-else
                    class="bottom__select--null select-btn"
                    @click="selectYouXuanAllGoods"
                ></div>
                优选
            </div>
            <ul class="cart">
                <li
                    class="cart__item"
                    v-for="(item, index) in youxuanItemList"
                    :key="index"
                >
                    <img
                        v-if="item.active"
                        class="cart__select"
                        :src="
                            theme === 2
                                ? '/static/icon/select.png'
                                : '/static/icon/select_red.png'
                        "
                        @click.stop="selectYouxuanGoods(item)"
                        alt
                    />
                    <div
                        v-else
                        class="cart__select--null"
                        @click.stop="selectYouxuanGoods(item)"
                    ></div>
                    <div
                        class="cart__left"
                        @click="jumpYouxuanGoodsDetail(item)"
                    >
                        <my-image
                            class="cart__img"
                            :src="item.productImage"
                        ></my-image>
                        <div
                            v-if="item.stock <= 0 || item.productStatus !== 1"
                            class="cart__disabled"
                        >
                            <div class="cart__disabled--text">
                                {{
                                    item.productStatus === 0
                                        ? "已下架"
                                        : item.productStatus === 2
                                        ? "未开售"
                                        : "售罄"
                                }}
                            </div>
                        </div>
                    </div>
                    <div class="cart__content">
                        <div class="cart__top">
                            <div
                                class="cart__title"
                                @click="jumpYouxuanGoodsDetail(item)"
                            >
                                {{ item.productName || "" }}
                            </div>
                            <div class="cart__price">
                                {{ "¥" + (item.price || "0.00") }}
                            </div>
                        </div>
                        <div class="cart__spec">{{ item.skuName || "" }}</div>
                        <div class="cart__bottom">
                            <f-input-number
                                v-model="item.count"
                                :max="item.stock"
                                @change="setCaetNum(item)"
                            ></f-input-number>
                            <i
                                class="iconfont iconremove cart__remove"
                                @click.stop="remove(item)"
                            ></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div
            class="null"
            v-if="loading && !cartList.length && !youxuanItemList.length"
        >
            <img class="null__img" src="/static/common/cart_null.jpg" alt />
            <div class="null__title">购物车为空</div>
            <div
                class="null__btn"
                @click="jump({ isTabBer: true, path: '/pages/goods/index' })"
            >
                去逛逛
            </div>
        </div>
        <div
            class="bottom"
            :class="{
                bTip: minChaPrice > 0,
                bTip2:
                    cartList.length &&
                    (deliveryConfig.packageFee || deliveryConfig.deliveryFee),
            }"
            v-if="isShowBottom"
        >
            <div class="tip-box">
                <div class="bottom__tip" v-if="minChaPrice > 0">
                    最低{{ minPrice }}元起送，还差{{ minChaPrice }}元，
                    <a
                        @click="
                            jump({
                                isTabBer: true,
                                path: '/pages/goods/index',
                            })
                        "
                        >去凑单</a
                    >
                </div>
            </div>
            <div class="bottom__left">
                <!-- <img
          v-if="allSelect"
          class="bottom__select"
          @click="selectAllGoods"
          :src="
            theme === 2
              ? '/static/icon/select.png'
              : '/static/icon/select_red.png'
          "
          alt
        />
        <div v-else class="bottom__select--null" @click="selectAllGoods"></div>
        <div class="bottom__text" @click="selectAllGoods">全选</div> -->

                <div class="oper-box">
                    <div class="cart-contact" @click="changeDeliveryType">
                        <img
                            :src="
                                theme === 2
                                    ? '/static/icon/change.png'
                                    : '/static/icon/change_red.png'
                            "
                        />
                        <span class="text">{{
                            deliveryType === 0 ? "配送到家" : "门店自提"
                        }}</span>
                    </div>
                    <p
                        v-if="
                            cartList.length &&
                            (deliveryConfig.packageFee ||
                                deliveryConfig.deliveryFee)
                        "
                        class="packageFee"
                    >
                        <span v-if="deliveryConfig.packageFee"
                            >打包费：¥ {{ deliveryConfig.packageFee }}</span
                        >
                        <span
                            v-if="
                                deliveryType === 0 && deliveryConfig.deliveryFee
                            "
                            >配送费：¥ {{ deliveryConfig.deliveryFee }}</span
                        >
                    </p>
                </div>
            </div>
            <div class="bottom__right">
                <div class="bottom__money">
                    合计：
                    <div class="bottom__price">
                        {{ "¥" + (totalPrice || "0.00") }}
                    </div>
                </div>
                <!-- class.disable -->
                <div
                    class="bottom__btn"
                    :class="{ disable: minChaPrice > 0 }"
                    @click="submit"
                >
                    立即购买
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import FInputNumber from "../../components/form/inputNumber";
import MCustom from "../../components/module/index";
import NavBar from "../../components/layout/nav-bar";

export default {
    name: "",
    components: { MCustom, FInputNumber, MyImage, NavBar },
    // 数据
    data() {
        return {
            cartList: [],
            youxuanItemList: [],
            layout: [],
            loading: false, // 是否加载完成
            deliveryType: 0, //0 配送到家 1 门店自提
        };
    },

    onLoad() {
        const self = this;

        this.fn.shareMenu();
        if (!self.loading) {
            uni.showLoading({
                title: "加载中...",
            });
        }
    },

    async onShow() {
        const self = this;

        await self.fn.init();
        if (this.$store.state.common.deliveryType !== undefined) {
            this.deliveryType = this.$store.state.common.deliveryType;
        }
        const config = this.deliveryConfig;
        if (!config.deliveryMethod.homeDelivery) {
            this.deliveryType = 1;
            if (!config.deliveryMethod.storePickUp) {
                this.deliveryType = 0;
                this.fn.showToast("店铺配置错误，请至少选择一种配送方式");
            }
        } else {
            if (this.deliveryType === 1) {
                if (!config.deliveryMethod.storePickUp) {
                    this.deliveryType = 0;
                }
            }
        }
        self.getCartLsit();
        self.getCartNumber();
    },

    // 函数
    methods: {
        goodsChange() {
            this.getCartLsit();
            this.getCartNumber();
        },

        changeDeliveryType() {
            if (
                this.deliveryConfig.deliveryMethod.homeDelivery &&
                this.deliveryConfig.deliveryMethod.storePickUp
            ) {
                if (this.ifYouxuan) {
                    this.deliveryType = 0;
                } else {
                    this.deliveryType = this.deliveryType === 0 ? 1 : 0;
                }
            } else {
                this.fn.showToast("该店铺未配置其他送货方式");
            }
        },

        // 获取购物车列表
        getCartLsit() {
            const self = this;

            self.api
                .get("/Order/GetCartList", {
                    pageIndex: 1,
                    pageSize: 100,
                })
                .then((res) => {
                    res.data.shopItemList.forEach((item) => {
                        item.price = item.priceFmt;
                        item.active =
                            item.stock >= item.count &&
                            item.productStatus === 1;
                    });
                    res.data.youxuanItemList.forEach((item) => {
                        item.price = item.price / 100;
                        // item.active =
                        //     item.stock >= item.count &&
                        //     item.productStatus === 1;
                    });
                    self.cartList = res.data.shopItemList;
                    self.youxuanItemList = res.data.youxuanItemList;

                    self.loading = true;
                    uni.hideLoading();
                });
        },

        // 选择商品
        selectGoods(val) {
            const self = this;

            self.cartList.forEach((item, index) => {
                if (item.id === val.id) {
                    if (item.productStatus === 0) {
                        self.fn.showToast("该商品已下架");
                    } else if (item.productStatus === 2) {
                        self.fn.showToast("该商品未开售");
                    } else if (item.stock < item.count) {
                        self.fn.showToast("该商品库存不足");
                    } else {
                        item.active = !item.active;
                        if (item.active) {
                            self.youxuanItemList.forEach((item, index) => {
                                item.active = false;
                                self.youxuanItemList.splice(index, item);
                            });
                        }
                        self.cartList.splice(index, item);
                    }
                }
            });
        },

        // 选择优选商品
        selectYouxuanGoods(val) {
            this.deliveryType = 0;
            const self = this;

            self.youxuanItemList.forEach((item, index) => {
                if (item.id === val.id) {
                    if (item.productStatus === 0) {
                        self.fn.showToast("该商品已下架");
                    } else if (item.productStatus === 2) {
                        self.fn.showToast("该商品未开售");
                    } else if (item.stock < item.count) {
                        self.fn.showToast("该商品库存不足");
                    } else {
                        item.active = !item.active;
                        if (item.active) {
                            self.cartList.forEach((item, index) => {
                                item.active = false;
                                self.cartList.splice(index, item);
                            });
                        }
                        self.youxuanItemList.splice(index, item);
                    }
                }
            });
        },

        // 选择全部商品
        selectAllGoods() {
            const self = this;

            let select = !self.allSelect;

            self.cartList.forEach((item, index) => {
                item.active =
                    item.productStatus === 1 && item.stock >= item.count
                        ? select
                        : false;
                self.cartList.splice(index, item);
            });

            self.youxuanItemList.forEach((item, index) => {
                item.active = false;
                self.youxuanItemList.splice(index, item);
            });
        },

        // 选择全部优选商品
        selectYouXuanAllGoods() {
            this.deliveryType = 0;
            const self = this;

            let select = !self.youxuanAllSelect;

            self.cartList.forEach((item, index) => {
                item.active = false;
                self.cartList.splice(index, item);
            });

            self.youxuanItemList.forEach((item, index) => {
                item.active =
                    item.productStatus === 1 && item.stock >= item.count
                        ? select
                        : false;
                self.youxuanItemList.splice(index, item);
            });
        },

        // 修改购物车数量
        setCaetNum(val) {
            const self = this;

            self.api
                .post("/Order/UpdateItemCount", {
                    id: val.id,
                    count: val.count,
                })
                .then(() => {
                    self.getCartNumber();
                })
                .catch((res) => {
                    this.getCartLsit();
                });
        },

        // 删除购物车
        remove(val) {
            const self = this;

            self.fn
                .showModal({
                    title: "删除商品",
                    content: "确定要删除该商品吗？",
                    confirmText: "删除",
                })
                .then((res) => {
                    if (res.confirm) {
                        self.api
                            .delete("/Order/RemoveCart", {
                                ids: [val.id],
                            })
                            .then(() => {
                                // self.cartList.forEach((item, index) => {
                                //     if (item.id === val.id) {
                                //         self.cartList.splice(index, 1);
                                //     }
                                // });

                                self.getCartNumber();
                                self.getCartLsit();
                            });
                    }
                });
        },

        // 获取购物车数量
        getCartNumber() {
            const self = this;
            self.api.get("/Order/GetCartCount").then((res) => {
                if (res.data > 0) {
                    uni.setTabBarBadge({
                        index: 2,
                        text: res.data.toString(),
                    });
                } else {
                    uni.removeTabBarBadge({
                        index: 2,
                    });
                }
            });
        },

        // 结算
        submit() {
            const self = this;

            if (self.cartIds.length) {
                self.router.push({
                    path: "/pages/order/affirm",
                    query: {
                        ids: self.cartIds.join(","),
                        deliveryType: this.deliveryType,
                    },
                });
            } else if (self.cartYouxuanIds.length) {
                self.router.push({
                    path: "/pages/order/affirm",
                    query: {
                        ids: self.cartYouxuanIds.join(","),
                        productSource: 1,
                        deliveryType: this.deliveryType,
                    },
                });
            } else {
                self.fn.showToast("至少选择一件商品");
            }
        },

        // 跳转到商品详情
        jumpGoodsDetail(val) {
            const self = this;

            self.router.push({
                path: "/pages/goods/detail",
                query: {
                    goodsId: val.productId,
                },
            });
        },

        jumpYouxuanGoodsDetail(val) {
            const self = this;

            self.router.push({
                path: "/pages/recommend/detail",
                query: {
                    goodsId: val.productId,
                },
            });
        },
    },
    onShareAppMessage() {
        let url = `/pages/goods/index?uid=${this.user.id}&shopId=${this.activeShop.id}`;
        if (this.activeShop.store) {
            url += `&storeId=${this.activeShop.store.id}`;
        }
        return {
            title: this.activeShop.name || "",
            path: url,
            imageUrl: this.activeShop.shopBanner || this.activeShop.logo,
        };
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },

        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        tabList() {
            return this.$store.state.common.tabList;
        },
        activeShop() {
            return this.$store.state.common.activeShop;
        },
        // 交货设置
        deliveryConfig() {
            if (!this.$store.state.common.storeConfig.deliveryConfig) {
                return this.fn.showToast("获取店铺配置错误");
            }
            return this.$store.state.common.storeConfig.deliveryConfig;
        },
        // 最低金额
        minPrice() {
            if (this.deliveryType === 0) {
                if (this.deliveryConfig.deliveryMinAmount) {
                    return parseFloat(
                        this.deliveryConfig.deliveryMinAmount
                    ).toFixed(2);
                } else {
                    return "";
                }
            } else {
                if (this.deliveryConfig.pickupMinAmount) {
                    return parseFloat(
                        this.deliveryConfig.pickupMinAmount
                    ).toFixed(2);
                } else {
                    return "";
                }
            }
        },

        // 距离最低价格还差
        minChaPrice() {
            const self = this;

            let price = 0;
            if (this.cartIds.length > 0) {
                self.cartList.forEach((item) => {
                    if (item.active) {
                        price += item.price * item.count;
                    }
                });
            } else if (this.cartYouxuanIds.length > 0) {
                self.youxuanItemList.forEach((item) => {
                    if (item.active) {
                        price += item.price * item.count;
                    }
                });
            }

            let num = 0;
            if (this.deliveryType === 0) {
                num = this.deliveryConfig.deliveryMinAmount - price;
            } else {
                num = this.deliveryConfig.pickupMinAmount - price;
            }
            return parseFloat(num).toFixed(2);
        },

        customConfig() {
            return this.$store.state.common.customConfig;
        },
        allSelect() {
            const self = this;
            let select = true;

            self.cartList.forEach((item) => {
                if (
                    item.productStatus === 1 &&
                    item.stock >= item.count &&
                    !item.active
                ) {
                    select = false;
                }
            });

            if (self.cartIds.length <= 0) {
                select = false;
            }

            return select;
        },
        youxuanAllSelect() {
            const self = this;
            let select = true;

            self.youxuanItemList.forEach((item) => {
                if (
                    item.productStatus === 1 &&
                    item.stock >= item.count &&
                    !item.active
                ) {
                    select = false;
                }
            });

            if (self.cartYouxuanIds.length <= 0) {
                select = false;
            }

            return select;
        },
        ifYouxuan() {
            const self = this;
            let select = false;
            self.youxuanItemList.forEach((item) => {
                if (
                    item.productStatus === 1 &&
                    item.stock >= item.count &&
                    item.active
                ) {
                    select = true;
                }
            });
            return select;
        },

        totalPrice() {
            const self = this;

            let price = 0;

            if (this.cartIds.length > 0) {
                self.cartList.forEach((item) => {
                    if (item.active) {
                        price += item.price * item.count;
                    }
                });
            } else if (this.cartYouxuanIds.length > 0) {
                self.youxuanItemList.forEach((item) => {
                    if (item.active) {
                        price += item.price * item.count;
                    }
                });
            }

            if (this.deliveryConfig.packageFee) {
                price += this.deliveryConfig.packageFee;
            }
            if (this.deliveryConfig.deliveryFee && this.deliveryType === 0) {
                price += this.deliveryConfig.deliveryFee;
            }

            return parseFloat(price).toFixed(2);
        },

        cartIds() {
            const self = this;

            let ids = [];

            self.cartList.forEach((item) => {
                if (
                    item.active &&
                    item.productStatus === 1 &&
                    item.stock >= item.count
                ) {
                    ids.push(item.id);
                }
            });

            return ids;
        },

        cartYouxuanIds() {
            const self = this;

            let ids = [];

            self.youxuanItemList.forEach((item) => {
                if (
                    item.active &&
                    item.productStatus === 1 &&
                    item.stock >= item.count
                ) {
                    ids.push(item.id);
                }
            });
            return ids;
        },

        isShowBottom() {
            const self = this;

            let ids = [];

            self.cartList.forEach((item) => {
                if (item.productStatus === 1 && item.stock >= item.count) {
                    ids.push(item.id);
                }
            });
            self.youxuanItemList.forEach((item) => {
                if (item.productStatus === 1 && item.stock >= item.count) {
                    ids.push(item.id);
                }
            });

            return ids.length;
        },
    },

    // 数据监听
    watch: {
        deliveryType(v) {
            this.$store.commit("common/update", {
                deliveryType: v,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(30);

    &--bottom {
        padding-bottom: px(188);
        &.bTip {
            padding-bottom: px(230);
        }
        &.bTip2 {
            padding-bottom: px(210);
        }
        &.bTip.bTip2 {
            padding-bottom: px(290);
        }
    }
}

.cart {
    background-color: #fff;

    &__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(295);
        padding: 0 px(30);
    }

    &__select {
        width: px(60);
        height: px(60);

        &--null {
            content: "";
            display: block;
            width: px(60);
            height: px(60);
            border: solid px(8) #d7d7d7;
            border-radius: 50%;
        }
    }

    &__left {
        position: relative;
        overflow: hidden;
        margin-left: px(20);
        border-radius: px(5);
        border: solid px(3) #e5e5e5;
    }

    &__img {
        /deep/ img {
            width: px(230);
            height: px(235);
        }
    }

    &__disabled {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
    }

    &__disabled--text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(150);
        height: px(150);
        font-size: px(40);
        color: #fff;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.6);
    }

    &__content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: px(230);
        margin-left: px(20);
    }

    &__top {
        display: flex;
        justify-content: space-between;
    }

    &__title {
        @include omits(2);
        flex: 1;
        height: px(100);
        font-size: px(38);
        color: #333;
    }

    &__price {
        margin-left: px(60);
        font-size: px(34);
        color: #333;
    }

    &__spec {
        margin: px(10) 0;
        font-size: px(34);
        color: #999;
    }

    &__bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    &__remove {
        font-size: px(60);
        color: #666;
    }
}

.bottom {
    position: fixed;
    bottom: 0rem;
    left: 0;
    z-index: 995;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: px(138);
    padding: 0 px(35);
    background-color: #fff;
    border-top: solid px(3) #e5e5e5;
    &.bTip {
        height: px(200);
        padding-top: px(80);
    }
    &.bTip2 {
        height: px(180);
        // padding-bottom: px(80);
    }
    &.bTip.bTip2 {
        height: px(260);
        padding-top: px(80);
    }
    .tip-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }
    .oper-box {
        display: flex;
        flex-direction: column;
    }
    .packageFee {
        // line-height: px(80);
        // border-top: solid px(2) #e5e5e5;
        color: #999;
        display: flex;
        align-items: center;
        font-size: px(30);
        background-color: #fff;
        // position: absolute;
        // left: 0;
        // bottom: 0;
        // width: 100%;
        // z-index: 1;
        display: flex;
        flex-direction: column;
        margin-left: px(30);
        span {
            display: block;
        }
    }
    &__tip {
        line-height: px(80);
        padding: 0 px(35);
        border-bottom: solid px(2) #e5e5e5;
        color: #999;
        display: flex;
        align-items: center;
        font-size: px(34);
        a {
            color: #f7672b;
        }
    }

    &__left {
        display: flex;
        align-items: center;
    }

    &__select {
        width: px(60);
        height: px(60);

        &--null {
            content: "";
            display: block;
            width: px(60);
            height: px(60);
            border: solid px(8) #d7d7d7;
            border-radius: 50%;
        }
    }

    &__text {
        margin-left: px(25);
        font-size: px(34);
        color: #999;
    }

    &__right {
        display: flex;
        align-items: center;
    }
    &__money {
        display: flex;
        align-items: flex-end;
        font-size: px(30);
        line-height: 1;
    }

    &__price {
        font-size: px(44);
        color: #27a34f;
        line-height: 1;
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(280);
        height: px(100);
        border-radius: px(50);
        margin-left: px(25);
        font-size: px(40);
        color: #fff;
        background-color: #27a34f;
        &.disable {
            color: #bcbec2;
            background-color: #5b5b5b;
            border-color: #5b5b5b;
            pointer-events: none;
        }
    }
}

.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: px(1100);

    &__img {
        width: px(740);
        height: px(371);
    }

    &__title {
        margin-top: px(60);
        font-size: px(42);
        color: #666;
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(515);
        height: px(130);
        margin-top: px(65);
        font-size: px(40);
        color: #fff;
        border-radius: px(65);
        background-color: #27a34f;
    }
}
.cart-contact {
    width: px(180);
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    border-right: px(4) solid #fff;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #27a34f;
    font-size: px(30);
    padding: 0;
    margin: 0;
    background: transparent;
    line-height: 1.5;
    border-radius: 0;
    // margin-left: px(20);
    img {
        width: px(50);
        height: px(50);
    }
}
.page_red {
    .null__btn {
        background-color: #27a34f;
    }
    .cart-contact {
        color: #27a34f;
    }
}
.cart-main {
    padding: px(30);
    background-color: #fff;
    .cart-head {
        font-size: px(40);
        padding-bottom: px(20);
        display: flex;
        align-items: center;
        .select-btn {
            margin-right: px(30);
        }
    }
    & ~ & {
        margin-top: px(30);
    }
}
</style>