<template>
    <div
        class="page"
        :class="{
            'page--bottom': order.status !== 3,
            'page--iphoneX': iphoneX && order.status !== 3,
            page_red: theme === 1,
        }"
    >
        <div class="top" @click="goTrack()">
            <div class="top__content">
                <div class="top__l">
                    <img class="top__img" src="/static/order/icon_1.jpg" alt />
                    <div class="top__left">
                        <div class="top__title" v-if="order.status === 2">
                            等待买家付款
                        </div>
                        <div class="top__title" v-if="order.status === 3">
                            待发货
                        </div>
                        <div class="top__title" v-if="order.status === 4">
                            卖家已发货
                        </div>
                        <div class="top__title" v-if="order.status === 6">
                            交易关闭
                        </div>
                        <div class="top__title" v-if="order.status === 7">
                            售后中
                        </div>
                        <div class="top__title" v-if="order.status === 8">
                            订单已删除
                        </div>
                        <div class="top__title" v-if="order.status === 9">
                            订单完成
                        </div>
                        <div class="top__title" v-if="order.status === 10">
                            已评价
                        </div>
                        <div class="top__title" v-if="order.status === 11">
                            已售后
                        </div>
                        <div class="top__title" v-if="order.status === 12">
                            交易关闭
                        </div>

                        <div class="top__title" v-if="order.status === 20">
                            待接单
                        </div>
                        <div class="top__title" v-if="order.status === 21">
                            拣货中
                        </div>
                        <div class="top__title" v-if="order.status === 22">
                            拣货完成
                        </div>
                        <div class="top__title" v-if="order.status === 23">
                            待配送
                        </div>
                        <div class="top__title" v-if="order.status === 24">
                            配送中
                        </div>
                        <div class="top__title" v-if="order.status === 25">
                            已送达
                        </div>
                        <div class="top__title" v-if="order.status === 26">
                            待提货
                        </div>
                        <div class="top__title" v-if="order.status === 27">
                            已提货
                        </div>

                        <div class="top__bottom" v-if="order.status === 2">
                            <span class="top__text">{{
                                order.expiredTimeText
                            }}</span>
                            <span class="top__text">后订单自动取消</span>
                        </div>
                        <div class="top__bottom" v-if="order.status === 4">
                            <span class="top__text">{{
                                order.autoSignoffTimeText
                            }}</span>
                            <span class="top__text">后自动确认收货</span>
                        </div>
                    </div>
                </div>
                <div class="top__r">
                    <i class="iconfont iconarrow top__arrows"></i>
                </div>
            </div>
            <img class="top__line" src="/static/order/parting-line_2.jpg" alt />
        </div>
        <!-- 配送人 -->
        <!-- <div class="address peisong">
            <div class="address__right">
                <div class="address__top">
                    <span class="address__name">xx配送员</span>
                    <span class="address__phone">电话：17343041879</span>
                </div>
            </div>
        </div> -->
        <div class="address" v-if="express.shipExpressName !== '门店自提'">
            <i class="iconfont icondizhi address__dizhi"></i>
            <div class="address__right">
                <div class="address__top">
                    <span class="address__name">{{ address.realName }}</span>
                    <span class="address__phone">{{ address.mobile }}</span>
                </div>
                <div class="address__text" v-if="address.regionInfo">
                    {{ address.regionInfo }}{{ address.address }}
                </div>
                <div class="address__text" v-else>
                    {{ address.province }}{{ address.city }}{{ address.county
                    }}{{ address.address }}
                    <!-- {{
                        address.province +
                        address.city +
                        address.county +
                        address.address
                    }} -->
                </div>
            </div>
        </div>
        <div class="title">
            <div
                class="caption"
                @click="jump({ isTabBer: true, path: '/pages/index/index' })"
            >
                <i class="iconfont iconshangdian caption__iocn"></i>
                <div class="caption__title">{{ order.storeInfo.name }}</div>
                <i class="iconfont iconarrow caption__arrows"></i>
            </div>
            <button class="button" open-type="contact">
                <div class="title__right">
                    <i class="iconfont iconweixin1 title__message"></i>
                    <div class="title__text">联系商家</div>
                </div>
            </button>
        </div>
        <ul class="goods">
            <li class="goods__item" v-for="(val, k) in goods" :key="k">
                <div class="goods__content" @click="goGoodDetail(val)">
                    <div class="goods__left">
                        <my-image
                            class="goods__img"
                            :src="val.imgUrl"
                        ></my-image>
                        <div class="goods__info">
                            <div class="goods__title">
                                {{ val.title || "" }}
                            </div>
                            <div class="goods__spec">
                                {{ val.skuName || "" }}
                            </div>
                        </div>
                    </div>
                    <div class="goods__right">
                        <div class="goods__price">
                            ¥{{ val.price | minuteToRmb }}
                        </div>
                        <div class="goods__num">
                            {{ "X" + (val.number || "0") }}
                        </div>
                    </div>
                </div>
                <div class="goods__bottom">
                    <div class="goods__text">
                        {{ val.refundNo ? "退款编号：" + val.refundNo : "" }}
                    </div>
                    <div class="goods__status">
                        <div class="goods__refund">
                            {{ statusEnum[val.status] || "" }}
                        </div>
                        <div>
                            <div
                                v-if="val.hadCashCoupon"
                                class="goods__btn"
                                @click="jump('/pages/voucher/index')"
                            >
                                {{ cashCouponName }}
                            </div>
                            <div 
                                class="goods__btn" 
                                v-if="val.status === 4 || val.status === 9"
                                @click="viewLogistics(val)">
                                查看快递
                            </div>
                            <block v-if="val.status !== 6">
                                <div
                                    v-if="
                                        val.afterSaleStatus === 0 &&
                                        (val.status === 3 ||
                                            val.status === 21 ||
                                            val.status === 24 ||
                                            val.status === 20 ||
                                            val.status === 23 ||
                                            val.status === 26)
                                    "
                                    class="goods__btn"
                                    @click="jumpRefund(val)"
                                >
                                    退款
                                </div>
                                <div
                                    v-if="
                                        val.afterSaleStatus === 0 &&
                                        (val.status === 4 ||
                                            val.status === 9 ||
                                            val.status === 25 ||
                                            val.status === 27)
                                    "
                                    class="goods__btn"
                                    @click="jumpRefund(val)"
                                >
                                    退款/退货
                                </div>
                                <div
                                    v-if="val.afterSaleStatus"
                                    class="goods__btn"
                                    @click="jumpRefund(val)"
                                >
                                    {{ afterSaleStatus[val.afterSaleStatus] }}
                                </div>
                            </block>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="bill">
            <ul class="bill__list">
                <li class="bill__item">
                    <div class="bill__title">商品总额</div>
                    <div class="bill__text color_block">
                        {{ "¥" + (order.shopOrderPrice || "0.00") }}
                    </div>
                </li>
                <li class="bill__item" v-if="order.pointAmount">
                    <div class="bill__title">积分抵扣</div>
                    <div class="bill__text color_red">
                        - {{ "¥" + (order.pointAmount || "0.00") }}
                    </div>
                </li>
                <li class="bill__item" v-if="order.couponAmount">
                    <div class="bill__title">优惠抵扣</div>
                    <div class="bill__text color_red">
                        - {{ "¥" + (order.couponAmount || "0.00") }}
                    </div>
                </li>
                <li
                    class="bill__item"
                    v-if="
                        express.shipExpressName !== '门店自提' && order.postage
                    "
                >
                    <div class="bill__title">配送费</div>
                    <div class="bill__text color_block">
                        + {{ "¥" + (order.postage || "0.00") }}
                    </div>
                </li>
                <li class="bill__item" v-if="order.packageFee">
                    <div class="bill__title">打包费</div>
                    <div class="bill__text color_block">
                        + {{ "¥" + (order.packageFee || "0.00") }}
                    </div>
                </li>
            </ul>
            <div class="bill__row" v-if="order.status !== 6">
                <div class="bill__name">实付总额</div>
                <div class="bill__price color_block">
                    {{ "¥" + (order.buyerFinalPrice || "0.00") }}
                </div>
            </div>
        </div>
        <!-- <div class="row">
            <div class="row__title">实付金额</div>
            <div class="row__text">{{ '¥' + (order.buyerFinalPrice || '0.00') }}</div>
        </div> -->
        <div class="info">
            <div class="info__copy" @click="copyOrderNumber()">复制</div>
            <ul class="inf__list">
                <li class="info__item">
                    <div class="info__text">订单编号：</div>
                    <div class="info__text">{{ order.orderNo || "" }}</div>
                </li>
                <li class="info__item">
                    <div class="info__text">下单时间：</div>
                    <div class="info__text">{{ order.created || "" }}</div>
                </li>
                <li class="info__item" v-if="order.payTime">
                    <div class="info__text">支付时间：</div>
                    <div class="info__text">{{ order.payTime || "" }}</div>
                </li>
                <li class="info__item" v-if="order.shipTime">
                    <div class="info__text">发货时间：</div>
                    <div class="info__text">{{ order.shipTime || "" }}</div>
                </li>
                <li class="info__item" v-if="express.shipExpressName">
                    <div class="info__text">配送方式：</div>
                    <div class="info__text">
                        {{ express.shipExpressName || "" }}
                    </div>
                </li>
                <block v-if="express.shipExpressName === '门店自提'">
                    <li class="info__item">
                        <div class="info__text">提货时间：</div>
                        <div
                            class="info__text"
                            v-if="allDetail && allDetail.shipDetail"
                        >
                            {{
                                allDetail.shipDetail.deliveryStartTime
                                    | dateFormat("yyyy-MM-dd hh:mm")
                            }}
                            ——
                            {{
                                allDetail.shipDetail.deliveryEndTime
                                    | dateFormat("yyyy-MM-dd hh:mm")
                            }}
                        </div>
                    </li>
                </block>
                <block v-else>
                    <li class="info__item" v-if="order.productSource !== 1">
                        <div class="info__text">配送时间：</div>
                        <div
                            class="info__text"
                            v-if="allDetail && allDetail.shipDetail"
                        >
                            {{
                                allDetail.shipDetail.deliveryStartTime
                                    | dateFormat("yyyy-MM-dd hh:mm")
                            }}
                            ——
                            {{
                                allDetail.shipDetail.deliveryEndTime
                                    | dateFormat("yyyy-MM-dd hh:mm")
                            }}
                        </div>
                    </li>
                </block>
                <!-- <li class="info__item" v-if="express.shipExpressNo">
                    <div class="info__text">快递单号：</div>
                    <div class="info__text">
                        {{ express.shipExpressNo || "" }}
                    </div>
                </li> -->
            </ul>
        </div>
        <div
            class="back"
            @click="jump({ isTabBer: true, path: '/pages/goods/index' })"
        >
            返回首页
        </div>
        <div
            class="bottom"
            :class="{ 'bottom--iphoneX': iphoneX }"
            v-if="order.status !== 3"
        >
            <div
                v-if="order.status === 2"
                class="bottom__btn"
                @click.stop="cancel()"
            >
                取消订单
            </div>
            <div
                v-if="order.status === 2"
                class="bottom__btn pay-btn"
                @click.stop="pay()"
            >
                支付
            </div>
            <!-- <div
                v-if="order.status === 6 || order.status === 9"
                class="bottom__btn"
                @click.stop="remove()"
            >删除订单</div> -->
            <!-- <div
                v-if="order.status === 4 ||  order.status === 9"
                class="bottom__btn"
                @click.stop="jumpExpress()"
            >查看物流</div> -->
            <div
                v-if="order.status === 4"
                class="bottom__btn"
                @click.stop="receive()"
            >
                确认收货
            </div>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
