From 42c93d4c8a93adcac5b8dd3eb588d434214b0ff0 Mon Sep 17 00:00:00 2001
From: pengda <1111@qq.com>
Date: Thu, 18 Sep 2025 09:09:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E6=94=AF=E7=BB=9F=E8=AE=A1=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/site/tb_buy_btn.svg |   1 +
 src/views/agent/recharge.vue   | 155 +++++++++++++++--------------------------
 2 files changed, 59 insertions(+), 97 deletions(-)
 create mode 100644 src/assets/site/tb_buy_btn.svg

diff --git a/src/assets/site/tb_buy_btn.svg b/src/assets/site/tb_buy_btn.svg
new file mode 100644
index 0000000..f7f3e6e
--- /dev/null
+++ b/src/assets/site/tb_buy_btn.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="21" height="21" viewBox="0 0 21 21"><defs><clipPath id="master_svg0_847_033731"><rect x="0" y="0" width="21" height="21" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_847_033731)"><g><rect x="0.8077392578125" y="3.23046875" width="19.384614944458008" height="16.153844833374023" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M17.5962655859375,0L3.4041649859375,0C1.5310839859375,0,0.00622582610694,1.5248787,0.00622582610694,3.409956L0.00622582610694,17.578041C0.00622582610694,19.46312,1.5310839859375,20.987997,3.4041649859375,20.987997L17.5962655859375,20.987997C19.4693485859375,20.987997,20.9942075859375,19.46312,20.9942075859375,17.578041L20.9942075859375,3.409956C20.9942075859375,1.536855,19.4693485859375,0,17.5962655859375,0ZM7.8827209859375,14.072048C7.0902585859375,14.072048,6.4539022859375,13.903944,5.6494416859375,13.747859L3.4281792859375,14.864469L4.0645360859375,12.955398C2.4676346859375,11.838746,1.5190868859375,10.397909,1.5190868859375,8.6569204C1.5190868859375,5.6311979,4.3887238859375,3.2418334,7.8827209859375,3.2418334C11.0165205859375,3.2418334,13.7540675859375,5.1509056,14.3063845859375,7.7083936C14.1025485859375,7.684392,13.8980825859375,7.6723619,13.6940405859375,7.6723619C10.6683185859375,7.6723619,8.2789525859375,9.929656,8.2789525859375,12.703234C8.2789525859375,13.17151,8.3509959859375,13.615749,8.4710502859375,14.035996C8.2789525859375,14.06001,8.0868348859375,14.07203,7.8827209859375,14.072048ZM17.2720815859375,16.29331L17.7523745859375,17.878214L16.0113615859375,16.917669C15.3750045859375,17.073734,14.7386475859375,17.241854,14.1022915859375,17.241854C11.0765465859375,17.241854,8.6871833859375,15.17666,8.6871833859375,12.61919C8.6871833859375,10.073762,11.0765465859375,7.9965668,14.1022695859375,7.9965668C16.9599115859375,7.9965668,19.5053595859375,10.073762,19.5053595859375,12.61921C19.4933605859375,14.072046,18.5448165859375,15.34476,17.2720815859375,16.29331Z" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M4.4991118453125,4.274874865C5.3218896453125,4.274874865,5.9914045453125,4.883395795,5.9914045453125,5.6369937750000005C5.9914045453125,6.390591875,5.3218896453125,6.999112575,4.4991118453125,6.999112575C3.6682677453125,6.999112575,2.9987523453125,6.3865620750000005,2.9987523453125,5.6369937750000005C3.0027852453125,4.8793664549999995,3.6682677453125,4.274874865,4.4991118453125,4.274874865ZM5.7453789453125,12.459676775C5.3501224453125005,13.700900075,5.450953245312499,13.241483675,3.8820283453125,16.703198375L1.6153564453125,15.264510375Q4.1522543453125,12.923118575,4.6685075453125,11.851154775000001Q5.2210595453124995,10.722774075,4.0554568453125,10.122311074999999L2.3131037953125,9.022138075L3.2609113453125,7.547183275C4.571709645312501,8.538547475,4.6685075453125,8.619146775,5.5517835453124995,9.521851075C6.2374315453125,10.227092275,6.1487002453125,11.194275874999999,5.7453789453125,12.459676775ZM18.0991474453125,14.075683375Q17.6554894453125,18.295025375,12.2469364453125,16.723351375L12.5413604453125,15.514369375L13.7956964453125,15.784374375Q16.110765445312502,15.933481375,15.8849054453125,13.882245975L15.8849054453125,7.913908675C15.9010414453125,5.645053675,13.7835964453125,5.407288175,9.9762325453125,6.789555775L10.8595066453125,7.035381774999999C10.7869081453125,7.2973274749999995,10.5005521453125,7.7124101750000005,10.1294927453125,8.163764475L15.2234574453125,8.163764975L15.2234574453125,9.211549275L12.3598704453125,9.211549275L12.3598704453125,10.517247175L15.2153924453125,10.517247175L15.2153924453125,11.565031574999999L12.3598704453125,11.565030075L12.3598704453125,13.753288275C12.7914204453125,13.612239875,13.1866764453125,13.414772075,13.5295014453125,13.152825375L13.2794414453125,12.201761275L14.6265394453125,11.774587175L15.7518084453125,14.563303375L14.0941514453125,15.264513375L13.7997274453125,14.152251375C13.0576164453125,14.728532375,11.5209560453125,15.562726375,8.8307948453125,15.486160375Q5.9631719453125,15.562726375,6.7012524453125,12.201761275L6.7738494453125,12.165492075L8.7944955453125,12.165492075C8.7783632453125,12.596695875,8.6049337453125,13.301936175,8.842895045312499,13.684778175C9.0405216453125,13.999114075,9.5446753453125,14.051504375,9.8633012453125,14.071651375C9.8995990453125,14.075683375,9.9399328453125,14.075683375,9.9721975453125,14.075683375L9.9721975453125,11.569061275L7.0521431453125,11.569061275L7.0521431453125,10.521277475L9.9721975453125,10.521277475L9.9721975453125,9.215576174999999L9.2139511453125,9.215576174999999Q8.5565352453125,9.920815475000001,7.9555845453125,10.509185275L7.0723094453125,9.727379275C7.7014927453125,9.054378475,8.3266415453125,7.990475375,8.7138314453125,7.285237275C8.3992395453125,7.414195975,8.076581445312499,7.555243775,7.7418236453125,7.700321675C7.4191660453125,8.123465075,7.0440759453125,8.550637275,6.6246209453125,8.977810875Q6.6407537453125,8.997960575,5.1766924453125,8.143613375000001Q6.6851186453125,6.837914475,7.5320949453125,4.037109375L9.6334047453125,4.633539255Q9.464009745312499,5.048623775,9.101020845312501,5.681322775Q17.4981944453125,3.2673916849999998,17.9942834453125,7.160310475Q18.5387654453125,9.852308275,18.0991474453125,14.075683375Z" fill="#006AFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/views/agent/recharge.vue b/src/views/agent/recharge.vue
index d411622..daa9732 100644
--- a/src/views/agent/recharge.vue
+++ b/src/views/agent/recharge.vue
@@ -12,21 +12,38 @@
                 </div>
             </div>
             <div class="mt24">
