leromro-web/src/views/order/details/index.vue

<template>
    <div class="details-main">
        <div class="details-main-box">
            <div class="details-dr">
                <Map :address="detailsData.address" :latAndLng="{latitude:detailsData.latitude,longitude:detailsData.longitude}"/>
            </div>
            <div class="details-list">
                <div class="details-list-item" v-for="item in detailsData.secondOrderList" :key="item.secondOrderId">
                    <el-image style="width: 100px; height: 100px"
                        :src="item.volunteerPicture" />
                    <div>
                        <div>姓名：{{ detailsData.clientName }}</div>
                        <div>评分：{{ item.userReview }}</div>
                        <div>创建时间：{{ item.createTime }}</div>
                        <div>创建时间：{{ item.createTime }}</div>

                        <div>预计开始时间：{{ item.workDate }} - {{ item.workStartTime }}</div>

                        <div>类别：{{ detailsData.businessTierName }}</div>
                        <div style="display: flex;">订单状态：<dict-tag :options="lrr_service_status" :value="item.orderStatus" /></div>

                    </div>

                </div>
                <el-divider />
            </div>
        </div>
        <div class="details-main-footer">
            <el-descriptions title="订单信息" border>
                <el-descriptions-item label="志愿者姓名">{{ detailsData.volunteerName  }}</el-descriptions-item>
                <el-descriptions-item label="项目类别">{{ detailsData.businessTierName }}</el-descriptions-item>
                <el-descriptions-item label="被服务人员">{{ detailsData.clientName }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ detailsData.clientTelephone }}</el-descriptions-item>
                <el-descriptions-item label="服务项目">{{ detailsData.volunteerName }}</el-descriptions-item>
                <el-descriptions-item label="订单状态"><dict-tag :options="lrr_service_status" :value="detailsData.orderStatus" /> </el-descriptions-item>
                <el-descriptions-item label="电话">{{ detailsData.clientTelephone }}</el-descriptions-item>
                <el-descriptions-item label="住址">{{ detailsData.address }}</el-descriptions-item>
            </el-descriptions>
        </div>

    </div>
</template>

<script setup>
import Map from '@/views/components/Map/index.vue'
import { orderInfo } from "@/api/order/manage.js";
import { onMounted } from 'vue';
const { proxy } = getCurrentInstance();
const { lrr_service_status } = proxy.useDict("lrr_service_status");
const list = [
    {
        lable: ''
    }
]
const route = useRoute()
const detailsData = ref({})
const getDetails = async()=> {
    try {
        
        const res = await orderInfo(route.query.id);
        console.log('res',res);
        detailsData.value = res.data;
    } catch (error) {
        
    }
}
onMounted(getDetails)
</script>

<style lang="scss" scoped>
.details-main {
    height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;

    .details-main-box {
        display: flex;
        flex: 1;

        .details-dr {
            flex: 1;
  
        }

        .details-list {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            width: 300px;

            .details-list-item {
                display: flex;
            }
        }
    }

    .details-main-footer {}
}
</style>