1

jhzh

2026-01-09 f1aaecc9dc0a3d680f2f693ee963d5d060e75734

 src/page/newUser/recharge.vue

@@ -1,85 +1,39 @@
<template>
  <div class="">
    <div class="head">
      <div rech="true">
        <h2><span class="hbnh"><a class="fan" @click="$router.go(-1)"></a></span> {{ $t('jy330') }} </h2>
      </div>
      <h6 v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay">¥ {{
          $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userIndexAmt).toFixed(2)
        }}</h6>

      <h6 v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
          class="account">
        ¥ {{
          $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userFuturesAmt).toFixed(2)
        }}
      </h6>
      <h6 v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
          class="account">¥ {{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</h6>

      <p> {{ $t('jy347') }}</p>
  <div class="recharge-page">
    <!-- Header -->
    <div class="header">
      <a class="back-btn" @click="$router.go(-1)"></a>
      <h2 class="title">{{ $t('jy534') }}</h2>
    </div>

    <!-- <div class="jine">
    <!-- Security Banner -->
    <div class="security-banner">
      <span class="check-icon">✓</span>
      <span class="security-text">{{ $t('jy535') }}</span>
    </div>


      <div class="boxk">
        <p @touchstart="onTouchStart($event,1)" @touchend="onTouchEnd" @mousedown="onMouseDown" @mouseup="onMouseUp"
           @mouseleave="onMouseUp" class="cz" style="margin-top: 0.801rem;">平台银行卡号: {{ this.channelAccount }} </p>
        <p @touchstart="onTouchStart($event,2)" @touchend="onTouchEnd" @mousedown="onMouseDown" @mouseup="onMouseUp"
           @mouseleave="onMouseUp" class="cz" style="margin-top: 0.801rem;">开户行: {{ this.channelDesc }} </p>
        <p @touchstart="onTouchStart($event,3)" @touchend="onTouchEnd" @mousedown="onMouseDown" @mouseup="onMouseUp"
           @mouseleave="onMouseUp" class="cz" style="margin-top: 0.801rem;">银行收款人: {{ this.channelName }}</p>
        <p class="cz" style="margin-top: 0.801rem;">转账用户名:</p><input :placeholder=" $t('jy125')"
                                                                          type="transferName"
                                                                          v-model="transferName" class="inpt">
        <p class="cz" style="margin-top: 0.801rem;"> {{ $t('hj170') }}</p>
        <p class="min"> {{ $t('jy346') }}<span> {{ $t('jy345') }}</span></p><input :placeholder="$t('jy125')"
                                                                                   type="number" v-model="money"
                                                                                   class="inpt">
        <div class="xuank">
          <a class="" @click="xz(item)" v-for="item in moneyList"
             :class="(money == Number(item)) ? 'xl' : ''">{{ item }}</a>
    <!-- Content Card -->
    <div class="content-card">
      <div class="amount-section">
        <label class="amount-label">{{ $t('jy536') }}</label>
        <div class="amount-input-wrapper">
          <span class="currency-symbol">¥</span>
          <input
            type="text"
            class="amount-input"
            :placeholder="$t('jy537')"
            disabled
          />
        </div>
        <p class="cz" style="margin-top: 0.801rem;">{{ $t('jy344') }}</p><input :placeholder=" $t('jy125')"
                                                                                type="password"
                                                                                v-model="password" class="inpt">
        <div class="jyzh">
          <p class="cz" style="margin-top: 0.401rem;">转账截图</p>
          <el-upload
            :with-credentials="true"
            class="avatar-uploader"
            :action="admin + 'user/upload.do'"
            :class="img1key ? 'tou' : 'butou'"
            list-type="picture-card"
            name="upload_file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleError"
            :before-upload="beforeAvatarUpload"
            :disabled="!showBtn"
            :headers="headers"
          >
            <img
              v-if="img1key"
              :src="img1key"
              class="id-img avatar"
              style="width: 100%;height: 100%;"
              v-show="img1key"
            />
            <i v-else class="iconfont icon-zhaopian"></i>
            <span v-if="imgStatus" class="btn-title">{{ $t("hj198") }}</span>
          </el-upload>
        </div> -->
        <div class="enyt" @click="getHeaderlink(4)">{{ $t('jy528') }}</div>
      <div class="enyt" @click="rechargeMsg()">{{ $t('jy529') }}</div>
		
      </div>

        <!-- <p class="czl"> {{ $t('jy342') }}</p>
        <p class="czl">{{ $t('jy341') }}</p>
        <p class="czl"> {{ $t('jy340') }}</p> -->
      <div class="instructions">
        <p class="instruction-item">1、{{ $t('jy538') }}</p>
        <p class="instruction-item">2、{{ $t('jy539') }}</p>
      </div>

      <div class="contact-btn" @click="getHeaderlink(4)">
        {{ $t('jy540') }}
      </div>
    </div>
  </div>
@@ -217,7 +171,7 @@
        this.channelDesc = channelDesc;
        this.channelAccount = channelAccount;
      } else {
        Toast(this.$t("平台转账信息获取失败"));
        Toast(this.$t("jy543"));
      }
    },
    Recharge() {
@@ -231,11 +185,11 @@
        return
      }
      if (this.transferName == '' || this.transferName == null || this.transferName == undefined) {
        this.$toast("请输入转账用户名")
        this.$toast(this.$t("jy544"))
        return
      }
      if (this.img1key == '' || this.img1key == null || this.img1key == undefined) {
        this.$toast("请上传转账截图")
        this.$toast(this.$t("jy545"))
        return
      }
      this.setRecharge()