-                <div class="flex-between w552 mt12">
+                <div class="flex-between w552">
                     <div class="wallet-choose">充值选择</div>
                     <div class="wallet-desc flex">设置通用余额提醒，防止余额不足，点此设置<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
                 </div>
 
-                <div class="flex gap24">
-                    <div class="wallet-item wallet-item-active">
-                        <div class="wallet-name">通用钱包</div>
-                        <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
+                <el-form class="el-row demo-ruleForm" ref="formRef">
+                    <div class="flex gap24 mt12">
+                        <div class="wallet-item wallet-item-active">
+                            <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
+                            <div class="wallet-name">通用钱包</div>
+                            <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
+                        </div>
+                        <div class="wallet-item">
+    <!--                        <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">-->
+                            <div class="wallet-name">通用钱包</div>
+                            <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
+                        </div>
                     </div>
-                    <div class="wallet-item">
-                        <div class="wallet-name">通用钱包</div>
-                        <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
+                    <div class="flex-between w552 mt24">
+                        <div class="wallet-choose">充值卡面值</div>
                     </div>
-                </div>
+
+                    <div class="flex mt12">
+                        <GuipRadio v-model="domain_type" :options="domain_types"/>
+                    </div>
+                    <div class="buy-btn flex mt12">
+                        <img src="@/assets/site/tb_buy_btn.svg" alt="">跳转淘宝购买
+                    </div>
+                    <div class="buy-desc flex mt12">
+                        充值以本页跳转链接为准！淘宝交易服务费（0.6%）已由平台承担，暂时无需支付
+                    </div>
+                </el-form>
             </div>
         </div>
     </div>