let statusEnum = {
    2: "待支付",
    3: "待发货",
    4: "待收货",
    6: "已取消",
    7: "售后中",
    8: "已删除",
    9: "已完成",
    10: "已评价",
    11: "已售后",
    12: "已退款",
    20: "待接单",
    21: "拣货中",
    22: "拣货完成",
    23: "待配送",
    24: "配送中",
    25: "已送达",
    26: "待提货",
    27: "已提货",
    31: "订单已推单",
    32: "订单已被骑手接单",
    33: "骑手已到店",
    34: "骑手已取餐",
    35: "订单完成",
    36: "订单失败",
};
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            orderId: "",
            order: "",
            address: "",
            express: "",
            goods: [],
            timer: "",
            allDetail: {},
            afterSaleStatus: {
                1: "退款审核中",
                2: "等待商家退款",
                3: "退款完成",
                4: "退款取消",
                5: "退货审核中",
                6: "退货取消",
                7: "退货完成",
                8: "等待买家退货",
                9: "等待确认收货",
                10: "已拒绝",
            },
            statusEnum: statusEnum,
        };
    },

    async onShow() {
        const self = this;
        self.orderId = self.$mp.query.orderId;

        await self.fn.init();
        self.getInfo();
    },

    onHide() {
        const self = this;

        clearInterval(self.timer);
    },

    // 函数
    methods: {
        goTrack() {
            this.router.push({
                path: "/pages/order/track",
                query: {
                    orderId: this.orderId,
                },
            });
        },

        // 获取订单详情
        getInfo() {
            const self = this;

            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Order/Detail", {
                    id: self.orderId,
                })
                .then((res) => {
                    uni.hideLoading();
                    let data = JSON.parse(res.data);

                    self.order = data.orderInfo;
                    self.address = data.shipDetail.receiverAddressInfo;
                    self.goods = data.orderInfo.itemOrders;
                    self.allDetail = data;
                    self.express = data.shipDetail.shipExpressInfo;

                    self.order.expiredTime =
                        Number(self.order.expiredTime) || 0;
                    self.order.autoSignoffTime =
                        Number(self.order.autoSignoffTime) || 0;
                    self.order.expiredTimeText = self.formatTime(
                        self.order.expiredTime
                    );
                    self.order.autoSignoffTimeText = self.formatTime(
                        self.order.autoSignoffTime
                    );

                    self.timer = setInterval(() => {
                        if (self.order.expiredTime > 0) {
                            self.order.expiredTime--;
                            self.order.expiredTimeText = self.formatTime(
                                self.order.expiredTime
                            );
                        } else if (self.order.status === 2) {
                            self.api
                                .post("/Order/Cancel", {
                                    orderId: self.order.shopOrderId,
                                    reason: "",
                                })
                                .then(() => {
                                    self.order.status = 6;
                                });
                        }

                        // 自动签收
                        if (self.order.autoSignoffTime > 0) {
                            self.order.autoSignoffTime--;
                            self.order.autoSignoffTimeText = self.formatTime(
                                self.order.autoSignoffTime
                            );
                        } else if (self.order.status === 4) {
                            self.api
                                .post("/Order/SignOff", {
                                    orderId: self.order.shopOrderId,
                                })
                                .then(() => {
                                    self.order.status = 9;
                                });
                        }

                        if (
                            self.order.expiredTime <= 0 &&
                            self.order.autoSignoffTime <= 0
                        ) {
                            clearInterval(self.timer);
                        }
                    }, 1000);
                });
        },

        // 格式化时间
        formatTime(val) {
            let day = parseInt(val / (3600 * 24));
            let hour = parseInt((val / 3600) % 24);
            let minute = parseInt((val % 3600) / 60);
            let second = parseInt((val % 3600) % 60);

            if (day > 0) {
                return (
                    day + "天" + hour + "小时" + minute + "分" + second + "秒"
                );
            } else {
                return hour + "小时" + minute + "分" + second + "秒";
            }
        },

        // 复制订单号
        copyOrderNumber() {
            const self = this;

            uni.setClipboardData({
                data: self.order.orderNo,
                success: () => {
                    self.fn.showToast("复制成功");
                },
            });
        },

        // 跳转到售后
        jumpRefund(val) {
            const self = this;

            self.router.push({
                path: "/pages/order/afterSale",
                query: {
                    orderId: self.orderId,
                    orderItemId: val.itemId,
                    orderStatus: self.order.status,
                    price: val.payAmount,
                },
            });
        },

        // 跳转到物流信息
        jumpExpress() {
            const self = this;

            self.router.push({
                path: "/pages/order/express",
                query: {
                    orderId: self.order.shopOrderId,
                },
            });
        },

        // 取消订单
        cancel() {
            const self = this;

            self.fn
                .showModal({
                    title: "取消订单",
                    content: "这么好的宝贝，确定不要了？",
                })
                .then((res) => {
                    if (res.confirm) {
                        self.api
                            .post("/Order/Cancel", {
                                orderId: self.order.shopOrderId,
                                reason: "",
                            })
                            .then(() => {
                                self.order.status = 6;
                                self.fn.showToast("订单取消成功");
                            });
                    }
                });
        },

        // 支付
        pay() {
            const self = this;

            self.fn.pay(self.order.shopOrderId, self.order.buyerFinalPrice);
        },

        // 确认收货处理
        receive() {
            const self = this;

            self.fn
                .showModal({
                    title: "确认收货",
                    content: "请你收到货物后再点击“确认”，否则可能钱货两空！",
                })
                .then((res) => {
                    if (res.confirm) {
                        self.api
                            .post("/Order/SignOff", {
                                orderId: self.order.shopOrderId,
                            })
                            .then(() => {
                                self.order.status = 9;
                                self.fn.showToast("已确认收货");
                            });
                    }
                });
        },

        // 删除订单
        remove() {
            const self = this;

            self.fn
                .showModal({
                    title: "删除订单",
                    content: "确定删除订单？",
                })
                .then((res) => {
                    if (res.confirm) {
                        self.api
                            .delete("/Order/Delete", {
                                orderId: self.order.shopOrderId,
                            })
                            .then(() => {
                                self.fn.showToast("删除成功");
                                self.router.back();
                            });
                    }
                });
        },

        // 去商品详情
        goGoodDetail(val) {
            console.log(this.order);
            if (this.order.productSource === 1) {
                // 优选
                this.router.push({
                    path: "/pages/recommend/detail",
                    query: {
                        goodsId: val.productId,
                    },
                });
            } else {
                // 普通
                this.router.push({
                    path: "/pages/goods/detail",
                    query: {
                        goodsId: val.productId,
                    },
                });
            }
        },

        // 查看快递
        viewLogistics(val) {
            console.log(val);
            this.router.push({
                path: "/pages/order/express",
                query: {
                    orderItemId: val.itemId,
                },
            });
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },

        // 是否开启积分抵扣
        enablePoints() {
            return this.$store.state.common.enablePoints;
        },
        cashCouponName() {
            return this.$store.state.common.cashCouponName || "";
        },
    },

    // 数据监听
    watch: {},
};
</script>

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

    &--iphoneX {
        padding-bottom: px(220);
    }
}

