leromro-mini/pages_classify/pages/handle/index.vue

<!-- 订单详情 -->
<template>
    <view>
        <view class="order-detail">
            <view class="service-info">
                <PositioningMap :address="detaile.address" />
            </view>
            <view class="user-info order-card">
                <view class="handle-user">
                    <view class="handle-user-left">
                        <img src='/static/serverImg/mine/user.png' alt=""
                            style="width: 96rpx;height: 96rpx;margin-right: 32rpx;">
                        <view class="handle-user-info">
                            <view class="user-name">{{ detaile.name }}</view>
                            <view class="user-id" style="display: flex;">服务类别：<dict-tag :options="lrr_service_category"
                                    :value="detaile.serviceCategory" /></view>
                        </view>
                    </view>
                    <view class="user-phone" @click="onPhone(detaile.telephone)">
                        <up-icon name="phone" color="#fff" size="25"></up-icon>
                    </view>
                </view>

                <view class="handle-adress">
                    <up-icon name="map" color="rgba(156, 163, 175, 1)" size="20"></up-icon>
                    <view class="adress-text">{{ detaile.address }}</view>
                    <up-icon name="pushpin" color="rgba(221, 94, 69, 1)" size="25"></up-icon>
                </view>
                <view class="handle-remark">
                    <view class="remark-title">备注</view>
                    <view class="remark-text">{{ detaile.remark || '暂无备注' }}</view>
                </view>
            </view>
        </view>
        <view class="footer-g">
            <view class="handle-start" v-if="orderStatus && serveTimes">
                服务已开始：<text class="handle-time">{{ dateData }}</text>
            </view>
            <Slide ref="verify" @change='change' :sliderText="slideData" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { getVolunteerOrderInfo, getTimesByDate, } from '@/api/volunteer.js'
import PositioningMap from '@/pages_classify/components/PositioningMap/index.vue'
import Slide from '@/pages_classify/components/Slide/index.vue'
import { useDict } from '@/utils/dict.js';
import DictTag from '@/components/DictTag/index.vue'
import { wxMakePhoneCall } from '@/utils/wxRequest.js'
import { computed } from 'vue';
const orderId = ref('');
const detaile = ref({});
const verify = ref(null);
const {
    lrr_service_category
} = useDict('lrr_service_category');

const orderStatus = ref(false);//false：未开始服务 true:服务已开始，待上传图片
const onPhone = (phone) => {
    if(phone){
        wxMakePhoneCall(phone)
    }
}

const dateData = ref('00:00:00');
let timer = null;

const slideData = computed(() => {
    //服务已开始，待上传图片
    if (orderStatus.value) {
        return { successText: '服务已完成', startText: '拖动滑块结束服务', successColor: '#f64a1f', btnText: '上传照片' }
    }
    return { successText: '服务已开始', startText: '拖动滑块开始服务', successColor: '#72c13f', btnText: '开始' }
})

const getOrderDetail = async () => {
    try {
        uni.showLoading({
            title: '数据加载中...'
        });
        const res = await getVolunteerOrderInfo({ orderId: orderId.value });
        // const ad_res = await getAddress(res.data.addressId);

        let data = res.data.secondOrder;
        detaile.value = { ...res.data.secondOrder, address:res.data.address.address,serveTimes:res.data.secondOrder.updateTime }
        if (data.orderStatus === '3') {

            orderStatus.value = true;
        }
        if (res.data.secondOrder.updateTime) {
            timer = setInterval(() => {
                const timeDiff = Math.abs(new Date() - new Date(res.data.secondOrder.updateTime));
                const units = {
                    day: Math.floor(timeDiff / (1000 * 60 * 60 * 24)),
                    hour: Math.floor(timeDiff / (1000 * 60 * 60)),
                    minute: Math.floor(timeDiff / (1000 * 60)),
                    second: Math.floor(timeDiff / 1000)
                };
                // 默认返回完整格式 
                const hours = units.hour % 24;
                const minutes = units.minute % 60;
                const seconds = units.second % 60;
                dateData.value = `${hours}小时${minutes}分钟${seconds}秒`;
            }, 1000);
        }




    } catch (error) {
        console.log('error', error);
        uni.showToast({
            title: error.msg,
            icon: 'error',
        })
    } finally {
        uni.hideLoading();
    }
}

