digital-medicine-front/src/views/cdt/models/orderInfo.vue

<template>
    <div v-if="info" class="flex1 ov-hd d-flex flex-cln pd-16">
        <div class="info-title f-w-5 mb-15">订单信息</div>
        <vxe-table ref="vxeTableRef" border :data="info?.testOrderDetailList" :merge-cells="mergeCells">
            <vxe-column title="订单号" fixed="left" width="120">
                <template #default>{{ info?.orderNo }}</template>
            </vxe-column>
            <vxe-column title="企业名称" min-width="100">
                <template #default>
                    <div>{{ info?.cpyName }}</div>
                    <div class="c-999 f-s-12">{{ info?.creditCode }}</div>
                </template>
            </vxe-column>
            <vxe-column title="会员级别" width="100">
                <template #default>
                    {{ info?.vipLevelName }}
                </template>
            </vxe-column>
            <vxe-column title="套餐详情" min-width="100">
                <template #default="{ row }">
                    {{ row?.packageName }}
                </template>
            </vxe-column>
            <vxe-column title="购买数量" width="90">
                <template #default="{ row }">
                    {{ row?.quantity }}
                </template>
            </vxe-column>
            <vxe-column title="实收款" width="100">
                <template #default="{ row }">{{ row?.amount }}元</template>
            </vxe-column>
            <vxe-column title="支付方式" width="100">
                <template #default="{ row }">{{ row?.payType === '2' ? '微信支付' : '对公转账' }}</template>
            </vxe-column>
            <vxe-column title="下单人" min-width="100">
                <template #default>
                    <div>{{ info?.createName }}</div>
                </template>
            </vxe-column>
            <vxe-column title="下单时间" min-width="100">
                <template #default>
                    <div>{{ info?.createTime }}</div>
                </template>
            </vxe-column>
            <vxe-column title="订单状态" width="100">
                <template #default>
                    <div>{{ selectDictLabel(test_order_status_bg, info?.status) }}</div>
                </template>
            </vxe-column>
        </vxe-table>
        <div class="pd-8"></div>
        <div class="d-flex flex1 ov-hd">
            <div class="left-step-box over-auto" style="width: 230px">
                <div class="steps-box">
                    <template v-for="(item, index) in test_order_process" :key="index">
                        <div class="steps-item d-flex" :class="{ 'checked': mapStatus(item.value)?.checked, 'active': mapStatus(item.value)?.active }">
                            <div class="pr-16 steps-icon-box p-rtv">
                                <div class="steps-line"></div>
                                <div v-if="mapStatus(item.value)?.active" class="steps-ball-active">
                                    <el-icon><MoreFilled /></el-icon>
                                </div>
                                <el-icon v-else class="steps-icon"><CircleCheckFilled /></el-icon>
                            </div>
                            <div class="steps-content d-flex flex-cln flex1 ov-hd">
                                <view class="f-s-16 mb-5">{{ mapStatus(item.value)?.operationDescription || item.label }}</view>
                                <view class="steps-desc">{{ mapStatus(item.value)?.operationTime }}</view>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="flex1 over-auto">
                <div class="pd-16 ov-hd" style="box-sizing: border-box;">
                    <template v-if="+info.status >= 6 && info?.status !== '90'">
                        <el-descriptions title="发票信息" :column="3">
                            <el-descriptions-item label="上传人：">{{ info?.invoiceLog?.operator }}</el-descriptions-item>
                            <el-descriptions-item label="上传时间：">{{ info?.invoiceLog?.operationTime }}</el-descriptions-item>
                            <el-descriptions-item v-if="info?.invoice" label="发票：">
                                <FileLook v-model="info.invoice" isObject></FileLook>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-divider />
                    </template>
                    <template v-if="+info.status >= 5 && info?.status !== '90'">
                        <el-descriptions title="检测报告" :column="4">
                            <el-descriptions-item label="上传人：">{{ info?.reportLog?.operator}}</el-descriptions-item>
                            <el-descriptions-item label="上传时间：">{{ info?.reportLog?.operationTime }}</el-descriptions-item>
                            <el-descriptions-item label="检测单位：">{{ info?.testOrg }}</el-descriptions-item>
                            <el-descriptions-item v-if="info?.report" class-name="zy-desc" label="检测报告：">
                                <FileLook v-model="info.report" isObject></FileLook>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-divider />
                    </template>
                    <template v-if="+info.status >= 2 && info?.status !== '90' && info?.postInfo?.length">
                        <div class="f-s-16 c-333 f-w-6 mb-16">物流信息</div>
                        <div class="d-flex a-c mb-10">
                            <img class="mr-10" style="width: 30px; height: 30px;" src="@/assets/images/sf_icon.png" />
                            <div>
                                <span class="f-s-14 mr-16">顺丰快递</span>
                                <span class="c-999 f-s-12">{{ info?.postInfo[0]?.mailno }}</span>
                            </div>
                        </div>
                        <el-steps direction="vertical" :active="1">
                            <template v-for="(item, index) in info?.postInfo" :key="index">
                                <el-step>
                                    <template #icon>
                                        <el-button v-if="item.opCode === '80'" type="primary" circle size="small">收</el-button>
                                        <div class="dot" :class="{ ['active' + index]: true }"></div>
                                    </template>
                                    <template #title>
                                        <span>{{ selectDictLabel(sf_router_code, item?.opCode) }}</span>
                                        <span>{{ item?.acceptTime }}</span>
                                    </template>
                                    <template #description>
                                        <div class="pt-10 pb-10">
                                            <span class="f-s-14 c-666">[{{ item.acceptAddress }}]</span>
                                            <span class="f-s-14 c-666">{{ item?.remark }}</span>
                                        </div>
                                    </template>
                                </el-step>
                            </template>
                        </el-steps>
                        <el-divider />
                    </template>
                    <template v-if="+info.status >= 2  && +info?.originStatus >= 2 && info?.sendAddress">
                        <div class="f-s-16 c-333 f-w-6 mb-16">寄样信息</div>
                        <div class="d-flex a-c">
                            <div class="card-blcok pd-16 d-flex flex1">
                                <div class="mr-16">
                                    <el-button type="danger" circle>取</el-button>
                                </div>
                                <div class="flex1 ov-hd">
                                    <div class="f-s-14 c-333 f-w-5 mb-5">{{ info?.sendAddress?.province + info?.sendAddress?.city + info?.sendAddress?.district + info?.sendAddress?.address }}</div>
                                    <div class="f-s-14 c-999">
                                        <span class="mr-30">{{ info?.sendAddress?.contactName }}</span>
                                        <span>{{ info?.sendAddress?.contactPhone }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="c-primary f-w-6 pd-20" style="font-size: 30px;">
                                <el-icon><Right /></el-icon>
                            </div>
                            <div class="card-blcok pd-16 d-flex flex1">
                                <div class="mr-16">
                                    <el-button type="primary" circle>收</el-button>
                                </div>
                                <div class="flex1 ov-hd">
                                    <div class="f-s-14 c-333 f-w-5 mb-5">{{ info?.orgAddress?.province + info?.orgAddress?.city + info?.orgAddress?.district + info?.orgAddress?.address }}</div>
                                    <div class="f-s-14 c-999">
                                        <span class="mr-30">{{ info?.orgAddress?.contactName }}</span>
                                        <span>{{ info?.orgAddress?.contactPhone }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pd-8"></div>
                        <el-descriptions :column="4">
                            <el-descriptions-item label="取件时间：">{{ info?.reservationTime}}</el-descriptions-item>
                        </el-descriptions>
                        <el-divider />
                    </template>

                    <el-descriptions title="订单信息" :column="4">
                        <el-descriptions-item label="订单号：">{{ info?.orderNo }}</el-descriptions-item>
                        <el-descriptions-item label="下单人：">{{ info?.createName }}</el-descriptions-item>
                        <el-descriptions-item label="下单时间：">{{ info?.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="收货地址：">{{ info?.reciveAddress?.province + info?.reciveAddress?.city + info?.reciveAddress?.district + info?.reciveAddress?.address }}</el-descriptions-item>
                        <el-descriptions-item label="收件人：">{{ info?.reciveAddress?.contactName  }}</el-descriptions-item>
                        <el-descriptions-item label="联系电话：">{{ info?.reciveAddress?.contactPhone  }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions v-if="+info?.hasInvoice" title="发票信息" :column="4">
                        <el-descriptions-item label="发票抬头：">{{ info?.invoiceInfo?.headTitle  }}</el-descriptions-item>
                        <el-descriptions-item label="税号：">{{ info?.invoiceInfo?.taxSn  }}</el-descriptions-item>
                        <el-descriptions-item label="收票邮箱：">{{ info?.invoiceInfo?.email || '-'  }}</el-descriptions-item>
                        <el-descriptions-item label="单位地址：">{{ info?.invoiceInfo?.address || '-'  }}</el-descriptions-item>
                        <el-descriptions-item label="电话号码：">{{ info?.invoiceInfo?.contactPhone || '-'  }}</el-descriptions-item>
                        <el-descriptions-item label="开户银行：">{{ info?.invoiceInfo?.bankName || '-'  }}</el-descriptions-item>
                        <el-descriptions-item label="银行账户：">{{ info?.invoiceInfo?.bankAccount || '-'  }}</el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import { VxeTablePropTypes } from 'vxe-table';
import { colNoData } from '@/utils/noData';
import { FileLook } from '@/views/models';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { test_order_status_bg, sf_router_code, test_order_process } = toRefs<any>(proxy?.useDict('test_order_status_bg', 'sf_router_code', 'test_order_process'));
const vxeTableRef = ref<any>(null);
const list = ref<any[]>([]);
const props = defineProps({
    info: propTypes.any.def(null)
});
const mapStatus = (value) => {
   const logoIndex = props?.info?.logList.findIndex(({ operationType }) => operationType === value)
   if (logoIndex !== -1) {
       return {
         ...props?.info?.logList[logoIndex],
         checked:  logoIndex < props?.info?.logList.length - 1,
         active: logoIndex === props?.info?.logList.length - 1
       }
   } else {
       return {
        checked: false,
        active: false
       }
   }
//    return
}
// 合并表格
const mergeCells = ref<VxeTablePropTypes.MergeCells>([
    { row: 0, col: 0, rowspan: 3, colspan: 0 },
    { row: 0, col: 1, rowspan: 3, colspan: 0 },
    { row: 0, col: 2, rowspan: 3, colspan: 0 },
    { row: 0, col: 6, rowspan: 3, colspan: 0 },
    { row: 0, col: 7, rowspan: 3, colspan: 0 },
    { row: 0, col: 8, rowspan: 3, colspan: 0 }
]);
const steps = ref([
    { label: '付款信息', name: '待寄样', value: '1' },
    { label: '寄样信息', name: '待寄样', value: '2' },
    { label: '物流信息', name: '已在途', value: '3' },
    { label: '检测报告', name: '待开票', value: '4' },
    { label: '发票信息', name: '已完成', value: '5' }
]);
</script>
<style lang="scss" scoped>
.card-blcok {
    border: 1px solid #f2f2f2;
    border-radius: 4px;
}
.dot {
    width: 20px;
    height: 20px;
    background-color: #d7d7d7;
    border-radius: 50%;

    &.active0 {
        background-color: #2A6D52;
    }
    &.active1 {
        background-color: #333;
    }
}
.zy-desc {
    display: inline-block;
}
.left-step-box {
    box-sizing: border-box;
    padding: 16px;
    border-right: 1px solid #d7d7d7;
}

.steps-box {
    .steps-item {
        cursor: pointer;

        &:last-child {
            .steps-line {
                border-color: transparent;
            }
        }

        &.checked {
            .steps-icon {
                color: var(--el-color-primary);
            }

            .steps-content {
                color: #000;
            }
        }
        &.active {
            .steps-icon {
                color: var(--el-color-primary);
            }

            .steps-content {
                color: #000;
            }
        }
    }
    .steps-content {
        color: #ebebeb;
    }
    .steps-desc {
        margin-bottom: 20px;
        color: #bbb;
        font-size: 14px;
    }
    .steps-icon {
        font-size: 22px;
        color:  #cbcbcb;
    }

    .steps-line {
        position: absolute;
        top: 22px;
        left: 10px;
        bottom: 0;
        width: 1px;
        border: 1px dashed #f4f4f4;
    }
    .steps-ball-active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 14px;
        color: #fff;
        background-color:  #edb72f;
    }
}
</style>