1

李

2026-05-19 0ef335dce6b9f40f094fa46e08b0888a594fd2e1

 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 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>
            <div class="right_icon">
                {{ $t('hj172') }}
      <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>
        <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>

        <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 {
  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 () {
      // 点击返回/
      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%;
<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;
        z-index:9999;
  padding: 0;
  border: none;
  background: transparent;

        img {
            width: 0.6rem;
            height: 0.6rem;
    width: 0.56rem;
    height: 0.56rem;
        }
    }

    .right_icon {
.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;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-left: -10%;
        font-size: .4rem;
        font-weight: 800;

    }
  padding: 0.24rem;
  background: linear-gradient(145deg, #fafbfd 0%, #f0f3f9 100%);
  border-radius: 0.2rem;
  border: 1px solid rgba(0, 240, 255, 0.12);
}

.bottomIfr {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  bottom: 0;

.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);
}

.conentIfr {
.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: 90%;
  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;
    //取消滚动条
    overflow: hidden;
  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>