md-h5/pages/serviceSeeking/detail.vue

<template>
    <My-shade />
    <view>
        <view class="step" :style="{
            width: steps.length < 5 ? '230rpx' : '690rpx',
        }">
            <view class="step-item" :class="item.title == 1 ? 'arrows' : ''" v-for="item in steps" :key="item.title">
                <block v-if="item.title != '1'">
                    <view class="circle" :style="{ borderColor: item.bgColor }">
                        <view class="icon" :style="{ background: item.bgColor }">
                            <view class="iconfont" :class="item.iconfont" />
                            <view v-if="['已完结', '无需服务'].includes(item.title)" class="ywj" />
                        </view>
                    </view>
                    <view class="title">
                        {{ item.title }}
                    </view>
                </block>
                <view class="item" v-else>
                    <view class="line" />
                    <view class="iconfont icon-a-wodetiaozhuan" />
                </view>
            </view>
        </view>
        <view class="main">
            <view class="billno" style="margin-bottom: -24rpx;">
                预约单号：{{ detail.billno }}
            </view>
            <view class="row">
                <view class="label col-center">预约类型</view>
                <view class="servicetype"
                    :style="{ 'background': { '安装': '#70B603', '维修': '#D9001B', '清洁': '#3874F6', '清洗': '#3874F6' }[detail.servicetype] || '#999999' }">
                    {{ detail.servicetype || '--' }}</view>
            </view>
            <view class="row">
                <view class="label">产品品类</view>
                <view class="value">{{ detail.class1 || '--' }}</view>
            </view>
            <view class="row" v-if="detail.servicetype == '维修'">
                <view class="label">故障类型</view>
                <view class="value">{{ detail.class2 || '--' }}</view>
            </view>
            <up-transition :show="transition">
                <view class="row">
                    <view class="label">服务地址</view>
                    <view class="value">{{ detail.province + detail.city + detail.county + detail.address || '--' }}
                    </view>
                </view>
                <view class="row" style="align-items: center;">
                    <view class="label justify">联系人</view>
                    <view class="value phonenumber">{{ detail.scenecontact || '--' }}
                        <block v-if="detail.scenecontactphonenumber">
                            <text style="margin: 0 20rpx 0 10rpx;">
                                {{ detail.scenecontactphonenumber }}
                            </text>
                            <My-button :customStyle="{
                                width: '142rpx',
                                height: '48rpx',
                                'background-color': '#FFFFFF',
                                'color': '#3874F6',
                                borderRadius: '10rpx'
                            }" :frontIconStyle="{
                                marginRight: '6rpx',
                            }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.scenecontactphonenumber" />
                        </block>
                    </view>
                </view>
                <view class="row">
                    <view class="label">服务需求</view>
                    <view class="value">{{ detail.remarks || '--' }}</view>
                </view>
                <view class="transition">
                    <up-divider />
                    <view class="row" v-if="detail.enterprisename">
                        <view class="label justify">销售商</view>
                        <view class="value">{{ detail.enterprisename || '--' }}</view>
                    </view>
                    <view class="row">
                        <view class="label">产品信息</view>
                        <view class="value">
                            <view class="col-center" style="display: block;">
                                <view class="value">{{ detail.itemname }}</view>
                                <view class="value" style="margin-top: 8px;">{{ detail.model }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="row" v-if="detail.sku">
                        <view class="label justify">序列号</view>
                        <view class="value">{{ detail.sku || '--' }}</view>
                    </view>
                    <view class="row" v-if="detail.name || detail.phonenumber" style="align-items: center;">
                        <view class="label justify">客户信息</view>
                        <view class="value phonenumber">{{ detail.name || '' }}
                            <block v-if="detail.phonenumber">
                                <text style="margin: 0 20rpx 0 10rpx;">
                                    {{ detail.phonenumber }}
                                </text>
                                <My-button :customStyle="{
                                    width: '142rpx',
                                    height: '48rpx',
                                    'background-color': '#FFFFFF',
                                    'color': '#3874F6',
                                    borderRadius: '10rpx'
                                }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.phonenumber" />
                            </block>
                        </view>
                    </view>
                    <view class="row" v-if="detail.servicetype !== '安装' && detail.cardno">
                        <view class="label">保修信息</view>
                        <view class="value">
                            <text :style="{ color: detail.inqualityguaranteeperiod ? '#70B603' : '#D9001B' }"
                                style="margin-right: 0rpx;">
                                {{ detail.inqualityguaranteeperiod ? '在保' : '已过保' }}
                            </text>
                            {{ detail.cardno || '' }}
                            <view v-if="detail.cardno && detail.cardbegdate" style="margin-top: 20rpx;">
                                {{ detail.cardbegdate || '' }} - {{ detail.cardenddate || '' }}
                            </view>
                        </view>
                    </view>
                </view>
            </up-transition>
            <block v-if="detail.serviceenterprisename">
                <up-divider />
                <view class="row">
                    <view class="label">服务地址</view>
                    <view class="value">{{ detail.serviceenterprisename || '--' }}
                    </view>
                </view>
                <view class="row" style="align-items: center;">
                    <view class="label justify">联系人</view>
                    <view class="value phonenumber">
                        <block v-if="detail.scenecontactphonenumber">
                            <text style="margin: 0 20rpx 0 10rpx;">
                                {{ detail.servicephonenumber }}
                            </text>
                            <My-button :customStyle="{
                                width: '142rpx',
                                height: '48rpx',
                                'background-color': '#FFFFFF',
                                'color': '#3874F6',
                                borderRadius: '10rpx'
                            }" :frontIconStyle="{
                                marginRight: '6rpx',
                            }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.servicephonenumber" />
                        </block>
                    </view>
                </view>
            </block>
            <view class="row" v-if="detail.refusereason">
                <view class="label">受理说明</view>
                <view class="value">{{ detail.refusereason || '--' }}
                </view>
            </view>
            <view style="height: 40rpx;" />
            <view class="changeTransition" hover-class="navigator-hover" @click="transition = !transition">
                详细信息
                <view class="iconfont icon-dianjizhankai" :class="transition ? 'shrink' : ''" />
            </view>
        </view>
    </view>

    <up-transition :show="detail.nodes.length != 0">
        <view class="main" style="padding: 30rpx;">
            <nodes ref="Nodes" :nodes="detail.nodes" />
        </view>
    </up-transition>

    <view style="height: 50px;" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import nodes from './modules/nodes.vue';