.top {
    background-color: #fff;

    &__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(210);
        padding: 0 px(55) px(10);
    }

    &__title {
        font-size: px(44);
        color: #f6672b;
    }

    &__bottom {
        margin-top: px(25);
    }

    &__text {
        margin-right: px(10);
        font-size: px(36);
        color: #666;
    }

    &__img {
        width: px(94);
        height: px(94);
        margin-right: px(30);
    }
    &__l {
        display: flex;
        align-items: center;
        height: 100%;
        flex-shrink: 0;
    }
    &__r {
        display: flex;
        align-items: center;
        height: 100%;
        flex-shrink: 0;
    }
    &__line {
        width: 100%;
        height: px(36);
    }
    &__arrows {
        font-size: px(50);
        color: #666;
        margin-left: px(20);
        flex-shrink: 0;
    }
}

.address {
    display: flex;
    align-items: center;
    padding: px(35) px(45);
    background-color: #fff;

    &__dihzi {
        font-size: px(60);
        color: #999;
    }

    &__right {
        flex: 1;
        margin-left: px(30);
    }

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

    &__name {
        font-size: px(36);
        color: #333;
    }

    &__phone {
        margin-left: px(10);
        font-size: px(36);
        color: #333;
    }

    &__text {
        margin-top: px(30);
        font-size: px(36);
        color: #999;
    }
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(130);
    padding: 0 px(45);
    margin-top: px(25);
    background-color: #fff;

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

    &__message {
        font-size: px(44);
        color: #000;
    }

    &__text {
        margin-left: px(15);
        font-size: px(36);
        color: #000;
    }
}

