feat: bepusdt支付渠道增加钱包地址显示和复制功能
- 后端: 添加wallet_address字段到支付信息返回 - 前端: Checkout页面显示钱包地址,支持点击复制 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -156,6 +156,7 @@ func (h *PaymentHandler) CreatePayment(c *gin.Context) {
|
||||
tradeID, _ := data["trade_id"].(string)
|
||||
token, _ := data["token"].(string)
|
||||
paymentURL, _ := data["payment_url"].(string)
|
||||
walletAddress, _ := data["address"].(string)
|
||||
|
||||
var amount float64
|
||||
if v, ok := data["amount"].(float64); ok {
|
||||
@@ -207,6 +208,7 @@ func (h *PaymentHandler) CreatePayment(c *gin.Context) {
|
||||
"actual_amount": actualAmount,
|
||||
"token": token,
|
||||
"payment_url": paymentURL,
|
||||
"wallet_address": walletAddress,
|
||||
"expiration_time": remainingSeconds,
|
||||
"trade_type": tradeType,
|
||||
"channel_id": channel.ID,
|
||||
|
||||
@@ -33,6 +33,21 @@
|
||||
<div class="qr-tip">请使用手机浏览器扫码完成支付</div>
|
||||
</div>
|
||||
|
||||
<div class="address-section" v-if="paymentInfo.wallet_address">
|
||||
<div class="address-label">
|
||||
<span>钱包地址</span>
|
||||
<span class="network-tag">{{ paymentInfo.trade_type?.toUpperCase() }}</span>
|
||||
</div>
|
||||
<div class="address-box">
|
||||
<span class="address-text">{{ paymentInfo.wallet_address }}</span>
|
||||
<el-button type="primary" size="small" @click="copyAddress">
|
||||
<el-icon><CopyDocument /></el-icon>
|
||||
复制
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="address-tip">请勿向此地址转账其他资产,否则将无法找回</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<p>1. 请使用 {{ paymentInfo.trade_type?.toUpperCase() }} 网络转账</p>
|
||||
<p>2. 请准确转账 <strong>{{ paymentInfo.actual_amount || paymentInfo.amount }} USDT</strong></p>
|
||||
@@ -66,7 +81,7 @@
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Loading, CircleCloseFilled } from '@element-plus/icons-vue'
|
||||
import { Loading, CircleCloseFilled, CopyDocument } from '@element-plus/icons-vue'
|
||||
import { orderApi } from '../../api'
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
@@ -124,6 +139,13 @@ function startCountdown() {
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function copyAddress() {
|
||||
if (paymentInfo.value?.wallet_address) {
|
||||
navigator.clipboard.writeText(paymentInfo.value.wallet_address)
|
||||
ElMessage.success('地址已复制到剪贴板')
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
@@ -264,6 +286,57 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.address-section {
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.address-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 12px;
|
||||
|
||||
.network-tag {
|
||||
background: rgba(38, 161, 123, 0.15);
|
||||
color: #26a17b;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.address-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
|
||||
.address-text {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.address-tip {
|
||||
font-size: 12px;
|
||||
color: rgba(245, 158, 11, 0.8);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
|
||||
Reference in New Issue
Block a user