<template>
|
<div class="recharge-page">
|
<header class="page-header">
|
<div class="header-left">
|
<button type="button" class="back-btn" @click="handleBack" :aria-label="$t('common_back')">
|
<img src="@/assets/img/zuojiantou.png" alt="" />
|
</button>
|
</div>
|
<h1 class="page-title">{{ $t('hj172') }}</h1>
|
<!-- <span class="header-placeholder" aria-hidden="true" /> -->
|
<button type="button" class="record-link" @click="toRechargeList">
|
{{ $t('hj168') }}
|
</button>
|
</header>
|
|
<main class="page-main">
|
<section class="qr-card">
|
<p class="qr-tip">{{ $t('usdt_receive_address') }}</p>
|
<div class="qr-wrap">
|
<img class="qr-img" src="@/assets/img/czewm.jpg" :alt="$t('usdt_qr_alt')" />
|
</div>
|
</section>
|
|
<section class="address-card">
|
<p class="address-label">{{ $t('地址') }}</p>
|
<p class="address-value">{{ walletAddress }}</p>
|
<button type="button" class="copy-btn" @click="copyAddress">
|
{{ $t('hj164') }}
|
</button>
|
</section>
|
|
<section class="form-card">
|
<p class="form-label">{{ $t('hj170') }}</p>
|
<div class="amt-row">
|
<input v-model="amt" class="amt-input" type="number" inputmode="decimal" :placeholder="$t('hj171')">
|
</div>
|
|
<p class="form-label upload-label">{{ $t('上傳憑證：') }}</p>
|
<el-upload v-loading="uploadLoading" :with-credentials="true" class="voucher-uploader" :action="uploadAction"
|
list-type="picture-card" name="upload_file" :show-file-list="false" :on-success="onUploadSuccess"
|
:on-error="onUploadError" :before-upload="beforeUpload">
|
<img v-if="voucherImg" :src="voucherImg" class="voucher-preview" alt="">
|
<div v-else class="voucher-placeholder">
|
<span>+</span>
|
</div>
|
</el-upload>
|
|
<button type="button" class="submit-btn" :disabled="submitting" @click="submitRecharge">
|
{{ submitting ? $t('hj235') : $t('usdt_submit_recharge') }}
|
</button>
|
</section>
|
</main>
|
</div>
|
</template>
|
|
<script>
|
import { Toast } from 'vant'
|
import apiUrl from '@/axios/api.url.js'
|
import * as api from '@/axios/api'
|
|
const WALLET_ADDRESS = 'TD1XvvjarSyFJpd6VcGkvVrYt5ygvSbeRq'
|
|
export default {
|
name: 'Chongz',
|
data() {
|
return {
|
walletAddress: WALLET_ADDRESS,
|
admin: apiUrl.baseURL,
|
amt: '',
|
voucherImg: '',
|
uploadLoading: false,
|
submitting: false
|
}
|
},
|
computed: {
|
uploadAction() {
|
const base = (this.admin || '').replace(/\/?$/, '/')
|
return `${base}user/upload.do`
|
}
|
},
|
methods: {
|
handleBack() {
|
this.$router.go(-1)
|
},
|
toRechargeList() {
|
this.$router.push('/rechargelist')
|
},
|
async copyAddress() {
|
const text = this.walletAddress
|
try {
|
if (navigator.clipboard && window.isSecureContext) {
|
await navigator.clipboard.writeText(text)
|
} else {
|
const ta = document.createElement('textarea')
|
ta.value = text
|
ta.setAttribute('readonly', '')
|
ta.style.position = 'fixed'
|
ta.style.left = '-9999px'
|
document.body.appendChild(ta)
|
ta.select()
|
document.execCommand('copy')
|
document.body.removeChild(ta)
|
}
|
Toast(this.$t('hj185'))
|
} catch (e) {
|
Toast(this.$t('hj186'))
|
}
|
},
|
beforeUpload(file) {
|
const ok = file.size / 1024 / 1024 < 10
|
if (!ok) {
|
Toast(this.$t('hj205'))
|
return false
|
}
|
this.uploadLoading = true
|
return true
|
},
|
onUploadSuccess(res) {
|
this.uploadLoading = false
|
if (res && res.status === 0 && res.data && res.data.url) {
|
this.voucherImg = res.data.url
|
} else {
|
Toast((res && res.msg) || this.$t('usdt_upload_fail'))
|
}
|
},
|
onUploadError() {
|
this.uploadLoading = false
|
Toast(this.$t('usdt_upload_fail'))
|
},
|
async submitRecharge() {
|
const amtStr = String(this.amt == null ? '' : this.amt).trim()
|
const n = Number(amtStr)
|
if (!amtStr || Number.isNaN(n) || n <= 0) {
|
Toast(this.$t('hj171'))
|
return
|
}
|
if (!this.voucherImg) {
|
Toast(this.$t('usdt_upload_required'))
|
return
|
}
|
this.submitting = true
|
try {
|
const data = await api.inMoney({
|
amt: amtStr,
|
img: this.voucherImg
|
})
|
if (data.status === 0) {
|
Toast(this.$t(data.msg) || this.$t('hj231'))
|
this.amt = ''
|
this.voucherImg = ''
|
} else {
|
Toast(this.$t(data.msg) || this.$t('hj232'))
|
}
|
} catch (e) {
|
Toast(this.$t('hj232'))
|
} finally {
|
this.submitting = false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
@accent: #00f0ff;
|
@text: #1c202b;
|
@muted: #8b92a8;
|
@card-bg: #fff;
|
@page-bg: #f4f6fb;
|
|
.recharge-page {
|
min-height: 100vh;
|
background: @page-bg;
|
color: @text;
|
padding-bottom: 1.2rem;
|
}
|
|
.page-header {
|
position: sticky;
|
top: 0;
|
z-index: 10;
|
display: grid;
|
grid-template-columns: 1fr auto 1fr;
|
align-items: center;
|
height: 1.5rem;
|
padding: 0 0.24rem;
|
background: @card-bg;
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
margin-top: 0;
|
}
|
|
.header-left {
|
display: flex;
|
align-items: center;
|
justify-self: start;
|
gap: 0.04rem;
|
min-width: 0;
|
}
|
|
.record-link {
|
padding: 0.12rem 0.08rem 0.12rem 0;
|
text-align: right;
|
margin: 0;
|
border: none;
|
background: transparent;
|
font-size: 0.26rem;
|
font-weight: 600;
|
color: @accent;
|
white-space: nowrap;
|
line-height: 1.2;
|
}
|
|
.record-link:active {
|
opacity: 0.75;
|
}
|
|
.back-btn {
|
width: 0.88rem;
|
height: 0.88rem;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0;
|
border: none;
|
background: transparent;
|
|
img {
|
width: 0.56rem;
|
height: 0.56rem;
|
}
|
}
|
|
.page-title {
|
margin: 0;
|
font-size: 0.4rem;
|
font-weight: 700;
|
text-align: center;
|
justify-self: center;
|
}
|
|
.header-placeholder {
|
justify-self: end;
|
width: 0.88rem;
|
height: 0.88rem;
|
}
|
|
.page-main {
|
padding: 0.4rem 0.32rem;
|
}
|
|
.qr-card,
|
.address-card {
|
background: @card-bg;
|
border-radius: 0.24rem;
|
box-shadow: 0 4px 20px rgba(28, 32, 43, 0.06);
|
padding: 0.4rem 0.36rem;
|
}
|
|
.qr-card {
|
margin-bottom: 0.36rem;
|
}
|
|
.qr-tip {
|
margin: 0 0 0.32rem;
|
font-size: 0.28rem;
|
color: @muted;
|
text-align: center;
|
line-height: 1.5;
|
}
|
|
.qr-wrap {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0.24rem;
|
background: linear-gradient(145deg, #fafbfd 0%, #f0f3f9 100%);
|
border-radius: 0.2rem;
|
border: 1px solid rgba(0, 240, 255, 0.12);
|
}
|
|
.qr-img {
|
display: block;
|
width: 4.2rem;
|
max-width: 72vw;
|
height: auto;
|
border-radius: 0.12rem;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
}
|
|
.address-label {
|
margin: 0 0 0.2rem;
|
font-size: 0.26rem;
|
color: @muted;
|
font-weight: 600;
|
}
|
|
.address-value {
|
margin: 0 0 0.36rem;
|
padding: 0.28rem 0.24rem;
|
font-size: 0.26rem;
|
line-height: 1.45;
|
word-break: break-all;
|
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
color: @text;
|
background: #f8fafc;
|
border-radius: 0.16rem;
|
border: 1px solid #e8ecf2;
|
}
|
|
.copy-btn {
|
display: block;
|
width: 100%;
|
height: 0.88rem;
|
line-height: 0.88rem;
|
font-size: 0.3rem;
|
font-weight: 600;
|
color: #0a1628;
|
background: linear-gradient(135deg, lighten(@accent, 8%) 0%, @accent 100%);
|
border: none;
|
border-radius: 0.44rem;
|
box-shadow: 0 4px 14px rgba(0, 240, 255, 0.35);
|
}
|
|
.copy-btn:active {
|
opacity: 0.92;
|
transform: scale(0.99);
|
}
|
|
.form-card {
|
background: @card-bg;
|
border-radius: 0.24rem;
|
box-shadow: 0 4px 20px rgba(28, 32, 43, 0.06);
|
padding: 0.4rem 0.36rem;
|
margin-top: 0.36rem;
|
}
|
|
.form-label {
|
margin: 0 0 0.2rem;
|
font-size: 0.28rem;
|
color: @muted;
|
font-weight: 600;
|
}
|
|
.upload-label {
|
margin-top: 0.36rem;
|
}
|
|
.amt-row {
|
margin-bottom: 0.08rem;
|
}
|
|
.amt-input {
|
width: 100%;
|
box-sizing: border-box;
|
height: 0.88rem;
|
padding: 0 0.28rem;
|
font-size: 0.32rem;
|
border: 1px solid #e8ecf2;
|
border-radius: 0.16rem;
|
background: #f8fafc;
|
color: @text;
|
|
&::placeholder {
|
color: #b0b8cc;
|
}
|
}
|
|
.submit-btn {
|
display: block;
|
width: 100%;
|
margin-top: 0.4rem;
|
height: 0.88rem;
|
line-height: 0.88rem;
|
font-size: 0.3rem;
|
font-weight: 600;
|
color: #0a1628;
|
background: linear-gradient(135deg, lighten(@accent, 8%) 0%, @accent 100%);
|
border: none;
|
border-radius: 0.44rem;
|
box-shadow: 0 4px 14px rgba(0, 240, 255, 0.35);
|
}
|
|
.submit-btn:disabled {
|
opacity: 0.55;
|
}
|
|
.voucher-placeholder {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: @muted;
|
font-size: 0.5rem;
|
|
.ph-text {
|
font-size: 0.22rem;
|
margin-top: 0.08rem;
|
}
|
}
|
|
.voucher-preview {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
display: block;
|
border-radius: 0.12rem;
|
}
|
|
/deep/ .el-upload__input {
|
display: none !important;
|
}
|
|
/deep/ .voucher-uploader .el-upload {
|
border: 1px dashed #cfd6e6;
|
border-radius: 0.16rem;
|
background: #f8fafc;
|
}
|
|
/deep/ .voucher-uploader .el-upload--picture-card {
|
width: 2.6rem;
|
height: 2.6rem;
|
line-height: 2.6rem;
|
}
|
</style>
|
