yfs/components/pay-dialog/pay-dialog.vue

<template>
    <view class="pay-dialog">
        <uni-popup ref="_pay_dialog" type="center" maskBackgroundColor="rgba(0,0,0,0.5)" :is-mask-click="false">
            <view class="dialog-container">
                <view class="dialog-header">
                    <text class="dialog-title">{{ title }}</text>
                </view>
                <view class="dialog-content">
                    <text>{{ content }}</text>
                </view>
                <view class="dialog-footer">
                    <button class="cancel-btn" @click="close">{{ cancelText }}</button>
                    <button class="confirm-btn" v-if="openType == 'contact'" :open-type="openType" @click="confirm"
                        @contact="onContact">{{ confirmText }}</button>
                    <button class="confirm-btn" v-if="openType == 'hand'" @click="confirmHand">{{ confirmText
                        }}</button>
                    <button class="confirm-btn" v-if="openType == ''" @click="confirm">{{ confirmText }}</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    name: 'PayDialog',
    data() {
        return {
            isOpen: false,
            title: '提示',
            content: '',
            confirmText: '确认',
            cancelText: '关闭',
            resolvePromise: null,
            rejectPromise: null,
            openType: "contact",
            lastClickTime: 0  // 添加最后点击时间记录
        }
    },
    methods: {
        onContact(e) {
            console.log(e.detail, 'e');
        },
        show(title, content, confirmText = null, cancelText = null) {
            if (title) this.title = title;
            if (content) this.content = content;
            if (confirmText) this.confirmText = confirmText;
            if (cancelText) this.cancelText = cancelText;
            this.$refs._pay_dialog.open();
            this.isOpen = true;
        },
        close() {
            this.$refs._pay_dialog.close();
            this.isOpen = false;
            this.$emit('cancel');
            if (this.rejectPromise) {
                this.resolvePromise('cancel');
                this.resolvePromise = null;
                this.rejectPromise = null;
            }
        },
        confirm() {
            console.log('confirm');
            if (this.resolvePromise) {
                this.resolvePromise('success');
                this.resolvePromise = null;
                this.rejectPromise = null;
            }
            this.$emit('confirm');
            this.$refs._pay_dialog.close();
            this.isOpen = false;


        },
        // Promise风格的调用方法
        showDialogContact(title, content, confirmText = null, cancelText = null) {
            this.openType = "contact";
            return new Promise((resolve, reject) => {
                this.resolvePromise = resolve;
                this.rejectPromise = reject;
                this.show(title, content, confirmText, cancelText);
            });
        },
        // Promise风格的调用方法
        showDialog(title, content, confirmText = null, cancelText = null) {
            this.openType = "";
            return new Promise((resolve, reject) => {
                this.resolvePromise = resolve;
                this.rejectPromise = reject;
                this.show(title, content, confirmText, cancelText);
            });
        },
        showDialogHand(title, content, confirmText = null, cancelText = null, resolvePromise = null) {
            this.openType = "hand";
            this.resolvePromise = resolvePromise;
            this.show(title, content, confirmText, cancelText);

        },
        confirmHand() {
            const now = Date.now();
            if (now - this.lastClickTime < 1000) {
                return; // 如果距离上次点击小于2秒，直接返回
            }
            this.lastClickTime = now; // 更新最后点击时间

            if (this.resolvePromise) {
                this.resolvePromise('success');
            }
            this.$emit('confirm');
        },
        closeHand() {
            this.$refs._pay_dialog.close();
            this.isOpen = false;
        },
    }
}
</script>

<style lang="scss" scoped>
.pay-dialog {
    .dialog-container {
        width: 80%;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .dialog-header {
        padding: 20px 15px 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        .dialog-title {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            text-align: center;
        }
    }

    .dialog-content {
        padding: 0 30px 20px;
        font-size: 14px;
        color: #666;
        text-align: center;
        line-height: 1.6;
    }

    .dialog-footer {
        display: flex;
        border-top: 1px solid #eee;

        button {
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            border: none;
        }

        .cancel-btn {
            background-color: #fff;
            color: #333;
            border-right: 1px solid #eee;
        }

        .confirm-btn {
            background-color: #fff;
            color: #3a86ff;
            font-weight: bold;
        }
    }
}
</style>