MD_worker/pages/workOrder/detail.vue

<template>
    <view style="background-color: #fff;padding: 20rpx 0;">
        <up-steps :current="current" dot activeColor="#0279FE">
            <up-steps-item v-for="item in steps" :key="item.title" :title="item.title" />
        </up-steps>
    </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.reason || '--' }}</view>
        </view>
        <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.createdate || '--' }}</view>
        </view>
        <view class="row">
            <view class="label">服务需求</view>
            <view class="value">{{ detail.remarks || '--' }}</view>
        </view>
        <up-divider />
        <view class="row" v-if="detail.enterprisename">
            <view class="label justify">销售商</view>
            <view class="value">{{ detail.enterprisename || '--' }}</view>
        </view>
        <view class="row" v-if="detail.itemsText.length">
            <view class="label">产品信息</view>
            <view class="value">
                <view class="col-center" v-for="(item, index) in detail.itemsText" :key="index">
                    <view class="value"><text v-if="detail.itemsText.length != 1">{{ index + 1 }}. </text>{{ item }}
                    </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.customername || detail.customerphonenumber" style="align-items: center;">
            <view class="label justify">客户信息</view>
            <view class="value phonenumber">{{ detail.customername || '' }}
                <block v-if="detail.customerphonenumber">
                    <text style="margin: 0 20rpx 0 10rpx;">
                        {{ detail.customerphonenumber }}
                    </text>
                    <My-button :customStyle="{
                        width: '142rpx',
                        height: '48rpx',
                        'background-color': '#FFFFFF',
                        'color': '#3874F6',
                        borderRadius: '10rpx'
                    }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.customerphonenumber" />
                </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" style="margin-top: 20rpx;">
                    {{ item.begdate || '' }} - {{ item.enddate || '' }}
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view v-if="detail.status == '待接单'" class="but-box">
            <view class="but-box-item" v-if="detail.customerphonenumber">
                <My-button :customStyle="{
                    'background-color': '#FFFFFF',
                    'color': '#3874F6',
                }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.customerphonenumber" />
            </view>
            <view class="but-box-item" @click="takeOrderShow = true">
                <My-button frontIcon="icon-dianhua" text="接单" />
                <up-modal negativeTop="100" :show="takeOrderShow" title="是否确认接单？" showCancelButton @confirm="takeOrders"
                    @cancel="takeOrderShow = false" ref="uModal" :asyncClose="true"></up-modal>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view v-else-if="detail.status == '待开始'" class="but-box">
            <view class="but-box-item" @click="toChangeMsg">
                <My-button :customStyle="{
                    'background-color': '#FFFFFF',
                    'color': '#3874F6',
                }" text="信息修改" />
            </view>
            <view class="but-box-item" @click="confirmStartShow = true">
                <My-button text="确认开始" />
                <up-modal negativeTop="100" :show="confirmStartShow" showCancelButton @confirm="confirmStart"
                    @cancel="confirmStartShow = false" ref="uModal" :asyncClose="true">
                    <view class="slot-content">
                        <view>
                            请仔细核对服务信息和客户信息
                        </view>
                        <view style="margin-top: 20rpx;">
                            开始工单后确认信息将不可修改！
                        </view>
                    </view>
                </up-modal>
            </view>
        </view>
    </view>
</template>

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

const current = ref(-1);
const steps = reactive([
    { title: '接单', value: '待接单' },
    { title: '开始', value: '待开始' },
    { title: '进行中', value: '进行中' },
    { title: '提交', value: '提交' },
    { title: '完工', value: '已完成' }
]);
let sa_workorderid = 0;
onLoad((options) => {
    sa_workorderid = options.id;
});

onShow(() => {
    getDetail()
})

let detail = reactive({
    itemsText: []
});

function getDetail() {
    $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' });
        res.data.itemsText = res.data.titems.map(item => {
            return `${item.itemname} ${item.model}`;
        })
        detail = reactive(res.data);
        current.value = steps.findIndex(item => item.value === res.data.status);
    })
}


// 接单
const takeOrderShow = ref(false);

function takeOrders() {
    $Http.basic({
        id: 20230210101103,
        "content": {
            "sa_workorderid": detail.sa_workorderid
        }
    }).then(res => {
        console.log("接单结果", res)
        if (res.code == 1) {
            takeOrderShow.value = false;
            getDetail();
            uni.showToast({
                title: '接单成功',
                icon: 'none'
            });
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

// 修改信息
function toChangeMsg() {
    uni.navigateTo({
        url: `/pages/workOrder/changeMsg?id=` + sa_workorderid
    });
};

// 确认开始
const confirmStartShow = ref(false);

function confirmStart() {
    $Http.basic({
        id: 20230209144503,
        "content": {
            "sa_workorderid": detail.sa_workorderid
        }
    }).then(res => {
        console.log("确认开始", res)
        if (res.code == 1) {
            confirmStartShow.value = false;
            getDetail();
            uni.showToast({
                title: '确认开始成功',
                icon: 'none'
            });
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

</script>

<style lang="scss" scoped>
.main {
    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;

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

        .label {
            position: relative;
            width: 108rpx;
            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>