@@ -34,8 +51,11 @@
 <script>
 
 
+import GuipRadio from "@/components/GuipRadio.vue";
+
 export default {
     components: {
+        GuipRadio
 
     },
     props: {
@@ -47,7 +67,6 @@ export default {
     data() {
         return {
             totalType:'1',
-            date: this.getNow(),
             tableLoading:false,
 
             walletList:[],
@@ -60,6 +79,9 @@ export default {
             payList:[],
             nameList:[],
             topList:[],
+
+            domain_type: 1,
+            domain_types: {1: "平台免费域名", 2: "我自己有域名"},
         }
     },
     mounted() {
@@ -173,7 +195,8 @@ export default {
     width: 264px;
     letter-spacing: 0.08em;
     border-radius: 8px;
-    background: #F2F7FF;
+    background: #F6F7FA;
+    box-sizing: border-box;
 
     .wallet-name{
       color: #006AFF;
@@ -192,7 +215,15 @@ export default {
 }
 
 .wallet-item-active{
+  position: relative;
   background: #F2F7FF;
+  .tem-active{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+  }
 }
 
 .gap24 {
@@ -201,96 +232,26 @@ export default {
   align-items: stretch;
 }
 
-::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
-  background-color: #E8F0FE; /* 背景色 */
-  color: #006AFF; /* 文字颜色 */
-  font-weight: 600;
+.buy-btn{
+  font-size: 12px;
+  width: 139px;
+  color: #006AFF;
+  letter-spacing: 0.08em;
+  padding: 9px 16px;
+  gap: 6px;
+  border-radius: 4px;
+  border: 1px solid #006AFF;
+  box-sizing: border-box;
 }
 
-.loss-profit{
-    color: #FF4D4F;
-}
-.red{
-  color: #FF4D4F;
+.buy-desc{
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: #006AFF;
 }
 
-.expense-wrap{
-    .pagetitle {
-        text-align: left;
-        font-size: 16px;
-        font-weight: bold;
-        line-height: normal;
-        letter-spacing: 0.08em;
-        color: #1E2226;
-        margin-top: 8px;
-    }
-    .monthTotal-wrap{
-        display: grid;
-        grid-gap: 12px;
-        grid-template-columns: repeat(auto-fit, 287px);
-    }
 
-    .loss-tip{
-        width: 50px;
-        height: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        border-radius: 4px;
-        background: #FFF1F0;
-        box-sizing: border-box;
-        border: 1px solid #FFA39E;
-        font-size: 14px;
-        font-weight: normal;
-        line-height: 20px;
-        text-align: center;
-        letter-spacing: 0.08em;
-        color: #FF4D4F;
-    }
-    .loss-tip-empty{
-        width: 50px;
-        height: 24px;
-        display: flex;
-    }
-    .total-item{
-        padding: 14px 16px;
-        font-size: 12px;
-        letter-spacing: 0.03em;
-        color: #23242B;
-        box-sizing: border-box;
-        border-radius: 4px;
-        background: #F2F7FF;
-        min-height: 153px;
-        .price{
-            text-align: left;
-            font-size: 12px;
-            font-weight: normal;
-            line-height: 15px;
-            letter-spacing: 0.08em;
-            color: #1E2226;
-            margin: 14px 0;
-            b{
-                font-size: 22px;
-                line-height: 20px;
-                letter-spacing: normal;
-            }
-        }
-        .total-bottom{
-            align-items: flex-start;
-        }
-    }
-    .loss{
-        background: #FFF1F0;
-        .top-left b{
-            color: #FF4D4F;
-        }
-    }
-    .gain{
-        background: #EFFFE0;
-        .top-left b{
-            color: #00C261;
-        }
-    }
+::v-deep .el-form-item {
+  margin: 0;
 }
 </style>
\ No newline at end of file