const transition = ref(true);
const Nodes = ref(null);

const steps = ref([]);

let sa_serviceorderid = 0;
onLoad((options) => {
    sa_serviceorderid = options.id;
    getDetail()
});

const time = ref(new Date().getTime());

let detail = reactive({
    servicetype: "",
    nodes: [],
});

function getDetail() {
    $Http.basic({ "id": "20230206091603", "content": { "nocache": true, sa_serviceorderid } }).then(res => {
        console.log("服务申请单详情", res)
        if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
        time.value = new Date().getTime()
        res.data.nodes = [];
        const now = new Date();
        now.setHours(0, 0, 0, 0); // Ignore time part for comparison
        res.data.inqualityguaranteeperiod = res.data.cardbegdate && res.data.cardenddate
            ? (new Date(res.data.cardbegdate) <= now && now <= new Date(res.data.cardenddate) ? 1 : 0)
            : 0;
        Object.assign(detail, res.data);
        if (res.data.status == '拒绝受理') {
            steps.value = [{ title: '已申请', value: '待分配', iconfont: 'icon-yishouli', bgColor: "#3874F6" },
            { title: '1' },
            { title: '无需服务', value: '拒绝受理', iconfont: 'icon-yiwancheng', bgColor: "#3874F6" }]
        } else {
            steps.value = [{ title: '已申请', value: '待分配', iconfont: 'icon-yishouli' },
            { title: '1' },
            { title: '已分配', value: '待受理', iconfont: 'icon-yipaigong' },
            { title: '1' },
            { title: '已受理', value: '待服务', iconfont: 'icon-yiyuyue' },
            { title: '1' },
            { title: '服务中', value: '服务中', iconfont: 'icon-yidadao' },
            { title: '1' },
            { title: '已完结', value: '已完结', iconfont: 'icon-yiwancheng' }]
            let status = res.data.status;
            if (status === '新建') status = '待分配'
            let index = steps.value.findIndex(item => item.value === status);
            steps.value = steps.value.map((v, i) => {
                if (i == index) {
                    v.bgColor = "#3874F6"
                } else {
                    v.bgColor = i < index ? "#96B4FA" : "#999999"
                }
                return v
            })

            $Http.basic({ "id": 20230207154203, "content": { "sa_serviceorderid": sa_serviceorderid, pageSize: 1 } }).then(res => {
                console.log("服务申请单工单列表", res)
                if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
                if (res.data.length) getWorkorderDetail(res.data[0].sa_workorderid)
            })
        }
    })
}