@@ -279,178 +233,152 @@
  },
}
</script>
<style scoped>
.head {
<style scoped lang="less">
.recharge-page {
  width: 100%;
  height: 6.141rem;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
  text-align: center;
  min-height: 100vh;
  background: #f5f5f5;
}

.head h2 {
  text-align: center;
  height: 1.2549rem;
.header {
  width: 100%;
  position: relative;
  line-height: 1.2549rem;
  font-size: 0.4806rem;
  color: #fff;
  background: transparent;
  font-weight: 500;
  z-index: 3;
}
.avatar-uploader {
  overflow: hidden;
}.hbnh {
  position: absolute;
  left: 0.4005rem;
  font-size: 0.4272rem;
  font-weight: 500;

}

.fan {
  width: 0.2403rem;
  height: 0.4272rem;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAVdJREFUSEut1usqBVEYxvH/c1MuRJJDkhwTEpIkJUlyCEk++CJJckpycw49Gs3Wa+y9Z82ePd/Xr5n38KwRNR7bE0APMK1OHdtTwAWQGZcdQbZngPMc+QImK0O2Z4GzgIxLuqoE2Z4DTgMyJuk6K08yZHseOAnIqKSbRo2TINsLwHFARiTdxkaVQrYXgaOADEu6K3a7LWR7CTjMD2XdaYq0rZHtFWA/Rz6BIUn3reau6RvZXgX28kMfOfLQbnj/QbbXgN380HuOPJZtwB/I9jqwE5ABSc9lyJ8a2d4AtgPSL+klBfmFbG8CWwHpk/SaivxAtjMgg7Inq0mvpLcqSHehTOvKpzU+oSvFDlj99gesOJCDkp7Kip+yIknT3XL7C0tbum9lMbIMHKQkQEqwJWVSKZTPWTElq0dt6GYxt6uHf8DqX0cBq39BBqz+lR2w+j8RAfv9rfkGqF24CUdT9E4AAAAASUVORK5CYII=) no-repeat 50%;
  background-size: 100%;
  display: inline-block;
  margin-right: 0.1335rem;
  vertical-align: middle;
  margin-top: -0.0534rem;
}

.xind {
  position: absolute;
  right: 0.4005rem;
  color: #fff;
  font-size: 0.3738rem;
  font-weight: 500;
}

.shaux {
  position: absolute;
  width: 0.4806rem;
  height: 0.4806rem;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAA8VJREFUWEfNmEloXVUYx3//e18qCWitA4JUFLEURdOotcWpEKsLFbUVBONKKYIbRcEJ3VhwarvSiAspVlzoRpyow0Lr0No2LbW4cACllCK2DhREjWhy71/OzU087/W9vPuSl5K7u2f4zu9+9xuPmGeP5hkPlYFsLyTjBsQgZgBxDrAQMPA75gBiP+YTUrZK+nsmH9sWyPZSch4GhoDeiof8CbxCwiZJhyruKZa1BLLdR86TwL1ArROh0dqgpY0kPCVprIqMpkC2l5DzJnBhEyGjiBHMt8DRcv5UxPmYlU21aPaQslbST+2gjgGyfSk5HwCn1202O4DnSXlX0j/NBNvuJeMW4D7E5Q1rfiRhUNIP00HVAdk+j5ydDTBHMPeopnfafV0873HfjhgGTovGA9QKSYdbyZoCKm1mpO43mRFSbpb0Sycwk2ttLyZnK7Bsar/ZScoqSVkzmf8DZd4EPBhtDDCrJf01E5gIahE5nwEXRXIeUaqNLYFKI/4a6CkXHSbhYkk/zwYmgjqLnK+AReXYHyQsaSa/0JAzvwzcFWlnrWp6uxswU1DjvhOxJZK5QakebTxDtk8k5wjQV0yaHarp6m7CFGLthJwvI3v6jYQzG+OTSm94PdLObarpjW4DFVDjXofYPCU75zr16KP4LDnzS8Dd5eAoCae0ijOzhbQdDPxXIC1lPa1Uj9cDjXs3KiJsSCTblGj1bA+ebr8z7wcGyvM+VKLrGzUUiCeD1wtKFXJX154ivsEJkUlsxtxavn9HwhWNQCENLCgH1yvVE12jCXYz5kESPp4ukUfnbQk2NKdAhTFnfq7Ib9M/h0joD0Bz+stKl+8lJ9jO0hZMJuda9WhbcPvjYtS2V5LzReRhMduwUhUaPL5unzkUfHVuDnxPwoCk0QmgcQ8hXou8YO4Co72AnD1RtM5IuErS7snzm6WO7appVTc9LZZlu5+cvaVnP6NUj9W5fekFIZyvi7S0ptOCrJMPcOaQVIdIuEzSv8cCTVSK38xV+dEIazukjrMlHWiciwu0UDA9FGmpKwVaJ5orjHpyQ1nC7gL6G6BmU8KeCyyW9HlVsDkp8m2LjDsQLwJjJCyXdLAKVLM26BJy3gfOqBNgtgPDbdqgPjLWAA8glkf795FwZZWyplWjGIz8rY4aRXMBYkWLRnEvKTdVqdHbtdLrgftn0UqHxL2hbKXr3LvV76ty2RDa6om4Uf2yIbROr5LwbNcuG5rEjpPIuBFxDWZZeR1zcumpRzEHEfswn5Ly3kz7ubYaquIZ3Vwz74D+A2+DgOcUuMpOAAAAAElFTkSuQmCC) no-repeat 50%;
  background-size: 100%;
  right: 0.4005rem;
  top: 0.4005rem;
}

.head h6 {
  font-weight: 500;
  font-size: 0.6408rem;
  color: #fff;
  margin-top: 0.9345rem;
}

.head p {
  color: #9fb1ff;
  font-size: 0.3204rem;
  margin-top: 0.3738rem;
}

.jine {
  height: 1.2rem;
  background: #fff;
  border-radius: 0.4005rem 0.4005rem 0 0;
  min-height: 2.136rem;
  margin-top: -2.0025rem;
  padding-top: 0.534rem;
  position: relative;
  z-index: 9;
}

.boxk {
  width: 9.345rem;
  margin: 0 auto;

}

.cz {
  color: #333;
  font-size: 0.4005rem;
}

.min {
  color: #999;
  font-size: 0.3738rem;
  margin-top: 0.267rem;
}

.min span {
  color: #3b71b9;
}

.boxk input {
  width: 100%;
  height: 1.1748rem;
  background: #e6e6e6;
  border-radius: 0.1335rem;
  margin-top: 0.4005rem;
  padding-left: 0.267rem;
  font-size: 0.4272rem;
  color: #000;
}

.xuank {
  width: 9.345rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 0.267rem;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;

  .back-btn {
    position: absolute;
    left: 0.4rem;
    width: 0.48rem;
    height: 0.48rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232196f3'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 0.48rem 0.48rem;
    cursor: pointer;
  }

  .title {
    font-size: 0.48rem;
    font-weight: 500;
    color: #333;
    margin: 0;
  }
}

.xuank a {
  width: 2.2428rem;
  height: 1.1748rem;
  background: #e6e6e6;
  border-radius: 0.1335rem;
  color: #999;
  font-size: 0.4272rem;
  text-align: center;
  line-height: 1.1748rem;
}

.enyt {
  width: 9.345rem;
  height: 1.1748rem;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
  border-radius: 0.1335rem;
  margin: 0 auto;
  margin-top: 0.5073rem;
  color: #fff;
  font-size: 0.4272rem;
  text-align: center;
  line-height: 1.1748rem;
  margin-bottom: 0.869rem;
}

.czl {
  color: #666;
  font-size: 0.3471rem;
  line-height: 0.5607rem;
}

.xl {
  background: #3b71b9 !important;
  color: #fff !important;
}

.jyzh {
  width: 96%;
  height: auto;
  margin: 0 auto;
  margin-bottom: 0.8rem;
}

.jyzh img {
.security-banner {
  width: 100%;
  height: auto;
  background: #e8f5e9;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;

  .check-icon {
    width: 0.4rem;
    height: 0.4rem;
    background: #4caf50;
    border-radius: 50%;
    color: #fff;
    font-size: 0.28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
  }

  .security-text {
    font-size: 0.32rem;
    color: #2e7d32;
  }
}
</style>

.content-card {
  background: #fff;
  margin: 0.4rem;
  border-radius: 0.28rem;
  padding: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .amount-section {
    margin-bottom: 0.8rem;

    .amount-label {
      display: block;
      font-size: 0.36rem;
      color: #333;
      font-weight: 500;
      margin-bottom: 0.3rem;
    }

    .amount-input-wrapper {
      display: flex;
      align-items: center;
      background: #f5f5f5;
      border-radius: 0.2rem;
      padding: 0 0.4rem;
      height: 1.2rem;

      .currency-symbol {
        font-size: 0.4rem;
        color: #666;
        margin-right: 0.2rem;
      }

      .amount-input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 0.36rem;
        color: #999;
        outline: none;

        &::placeholder {
          color: #999;
        }

        &:disabled {
          cursor: not-allowed;
        }
      }
    }
  }

  .instructions {
    margin-bottom: 0.8rem;

    .instruction-item {
      font-size: 0.32rem;
      color: #666;
      line-height: 0.56rem;
      margin-bottom: 0.3rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .contact-btn {
    width: 100%;
    height: 1.2rem;
    background: #2196f3;
    border-radius: 0.2rem;
    color: #fff;
    font-size: 0.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 0.4rem;

    &:active {
      opacity: 0.8;
    }
  }
}
</style>