.caption {
    display: flex;
    align-items: center;

    &__icon {
        font-size: px(44);
        color: #333;
    }

    &__title {
        margin-left: px(30);
        font-size: px(36);
        color: #333;
    }

    &__arrows {
        margin-left: px(20);
        font-size: px(44);
        color: #333;
    }
}

.goods {
    padding: 0 px(45);
    border-top: solid px(3) #ececec;
    background-color: #fff;

    &__item {
        min-height: px(225);
        padding-top: px(30);
        border-top: solid px(3) #ececec;

        &:first-child {
            border-top: none;
        }
    }

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

    &__left {
        display: flex;
        flex: 1;
    }

    &__img /deep/ img {
        width: px(170);
        height: px(170);
        border-radius: px(10);
    }

    &__info {
        flex: 1;
        margin-left: px(30);
    }

    &__title {
        @include omits(2);
        font-size: px(36);
        color: #333;
    }

    &__spec {
        @include omits(1);
        margin-top: px(30);
        font-size: px(36);
        color: #999;
    }

    &__right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: px(210);
    }

    &__price {
        font-size: px(36);
        color: #333;
    }

    &__num {
        margin-top: px(20);
        font-size: px(36);
        color: #999;
    }

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

    &__text {
        font-size: px(36);
        color: #999;
    }

    &__status {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }

    &__btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: px(70);
        padding: 0 px(40);
        margin-left: px(30);
        font-size: px(36);
        color: #666;
        border-radius: px(35);
        border: solid px(3) #999;
    }
}

