CZKJ.XKJ.Helper/src/pages/index/index.vue

<template>
    <div class="page">
        <div class="page__top">
            <div class="name">当前门店：</div>
            <div class="shop" v-if="!hideShop" @click="goShopSelect">
                <div class="shop__name">
                    <!-- 最多6字 -->
                    {{ curShopName }}
                    <i class="iconfont iconyoujiantou shop__arrow"></i>
                </div>
            </div>
        </div>
        <ul class="tab">
            <li
                class="tab__item"
                :class="{ 'tab__item--active': tab === index }"
                v-for="(item, index) in list"
                :key="index"
                @click="setTab(index)"
            >
                <div class="tab__text">{{ item.title }}</div>
                <div class="tab__num" v-if="item.num > 0">{{ item.num }}</div>
            </li>
        </ul>
        <div class="page__content" v-if="!noPower">
            <swiper class="page__swiper" :current="tab" @change="swiperChange">
                <swiper-item v-for="(item, index) in list" :key="index">
                    <scroll-view
                        class="page__scroll"
                        :scroll-y="true"
                        @scrolltolower="getMoreList"
                    >
                        <ul class="order">
                            <li
                                class="order__item"
                                v-for="(order, oindex) of orderList"
                                :key="oindex"
                            >
                                <black
                                    v-if="
                                        order.afterSaleList &&
                                        order.afterSaleList.length
                                    "
                                >
                                    <div
                                        class="apply"
                                        :class="{
                                            showAll: order.showAllAfterSale,
                                        }"
                                    >
                                        <div class="head">
                                            <div class="tit">退款</div>
                                        </div>
                                        <section
                                            class="info-item"
                                            v-for="afterSale of order.afterSaleList"
                                            :key="afterSale._id"
                                        >
                                            <div class="coll">
                                                <div class="coll-l coll-tit">
                                                    {{
                                                        afterSale.applyUser ===
                                                        0
                                                            ? "顾客申请"
                                                            : ""
                                                    }}
                                                    {{
                                                        afterSale.refundType ===
                                                        0
                                                            ? "全部退款"
                                                            : "部分退款"
                                                    }}

                                                    <span class="status"
                                                        >({{
                                                            afterSale.status
                                                                | afterSaleStatus
                                                        }})</span
                                                    >
                                                </div>
                                                <div class="date coll-r">
                                                    {{
                                                        afterSale.createdTime
                                                            | timestampToDate(
                                                                "MM-dd hh:mm"
                                                            )
                                                    }}
                                                </div>
                                            </div>
                                            <div class="coll">
                                                <div class="coll-l">
                                                    金额：<span
                                                        class="money-red"
                                                        >￥{{
                                                            afterSale.refundAmount
                                                                | minuteToRmb2
                                                        }}</span
                                                    >
                                                </div>
                                                <div class="date coll-r"></div>
                                            </div>
                                            <div
                                                class="coll"
                                                v-if="afterSale.productInfo"
                                            >
                                                <div class="coll-l">
                                                    商品：{{
                                                        afterSale.productInfo
                                                            .name
                                                    }}
                                                </div>
                                                <div class="good-r coll-r">
                                                    <!-- <span class="num">x{{afterSale.orderInfo.orderItemCount || ''}}</span> -->
                                                    <span class="money"
                                                        >￥{{
                                                            afterSale.orderInfo
                                                                .orderItemPayAmount
                                                                | minuteToRmb2
                                                        }}</span
                                                    >
                                                </div>
                                            </div>
                                            <div
                                                class="coll"
                                                v-if="afterSale.applyReason"
                                            >
                                                <div class="coll-l">
                                                    理由：{{
                                                        afterSale.applyReason
                                                    }}
                                                </div>
                                                <div class="coll-r"></div>
                                            </div>
                                            <div
                                                class="btns"
                                                v-if="
                                                    afterSale.status === 1 ||
                                                    afterSale.status === 5
                                                "
                                            >
                                                <span
                                                    class="btn"
                                                    @click="applyNo(afterSale)"
                                                    >拒绝</span
                                                >
                                                <span
                                                    class="btn ok"
                                                    @click="applyOk(afterSale)"
                                                    >同意</span
                                                >
                                            </div>
                                        </section>
                                        <div
                                            class="toggle"
                                            v-if="
                                                order.afterSaleList &&
                                                order.afterSaleList.length > 1
                                            "
                                        >
                                            <span
                                                @click="afterSaleToggle(order)"
                                                >{{
                                                    order.showAllAfterSale
                                                        ? "收起信息"
                                                        : "展开完整售后信息"
                                                }}</span
                                            >
                                        </div>
                                    </div>
                                </black>
                                <div class="order__main">
                                    <div class="order__top">
                                        <div class="des">
                                            <span>要求送达时间：</span
                                            >{{
                                                order.orderInfo
                                                    .deliveryStartTime
                                                    | dateFormat("MM-dd hh:mm")
                                            }}
                                            ——
                                            {{
                                                order.orderInfo.deliveryEndTime
                                                    | dateFormat("MM-dd hh:mm")
                                            }}
                                        </div>
                                        <div class="index">
                                            <!-- <span class="symbol">#</span>155 -->
                                        </div>
                                    </div>
                                    <div class="order__top order__top2">
                                        <div class="des">
                                            <span>订单号：</span>
                                            {{ order.orderInfo.tradeNo }}
                                            <span
                                                class="copy"
                                                @click="
                                                    copy(
                                                        order.orderInfo.tradeNo
                                                    )
                                                "
                                                >复制</span
                                            >
                                            <span class="order-status">{{
                                                order.orderInfo.status
                                                    | orderStatus
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="tags">
                                        <span
                                            class="tag geekblue"
                                            v-if="
                                                order.orderInfo
                                                    .deliveryMethod === 0
                                            "
                                            >快递</span
                                        >
                                        <span
                                            class="tag green"
                                            v-if="
                                                order.orderInfo
                                                    .deliveryMethod === 1
                                            "
                                            >门店自提</span
                                        >
                                        <span
                                            class="tag magenta"
                                            v-if="
                                                order.orderInfo
                                                    .deliveryMethod === 2
                                            "
                                            >送货上门</span
                                        >
                                    </div>
                                    <div class="order__con">
                                        <div class="order__title">
                                            {{
                                                order.fromAddress.address || ""
                                            }}
                                            ({{ order.storeInfo.name || "" }})
                                        </div>
                                        <p class="order__des">
                                            {{
                                                order.fromAddress.province +
                                                    order.fromAddress.city +
                                                    order.fromAddress.county ||
                                                ""
                                            }}
                                        </p>
                                        <block
                                            v-if="
                                                order.orderInfo
                                                    .deliveryMethod === 2
                                            "
                                        >
                                            <div
                                                class="order__title on order__title2"
                                            >
                                                {{ order.toAddress.address }}
                                            </div>
                                            <p class="order__des on">
                                                {{
                                                    order.toAddress.province +
                                                    order.toAddress.city +
                                                    order.toAddress.county
                                                }}
                                            </p>
                                        </block>
                                    </div>
                                </div>
                                <div class="remarks user-name">
                                    收件人：{{ order.orderInfo.name }}
                                    {{ order.orderInfo.mobile }}
                                </div>
                                <!-- <div class="yuji" v-if="tab!==4">预计{{order | yujiTime}}送达</div> -->
                                <div
                                    class="remarks"
                                    v-if="order.orderInfo.description"
                                >
                                    备注：{{ order.orderInfo.description }}
                                </div>
                                <div class="tools">
                                    <!-- afterSaleStatus 根据售后信息里RefundType字段判断手动加的值 -->
                                    <div class="oper">
                                        <!-- 只要有一条售后就不能申请取消订单 -->
                                        <!-- <span
                                            class="oper-btn"
                                            @click="cancelOrder(order)"
                                            v-if="!order.noShowCancelOrder"
                                            >取消订单</span
                                        > -->
                                        <black
                                            v-if="
                                                order.orderInfo.status !== 12 &&
                                                order.orderInfo.status !== 11
                                            "
                                        >
                                            <span
                                                class="oper-btn"
                                                v-if="
                                                    order.afterSaleStatus !==
                                                    'all'
                                                "
                                                @click="refund(order)"
                                                >退款</span
                                            >
                                            <span
                                                class="oper-btn"
                                                @click="refundDifference(order)"
                                                >退差价</span
                                            >
                                        </black>
                                    </div>
                                    <div
                                        class="view-btn"
                                        @click="orderClick(order)"
                                    >
                                        查看订单商品
                                    </div>
                                </div>
                                <div class="view-detail">
                                    <ul class="goods" v-if="order.viewDetail">
                                        <li
                                            v-for="good of order.orderItems"
                                            :key="good.orderItem.id"
                                            class="goods__item"
                                        >
                                            <div class="goods__content">
                                                <div class="goods__left">
                                                    <my-image
                                                        class="goods__img"
                                                        :src="good.productImage"
                                                    ></my-image>
                                                    <div class="goods__info">
                                                        <div
                                                            class="goods__title"
                                                        >
                                                            {{
                                                                good.productName ||
                                                                ""
                                                            }}
                                                        </div>
                                                        <div
                                                            class="goods__spec"
                                                        >
                                                            {{
                                                                good.skuName ||
                                                                ""
                                                            }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="goods__right">
                                                    <div class="goods__price">
                                                        ¥{{
                                                            good.payAmount
                                                                | minuteToRmb
                                                        }}
                                                    </div>
                                                    <div class="goods__num">
                                                        {{
                                                            "X" +
                                                            (good.count || "0")
                                                        }}
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="order__btns" v-if="tab !== 6 && tab !== 5">
                                    <div
                                        class="btn tel"
                                        @click="makePhone(order)"
                                    >
                                        <my-image
                                            src="/static/icon/tal.png"
                                        ></my-image>
                                        <span>联系</span>
                                    </div>
                                    <div
                                        class="btn active"
                                        v-if="tab === 0"
                                        @click="receivingOrder(order, oindex)"
                                    >
                                        接单
                                    </div>
                                    <div
                                        class="btn active"
                                        v-if="tab === 1"
                                        @click="packagedOrder(order, oindex)"
                                    >
                                        打包完
                                    </div>
                                    <div
                                        class="btn active"
                                        v-if="tab === 2"
                                        @click="completeOrder(order, oindex)"
                                    >
                                        已提货
                                    </div>
                                    <div
                                        class="btn active"
                                        v-if="tab === 3"
                                        @click="deliveryOrder(order, oindex)"
                                    >
                                        配送中
                                    </div>
                                    <div
                                        class="btn active"
                                        v-if="tab === 4"
                                        @click="completeOrder(order, oindex)"
                                    >
                                        完成订单
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="null" v-if="loading && !item.list.length">
                            <img
                                class="null__img"
                                src="/static/common/order_null.jpg"
                                alt
                            />
                            <div class="null__title">还没有相关数据哦</div>
                            <!-- <div class="null__sub-title">xxx</div> -->
                        </div>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </div>
        <div v-if="noPower" class="tips">
            当前小程序需要绑定手机号使用,
            <span class="bind" @click="goBind">去绑定</span>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import fn from "../../common/js/function";

export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            tab: 0,
            list: [
                {
                    title: "待接单",
                    status: "20",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "打包中",
                    status: "21",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "待提货",
                    status: "26",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "待配送",
                    status: "23",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "配送中",
                    status: "24",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "售后",
                    status: "99",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "已完成",
                    status: "9",
                    num: 0,
                    page: 1,
                    list: [],
                },
            ],
            loading: false, // 是否加载完成
        };
    },
    filters: {
        yujiTime(item) {
            let sTime = item.orderInfo.deliveryStartTime;
            sTime = sTime.replace(/-/g, "/");
            sTime = new Date(sTime);
            sTime = sTime.getTime();
            let instantDelivery = 0; // 配送时间 m
            let reserveReceivingOrdersTime = 0; // 预留接单时间 m
            if (item.storeExtraInfo) {
                instantDelivery =
                    item.storeExtraInfo.deliveryConfig.instantDelivery *
                    60 *
                    1000;
                reserveReceivingOrdersTime =
                    item.storeExtraInfo.deliveryConfig
                        .reserveReceivingOrdersTime *
                    60 *
                    1000;
            }
            sTime += instantDelivery + reserveReceivingOrdersTime;
            return fn.getDateFormat(new Date(sTime), "MM-dd hh:mm");
        },

        afterSaleStatus(v) {
            switch (v) {
                case 1:
                    return "退款审核中";
                case 2:
                    return "等待商家退款";
                case 3:
                    return "退款完成";
                case 4:
                    return "退款取消";
                case 5:
                    return "退货审核中";
                case 6:
                    return "退货取消";
                case 7:
                    return "退货完成";
                case 8:
                    return "等待买家退货";
                case 9:
                    return "等待确认收货";
                case 10:
                    return "已拒绝";
                default:
                    return "未知";
            }
        },

        orderStatus(v) {
            let obj = {
                2: "待支付",
                3: "待发货",
                4: "待收货",
                5: "拼团中",
                6: "已取消",
                7: "售后中",
                8: "已删除",
                9: "已完成",
                10: "已评价",
                11: "已售后",
                12: "已退款",
                20: "待接单",
                21: "拣货中",
                22: "拣货完成",
                23: "待配送",
                24: "配送中",
                25: "已送达",
                26: "待提货",
                27: "已提货",
                31: "订单已推单",
                32: "订单已被骑手接单",
                33: "骑手已到店",
                34: "骑手已取餐",
                35: "订单完成",
                36: "订单失败",
            };
            return obj[v] || "未知";
        },
    },

    async onShow() {
        const self = this;
        // 未授权
        // if (this.$store.state.user.noPower === true) {
        //     console.log("未授权重定向", this.$store.state.user);
        //     this.idrouter.replace({
        //         path: "/pages/index/bind",
        //         isReLaunch: true,
        //         query: {
        //             openId: this.$store.state.user.openId,
        //         },
        //     });
        //     return;
        // }
        self.fn.shareMenu();
        self.tab = this.$store.state.common.tabIndex;
        this.getList();
    },

    // onPullDownRefresh() {
    //     const self = this;
    //     self.getList();
    // },

    // 函数
    methods: {
        // 切换导航
        setTab(index) {
            const self = this;
            self.tab = index;
            this.$store.commit("common/update", {
                tabIndex: index,
            });
        },

        // swiper切换处理
        swiperChange(val) {
            const self = this;
            self.tab = val.target.current;
            self.getList();
        },

        // 获取订单列表
        getList() {
            const self = this;

            self.list[self.tab].page = 1;

            uni.showLoading({
                title: "加载中...",
            });
            self.api
                .get("/Order/GetList", {
                    storeId: this.curShopId || "",
                    status: self.list[self.tab].status,
                    pageIndex: self.list[self.tab].page,
                    pageSize: 20,
                })
                .then((res) => {
                    uni.hideLoading();
                    let data = res.data.data;

                    if (data.length) {
                        self.list[self.tab].page++;
                    }

                    // self.list[1].num = data.countInfo.unpaidOrderCount
                    // self.list[2].num = data.countInfo.waitShippedOrderCount
                    // self.list[3].num = data.countInfo.waitReceivedOrderCount
                    data = this.afterSaleFactory(data);
                    self.list[self.tab].list = data;
                    self.loading = true;
                    uni.hideLoading();
                });
        },

        // 获取更多内容
        getMoreList() {
            const self = this;

            self.api
                .get("/Order/GetList", {
                    status: self.list[self.tab].status,
                    pageIndex: self.list[self.tab].page,
                    pageSize: 20,
                })
                .then((res) => {
                    let data = res.data.data;
                    if (data.length) {
                        self.list[self.tab].page++;
                    }
                    data = this.afterSaleFactory(data);
                    // self.list[1].num = data.countInfo.unpaidOrderCount;
                    // self.list[2].num = data.countInfo.waitShippedOrderCount;
                    // self.list[3].num = data.countInfo.waitReceivedOrderCount;
                    self.list[self.tab].list = self.list[self.tab].list.concat(
                        data
                    );
                });
        },

        // 售后处理
        afterSaleFactory(data) {
            for (let item of data) {
                //判断是否有售货
                if (item.afterSaleList && item.afterSaleList.length) {
                    let obj = {
                        expire: [],
                        now: [],
                    };
                    for (let afterSale of item.afterSaleList) {
                        // 全部退款
                        if (afterSale.refundType === 0) {
                            item.noShowCancelOrder = true;
                            item.afterSaleStatus = "all";
                        }
                    }
                }
            }
            return data;
        },

        // 打电话
        makePhone(val) {
            if (!val.orderInfo.mobile) {
                return this.fn.showToast("该订单无客户手机号");
            }
            uni.makePhoneCall({
                phoneNumber: val.orderInfo.mobile,
            });
        },

        // 接单
        receivingOrder(val, index) {
            this.api
                .get(
                    "/Order/ReceivingOrder",
                    {
                        id: val.orderInfo.id,
                    },
                    {
                        repeat: true,
                    }
                )
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("接单成功");
                        this.list[this.tab].list.splice(index, 1);
                        this.list = [...this.list];
                    } else {
                        this.fn.showToast("接单失败：" + res.message);
                    }
                });
        },
        // 打包完
        packagedOrder(val, index) {
            this.api
                .get(
                    "/Order/PackagedOrder",
                    {
                        id: val.orderInfo.id,
                    },
                    {
                        repeat: true,
                    }
                )
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("打包完成功");
                        this.list[this.tab].list.splice(index, 1);
                        this.list = [...this.list];
                    } else {
                        this.fn.showToast("打包完失败：" + res.message);
                    }
                });
        },
        // 提货
        completeOrder(val, index) {
            this.api
                .get(
                    "/Order/CompleteOrder ",
                    {
                        id: val.orderInfo.id,
                    },
                    {
                        repeat: true,
                    }
                )
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("提货成功");
                        this.list[this.tab].list.splice(index, 1);
                        this.list = [...this.list];
                    } else {
                        this.fn.showToast("提货失败：" + res.message);
                    }
                });
        },
        // 配送中
        deliveryOrder(val, index) {
            this.api
                .get(
                    "/Order/DeliveryOrder",
                    {
                        id: val.orderInfo.id,
                    },
                    {
                        repeat: true,
                    }
                )
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("配送中成功");
                        this.list[this.tab].list.splice(index, 1);
                        this.list = [...this.list];
                    } else {
                        this.fn.showToast("配送中失败：" + res.message);
                    }
                });
        },
        // 送达
        completeOrder(val, index) {
            this.api
                .get(
                    "/Order/CompleteOrder",
                    {
                        id: val.orderInfo.id,
                    },
                    {
                        repeat: true,
                    }
                )
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("送达成功");
                        this.list[this.tab].list.splice(index, 1);
                        this.list = [...this.list];
                    } else {
                        this.fn.showToast("送达失败：" + res.message);
                    }
                });
        },

        goBind() {
            this.router.push({
                path: "/pages/index/login",
                isReLaunch: true,
                query: {
                    openId: this.$store.state.user.openId,
                },
            });
        },

        orderClick(order) {
            order.viewDetail = !order.viewDetail;
            this.list = [...this.list];
        },

        // 复制
        copy(val) {
            const self = this;

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

        // 部分退款
        refund(val) {
            this.$store.commit("common/update", {
                curOrder: val,
            });
            this.router.push({
                path: "/pages/index/refund",
                query: {
                    id: val.orderInfo.id,
                },
            });
        },

        // 退差价
        refundDifference(val) {
            this.$store.commit("common/update", {
                curOrder: val,
            });
            this.router.push({
                path: "/pages/index/difference",
                query: {
                    id: val.orderInfo.id,
                },
            });
        },

        // 取消订单
        cancelOrder(val) {
            this.fn
                .showModal({
                    content: "确认取消该订单，并全部退款",
                })
                .then((res) => {
                    if (res.confirm) {
                        if (val.loading) {
                            return;
                        }
                        val.loading = true;
                        uni.showLoading({
                            title: "提交中...",
                            mask: true,
                        });

                        this.api
                            .post(
                                "/Order/Cancel",
                                {
                                    query: true,
                                    id: val.orderInfo.id,
                                },
                                { pass: true }
                            )
                            .then((res) => {
                                uni.hideLoading();
                                val.loading = false;
                                if (res.success) {
                                    this.fn.showToast("取消成功");
                                    this.getList();
                                } else {
                                    this.fn.showToast(
                                        "取消失败：" + res.message
                                    );
                                }
                            });
                    }
                });
        },

        // 拒绝退款
        applyNo(val) {
            if (val.loading) {
                return;
            }
            val.loading = true;
            this.api
                .post(
                    "/Order/RejectRefund",
                    {
                        query: true,
                        orderId: val.id,
                    },
                    { pass: true }
                )
                .then((res) => {
                    val.loading = false;
                    if (res.success) {
                        this.fn.showToast("操作成功");
                        this.getList();
                    } else {
                        this.fn.showToast("操作失败：" + res.message);
                    }
                });
        },

        // 同意退款
        applyOk(val) {
            if (val.loading) {
                return;
            }
            val.loading = true;
            this.api
                .post(
                    "/Order/AgreeRefund",
                    {
                        query: true,
                        orderId: val.id,
                    },
                    { pass: true }
                )
                .then((res) => {
                    val.loading = false;
                    if (res.success) {
                        this.fn.showToast("操作成功");
                        this.getList();
                    } else {
                        this.fn.showToast("操作失败：" + res.message);
                    }
                });
        },

        goShopSelect() {
            this.router.push("/pages/index/select");
        },

        afterSaleToggle(val) {
            val.showAllAfterSale = !val.showAllAfterSale;
            this.list = [...this.list];
        },
    },

    // 数据计算
    computed: {
        orderList() {
            return this.list[this.tab].list;
        },
        noPower() {
            return this.$store.state.user.noPower;
        },

        curShopName() {
            return this.$store.state.common.curShop.name || "不限门店";
        },

        curShopId() {
            return this.$store.state.common.curShop.id;
        },
    },

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

