添加元宝兑换页面

src/assets/svg/add-icon.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 3">
+<g id="&#226;&#158;&#149;">
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" fill="#4765DD"/>
+</g>
+<path id="Union" d="M10 6C10.5523 6 11 6.44772 11 7V9H13C13.5523 9 14 9.44772 14 10C14 10.5523 13.5523 11 13 11H11V13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13V11H7C6.44772 11 6 10.5523 6 10C6 9.44772 6.44772 9 7 9H9V7C9 6.44772 9.44772 6 10 6Z" fill="white"/>
+</g>
+</svg>

src/assets/svg/del-icon.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 20">
+<g id="&#226;&#158;&#149;">
+<path id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" fill="#FF0000"/>
+</g>
+<path id="Union" d="M13 9C13.5523 9 14 9.44772 14 10C14 10.5523 13.5523 11 13 11H7C6.44772 11 6 10.5523 6 10C6 9.44772 6.44772 9 7 9H13Z" fill="white"/>
+</g>
+</svg>

src/views/me/addressManagement/index.vue

@@ -1,10 +1,24 @@
 <template>
     <div class="container">
         <div class="content">
-            <div class="no-more">
+            <div class="card-box">
+                <div class="box-item" v-for="item in 3">
+                    <van-image
+                        width="32px"
+                        height="32px"
+                        round
+                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                    />
+                    <div class="card-text">
+                        <div>升华</div>
+                        <div class="address">121332546</div>
+                    </div>
+                </div>
+            </div>
+            <!-- <div class="no-more">
                 <svg-icon style="width: 302px; height: 222px;" name="no-address"/>
                 <div class="no-more-text">暂无新地址</div>
-            </div>
+            </div> -->
         </div>
         <van-button class="footer-btn" size="large" @click="goToAdd">添加新地址</van-button>
     </div>