.bill {
    padding: 0 px(45);
    background-color: #fff;

    &__list {
        padding: px(40) 0;
        border-top: solid px(3) #e5e5e5;
    }

    &__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: px(15);

        &:first-child {
            margin-top: 0;
        }
    }

    &__title {
        font-size: px(36);
        color: #999;
    }

    &__text {
        font-size: px(36);
        color: #999;
    }

    &__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(120);
        border-top: solid px(3) #e5e5e5;
    }

    &__name {
        font-size: px(38);
        color: #333;
    }

    &__price {
        font-size: px(38);
        color: #333;
    }
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(120);
    padding: 0 px(45);
    margin-top: px(25);
    background-color: #fff;

    &__title {
        font-size: px(38);
        color: #333;
    }

    &__text {
        font-size: px(38);
        color: #333;
    }
}

.info {
    position: relative;
    padding: px(45);
    margin-top: px(25);
    background-color: #fff;

    &__copy {
        position: absolute;
        top: px(20);
        right: px(70);
        z-index: 990;
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(140);
        height: px(70);
        font-size: px(36);
        color: #666;
        border: solid px(3) #ddd;
    }

    &__item {
        display: flex;
        align-items: center;
        margin-top: px(10);

        &:first-child {
            margin-top: 0;
        }
    }

    &__text {
        margin-right: px(20);
        font-size: px(36);
        color: #999;
    }
}