<style>
page {
    height: 100%;
}
</style>

<style lang="scss" scoped>
.page {
    &__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px(145);
        padding: 0 px(50);
        background-color: #fff;
        border-bottom: 1px solid #f1f1f1;
    }
    .name {
        font-size: px(36);
        color: #999;
        flex-shrink: 0;
        margin-right: px(20);
    }
}

.shop {
    display: flex;
    color: #666;
    font-size: px(36);
    flex-shrink: 0;
    margin-right: px(30);
    width: 100%;
    &__logo {
        margin-right: px(20);
        width: px(80);
        height: px(80);
        border-radius: 50%;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        /deep/ img {
            width: px(80);
            height: px(80);
        }
    }
    &__name {
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
    &__arrow {
        margin-left: px(10);
        transform: rotate(90deg);
    }
}
.page {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__content {
        flex: 1;
        position: relative;
    }

    &__swiper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    &__scroll {
        height: 100%;
    }
}

.tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: px(145);
    background-color: #fff;

    &__item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: 100%;

        &--active:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(6);
            background-color: #333;
        }
    }

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

    &__num {
        position: absolute;
        top: px(30);
        right: px(30);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px(42);
        height: px(42);
        transform: translateX(50%);
        padding: 0 px(15);
        font-size: px(30);
        color: #fff;
        border-radius: px(21);
        background-color: #262626;
    }
}

