[码支付]-支付页自定义提示设置

1. 点击:通道管理-支付设置,支付模版设置为:默认模板

图片[1]-[码支付]-支付页自定义提示设置-易知付

2. 下拉找到:自定义收银提醒内容框,把自定义提醒代码粘贴入框内,点击右下角:保存设置

图片[2]-[码支付]-支付页自定义提示设置-易知付

 

代码样式①:

图片[3]-[码支付]-支付页自定义提示设置-易知付

<div style="text-align:center; padding:15px 20px; background:#fff3cd; border:2px solid #ffc107; border-radius:8px; margin:10px 0;">
    <p style="font:500 18px/1.8 sans-serif; margin:0; color:#333;">
        金额:<span id="amountText" style="font:900 22px sans-serif; color:#d9534f; background:#ffebee; padding:2px 8px; border-radius:4px;">{{trade_amount}}</span>
        <button onclick="copyAmount()" style="margin-left:8px; padding:2px 10px; font:600 14px sans-serif; color:#fff; background:#2196f3; border:none; border-radius:4px; cursor:pointer; vertical-align:middle; transition:background .2s;">一键复制</button>
        <br>请截图保存二维码后,打开<span style="font:900 22px sans-serif; color:#2196f3; background:#e3f2fd; padding:2px 8px; border-radius:4px;">{{pay_type}}</span>扫码支付<br>
        不要多付或少付,付款成功不回调,联系客服QQ:<span style="text-decoration:underline;">992428466</span>
    </p>
    <div id="copyTip" style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:10px 20px; background:rgba(0,0,0,0.8); color:#fff; border-radius:4px; font-size:16px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:9999;">复制成功!</div>
</div>

<script>
const copyAmount = () => {
    const amount = document.getElementById('amountText').textContent.trim();
    // 显示提示的快捷函数
    const showTip = () => {
        const tip = document.getElementById('copyTip');
        tip.style.opacity = 1;
        setTimeout(() => tip.style.opacity = 0, 2000);
    };

    navigator.clipboard.writeText(amount).then(showTip).catch(err => {
        const ta = document.createElement('textarea');
        ta.value = amount;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        showTip();
        console.error('复制失败:', err);
    });
};
</script>

 

代码样式②:

图片[4]-[码支付]-支付页自定义提示设置-易知付

<div style="text-align:center; padding:20px; background:#e8f4f8; border:1px solid #4299e1; border-radius:12px; margin:10px 0; box-shadow:0 2px 4px rgba(0,0,0,0.05);">
    <p style="font:500 17px/1.8 sans-serif; margin:0; color:#2d3748;">
        金额:<span id="amountText1" style="font:900 20px sans-serif; color:#4299e1; background:#f0f8fb; padding:3px 10px; border-radius:6px;">{{trade_amount}}</span>
        <button onclick="copyAmount(1)" style="margin-left:8px; padding:3px 12px; font:600 14px sans-serif; color:#fff; background:#4299e1; border:none; border-radius:6px; cursor:pointer; vertical-align:middle; transition:background .2s;">一键复制</button>
        <br>请截图保存二维码后,打开<span style="font:900 20px sans-serif; color:#38b2ac; background:#eaf6fa; padding:3px 10px; border-radius:6px;">{{pay_type}}</span>扫码支付<br>
        不要多付或少付,付款成功不回调,联系客服QQ:<span style="text-decoration:underline; color:#4299e1;">992428466</span>
    </p>
    <div id="copyTip1" style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:12px 24px; background:rgba(66,153,225,0.9); color:#fff; border-radius:8px; font-size:16px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:9999;">复制成功!</div>
</div>

<script>
const copyAmount = (id) => {
    const amount = document.getElementById(`amountText${id}`).textContent.trim();
    const showTip = () => {
        const tip = document.getElementById(`copyTip${id}`);
        tip.style.opacity = 1;
        setTimeout(() => tip.style.opacity = 0, 2000);
    };
    navigator.clipboard.writeText(amount).then(showTip).catch(err => {
        const ta = document.createElement('textarea');
        ta.value = amount;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        showTip();
    });
};
</script>

 

代码样式③:

图片[5]-[码支付]-支付页自定义提示设置-易知付

<div style="text-align:center; padding:20px; background:linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); border:none; border-radius:12px; margin:10px 0; box-shadow:0 4px 12px rgba(0,0,0,0.1);">
    <p style="font:500 17px/1.8 sans-serif; margin:0; color:#333;">
        <span style="color:#ff0000;">金额</span>:<span id="amountText2" style="font:900 22px sans-serif; 
            background:linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
            background-size:400% 100%;
            -webkit-background-clip:text; background-clip:text; color:transparent;
            animation:flow 3s linear infinite;
            padding:3px 10px; border-radius:6px;">{{trade_amount}}</span>
        <button onclick="copyAmount(2)" style="margin-left:8px; padding:3px 12px; font:600 14px sans-serif; color:#fff; background:linear-gradient(90deg, #2196f3, #1dd1a1); border:none; border-radius:6px; cursor:pointer; vertical-align:middle; transition:opacity .2s;">一键复制</button>
        <br>请截图保存二维码后,打开<span style="font:900 22px sans-serif; 
            background:linear-gradient(90deg, #1dd1a1, #2196f3);
            background-size:400% 100%;
            -webkit-background-clip:text; background-clip:text; color:transparent;
            animation:flow 3s linear infinite;">{{pay_type}}</span>扫码支付<br>
        不要多付或少付,付款成功不回调,联系客服QQ:<span style="text-decoration:underline; color:#ff6b6b;">992428466</span>
    </p>
    <div id="copyTip2" style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:12px 24px; background:rgba(0,0,0,0.85); color:#fff; border-radius:8px; font-size:16px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:9999;">复制成功!</div>
    <style>@keyframes flow {0%{background-position:0% 50%;}100%{background-position:100% 50%;}}</style>
</div>

 


注意:记得把代码里的客服QQ992428466 改成你自己的

© 版权声明
THE END
抢沙发

请登录后发表评论

    暂无评论内容