[add][ui]

package.json

@@ -12,12 +12,14 @@
   },
   "dependencies": {
     "axios": "^0.26.1",
+    "clipboard": "^2.0.10",
     "core-js": "^3.8.3",
     "element-plus": "^2.1.4",
     "moment": "^2.29.1",
     "node-sass": "^7.0.1",
     "postcss-import": "^14.0.2",
     "postcss-url": "^10.1.3",
+    "qrcode": "^1.5.0",
     "sass-loader": "^12.6.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.14"

src/assets/svg/icon-menu.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7028 6.9369C16.7028 8.9158 18.3455 10.5254 20.3662 10.5254H24V20.3868C24 22.5486 22.2406 24.308 20.0788 24.308H9.92122C7.75941 24.308 6 22.5486 6 20.3868V6.92122C6 4.75941 7.75941 3 9.92122 3H16.7028V6.9369ZM15.0183 8.49598H10.888C10.5877 8.49598 10.2997 8.61528 10.0874 8.82762C9.87503 9.03997 9.75573 9.32797 9.75573 9.62828C9.75573 9.92858 9.87503 10.2166 10.0874 10.4289C10.2997 10.6413 10.5877 10.7606 10.888 10.7606H15.0183C15.3186 10.7606 15.6066 10.6413 15.8189 10.4289C16.0313 10.2166 16.1506 9.92858 16.1506 9.62828C16.1506 9.32797 16.0313 9.03997 15.8189 8.82762C15.6066 8.61528 15.3186 8.49598 15.0183 8.49598ZM10.888 19.4479H19.0405C19.3409 19.4479 19.6289 19.3286 19.8412 19.1162C20.0535 18.9039 20.1728 18.6159 20.1728 18.3156C20.1728 18.0153 20.0535 17.7273 19.8412 17.5149C19.6289 17.3026 19.3409 17.1833 19.0405 17.1833H10.888C10.5877 17.1833 10.2997 17.3026 10.0874 17.5149C9.87503 17.7273 9.75573 18.0153 9.75573 18.3156C9.75573 18.6159 9.87503 18.9039 10.0874 19.1162C10.2997 19.3286 10.5877 19.4479 10.888 19.4479ZM10.888 15.1034H19.0405C19.3409 15.1034 19.6289 14.9841 19.8412 14.7717C20.0535 14.5594 20.1728 14.2714 20.1728 13.9711C20.1728 13.6708 20.0535 13.3828 19.8412 13.1704C19.6289 12.9581 19.3409 12.8388 19.0405 12.8388H10.888C10.5877 12.8388 10.2997 12.9581 10.0874 13.1704C9.87503 13.3828 9.75573 13.6708 9.75573 13.9711C9.75573 14.2714 9.87503 14.5594 10.0874 14.7717C10.2997 14.9841 10.5877 15.1034 10.888 15.1034ZM23.309 8.25917H20.3633C19.5916 8.25917 18.9627 7.66515 18.9627 6.93526V3.41817L23.309 8.25917Z" fill="#FFBF60"/>
+</svg>

src/router/popup.js

@@ -5,8 +5,11 @@ import Home from '@/view/popup/popup.vue'
 import Withdraw from '@/view/popup/withdraw/index.vue'
 import WithdrawInfo from '@/view/popup/withdraw/info.vue'
 import WithdrawConfirm from '@/view/popup/withdraw/confirm.vue'
-
+import WithdrawSuccess from '@/view/popup/withdraw/success.vue'
+import WithdrawHome from '@/view/popup/withdraw/home.vue'
+import Transactions from '@/view/popup/transactions.vue'
 import TopUpInfo from '@/view/popup/top-up/info.vue'
+import TopUpHome from '@/view/popup/top-up/home.vue'
 
 // 2. 定义路由配置
 const routes = [
@@ -20,6 +23,12 @@ const routes = [
         name: 'withdraw',
         component: Withdraw
     },
+    {
+        path: '/withdraw/home',
+        name: 'WithdrawHome',
+        component: WithdrawHome
+    },
+
     {
         path: '/withdraw/info',
         name: 'WithdrawInfo',
@@ -30,10 +39,26 @@ const routes = [
         name: 'WithdrawConfirm',
         component: WithdrawConfirm,
     },
+    {
+        path: '/withdraw/success',
+        name: 'WithdrawSuccess',
+        component: WithdrawSuccess,
+    },
+    
+    {
+        path: '/top-up/home',
+        name: 'TopUpHome',
+        component: TopUpHome
+    },
     {
         path: '/top-up/info',
         name: 'TopUpInfo',
         component: TopUpInfo
+    },
+    {
+        path: '/transactions',
+        name: 'Transactions',
+        component: Transactions
     }
 ]
 

src/view/components/options-transactions.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="com-wrapper">
-        <div class="com-nav-bar">
+        <!-- <div class="com-nav-bar">
             <img
                 :src="require('@/assets/svg/icon-bar-arrow-left.svg')"
                 class="icon"
                 @click="back"
             />
             Transactions
-        </div>
+        </div> -->
         <div class="list-wrapper" ref="listWrapper" @scroll="listScroll">
             <template v-if="!dataList.length">
                 <img
@@ -88,7 +88,9 @@
                                     <!-- 提现状态（0：已申请，1：支付中，2：提现成功，3：提现失败） -->
                                     <template v-if="item.bizData.withdrawStatus == 1">
                                         <div class="balance">
-                                            -${{item.trxAmountValue/100}}     
+                                            -{{item.trxAmountValue/100}} 
+                                            <span>{{item.trxAmountCurrencyCode}}</span>
+                                            <img src="" alt="">
                                         </div>
                                         <div class="desc">
                                             in progress
@@ -96,24 +98,32 @@
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 2">
                                         <div class="balance">
-                                            -${{item.trxAmountValue/100}}     
+                                            -{{item.trxAmountValue/100}}     
+                                            <span>{{item.trxAmountCurrencyCode}}</span>
+                                            <img src="" alt="">
                                         </div>
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 3">
                                         <div class="balance">
-                                            -${{item.trxAmountValue/100}}  
+                                            -{{item.trxAmountValue/100}}  
+                                            <span>{{item.trxAmountCurrencyCode}}</span>
+                                            <img src="" alt="">
                                         </div>
                                         <div class="desc">
                                             Withdrawal failed
                                         </div>
                                     </template>
                                     <template v-else>
-                                        -${{item.trxAmountValue/100}}
+                                        -{{item.trxAmountValue/100}}
+                                        <span>{{item.trxAmountCurrencyCode}}</span>
+                                            <img src="" alt="">
                                     </template>
                                 </template>
                                 <!-- 收入 -->
                                 <template v-else>
-                                    ${{item.trxAmountValue/100}}
+                                    {{item.trxAmountValue/100}}
+                                    <span>{{item.trxAmountCurrencyCode}}</span>
+                                            <img src="" alt="">
                                 </template>
                             </div>
                         </div>
@@ -211,8 +221,9 @@ const listScroll = (e) => {
     }
     .list-wrapper {
         width: 100%;
-        height: calc(100% - 51px);
-        overflow-y: scroll;
+        // height: calc(100% - 51px);
+            height: 100%;
+        overflow-y: auto;
         position: relative;
         .icon-empty {
             position: absolute;
@@ -251,7 +262,7 @@ const listScroll = (e) => {
                 align-items: center;
                 border-bottom: 1px solid #d1d1d1;
                 box-sizing: border-box;
-                padding-right: 20px;
+                padding-right: 12px;
                 .left {
                     .nickname {
                         font-weight: 500;
@@ -270,6 +281,14 @@ const listScroll = (e) => {
                     .msg {
                         font-weight: 500;
                         font-size: 14px;
+                        span{
+                            color: #E29A2E;
+                        }
+                        img{
+                            width: 14px;
+                            height: 14px;
+                            margin-left: 4px;
+                        }
 
                         .balance {
                             text-align: right;

src/view/popup/components/head.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="head" :class="{ 'border': show_state != 'home' }">
+        <template v-if="show_state == 'home'">
+            <div class="logo">
+                <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
+                <span>DeNet</span>
+            </div>
+        </template>
+        <template v-else>
+            <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back" @click="clickBack">
+            <div class="title">{{ props.title }}</div>
+            <img :src="require('@/assets/svg/icon-refresh.svg')" alt="" class="refresh" v-if="show_refresh"
+                @click="clickRefresh" :class="{ transform_rotate: state.rotate }">
+
+        </template>
+        <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more" v-if="props.show_more"
+            @click="state.show_option = true">
+        <div class="area-option" v-if="state.show_option" @click="state.show_option = false">
+            <div class="option">
+                <div class="item" @click="clickItem('/transactions')">
+                    <img :src="require('@/assets/svg/icon-menu.svg')" alt="">
+                    <span>Transactions</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+/* eslint-disable */
+import { defineProps, defineEmits, reactive, toRaw, toRefs, ref } from "vue";
+import router from "@/router/popup.js";
+
+let props = defineProps({
+    title: String,
+    show_state: String,
+    show_refresh: Boolean,
+    show_option: Boolean,
+    show_more: Boolean
+})
+
+let state = reactive({
+    show_option: ref(props.show_option),
+    rotate: false
+})
+
+const emit = defineEmits(['on-refresh'])
+
+function clickBack() {
+    router.back()
+}
+
+function clickRefresh() {
+    if (state.rotate) {
+        return
+    }
+    state.rotate = true
+    emit('on-refresh')
+    setTimeout(() => {
+        state.rotate = false
+    }, 1000)
+}
+
+function clickItem(path) {
+    router.push(path)
+}
+
+</script>
+<style lang="scss" scoped>
+.border {
+    border-bottom: 1px solid #DBDBDB;
+}
+
+.head {
+    height: 48px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px;
+
+    .logo {
+        display: flex;
+        align-items: center;
+
+        span {
+            font-size: 13px;
+            margin-left: 5px;
+            font-weight: 500;
+
+        }
+
+        img {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .area-option {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 111;
+
+        .option {
+            position: absolute;
+            top: 43px;
+            left: 120px;
+            background: #fff;
+            filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
+            width: 240px;
+            border-radius: 15px;
+            overflow: hidden;
+
+            .item {
+                width: 100%;
+                height: 50px;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                border-top: 1px solid #E9E9E9;
+
+                img {
+                    margin-left: 15px;
+                    width: 30px;
+                    height: 30px;
+                    margin-right: 6px;
+                }
+
+                span {
+                    font-weight: 500;
+                    font-size: 14px;
+                }
+            }
+
+            .item:first-child {
+                border-top: 0;
+            }
+
+            .item:hover {
+                background: #F5F5F5;
+            }
+        }
+    }
+
+    .transform_rotate {
+        transform: rotate(360deg);
+        transition-duration: 1s;
+    }
+
+    img {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+    }
+
+    .refresh {
+        margin-right: 20px;
+    }
+
+    .title {
+        padding-left: 16px;
+        flex: 1;
+        color: #000000;
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+</style>

src/view/popup/components/state-page.vue

@@ -5,21 +5,35 @@
             <div>
                 <div class="title">Submitted successfully</div>
                 <div class="desc">
-                    Please wait for a while,<br />
-                    then check the balance with paypal
+                    <p v-for="item,i in props.text"  v-bind:key="i">{{ item }}</p>
                 </div>
             </div>
         </div>
-        <div class="confirm-btn">
-            Done
+
+        <div class="footer">
+            <div class="confirm-btn" @click="clickBtn">
+                Done
+            </div>
         </div>
     </div>
 </template>
+<script setup>
+import { defineProps, defineEmits } from "vue";
+const props = defineProps({
+    text: Array,
+})
+const emit = defineEmits(['on-done'])
+function clickBtn() {
+    emit('on-done')
+}
+
+</script>
 <style lang="scss" scoped>
 .state {
     width: 100%;
     height: 100%;
     position: relative;
+
     .withdraw-status {
         text-align: center;
 
@@ -37,27 +51,37 @@
         .desc {
             font-size: 15px;
             color: rgba($color: #000000, $alpha: 0.5);
+
+            p {
+                margin: 0;
+                padding: 0;
+            }
         }
     }
 
-    .confirm-btn {
-        width: 335px;
-        height: 60px;
-        text-align: center;
-        line-height: 60px;
-        border-radius: 100px;
-        background: #389aff;
-        font-weight: 600;
-        font-size: 18px;
-        color: #fff;
-        position: absolute;
-        left: 50%;
-        bottom: 35px;
-        transform: translateX(-50%);
+    .footer {
+        border-top: 1px solid #DBDBDB;
+        bottom: 0;
+        height: 80px;
         display: flex;
-        align-items: center;
+        position: absolute;
         justify-content: center;
-        cursor: pointer;
+        width: 100%;
+        bottom: 0;
+        align-items: center;
+
+        .confirm-btn {
+            width: 343px;
+            height: 46px;
+            line-height: 46px;
+            text-align: center;
+            background: #389AFF;
+            border-radius: 1000px;
+            font-weight: 600;
+            font-size: 18px;
+            color: #fff;
+            cursor: pointer;
+        }
     }
 }
 </style>

src/view/popup/popup.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
         <template v-if="isLogin && homeVisibility">
-            <div class="nav-bar">
+            <!-- <div class="nav-bar">
                 <div class="item left">
                     <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
                     DeNet
@@ -10,7 +10,8 @@
                     <img :src="require('@/assets/svg/icon-option-list.svg')" />
                     Transactions
                 </div>
-            </div>
+            </div> -->
+            <v-head  :show_more="true" :show_state="'home'"></v-head>
             <div class="content">
                 <img :src="require('@/assets/svg/icon-money.svg')" class="icon-money" />
                 <div class="msg" v-show="walletWithdrawConfig.withdrawUSDPaypalFeeDesc">
@@ -179,6 +180,8 @@ import {
 } from "@/uilts/chromeExtension";
 import { getBalance, getMineLuckdropRecords, getWithdrawConfig } from "@/http/account";
 import router from "@/router/popup.js";
+import VHead from '@/view/popup/components/head.vue'
+
 
 var moment = require("moment");
 
@@ -392,10 +395,12 @@ const withdrawBack = () => {
     }
 };
 
-const showTransactions = () => {
-    homeVisibility.value = false;
-    transactionsVisibility.value = true;
-};
+
+// const showTransactions = () => {
+//     // homeVisibility.value = false;
+//     // transactionsVisibility.value = true;
+//     router.push('/transactions')
+// };
 
 // const clickWithdraw = () => {
 //     if (isRequestWithdrawBalance.value) {
@@ -441,10 +446,10 @@ const sendTwitter = (params) => {
 };
 // 点击提现
 const clickWithdraw = ()=>{
-    router.push('/withdraw/info');
+    router.push('/withdraw/home');
 }
 const clickTopUp = ()=>{
-    router.push('/top-up/info');
+    router.push('/top-up/home');
 }
 
 </script>

src/view/popup/top-up/home.vue

@@ -0,0 +1,27 @@
+<template>
+    <!-- 公共组件 -->
+    <div class="info">
+        <v-head :title="'Withdraw'" :show_more="true" :show_refresh="true" ></v-head>
+        <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency"></currency-list>
+    </div>
+
+</template>
+
+<script setup>
+import VHead from '@/view/popup/components/head.vue'
+import CurrencyList from "@/view/components/currency-list.vue";
+
+import router from "@/router/popup.js";
+
+function selectCurrency(){
+    router.push('/top-up/info');
+}
+</script>
+
+
+<style lang='scss' scoped>
+.info {
+    height: 100%;
+    overflow: hidden;
+}
+</style>

src/view/popup/top-up/info.vue

@@ -1,11 +1,9 @@
 <template>
     <!-- 公共组件 -->
     <div class="info">
-        <div class="head">
-            <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back">
-            <div class="title">Top Up</div>
-            <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more">
-        </div>
+
+        <v-head :title="'Top Up'"></v-head>
+
         <!-- 内容 -->
         <div class="content">
             <div class="area-input-1">
@@ -22,14 +20,13 @@
                     <div class="box">
                         <img src="" alt="">
                         <span>BNB Chain</span>
-                        <img :src="require('@/assets/svg/icon-botton-up.svg')" alt="" class="up">
                     </div>
                 </div>
             </div>
             <div class="info">
-                <img src="" alt="">
+                <canvas id="canvas"></canvas>
                 <div class="txt">TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG</div>
-                <div class="btn">Copy</div>
+                <div class="copy-btn" :data-clipboard-text="'TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG'">Copy</div>
             </div>
 
             <div class="tips">
@@ -50,6 +47,63 @@
 <script setup>
 /* eslint-disable */
 import { onMounted, ref } from "vue";
+import VHead from '@/view/popup/components/head.vue'
+import { ElMessage } from 'element-plus'
+
+var QRCode = require('qrcode')
+var ClipboardJS = require('clipboard')
+
+
+function createQRCode() {
+    var canvas = document.getElementById('canvas')
+    QRCode.toCanvas(canvas, 'TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG', {
+        width: 150,
+        height: 150,
+        scale: 10, color: {
+            dark: '#000', // 二维码前景颜色
+            light: '#F7F7F7' // 二维码背景颜色
+        }
+
+    }, function (error) {
+        if (error) console.error(error)
+        console.log('success!');
+    })
+}
+function copyToken() {
+    var clipboard = new ClipboardJS('.copy-btn');
+    clipboard.on('success', function (e) {
+        ElMessage({
+            message: 'copy success',
+            grouping: true,
+            type: 'success',
+            offset: 5
+        })
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+
+        e.clearSelection();
+    });
+
+    clipboard.on('error', function (e) {
+
+        ElMessage({
+            message: 'copy error',
+            grouping: true,
+            type: 'error',
+            offset: 5
+        })
+        console.error('Action:', e.action);
+        console.error('Trigger:', e.trigger);
+    });
+}
+
+onMounted(() => {
+    createQRCode()
+    copyToken()
+})
+
+
 </script>
 
 
@@ -58,30 +112,6 @@ import { onMounted, ref } from "vue";
     position: relative;
     height: 100%;
 
-    .head {
-        height: 48px;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 12px;
-
-        .back,
-        .more {
-            width: 24px;
-            height: 24px;
-            cursor: pointer;
-        }
-
-        .title {
-            padding-left: 16px;
-            flex: 1;
-            color: #000000;
-            font-size: 16px;
-            font-weight: 500;
-        }
-    }
-
     .content {
         padding: 16px 16px 0 16px;
 
@@ -142,10 +172,8 @@ import { onMounted, ref } from "vue";
             padding-bottom: 20px;
             margin-top: 20px;
 
-            img {
+            canvas {
                 margin-top: 17px;
-                width: 150px;
-                height: 150px;
             }
 
             .txt {
@@ -154,12 +182,16 @@ import { onMounted, ref } from "vue";
                 font-size: 15px;
             }
 
-            .btn {
+            .copy-btn {
+                cursor: pointer;
                 margin-top: 22px;
                 width: 160px;
                 height: 40px;
                 line-height: 40px;
                 text-align: center;
+                font-size: 16px;
+                color: #389AFF;
+
                 border: 1px solid #389AFF;
                 border-radius: 100px;
 
@@ -173,9 +205,11 @@ import { onMounted, ref } from "vue";
             .tip-title {
                 color: #000000;
             }
-            .tip-content{
+
+            .tip-content {
                 color: red;
             }
+
             .tip-content {
                 color: #000000;
             }

src/view/popup/transactions.vue

@@ -0,0 +1,23 @@
+<template>
+    <!-- 公共组件 -->
+    <div class="info">
+        <v-head :title="'Transactions'" :show_more="false" @onBack="clickBack" ></v-head>
+        <options-transactions style="height: calc(100% - 48px);"></options-transactions>
+    </div>
+
+</template>
+
+<script setup>
+import VHead from '@/view/popup/components/head.vue'
+import OptionsTransactions from "@/view/components/options-transactions";
+
+
+</script>
+
+
+<style lang='scss' scoped>
+.info{
+    height: 100%;
+    overflow: hidden;
+}
+</style>

src/view/popup/withdraw/confirm.vue

@@ -1,11 +1,8 @@
 <template>
     <!-- 公共组件 -->
     <div class="confirm">
-        <div class="head">
-            <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back">
-            <div class="title">Withdraw</div>
-            <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more">
-        </div>
+        <v-head :title="'Withdraw'" :show_more="true" ></v-head>
+
         <!-- 内容 -->
         <div class="content">
             <div class="order">
@@ -47,7 +44,7 @@
                 <span>同意用户协议</span>
             </div>
             <div class="right">
-                <div class="btn">Confirm</div>
+                <div class="btn" @click="clickBtn">Confirm</div>
             </div>
         </div>
     </div>
@@ -55,8 +52,14 @@
 </template>
 
 <script setup>
-/* eslint-disable */
-import { onMounted, ref } from "vue";
+import VHead from '@/view/popup/components/head.vue'
+
+import router from "@/router/popup.js";
+
+function clickBtn(){
+  router.push('/withdraw/success')
+}
+
 </script>
 
 
@@ -101,10 +104,12 @@ import { onMounted, ref } from "vue";
                 font-size: 15px;
                 color: #000000;
             }
-            .txt:first-child{
+
+            .txt:first-child {
                 margin-bottom: 9px;
             }
-            .txt:last-child{
+
+            .txt:last-child {
                 margin-top: 5px;
             }
 

src/view/popup/withdraw/home.vue

@@ -0,0 +1,27 @@
+<template>
+    <!-- 公共组件 -->
+    <div class="info">
+        <v-head :title="'Withdraw'" :show_more="true" ></v-head>
+        <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency"></currency-list>
+    </div>
+
+</template>
+
+<script setup>
+import VHead from '@/view/popup/components/head.vue'
+import CurrencyList from "@/view/components/currency-list.vue";
+
+import router from "@/router/popup.js";
+
+function selectCurrency(){
+  router.push('/withdraw/info')
+}
+</script>
+
+
+<style lang='scss' scoped>
+.info {
+    height: 100%;
+    overflow: hidden;
+}
+</style>

src/view/popup/withdraw/info.vue

@@ -1,11 +1,7 @@
 <template>
   <!-- 公共组件 -->
   <div class="info">
-    <div class="head">
-      <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back">
-      <div class="title">Withdraw</div>
-      <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more">
-    </div>
+    <v-head :title="'Withdraw'" :show_more="true" ></v-head>
     <!-- 内容 -->
     <div class="content">
       <div class="area-input-1">
@@ -59,7 +55,7 @@
         <div class="txt">Network fee: 0.8 USDT</div>
       </div>
       <div class="right">
-        <div class="btn">Confirm</div>
+        <div class="btn" @click="clickBtn">Confirm</div>
       </div>
     </div>
   </div>
@@ -67,8 +63,12 @@
 </template>
 
 <script setup>
-/* eslint-disable */
-import { onMounted, ref } from "vue";
+import VHead from '@/view/popup/components/head.vue'
+import router from "@/router/popup.js";
+
+function clickBtn(){
+  router.push('/withdraw/confirm')
+}
 </script>
 
 
@@ -77,30 +77,6 @@ import { onMounted, ref } from "vue";
   position: relative;
   height: 100%;
 
-  .head {
-    height: 48px;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 12px;
-
-    .back,
-    .more {
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-    }
-
-    .title {
-      padding-left: 16px;
-      flex: 1;
-      color: #000000;
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-
   .content {
     padding: 16px 16px 0 16px;
 
@@ -135,7 +111,8 @@ import { onMounted, ref } from "vue";
             width: 20px;
             height: 20px;
           }
-          .up{
+
+          .up {
             width: 13px;
             height: 12px;
             cursor: pointer;
@@ -160,6 +137,8 @@ import { onMounted, ref } from "vue";
         font-size: 12px;
         color: #8B8B8B;
         margin-bottom: 6px;
+        display: flex;
+        justify-content: space-between;
       }
 
       .box {
@@ -188,6 +167,7 @@ import { onMounted, ref } from "vue";
       }
 
       .error {
+        margin-top: 10px;
         color: #FFA621;
         font-weight: 400;
         font-size: 12px;
@@ -222,6 +202,7 @@ import { onMounted, ref } from "vue";
 
     .left {
       margin-left: 16px;
+
       .txt {
         color: #9D9D9D;
         font-weight: 400;
@@ -237,6 +218,7 @@ import { onMounted, ref } from "vue";
 
     .right {
       margin-right: 16px;
+
       .btn {
         cursor: pointer;
         width: 140px;

src/view/popup/withdraw/success.vue

@@ -0,0 +1,23 @@
+<template>
+    <!-- 公共组件 -->
+    <div class="info">
+        <v-head :title="'Withdraw'" :show_more="true"></v-head>
+        <state-page style="height: calc(100% - 48px);" :text="['123', '123']"></state-page>
+    </div>
+
+</template>
+
+<script setup>
+import VHead from '@/view/popup/components/head.vue'
+import StatePage from "@/view/popup/components/state-page.vue";
+
+
+</script>
+
+
+<style lang='scss' scoped>
+.info {
+    height: 100%;
+    overflow: hidden;
+}
+</style>