.order {
    padding-top: px(30);

    &__item {
        margin: px(20);
        margin-top: px(30);
        background-color: #fff;
        border-radius: px(10);
        box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.5);
        padding-bottom: 1px;
    }
    &__main {
        padding: px(40);
    }
    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .des {
            font-size: px(40);
            width: 100%;
            span {
                color: #666;
            }
        }
        .index {
            font-size: px(55);
        }
        .symbol {
            font-size: px(36);
        }
    }
    &__top2 {
        margin-top: px(20);
        .copy {
            display: inline-block;
            font-size: px(32);
            line-height: px(44);
            padding: 0 px(10);
            border: 1px solid #d9d9d9;
            color: #333;
            background-color: #fafafa;
            margin-left: px(20);
            border-radius: px(5);
        }
    }
    .order-status {
        float: right;
    }
    .tags {
        margin-top: px(20);
        .tag {
            display: inline-block;
            line-height: px(50);
            padding: 0 px(15);
            font-size: px(32);
            border: 1px solid #d9d9d9;
            color: #666;
            background: #fafafa;
            border-radius: px(4);
        }
        .magenta {
            color: #eb2f96;
            background: #fff0f6;
            border-color: #ffadd2;
        }
        .green {
            color: #52c41a;
            background: #f6ffed;
            border-color: #b7eb8f;
        }
        .geekblue {
            color: #2f54eb;
            background: #f0f5ff;
            border-color: #adc6ff;
        }
    }

    &__con {
        margin-top: px(60);
        padding-left: px(60);
        position: relative;
        &::after {
            content: "";
            position: absolute;
            left: px(20);
            top: px(60);
            bottom: px(60);
            width: px(3);
            background-color: #a8a8a8;
        }
    }

    &__title {
        font-size: px(60);
        position: relative;
        color: #999;
        &::after {
            content: "";
            position: absolute;
            left: px(-50);
            top: 50%;
            transform: translate(0, -50%);
            z-index: 1;
            width: px(20);
            height: px(20);
            border-radius: 50%;
            background-color: #a8a8a8;
        }
        &.on {
            color: #333;
            &::after {
                background-color: #f68a3f;
            }
        }
    }
    &__title2 {
        margin-top: px(60);
        color: #999;
    }
    &__des {
        font-size: px(36);
        margin-top: px(20);
        color: #999;
        &.on {
            color: #333;
        }
    }
    &__btns {
        display: flex;
        border-top: 1px solid #dedede;
        justify-content: space-between;
        margin-bottom: -1px;
        .btn {
            height: px(130);
            line-height: px(130);
            text-align: center;
        }
        .active {
            background-color: #f68a3f;
            color: #fff;
            font-size: px(50);
            width: 100%;
        }
        .tel {
            width: px(200);
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: px(36);
            line-height: 1;
            /deep/ img {
                width: px(60);
                height: px(60);
                margin-bottom: px(10);
            }
        }
    }
    .yuji {
        padding: px(20) px(40) px(20) px(60);
        font-size: px(36);
        color: #999;
    }
    .remarks {
        background-color: #fefaf1;
        color: #6b5651;
        font-size: px(36);
        line-height: 1.5;
        padding: px(10);
        margin-left: px(60);
        margin-bottom: px(30);
        margin-right: px(40);
    }
}

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

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

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

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