function getWorkorderDetail(sa_workorderid) {
    $Http.basic({ "id": "20230208140103", "content": { "nocache": true, sa_workorderid } }).then(res => {
        console.log("工单详情", res)
        if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
        time.value = new Date().getTime()
        Object.assign(detail, res.data);
    })
}


defineExpose({ detail })

</script>

<style lang="scss" scoped>
.step {
    display: flex;
    width: 690rpx;
    margin: 13px 30rpx 20px 30rpx;
    box-sizing: border-box;

    &-item {
        position: relative;
        height: 78px;

        .circle {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid;

            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                color: #FFFFFF;
            }

            .ywj {
                position: absolute;
                width: 20px;
                height: 20px;
                border: 1px solid #F7F7FF;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .title {
            position: absolute;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            bottom: 0;
            white-space: nowrap;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .arrows {
        flex: 1;

        .item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            color: #3874F6;

            .line {
                width: 70%;
                height: 2px;
                background: #3874F6;
                margin: 0 10rpx;
            }

            .iconfont {
                position: relative;
                left: -14rpx;
                font-size: 24rpx;
                font-weight: bold;
                color: #3874F6;
            }

        }
    }
}

.main {
    position: relative;
    width: 690rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 40rpx;
    margin: 40rpx auto 0;
    overflow: hidden;

    .changeTransition {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #3874F6;
        font-size: 28rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60rpx;
        background: #EDF4FF;

        .icon-dianjizhankai {
            font-size: 20rpx;
            margin-left: 16rpx;
            transform: rotate(-90deg);
            transition: transform 0.3s ease;
        }

        .shrink {
            transform: rotate(90deg);
        }
    }

    .row {
        display: flex;
        font-size: 28rpx;
        font-family: Microsoft YaHei, Microsoft YaHei;
        line-height: 32rpx;
        margin-top: 20rpx;

        .label {
            position: relative;
            width: 115rpx;
            color: #999999;
            box-sizing: border-box;
            flex-shrink: 0;
            margin-right: 30rpx;
        }

        .label::after {
            position: absolute;
            top: 0;
            right: -12rpx;
            content: ':';
        }

        .value {
            color: #333333;
        }

        .phonenumber {
            width: 100%;
            display: flex;
            align-items: center;
        }

        .servicetype {
            border-radius: 8rpx;
            padding: 8rpx 16rpx;
            font-weight: bold;
            color: #fff;
        }
    }

    .col-center {
        display: flex;
        align-items: center;
    }

    .col-center::after {
        top: 50% !important;
        transform: translateY(-50%);
    }

    .justify {
        text-align: justify;
        text-align-last: justify;
    }

    .billno {
        position: relative;
        width: 400rpx;
        top: -40rpx;
        left: -40rpx;
        background: #3874F6;
        border-radius: 0 0rpx 24rpx 0rpx;
        padding: 10rpx 52rpx 10rpx 20rpx;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-size: 26rpx;
        color: #FFFFFF;
    }
}

.but-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 40rpx;

    .but-box-item {
        width: 45%;
    }
}
</style>