leromro-mini/pages/order/handle.vue

<!-- 订单详情 -->
<template>
    <view class="order-detail">
        <view class="service-info order-card">
            <PositioningMap />
        </view>
        <view class="user-info order-card">
            <view class="user-box">
                <view class="info-list">
                    <view>被服务人员：{{ detaile.name }}</view>
                    <view @click="onPhone">电话号码：<label class="phone">{{ detaile.telephone }}</label></view>
                    <view>地址：{{ detaile.address }}</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 } 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 { wxMakePhoneCall } from '@/utils/wxRequest.js'
import { computed } from 'vue';

const fileList = ref([]);
const orderId = ref('');
const detaile = ref({});
const verify = ref(null);

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);
        detaile.value = {
            ...res.data,
            address: ad_res.data.address,
            name: ad_res.data.name,
            telephone: ad_res.data.telephone
        };
    } 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) {
        setTimeout(() => {
            verify.value.initialization();
            // 验证成功
            orderStatus.value = true;
        }, 1000)
    }
    if (e.state && orderStatus.value) {
        console.log('完成任务')
        uni.redirectTo({ url: `/pages/order/order?orderId=${orderId.value}` });
    }
}
const onSubmit = () => {
    console.log('submit', fileList.value);

}

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>