.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: px(145);

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

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

    &__sub-title {
        margin-top: px(20);
        font-size: px(42);
        color: #999;
    }
}
.tips {
    padding: px(60) px(30);
    text-align: center;
    font-size: px(44);
    .bind {
        color: #3582fb;
    }
}
.view-detail {
    padding: px(20) px(40) px(50);
}
.tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px(0) px(40);
    .oper-btn {
        display: inline-block;
        text-align: center;
        line-height: px(66);
        padding: 0 px(20);
        font-size: px(38);
        height: px(66);
        border-radius: px(33);
        border: 1px solid #f1f1f1;
        margin-right: px(20);
    }
    .view-btn {
        text-align: right;
        font-size: px(38);
        color: #3582fb;
    }
}

.goods {
    margin-top: px(40);
    padding: 0 px(45);
    background-color: #f5f5f5;

    &__item {
        min-height: px(225);
        padding-top: px(30);
        & ~ .goods__item {
            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: center;
    }

    &__btn {
        display: 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;
    }
}
.remarks.user-name {
    background-color: transparent;
    font-size: px(44);
    line-height: px(70);
    font-weight: 500;
    color: #333;
}
.apply {
    padding: px(40);
    border-bottom: 1px dashed #f1f1f1;
    background-color: #fcfcfc;
    &.showAll {
        .info-item {
            display: block !important;
        }
    }
    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: px(10);
        .tit {
            font-size: px(50);
        }
    }
    .info-item {
        border-bottom: 1px solid #f1f1f1;
        padding: px(15) 0;
        & ~ .info-item {
            display: none;
        }
        .coll {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666;
            font-size: px(40);
            padding: px(0) px(30);
            margin-top: px(20);
        }
        .coll-tit {
            color: #333;
            font-size: px(44);
            .status {
                display: inline-flexbox;
                margin-left: px(30);
            }
        }
        .good-r {
            .money {
                display: inline-flex;
                width: px(200);
                justify-content: flex-end;
            }
        }
    }
    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: px(30);
        .btn {
            width: 45%;
            height: px(100);
            border: 1px solid #cacaca;
            border-radius: px(50);
            font-size: px(44);
            text-align: center;
            line-height: px(100);
            background-color: #fff;
        }
        .ok {
            background-color: #ff4b26;
            border-color: #ff4b26;
            color: #fff;
        }
    }
    .toggle {
        margin-top: px(20);
        font-size: px(40);
        text-align: right;
        color: #3582fb;
    }
}
.money-red {
    color: #ff475f;
}
</style>