MD_worker/pages/workOrder/modules/vCode.vue

<template>
    <up-modal :show="showModal" title="完工验证" @cancel="showModal = false" @confirm="completion" ref="uModal"
        confirmText="确认完工" showCancelButton :asyncClose="true">
        <view class="slot-content">
            <view style="padding: 20rpx 0 20rpx 0;">
                <up-code-input v-model="code" :maxlength="6" />
                <view style="padding-top: 40rpx;">
                    <up-button type="primary" :text="countdownTime == 60 ? '发送完工验证码' : countdownTime + 'S后可重新发送'"
                        @click="handle" />
                </view>
            </view>
        </view>
    </up-modal>
</template>

<script setup>
import { getCurrentInstance, ref, defineProps, defineEmits } from 'vue';
const emit = defineEmits(['callBack'])

const { $Http } = getCurrentInstance().proxy;
const props = defineProps({
    sa_workorderid: {
        type: [Number, String],
    },
    callBack: {
        type: Function
    }
});

let code = ref(''),
    showModal = ref(false),
    interval = null,
    uModal = ref(null);

function completion(e) {
    if (code.value.trim() == '') {
        uModal.value.loading = false;
        return uni.showToast({
            title: '请输入客户确认码',
            icon: 'none'
        });
    }
    $Http.basic({
        "id": "20230215173203",
        "content": {
            "sa_workorderid": props.sa_workorderid,
            "code": code.value
        }
    }).then(res1 => {
        console.log("校验验证码", res1)
        if (res1.code == 1) {
            $Http.basic({
                "id": "20230209144903",
                "content": { "sa_workorderid": props.sa_workorderid }
            }).then(res => {
                console.log("完结工单", res)
                if (res.code == 1) {
                    uni.showToast({
                        title: '工单成功完结',
                        icon: 'none'
                    });
                    setTimeout(() => {
                        showModal.value = false;
                        code.value = '';
                        clearInterval(interval);
                    }, 300)
                    emit('callBack', true)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    uModal.value.loading = false;
                }
            })
        } else {
            uni.showToast({
                title: res1.msg,
                icon: 'none'
            });
            uModal.value.loading = false;
        }
    })
}

function openModal() {
    showModal.value = true;
}
// 增加倒计时
let countdown = null,
    countdownTime = ref(60);

function handle() {
    if (countdownTime.value < 60) return;
    countdownTime.value--;
    getCode().then(() => {
        countdown = setInterval(() => {
            if (countdownTime.value > 0) {
                countdownTime.value--;
            } else {
                clearInterval(countdown);
                countdownTime.value = 60;
            }
        }, 1000);
    });
}


// 获取客户确认码
function getCode() {
    return new Promise((resolve) => {
        $Http.basic({
            id: 20230215173103,
            "content": {
                "sa_workorderid": props.sa_workorderid
            }
        }).then(res => {
            console.log("获取验证码结果", res)
            uni.showToast({
                title: res.code == 1 ? '已发送到现场联系人' : res.msg,
                icon: 'none'
            });
            if (res.code != 1) countdownTime.value = 60;
            resolve(res.code == 1);
            try {
                if (res.code == 1 && res.data.msg.includes("手机验证码为")) {
                    uni.showToast({
                        title: '客户确认码已发送至客户手机',
                        icon: 'none'
                    });
                    code.value = res.data.msg.split(":")[1].trim();
                }
            } catch (error) {

            }
        })
    })
}

// 将内部方法暴露给模板使用
defineExpose({
    openModal
});
</script>