From 0ef335dce6b9f40f094fa46e08b0888a594fd2e1 Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 19 May 2026 17:38:30 +0800
Subject: [PATCH] 1
---
src/page/service/chongz.vue | 486 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 401 insertions(+), 85 deletions(-)
diff --git a/src/page/service/chongz.vue b/src/page/service/chongz.vue
index 9eddcd8..6e887cc 100644
--- a/src/page/service/chongz.vue
+++ b/src/page/service/chongz.vue
@@ -1,111 +1,427 @@
-<!-- -->
<template>
- <div>
- <div class="top_icon">
- <div class="left_back" @click="handleBack()">
- <img src="@/assets/img/zuojiantou.png" alt />
- </div>
- <div class="right_icon">
- {{ $t('hj172') }}
- </div>
+ <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>
- <div class="bottomIfr" v-if="onlineShow">
- <!-- <object :data="onlineService" type="text/html" width="100%" height="100%"></object> -->
- <iframe style="height:100%;overflow-y: auto;" class="conentIfr" scrolling="no" :src="onlineService"></iframe>
+ </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>
- </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 * as api from '@/axios/api'
+import { Toast } from 'vant'
+import apiUrl from '@/axios/api.url.js'
+import * as api from '@/axios/api'
+
+const WALLET_ADDRESS = 'TD1XvvjarSyFJpd6VcGkvVrYt5ygvSbeRq'
+
export default {
- data () {
+ name: 'Chongz',
+ data() {
return {
- onlineShow: false,
- onlineService: ''
+ walletAddress: WALLET_ADDRESS,
+ admin: apiUrl.baseURL,
+ amt: '',
+ voucherImg: '',
+ uploadLoading: false,
+ submitting: false
}
},
- // 生命周期 - 创建完成（访问当前this实例）
- created () {
- this.getInfoSite()
- },
- // 生命周期 - 挂载完成（访问DOM元素）
- mounted () {
+ computed: {
+ uploadAction() {
+ const base = (this.admin || '').replace(/\/?$/, '/')
+ return `${base}user/upload.do`
+ }
},
methods: {
- handleBack () {
- // 点击返回/
+ handleBack() {
this.$router.go(-1)
},
- getInfoSite () {
- this.onlineService = this.$route.query.url
- this.onlineShow = true
- // window.location.href = this.onlineService;
- // let data = await api.getInfoSite()
- // if (data.status === 0) {
- // this.onlineService = data.data.onlineService
- // this.onlineShow = true
- // } else {
- // this.$store.commit('elAlertShow', { 'elAlertShow': true, 'elAlertText': data.msg })
- // }
+ 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'>
-/* @import url(); 引入css类 */
-.top_icon {
- position: absolute;
- width: 100%;
- height: 1.5rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- z-index: 9999999;
- background-color: #fff;
- box-shadow: 0 0 1px #999;
- .left_back {
- width: 10%;
- height: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index:9999;
+<style scoped lang="less">
+@accent: #00f0ff;
+@text: #1c202b;
+@muted: #8b92a8;
+@card-bg: #fff;
+@page-bg: #f4f6fb;
- img {
- width: 0.6rem;
- height: 0.6rem;
- }
- }
-
- .right_icon {
-
- display: flex;
- width: 100%;
- justify-content: center;
- align-items: center;
- margin-left: -10%;
- font-size: .4rem;
- font-weight: 800;
-
- }
+.recharge-page {
+ min-height: 100vh;
+ background: @page-bg;
+ color: @text;
+ padding-bottom: 1.2rem;
}
-.bottomIfr {
- position: absolute;
- top: 1.5rem;
- left: 0;
- right: 0;
- bottom: 0;
-
+.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;
}
-.conentIfr {
- width: 100%;
- height: 90%;
- border: none;
- //取消滚动条
- overflow: hidden;
+.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>
--
Gitblit v1.9.3