qimall/addons/Store/client/views/order/reserve-detail.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('component/order-shipping', __DIR__);
?>
<style>
    .card-box {
        border: none;
    }

    .marign-b-20 {
        margin-bottom: 20px;
    }

    .step-box {
        margin-top: 10px;
        padding-top: 10px;
    }

    .step-inactive {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #e8e8e8;
        transform: translate(-50%, -50%);
    }

    .step-inside {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #cccbcb;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 24px;
        z-index: 9;
        color: #fff;
        font-size: 12px;
    }

    .step-active {
        background-color: var(--primary, #fb6638);
    }

    .step-outside {
        background-color: transparent;
    }

    .step-box .el-step__title {
        font-size: 14px;
    }

    .text-item {
        padding: 10px 0;
        font-size: 12px;
    }

    .row-card-header {
        font-weight: 700;
        font-size: 14px;
    }

    .text-item > span:nth-child(1) {
        display: inline-block;
        width: 105px;
        padding-right: 20px;
        text-align: right;
    }

    .el-row-flex {
        display: flex;
        flex-flow: row wrap;
    }

    .el-row-flex .card-box {
        height: 100%;
    }

    .order-goods .el-table th > .cell,
    .order-goods .el-table {
        font-size: 13px;
    }

    .package-item {
        padding: 10px 0;
        font-size: 12px;
    }

    .package-item > span:nth-child(1) {
        display: inline-block;
        width: 105px;
        padding: 0 20px;
        text-align: left;
    }

    .package-item img {
        width: 55px;
        height: 55px;
        border-radius: 5px;
        margin-right: 10px;
    }

    .range-right {
        margin-right: 20px;
    }

    .com-order-refund-status {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 20px;
        width: 50px;
        background-color: #FF7171;
        color: #fff;
        text-align: center;
        border-radius: 0 0 5px 5px;
        font-size: 12px;
    }

    .package .el-tab-pane {
        display: flex;
    }


    .package-item ::-webkit-scrollbar {
        width: 5px;
    }

    .el-timeline {
        font-size: 12px;
    }
    .com-order-count-price{
        float: right;
        margin-right: 100px;
    }
    .com-order-count-price .el-form-item{
        margin-bottom:0px;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border: none;" body-style="background-color: #f3f3f3;padding: 10px 0 0;"
             v-loading="cardLoading">
        <div slot="header">
            <span>预约详情</span>
        </div>

        <el-card class="card-box step-box marign-b-20" shadow="never">
            <el-steps :active="stepArrActive">
                <el-step v-for="(item,index) in stepArr" :key="index" :title="item.title"
                         :description="item.created_at|dateTimeFormat('Y-m-d H:i:s')">
                    <template slot="icon">
                        <div class="step-inactive" :class="item.is_step == 1 ? 'step-outside' : ''">
                            <div class="step-inside" :class="item.is_step == 1 ? 'step-active' : ''">{{ index + 1 }}
                            </div>
                        </div>
                    </template>
                </el-step>
            </el-steps>
        </el-card>

        <el-row :gutter="20" class="el-row-flex marign-b-20">
            <el-col :span="8">
                <el-card class="card-box" shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>订单信息</span>
                    </div>
                    <div class="text-item">
                        <span>订单状态</span><span>{{ orderDetail && orderDetail.reserve ? reserve_status[orderDetail.reserve.reserve_status].title : '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>订单编号</span><span>{{ orderDetail.order_no }}</span>
                    </div>
                    <div class="text-item">
                        <span>交易单号</span><span>{{ orderDetail.out_trade_no || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>订单类型</span>
                        <span>
                            预约订单
                        </span>
                    </div>
                    <div class="text-item">
                        <span>支付方式</span><span>{{ payment_type_list[orderDetail.payment_type] }}</span>
                    </div>
                    <div class="text-item">
                        <span>卖家备注</span>
                        <span>{{ orderDetail.seller_remark || '--' }}</span>
                        <span><el-button type="text" size="mini" @click="handle('remark')">备注</el-button></span>
                    </div>
                    <div class="text-item" v-if="orderDetail.is_user_handle_finish == 1">
                        <span>订单标识</span>
                        <span>放弃退换货</span>
                    </div>
                    <div class="text-item">
                        <span>创建方式</span><span>{{ orderDetail.create_type_text }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="card-box " shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>买家及预约信息</span>
                    </div>
                    <div class="text-item">
                        <span>买家</span><span>{{ orderDetail.base_user.nickname }}</span>
                    </div>
                    <div class="text-item">
                        <span>买家备注</span><span>{{ orderDetail.remark || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>预约时间</span><span>{{ orderDetail.reserve.reserve_date_time || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>预约方式</span><span>{{ shipping_type_list[orderDetail.reserve.service_type] }}</span>
                    </div>
                    <div class="text-item">
                        <span>预约人</span><span>{{ orderDetail.receiver_name || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>服务地址</span><span>{{ orderDetail.region_name }} {{ orderDetail.address }}</span>
                    </div>
                    <div class="text-item">
                        <span>手机号码</span><span>{{ orderDetail.mobile }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="card-box" shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>结算信息</span>
                    </div>
                    <div class="text-item">
                        <span>商品小计</span>
                        <span>￥{{orderDetail.goods_price}}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.score_money > 0">
                        <template v-if="orderDetail.marketing_type=='DigitalMall'">
                            <span>抵扣</span>
                            <span>{{orderDetail.extra_info}}</span>
                        </template>
                        <template v-else>
                            <span>积分抵扣</span>
                            <span>- ￥{{orderDetail.score_money}}</span>
                        </template>
                    </div>
                    <div class="text-item" v-if="orderDetail.coupon_money > 0">
                        <span>优惠券抵扣</span>
                        <span>￥{{orderDetail.coupon_money}}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.rand_fee">
                        <span>随机减</span>
                        <span>￥{{orderDetail.rand_fee}}</span>
                    </div>
                    <div class="text-item">
                        <span>实付款</span>
                        <span>￥{{orderDetail.pay_money}}</span>
                    </div>

                </el-card>
            </el-col>
        </el-row>

        <el-card class="card-box marign-b-20" shadow="never" v-if="orderDetail.reserve && orderDetail.reserve.reserve_code">
            <div slot="header" class="clearfix row-card-header">
                <span>预约码</span>
            </div>
            <el-table :data="[{code: orderDetail.reserve.reserve_code, status: orderDetail.reserve.reserve_status}]"
                      style="width: 100%;" :header-cell-style="{background:'#F7F7F7','border-bottom': 0}">
                <el-table-column label="预约码" prop="code"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="reserve_status[scope.row.status].type">{{reserve_status[scope.row.status].title}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <template v-if="orderDetail.reserve.reserve_type == 0">
                            <!-- 执行放在这里 -->
                            --
<!--                                <el-button type="primary" v-if="status == 0" size="small"-->
<!--                                           @click="handle('take-delivery', orderDetail)">使用服务-->
<!--                                </el-button>-->
<!--                                <el-button type="primary" v-if="orderDetail.order_status == 1" size="small"-->
<!--                                           @click="handle('sales', orderDetail)">服务验收-->
<!--                                </el-button>-->
<!--                                <span v-else size="small">--</span>-->
                        </template>
                        <template v-else>--</template>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>商品信息</span>
            </div>
            <div v-if="orderDetail.detail" class="order-goods">
                <el-table :data="orderDetail.detail" style="width: 100%;"
                          :header-cell-style="{background:'#F7F7F7','border-bottom': 0}">
                    <el-table-column label="明细id" width="100">
                        <template slot-scope="scope">
                            <div>{{ scope.row.id }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品id" width="100">
                        <template slot-scope="scope">
                            <div>{{ scope.row.goods_id }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品" width="260">
                        <template slot-scope="scope">
                            <div style="position: relative;display: flex;align-items: center;">
                                <el-image style="width: 66px; height: 50px;border-radius: 5px;"
                                          :src="scope.row.pic_url"></el-image>
                                <span v-if="repeal_list[scope.row.is_feedback]" class="com-order-refund-status">{{ repeal_list[scope.row.is_feedback] }}</span>
                                <com-ellipsis :line="2" style="margin-left: 10px;">
                                    {{ scope.row.goods_name }}
                                </com-ellipsis>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格" width="210">
                        <template slot-scope="scope">
                            <el-tag size="small">
                                {{ scope.row.goods_attr_name || '无规格' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" width="210">
                        <template slot-scope="scope">
                            <div>{{ scope.row.price }}
                                <span v-if="scope.row.adjust_money != 0">(调价：￥{{ scope.row.adjust_money }})</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="购买数量" width="210">
                        <template slot-scope="scope">
                            <div>{{ scope.row.num }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="优惠" width="210">
                        <template slot-scope="scope">
                            <div>￥{{(scope.row.original_goods_price - scope.row.goods_price - orderDetail.score_money).toFixed(2)}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="小计" width="210">
                        <template slot-scope="scope">
                            <div>{{ getOrderPrice(scope.row) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <div>{{ order_status_list[scope.row.order_status] }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-card v-if="orderAction.length > 0" class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>订单操作日志</span>
            </div>
            <el-table :data="orderAction" v-loading="logLoading" style="width: 100%;" size="small" stripe>
                <el-table-column prop="member_name" label="用户" width="90">
                    <template slot-scope="scope">
                        <div>{{ scope.row.member_name }}</div>
                    </template>
                </el-table-column>

                <el-table-column prop="created_at" label="操作时间" width="160">
                    <template slot-scope="scope">
                        <div>{{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}</div>
                    </template>
                </el-table-column>

                <el-table-column prop="action" label="详情">
                    <template slot-scope="scope">
                        <div>{{ scope.row.action }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

<!--        <el-card v-if="orderDetail">-->
<!--            <el-button type="primary" v-if="orderDetail.order_status == 1" size="small"-->
<!--                       @click="handle('shipping', orderDetail)">发货-->
<!--            </el-button>-->
<!--            <el-button type="primary" v-if="orderDetail.order_status == 2" size="small"-->
<!--                       @click="handle('take-delivery', orderDetail)">确认收货-->
<!--            </el-button>-->
<!--            <el-button type="primary" v-if="orderDetail.order_status == 3" size="small"-->
<!--                       @click="handle('sales', orderDetail)">订单完成-->
<!--            </el-button>-->
<!--        </el-card>-->

    </el-card>

    <!-- 修改物流发货 -->
    <order-shipping :is_show="isShowChangeShipping" :change-shipping-loading="changeShippingLoading"
                    :order_info="orderDetail" :shipping_form="shipping_form" @submit="handleShipping"
                    @close="isShowChangeShipping = false"></order-shipping>

    <!-- 商家备注 -->
    <el-dialog title="商家备注" width="600px" :visible.sync="isShowRemark">
        <el-form :model="remark_form" label-width="80px" size="small">
            <el-form-item label="备注" prop="seller_remark">
                <el-input type="textarea" v-model="remark_form.seller_remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isShowRemark = false">取 消</el-button>
            <el-button type="primary" @click="handle('remark',remark_form,true)" :loading="remarkLoading">确 定</el-button>
        </div>
    </el-dialog>

</div>


<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: 0,
                count: 6,
                detail: {},
                isShowChangeShipping: false,
                changeShippingLoading: false,
                remarkLoading: false,
                isShowRemark: false,
                shipping_form: {},
                remark_form: {
                    seller_remark: null,
                },
                supply_express: ['JuheShop'],// 供应链订单禁止任何物流操作
                activePackage: '0',
                cardLoading: false,
                logLoading: false,
                goodDetails: [],
                orderAction: [],
                repeal_list: {
                    '1': '售后中',
                    '2': '售后完成',
                },
                marketing_type_map:{},
                stepArr: [
                    {
                        title: '买家下单',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '买家付款',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '服务核销',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '交易完成',
                        created_at: '0',
                        is_step: 0,
                    }
                ],
                reserve_status: [
                    {
                        title: '待预约',
                        type: 'info'
                    },
                    {
                        title: '待使用',
                        type: 'primary'
                    },
                    {
                        title: '已使用',
                        type: 'success'
                    }
                ],
                stepArrActive: 0,
                orderDetail: {
                    base_user: {},
                    express: [],
                    reserve: {}
                },
                orderExpress: [],
                order_status_list: {
                    '0': "待付款",
                    '1': "待发货",
                    '2': "已发货",
                    '3': "已收货",
                    '4': "已完成",
                    '-1': "售后申请",
                    '-2': "退款中",
                    '-3': "售后完成",
                    '-4': "已关闭",
                    '-5': "撤销申请",
                },
                payment_type_list: {
                    '0': "在线支付",
                    '1': "微信",
                    '2': "支付宝",
                    '3': "银联卡",
                    '5': "余额支付",
                    '7': "汇聚支付",
                    '8': "汇聚快捷支付",
                    '100': "线下支付"
                },
                shipping_type_list: {
                    '1': "上门服务",
                    '2': "到店服务",
                },
                send_type: {
                    '0': "无需物流",
                    '1': "快递",
                },
                activities: [{
                    content: '支持使用图标',
                    timestamp: '2018-04-12 20:46',
                    size: 'normal',
                    color: '#409eff'
                }, {
                    content: '支持自定义颜色',
                    timestamp: '2018-04-03 20:46',
                }, {
                    content: '支持自定义尺寸',
                    timestamp: '2018-04-03 20:46',
                    size: 'large'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }]
            };
        },
        created() {
            this.id = getQuery('id');
        },
        mounted() {
            this.getDetail();
        },
        methods: {
            load() {
                // this.count += 2
            },
            handleShipping(data) {
                this.handle('shipping', data, true);
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'store/client/order/detail',
                        id: self.id
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        var data = e.data.data;
                        self.orderDetail = data.order;
                        self.orderAction = data.order_action;
                        Object.keys(self.orderDetail.detail).forEach(function (item) {
                            self.goodDetails[self.orderDetail.detail[item].id] = self.orderDetail.detail[item];
                        });

                        self.order_status_list = data.order_status_list;
                        self.marketing_type_map = data.marketing_type_map;
                        self.payment_type_list = data.payment_type_list;
                        // self.shipping_type_list = data.shipping_type_list;
                        self.remark_form.seller_remark = self.orderDetail.seller_remark;
                        if (!isEmpty(data.step_arr)) {
                            self.getStepArr(data.step_arr, data.order);
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getStepArr(stepArr, order) {
                var newStepArr = [];
                var index = 0;
                stepArr.forEach(function (item) {
                    if (typeof(order[item.field]) != "undefined" && order[item.field] >= 0) {
                        let step = {};
                        var field_key = item.field;
                        step['title'] = item.title === '商家发货' ? '服务核销' : item.title;
                        step['created_at'] = order[field_key];
                        step['is_step'] = (order[field_key] == 0 || order[field_key] == null) ? 0 : 1;
                        newStepArr.push(step);
                        if (step['is_step'] == 1) index++;
                    }
                });
                this.stepArrActive = index;
                this.stepArr = newStepArr;
            },
            handle(type, data = null, submit = false) {
                let id = data ? parseInt(data.id) : '';
                let url = 'store/client/order/operate'
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'store/client/order/detail'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    // 删除订单
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        }).catch((err) => {
                        })
                        break;
                    // 取消订单
                    case 'cancel':
                        param = {
                            id: id
                        };
                        this.$confirm('确定关闭订单吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('store/client/order/close', param)
                        }).catch((err) => {
                        })
                        break;
                    // 修改订单价格
                    case 'change_price':
                        if (submit) {
                            this.changePriceLoading = true;
                            this.send('store/client/order/change-price', this.change_price_form, (resp) => {
                                if (resp.code == 0) this.isShowChangePrice = false;
                            });
                            setTimeout(() => {
                                this.changePriceLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangePrice = true
                            var objString = JSON.stringify(data);
                            this.change_price_form = JSON.parse(objString);
                        }
                        break;
                    // 修改收货地址
                    case 'change_address':
                        if (submit) {
                            this.changeAddressLoading = true;
                            this.send('store/client/order/change-address', data, (resp) => {
                                if (resp.code == 0) this.isShowChangeAddress = false;
                            });
                            setTimeout(() => {
                                this.changeAddressLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangeAddress = true
                            var objString = JSON.stringify(data);
                            this.change_address_form = JSON.parse(objString);
                        }
                        break;
                    // 订单备注
                    case 'remark':
                        if (submit) {
                            this.remarkLoading = true;
                            this.remark_form.id = this.id;
                            this.send('store/client/order/remark', this.remark_form, (resp) => {
                                if (resp.code == 0) this.isShowRemark = false;
                            });
                            setTimeout(() => {
                                this.remarkLoading = false;
                            }, 100);
                        } else {
                            this.isShowRemark = true
                        }
                        break;
                    // 物流发货
                    case 'shipping':
                        if (submit) {
                            this.changeShippingLoading = true;
                            this.send('store/client/order/shipping', data, (resp) => {
                                if (resp.code == 0) this.isShowChangeShipping = false;
                            });
                            setTimeout(() => {
                                this.changeShippingLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangeShipping = true
                            var objString = JSON.stringify(data);
                            this.shipping_form = JSON.parse(objString);
                        }
                        break;
                    // 收货
                    case 'take-delivery':
                        param = {
                            id: id
                        };
                        this.$confirm('确定收货吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('store/client/order/take-delivery', param)
                        }).catch((err) => {
                        })
                        break;
                    // 取消发货
                    case 'cancel_shipment':
                        param = {
                            id: id,
                            order_id: data.order_id
                        };
                        this.$confirm('确定取消发货吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('store/client/order/cancel-shipment', param)
                        }).catch((err) => {
                        })
                        break;
                    // 订单完成
                    case 'sales':
                        param = {
                            id: id
                        };
                        this.$confirm('确定完成订单吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('store/client/order/sales-order', param)
                        }).catch((err) => {
                        })
                        break;
                }
            },
            send(url, params, callback) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getDetail();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            format(num){
                return num.toFixed(2);
            },
            getOrderPrice(data){
                let text = '';
                switch (data.marketing_type) {
                    case 'ScoreMall' :
                        text = '￥'+data.goods_price;
                        if (data.score > 0 ) text += '+' + data.score + '积分';
                        break;
                    default :
                        text = '￥'+data.goods_price;
                }
                return text;
            },
        }
    });
</script>