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

<!-- 订单详情 -->
<template>
    <view class="order-detail">
        <view class="service-info order-card">
            <PositioningMap :address="detaile.address" />
        </view>
        <view class="user-info order-card">
            <view class="user-box">
                <view class="info-list">
                    <view>被服务人员：{{ detaile.name }}</view>
                    <view style="display: flex;">服务类别： <dict-tag :options="lrr_service_category"
                            :value="detaile.serviceCategory" /></view>
                    <view @click="onPhone">电话号码：<label class="phone">{{ detaile.telephone }}</label></view>
                    <view>地址：{{ detaile.address }}</view>
                    <view>是否有传染疾病：{{ detaile.isContagion === 1 ? '是' : '否' }}</view>
                    <view v-if="detaile.isContagion === 1">疾病备注：{{ detaile.haveContagion }}</view>
                    <view>备注信息：{{ detaile.remark }}</view>

                </view>
            </view>
        </view>

        <view class=" footer-g">
            <Slide ref="verify" @change='change' :sliderText="slideData" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getVolunteerOrderInfo, getTimesByDate, } from '@/api/volunteer.js'
import { getAddress } from '@/api/address.js'
import PositioningMap from '@/components/PositioningMap/index.vue'
import Slide from '@/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 fileList = ref([]);
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) => {
    wxMakePhoneCall(phone)
}

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;
        if (ad_res.data) {
            data = {
                ...data,
                address: ad_res.data.address,
                name: ad_res.data.name,
                telephone: ad_res.data.telephone,
                isContagion: ad_res.data.isContagion,
                haveContagion: ad_res.data.haveContagion,

            }
        }
        detaile.value = data;
        if (data.orderStatus === 1) {

            orderStatus.value = true;
        }

        console.log('xxxx', detaile.value);

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

const change = (e) => {
    console.log('验证信息：', e)
    console.log('验证是否成功：' + e.state)
    console.log('验证次数：' + e.verification)
    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) => {
    console.log('options', options);
    orderId.value = options.orderId;
    getOrderDetail();

})
</script>
<style lang="scss" scoped>
.order-detail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 12px 24px;
    background: rgba(245, 245, 245, 1);


    .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);
        }
    }

    .footer-g {
        padding: 12px;
        position: absolute;
        bottom: 18px;
        left: 0px;
        right: 0px;
        background: rgba(255, 255, 255, 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;
    }
}
</style>