@@ -27,6 +41,40 @@ const goToAdd = () => {
     box-sizing: border-box;
     .content{
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .card-box{
+            background-color: #fff;
+            border-radius: 12px;
+            padding: 0 17px;
+            margin-bottom: 17px;
+            // flex: 1;
+            overflow: auto;
+            .box-item{
+                display: flex;
+                align-items: center;
+                padding: 15px 0 14px;
+                border-bottom: 1px solid #F2F2F2;
+                .card-text{
+                    margin-left: 12px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: @theme-color1;
+                    .address{
+                        font-size: 12px;
+                        color: #8D8D8D;
+                    }
+                }
+            }
+            .box-item:last-child{
+                border-bottom: 0;
+            }
+        }
+        .card-box::-webkit-scrollbar{
+            width: 0;
+        }
         .no-more{
             display: flex;
             flex-direction: column;

src/views/me/index.vue

@@ -69,7 +69,7 @@
 import { useRouter } from 'vue-router'
 const router = useRouter();
 const vanListConfig = [
-  { title: '元宝兑换', icon:"ingot",  url: '/' },
+  { title: '元宝兑换', icon:"ingot",  url: 'exchange' },
   { title: '竞赛', icon:"competition",  url: '/' },
   { title: '节点分红', icon:"red-envelope",  url: 'nodeDividend' },
   { title: '帮助中心', icon:"help",  url: '/' },

src/views/wallet/index.vue

@@ -36,7 +36,7 @@
             <svg-icon style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
           </div>
         </div>
-        <svg-icon style="width: 24px; height: 24px;" name="right" @click="goDetail"/>
+        <svg-icon style="width: 24px; height: 24px;" name="right" @click="goToPage('walletDetail')"/>
       </div>
       <div class="card-box">
         <div class="box-cont" @click="goToPage('exchange')">
@@ -63,10 +63,10 @@
       <div class="list-box">
         <div class="list-title">
           <div>代币</div>
-          <svg-icon style="width: 24px; height: 24px;" name="add" />
+          <svg-icon style="width: 24px; height: 24px;" name="add" @click="changePop(1)"/>
         </div>
         <div class="list-ul">
-          <div class="list-li" v-for="item in 10" @click="showHistory = true">
+          <div class="list-li" v-for="item in 10" @click="changePop(2)">
             <div class="list-li-lf">
               <svg-icon style="width: 30px; height: 30px;margin-right: 8px;" name="acc" />
               <div>ACC</div>
@@ -122,9 +122,23 @@
         <div class="pop-content" style="height:500px">
           <div class="pop-title">
             <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showHistory = false"/>
-            <div class="title">历史记录</div>
+            <div class="title">{{ type == 1?'添加代币':'历史记录' }}</div>
           </div>
-          <div class="pop-list">
+          <!-- 1 -->
+          <div class="pop-ul" v-if="type == 1">
+            <div class="pop-li" v-for="(item,i) in 3">
+              <div class="pop-li-lf">
+                <svg-icon style="width: 32px; height: 32px;margin-right: 6px;" name="acc" />
+                <div>
+                  <div>STT</div>
+                  <div class="pop-address">0x712f...7b27</div>
+                </div>
+              </div>
+              <svg-icon style="width: 20px; height: 20px;" :name="i == 0?'add-icon':'del-icon'" />
+            </div>
+          </div>
+          <!-- 2 -->
+          <div class="pop-list" v-if="type == 2">
             <div class="pop-list-box" v-for="(item,i) in 10">
               <svg-icon style="width: 24px; height: 24px;color: #fff;" :name="i == 0?'fs':'js'" />
               <div class="pop-list-ul">
@@ -166,12 +180,14 @@
   const isShow = ref(true);
   const showWallet = ref(false);
   const showHistory = ref(false);
-  const goDetail = () => {
-    router.push('walletDetail')
-  }
+  const type = ref('');
   const goToPage = (url) => {
     router.push(url)
   }
+  const changePop = (val) => {
+    showHistory.value = true;
+    type.value = val;
+  }
   </script>
   
   <style lang="less" scoped>
@@ -295,7 +311,7 @@
       background: #FFFFFF;
       border-radius: 12px;
       margin: 25px 17px;
-      padding: 17px;
+      padding: 16px;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
@@ -377,7 +393,7 @@
           overflow: auto;
           .tree-lf-icon{
             height: 67px;
-            padding: 17px;
+            padding: 16px;
             box-sizing: border-box;
             display: flex;
             align-items: center;
@@ -407,7 +423,7 @@
               background: #F2F2F2;
               border-radius: 8px;
               border: 1px solid #F2F2F2;
-              padding: 14px 17px;
+              padding: 14px 16px;
               display: flex;
               align-items: center;
               margin-bottom: 12px;
@@ -496,6 +512,31 @@
       .pop-list::-webkit-scrollbar{
         width: 0;
       }
+      .pop-ul{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        margin: 16px 16px 0;
+        .pop-li{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 16px;
+          .pop-li-lf{
+            display: flex;
+            align-items: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #4F4F4F;
+            .pop-address{
+              font-size: 12px;
+              color: #8D8D8D;
+            }
+          }
+        }
+      }
     }
   }
   </style>

src/views/wallet/transferDetail/index.vue

@@ -3,7 +3,7 @@
         <div class="content">
             <div class="card-box">
                 <div class="card-title">选择币种</div>
-                <div class="card-input" @click="showWallet = true">
+                <div class="card-input" @click="selectPop(1)">
                     <svg-icon style="width: 30px; height: 30px;" name="acc" />
                     <div class="card-text">STT</div>
                     <svg-icon style="width: 16px; height: 16px;" name="down" />
@@ -49,14 +49,14 @@
                 </div>
             </div>
         </div>
-        <van-button class="footer-btn" type="primary" size="large">确认</van-button>
-        <van-popup v-model:show="showWallet" position="bottom" round style="height:368px">
-            <div class="pop-content" style="height:368px">
+        <van-button class="footer-btn" type="primary" size="large" @click="selectPop(2)">确认</van-button>
+        <van-popup v-model:show="showWallet" position="bottom" round style="height:400px">
+            <div class="pop-content" style="height:400px">
                 <div class="pop-title">
                     <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showWallet = false"/>
-                    <div class="title">选择币种</div>
+                    <div class="title">{{selectType == 1?'选择币种':'交易详情'}}</div>
                 </div>
-                <div class="list-ul">
+                <div class="list-ul" v-if="selectType == 1">
                     <div class="list-li" v-for="item in 10" @click="showHistory = true">
                         <div class="list-li-lf">
                             <svg-icon style="width: 42px; height: 42px;margin-right: 12px;" name="acc" />
@@ -68,6 +68,24 @@
                         </div>
                     </div>
                 </div>
+                <div class="pop-detail" v-if="selectType == 2">
+                    <div class="pop-detail-title">-0.01ACC</div>
+                    <div class="pop-detail-cell">
+                        <div class="cell-label">付款地址：</div>
+                        <div class="cell-text">0x01Ce8d3Ae9240B029E0868f811dfF77a4F5320f2</div>
+                    </div>
+                    <div class="pop-detail-cell">
+                        <div class="cell-label">收款地址：</div>
+                        <div class="cell-text">0x01Ce8d3Ae9240B029E0868f811dfF77a4F5320f2</div>
+                    </div>
+                    <div class="pop-detail-cell">
+                        <div class="cell-label">矿工费：</div>
+                        <div class="cell-text">0.000388684557647ACC</div>
+                    </div>
+                    <div class="pop-btn">
+                        <van-button class="btn" type="primary" size="large" color="#4765DD" @click="showWallet = false">确认</van-button>
+                    </div>
+                </div>
             </div>
         </van-popup>
     </div>
@@ -79,9 +97,14 @@ const router = useRouter();
 const walletAddress = ref('')
 const unitNum = ref('')
 const showWallet = ref(false)
+const selectType = ref('');
 const goToAddress = () => {
     router.push('addressManagement')
 }
+const selectPop = (type) => {
+    showWallet.value = true;
+    selectType.value = type;
+}
 </script>
 
 <style lang="less" scoped>
@@ -194,14 +217,14 @@ const goToAddress = () => {
             display: flex;
             flex-direction: column;
             overflow: auto;
-            margin: 17px;
+            margin: 16px;
             .list-li{
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 font-family: PingFang SC, PingFang SC;
                 font-weight: 500;
-                margin-bottom: 17px;
+                margin-bottom: 16px;
                 .list-li-lf{
                     display: flex;
                     align-items: center;
@@ -227,6 +250,48 @@ const goToAddress = () => {
         .list-ul::-webkit-scrollbar{
             width: 0;
         }
+        .pop-detail{
+            padding: 17px 17px 0;
+            .pop-detail-title{
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                font-size: 17px;
+                color: #000000;
+                margin-bottom: 20px;
+                text-align: center;
+            }
+            .pop-detail-cell{
+                display: flex;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #4F4F4F;
+                padding: 10px 0;
+                border-bottom: 1px solid #F2F2F2;
+                .cell-label{
+                    width: 76px;
+                    flex-shrink: 0;
+                }
+                .cell-text{
+                    word-break: break-word;
+                }
+            }
+            .pop-detail-cell:last-child{
+                border-bottom: 0;
+            }
+            .pop-btn{
+                margin-top: 53px;
+                .btn{
+                    height: 40px;
+                    line-height: 40px;
+                    border-radius: 50px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 15px;
+                    color: #FFFFFF;
+                }
+            }
+        }
     }
 }
 </style>

src/views/wallet/walletDetail/index.vue

@@ -214,7 +214,7 @@ const confirm = () => {
           font-size: 15px;
           color: #FFFFFF;
         }
-      }
+    }
 }
 :deep(.van-popup--center) {
     margin: 0 40px !important;

src/views/wallet/ybExchange/index.vue

@@ -1,6 +1,46 @@
 <template>
-    <div>
+    <div class="container">
+        <div class="content">
+            <div class="card-border">
+                <div class="card-box">
+                    <van-image
+                        width="50px"
+                        height="50px"
+                        round
+                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                    />
+                    <div class="card-text">
+                        <div>元宝总额</div>
+                        <div class="balance">245.53</div>
+                    </div>
+                </div>
+            </div>
 
+            <div class="tab-box">
+                <div class="tab-item lf-bg">
+                    <div>可用元宝</div>
+                    <div class="lf-balance">245.53</div>
+                    <van-button class="tab-lf-btn" type="primary">兑换元宝</van-button>
+                </div>
+                <div class="tab-item ri-bg">
+                    <div>冻结元宝</div>
+                    <div class="lf-balance">245.53</div>
+                    <van-button class="tab-ri-btn" type="primary">取款(转出)</van-button>
+                </div>
+            </div>
+            <div class="list-box">
+                <div>明细</div>
+                <div class="list-box-ul">
+                    <div class="list-box-li" v-for="(item,i) in 10">
+                        <div>购买商品</div>
+                        <div class="list-box-li-text">
+                            <div>2023-09-08 18:23:13</div>
+                            <div :class="i == 0?'red':'green'">{{i == 0?'-':'+'}}1400.00</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -9,5 +49,134 @@
 </script>
 
 <style lang="less" scoped>
-
+.container{
+    height: calc(100vh - 44px);
+    display: flex;
+    flex-direction: column;
+    padding: 15px 17px;
+    box-sizing: border-box;
+    .content{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+    .card-border {
+        padding: 2px;
+        border-radius: 17px;
+        background: linear-gradient(90deg, rgba(71, 101, 221, 0.5), rgba(64, 164, 251, 0.5));
+        display: inline-block;
+        .card-box {
+            border-radius: 15px;
+            background-color: #F7F8FA;
+            display: flex;
+            align-items: center;
+            padding: 26px 25px;
+            .card-text{
+                margin-left: 8px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                font-size: 15px;
+                color: #000000;
+                .balance{
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: @theme-color1;
+                    margin-top: 3px;
+                }
+            }
+        }
+    }
+    .tab-box{
+        margin: 15px 0 33px;
+        display: flex;
+        gap: 17px;
+        .tab-item{
+            width: calc(100% / 2);
+            border-radius: 8px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: #000000;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 6px 23px 10px;
+            .lf-balance{
+                font-weight: 500;
+                font-size: 17px;
+                color: @theme-color1;
+                margin-bottom: 10px;
+            }
+            .tab-lf-btn{
+                background: #6C8AFF;
+                border-radius: 8px;
+                width: 100%;
+                color: #FFFFFF;
+                padding: 6px 0 !important;
+                height: 33px !important;
+                line-height: 33px !important;
+                border: none !important;
+            }
+            .tab-ri-btn{
+                background: #73BBFF;
+                border-radius: 8px;
+                width: 100%;
+                color: #FFFFFF;
+                padding: 6px 0 !important;
+                height: 33px !important;
+                line-height: 33px !important;
+                border: none !important;
+            }
+        }
+        .lf-bg{
+            background: rgba(71,101,221,0.05);
+        }
+        .ri-bg{
+            background: rgba(65,160,249,0.05);
+            color: #8D8D8D;
+        }
+    }
+    .list-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: #FFFFFF;
+        border-radius: 12px;
+        padding: 16px 17px 4px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        overflow: hidden;
+        .list-box-ul{
+            margin-top: 20px;
+            flex: 1;
+            overflow: auto;
+            .list-box-li{
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #000000;
+                margin-bottom: 17px;
+                .list-box-li-text{
+                    font-size: 12px;
+                    color: #8D8D8D;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .red{
+                        color: #FF0000;
+                    }
+                    .green{
+                        color: #00B42A;
+                    }
+                }
+            }
+        }
+        .list-box-ul::-webkit-scrollbar{
+          width: 0;
+        }
+    }
+}
 </style>