const change = (e) => {
    if (e.state && !orderStatus.value) {

        getTimesByDate(orderId.value).then(res => {
            if (res.code === 200) {
                uni.showToast({
                    title: '已开始服务',
                    icon: 'success',
                    success: () => {
                        verify.value.initialization();
                        // 验证成功
                        orderStatus.value = true;
                    }
                })

            }
        })

    }
    if (e.state && orderStatus.value) {
        uni.showToast({
            title: '操作成功',
            icon: 'success',
            success: () => {
                setTimeout(() => {
                    uni.redirectTo({ url: `/pages_classify/pages/order/index?orderId=${orderId.value}` });
                }, 800)
            }
        })

    }
}


onLoad((options) => {
    orderId.value = options.orderId;
    getOrderDetail();

})
onUnload(() => {
    clearInterval(timer);
    timer = null;
})
</script>
<style lang="scss" scoped>
.order-detail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 280rpx;
    overflow-y: auto;
    
    .order-card {
        border-radius: 8px;
        background: rgba(255, 255, 255, 1);
        padding: 12px;
        margin-bottom: 12px;
    }

    .font-title {
        margin-bottom: 12px;
    }

    .user-box {
        display: flex;

        .user-img {
            width: 65.8px;
            height: 65.8px;
            margin-right: 12px;
        }

    }

    .register-box {
        display: flex;
        margin-bottom: 12px;

        .register-img {
            width: 90px;
            height: 90px;
            margin-right: 12px;
        }

    }

    .info-list {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 23.27px;
        color: rgba(51, 51, 51, 1);
    }

    .price {
        font-size: 18px;
        font-weight: 500;
        color: rgba(246, 74, 31, 1);

        .price-yuan {
            font-size: 13px;
            font-weight: 700;
            color: rgba(246, 74, 31, 1);
        }
    }



    .upload-img {
        height: 68px;
        width: 68px;
        margin-right: 12px;
        margin-bottom: 12px;
    }

    .upload-box {
        display: flex;
        flex-wrap: wrap;

        .upload-img-item {
            position: relative;

            .delete-icon {
                position: absolute;
                top: -7px;
                right: 7px;
                z-index: 1;
            }
        }
    }

    .phone {
        color: #3c9cff;
    }
}

.handle-user {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .handle-user-left {
        display: flex;
        align-items: center;

        .handle-user-info {
            .user-name {
                font-size: 32rpx;
                font-weight: 400;
                color: rgba(17, 24, 39, 1);
            }

            .user-id {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(107, 114, 128, 1);
            }

        }

    }

    .user-phone {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background: rgba(221, 94, 69, 1);
    }

}

.handle-adress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 38rpx;

    .adress-text {
        flex: 1;
        text-align: left;
        padding-left: 24rpx;
    }

}

.handle-remark {
    margin-top: 30rpx;

    .remark-title {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(17, 24, 39, 1);
        margin-bottom: 20rpx;
    }

    .remark-text {
        border-radius: 16rpx;
        background: rgba(249, 250, 251, 1);
        padding: 32rpx;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
        color: rgba(75, 85, 99, 1);
    }
}

.handle-start {
    margin-bottom: 30rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(75, 85, 99, 1);
    text-align: center;

    .handle-time {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(17, 24, 39, 1);
    }
}

.footer-g {
    padding: 12px;
    position: absolute;
    bottom: 18px;
    left: 0px;
    right: 0px;
    background: rgba(255, 255, 255, 1);

}
</style>