.back {
    position: fixed;
    bottom: px(290);
    right: 0;
    z-index: 995;
    display: flex;
    justify-content: center;
    align-items: center;
    width: px(225);
    height: px(90);
    font-size: px(36);
    color: #fff;
    border-radius: px(45) 0 0 px(45);
    background-color: #27a34f;
}

.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 995;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: px(160);
    padding: 0 px(45);
    background-color: #fff;
    border-top: solid px(3) #e5e5e5;

    &--iphoneX {
        height: px(190);
        padding-bottom: px(30);
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(280);
        height: px(100);
        margin-left: px(15);
        font-size: px(44);
        color: #666;
        border-radius: px(50);
        border: solid px(2) #ddd;

        &:last-child {
            color: #27a34f;
            border-color: #27a34f;
        }
    }
}

.color_block {
    color: #333 !important;
}
.color_red {
    color: #27a34f !important;
}

.page_red {
    .back {
        background-color: #27a34f;
    }
    .bottom__btn:last-child {
        color: #27a34f;
        border-color: #27a34f;
    }
}

.pay-btn {
    color: #27a34f !important;
    border-color: #27a34f !important;
}
.goods__refund {
    margin-top: px(20);
    font-size: px(36);
    color: #f78819;
    margin-bottom: px(20);
}
</style>