From f1aaecc9dc0a3d680f2f693ee963d5d060e75734 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 09 Jan 2026 16:18:43 +0800
Subject: [PATCH] 1
---
src/page/newUser/recharge.vue | 412 ++++++++++++++++++++++++----------------------------------
1 files changed, 170 insertions(+), 242 deletions(-)
diff --git a/src/page/newUser/recharge.vue b/src/page/newUser/recharge.vue
index b835988..efabbb8 100644
--- a/src/page/newUser/recharge.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3