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;">
                <!-- #ifndef APP-NVUE -->
                <up-input placeholder="完工验证码" v-model="code" :focus="downTime == 59">
                    <!-- #endif -->
                    <!-- #ifdef APP-NVUE -->
                    <up-input placeholder="完工验证码" v-model="code" :focus="downTime == 59">
                        <!-- #endif -->
                        <template #suffix>
                            <up-button @tap="getCode" :disabled="downTime != 0" :text="tips" type="success"
                                size="mini">{{
                                    downTime == 0 ? '重新发送验证码' : downTime +
                                        '秒重新获取' }}</up-button>
                        </template>
                        <!-- #ifndef APP-NVUE -->
                    </up-input>
                    <!-- #endif -->
                    <!-- #ifdef APP-NVUE -->
                </up-input>
                <!-- #endif -->
            </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),
    downTime = ref(''),
    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 = '';
                        downTime.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() {
    if (downTime.value == '') {
        getCode().then(res => {
            if (res) showModal.value = true;
        })
    } else {
        showModal.value = true;
    }
}

// 获取完工验证码
function getCode() {
    if (downTime.value != '') return;
    return new Promise((resolve) => {
        $Http.basic({
            id: 20230215173103,
            "content": {
                "sa_workorderid": props.sa_workorderid
            }
        }).then(res => {
            console.log("获取验证码结果", res)
            resolve(res.code == 1);
            downTime.value = 60;
            if (res.code == 1) {
                if (res.data.msg.includes("手机验证码为")) {
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'none'
                    });
                    code.value = res.data.msg.split(":")[1].trim();
                }
                interval = setInterval(() => {
                    downTime.value--;
                    if (downTime.value <= 0) {
                        clearInterval(interval);
                        downTime.value = '';
                    }
                }, 1000);
            } else {
                downTime.value = '';
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                });
            }
        })
    })
}

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