tg_h5/src/components/Pay.vue

<template>

    <van-dialog v-model:show="show" title="标题" show-cancel-button>
        <template #title>
            <div class="my-header">
                <div>充值网络USDT-TRC20</div>
                <div style="font-size: 12px;color: #999;">请选择TRC20网络充值，否则可能造成资产丢失</div>
            </div>
        </template>

        <div class="pay-code">
            <div style="margin:10px 0;">支付金额：<span type="danger" style="font-size: 16px;font-weight: 600;"> ${{
                current_order.pay_usdt_amount }}</span>
            </div>
            <div>
                <img v-if="showImg" :src="data.payCode" class="pay-code-img"></img>
                <span v-if="!showImg" type="warning">订单已过期</span>
            </div>

            <div v-if="showImg" style="margin: 10px 0;">
                <span>订单有效期：</span><span type="primary" style="font-size: 16px;font-weight: 600;"> {{ get_time
                }}</span>
                <div>
                    <span type="danger">超过有效期订单自动取消，请尽快完成支付</span>
                </div>
            </div>

            <div v-if="showImg" @click="copy(data.payHash)">
                <div style="color: #999;font-size: 12px;">钱包地址(点击复制): </div>
                <span style="margin: 0 10px; color: aqua;">{{ data.payHash }} </span>

            </div>


        </div>

        <template #footer>
            <div class="dialog-footer">
                <van-button @click="closeFun" size="small" style="margin-right: 8px;">关闭</van-button>
                <van-button type="primary" size="small" @click="confirmPay" v-if="showImg">
                    支付完成
                </van-button>
            </div>
        </template>
    </van-dialog>
</template>
<script setup>
import { reactive, ref, watch, } from 'vue'
import payCodeImg from '@/assets/pay-code.jpeg';
import useClipboard from 'vue-clipboard3'

import { getUsdtInfo } from '@/axios/request';
import { showSuccessToast, showFailToast } from 'vant';
const props = defineProps({
    showDialog: {
        type: Boolean,
        default: false,
    },
    current_order: {
        type: Object,
        default: {},
    },
});
console.log('props', props)
const show = ref(false);
const emit = defineEmits(["update:showDialog", "handleConfrimPay", 'closePay']);
const data = reactive({
    payCode: payCodeImg,
    payHash: '',
});;
const copy = async (msg) => {
    const { toClipboard } = useClipboard()
    try {
        // 复制
        console.log('复制', msg)
        await toClipboard(msg)
        showSuccessToast('复制成功');
        // 复制成功
    } catch (e) {
        console.log(e)
        // 复制失败
    }
}
watch(() => props.showDialog, (val) => {
    console.log('showDialog', props.showDialog)
    show.value = props.showDialog;
    if (props.showDialog) {

        setTime()
        getInfo()
    }
});

const get_time = ref('')
const showImg = ref(false)
const updateCountdown = (creacteTime, targetTime) => {
    const target = new Date(targetTime).getTime();
    const now = new Date().getTime();
    const diff = target - now;
    if (diff <= 0) {
        clearInterval(timer)
        showImg.value = false
        get_time.value = ''
    }

    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    get_time.value = ` ${minutes}分钟 ${seconds}秒`;
}


// 每秒更新一次
var timer = null
const setTime = () => {
    clearInterval(timer)
    let cureateTime = props.current_order.order_created_at
    let targetTime = props.current_order.expired_at
    if (new Date(cureateTime).getTime() < new Date(targetTime).getTime()) {
        showImg.value = true
        timer = setInterval(() => updateCountdown(cureateTime, targetTime), 1000);
    } else {
        showImg.value = false
        clearInterval(timer)
    }
}
const closeFun = () => {
    data.hash = ''
    emit("update:showDialog", false);
    emit("closePay");
};
const confirmPay = () => {

    emit("handleConfrimPay");
    emit("update:showDialog", false);

};

const getInfo = () => {
    getUsdtInfo().then((res) => {
        data.payHash = res.USDT_ACCOUNT;
    });
}
</script>
<style lang="scss" scoped>
.pay-code {
    text-align: center;

    .pay-code-img {
        width: 200px;
        height: 200px;
        margin: 20px 0;
    }

    .pay-hash {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

span {
    color: #999;
    font-size: 12px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin: 12px;
}
</style>