Merge branch 'faeture-1.0.1-ui' into test

package.json

@@ -19,7 +19,8 @@
     "postcss-import": "^14.0.2",
     "postcss-url": "^10.1.3",
     "sass-loader": "^12.6.0",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/assets/svg/icon-botton-up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2236 3.84766L6.00042 9.84766L0.777203 3.84766" stroke="#BBBBBB" stroke-width="1.5"/>
+</svg>

src/assets/svg/icon-enter.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11.5" fill="#C4C4C4" fill-opacity="0.01" stroke="#9A9A9A"/>
+<path d="M6 12.7949L9.99927 16.7945L17.2336 6.87267" stroke="#B6B6B6" stroke-width="1.8"/>
+</svg>

src/assets/svg/icon-more-l.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="5" r="2" fill="#4E4E4E"/>
+<circle cx="12" cy="11.5" r="2" fill="#4E4E4E"/>
+<circle cx="12" cy="18" r="2" fill="#4E4E4E"/>
+</svg>

src/entry/background.js

@@ -1,12 +1,12 @@
 console.log("hello world background todo something~");
-import {pageUrl } from '../http/configAPI'
+import {pageUrl } from '@/http/configAPI'
 import {
     backTwitterPinLoginToken,
     backTwitterPinLoginCode,
 } from "../logic/twitter.js";
 
-import { setChromeStorage, getChromeCookie, LANDING_PAGE, setChromeCookie, removeChromeCookie, LANDING_PAGE_MIND } from "../uilts/chromeExtension";
-import { guid } from '../uilts/help.js'
+import { setChromeStorage, getChromeCookie, LANDING_PAGE, setChromeCookie, removeChromeCookie, LANDING_PAGE_MIND } from "@/uilts/chromeExtension";
+import { guid } from '@/uilts/help.js'
 
 chrome.runtime.onInstalled.addListener(onInstalledMethod);
 

src/entry/content.js

@@ -14,7 +14,7 @@ import {
     addPinedPop
 } from "../logic/twitter.js";
 
-import { getChromeStorage } from "../uilts/chromeExtension";
+import { getChromeStorage } from "@/uilts/chromeExtension";
 
 port.onMessage.addListener(function (res) {
     switch (res.state) {

src/entry/options.js

@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
-import App from '../view/options.vue'
+import App from '@/view/options.vue'
 
 createApp(App).mount('#app')

src/entry/popup.js

@@ -1,4 +1,10 @@
 import { createApp } from 'vue'
-import App from '../view/popup.vue'
+import App from '@/view/popup/index.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+// 引入路由对象实例
+import router from '@/router/popup.js'
+app.use(router)
+console.log(router)
+app.mount('#app')

src/http/request.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
-import { getChromeStorage } from '../uilts/chromeExtension.js'
-import { baseAPIUrl, appVersionCode } from '../http/configAPI.js'
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { baseAPIUrl, appVersionCode } from '@/http/configAPI.js'
 
 let userInfo = '';
 let storage_mid = ''

src/iframe/home.js

@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
-import App from '../view/home.vue'
+import App from '@/view/home.vue'
 
 createApp(App).mount('#app')

src/iframe/publish.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from '../view/publish.vue'
+import App from '@/view/publish.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 

src/iframe/red-packet.js

@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
-import App from '../view/red-packet.vue'
+import App from '@/view/red-packet.vue'
 
 createApp(App).mount('#app')

src/logic/twitter.js

@@ -1,7 +1,7 @@
-import { getChromeStorage, setChromeStorage, LANDING_PAGE } from '../uilts/chromeExtension.js'
-import { throttle } from '../uilts/help'
+import { getChromeStorage, setChromeStorage, LANDING_PAGE } from '@/uilts/chromeExtension.js'
+import { throttle } from '@/uilts/help'
 import { getTtwitterRequestToken, twitterLogin } from '../server/twitter.js'
-import { srcPublishSuccess } from '../http/publishApi'
+import { srcPublishSuccess } from '@/http/publishApi'
 
 let dom = {};
 
@@ -135,7 +135,7 @@ export function addPinedPop() {
     popWrapper.id = 'de-pin-pop'
 
     let img = document.createElement('img');
-    img.src = require("../assets/img/img-pined-guide.png");
+    img.src = require("@/assets/img/img-pined-guide.png");
 
     let contentDom = document.createElement('div');
     contentDom.innerHTML = "<div style='font-weight: 500;font-size: 18px;margin-top: 20px;margin-bottom: 20px'>📌 Pin an Extension is more convenient to open😄</div><div style='display: flex; align-items: center; justify-content: space-between;'><div style='display: flex; align-items: center; font-size: 14px; color: #899099; cursor: pointer;'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #389AFF;cursor: pointer;'>Skip</div></div>"
@@ -374,7 +374,7 @@ function _setPublishContent(content) {
 function _createBtnDom(port) {
     let loadingImg = document.createElement('img');
     loadingImg.id = 'de-btn-loading'
-    loadingImg.src = require("../assets/img/icon-btn-loading.png");
+    loadingImg.src = require("@/assets/img/icon-btn-loading.png");
     loadingImg.style.cssText = 'width:20px;height: 20px;margin-right:3px;-webkit-animation:load 1.1s infinite linear;';
 
     let style = document.createElement('style');
@@ -388,7 +388,7 @@ function _createBtnDom(port) {
     deBtn.style.cssText = 'width:90%;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:17px;font-weight:700;border-radius:100px;cursor: pointer;display: flex;align-items: center;justify-content: center;';
 
     const deBtn1 = document.createElement('img');
-    let src = require("../assets/img/icon-gift-pack.png");
+    let src = require("@/assets/img/icon-gift-pack.png");
     const smallDeBtnStyle = 'width:20px;height: 20px;cursor: pointer;marign-left:4px;margin-right:4px';
     deBtn1.id = 'de-btn1';
     deBtn1.style.cssText = smallDeBtnStyle;
@@ -397,11 +397,11 @@ function _createBtnDom(port) {
     const deBtn2 = document.createElement('div');
     deBtn2.id = 'de-btn2';
     deBtn2.style.cssText = smallDeBtnStyle;
-    deBtn2.src = "../assets/img/icon-gift-pack.png"
+    deBtn2.src = "@/assets/img/icon-gift-pack.png"
 
     const deBtn3 = document.createElement('img');
     deBtn3.id = 'de-btn3'
-    deBtn3.src = require("../assets/img/icon-slider-de-net-btn.png");
+    deBtn3.src = require("@/assets/img/icon-slider-de-net-btn.png");
     deBtn3.style.cssText = 'width:52px;height: 52px;margin-top:20px;cursor: pointer;';
 
     deBtn.addEventListener('click', () => {

src/router/popup.js

@@ -0,0 +1,53 @@
+/* eslint-disable */
+import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
+
+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 TopUpInfo from '@/view/popup/top-up/info.vue'
+
+// 2. 定义路由配置
+const routes = [
+    {
+        path: "/",
+        name: 'home',
+        component: Home
+    },
+    {
+        path: '/withdraw',
+        name: 'withdraw',
+        component: Withdraw
+    },
+    {
+        path: '/withdraw/info',
+        name: 'WithdrawInfo',
+        component: WithdrawInfo,
+    },
+    {
+        path: '/withdraw/confirm',
+        name: 'WithdrawConfirm',
+        component: WithdrawConfirm,
+    },
+    {
+        path: '/top-up/info',
+        name: 'TopUpInfo',
+        component: TopUpInfo
+    }
+]
+
+
+// 3. 创建路由实例
+const router = createRouter({
+
+    // 4. 采用hash 模式
+    history: createWebHashHistory('popup.html'),
+    // 采用 history 模式
+    // history: createWebHistory('popup.html'),
+    routes, // short for `routes: routes`
+});
+console.log(process.env.BASE_URL)
+
+export default router
+

src/server/twitter.js

@@ -1,5 +1,5 @@
-import { appVersionCode,baseAPIUrl} from '../http/configAPI.js'
-import {getChromeStorage } from '../uilts/chromeExtension.js'
+import { appVersionCode,baseAPIUrl} from '@/http/configAPI.js'
+import {getChromeStorage } from '@/uilts/chromeExtension.js'
 
 export async function getTtwitterRequestToken() {
     let storage_mid = await getChromeStorage('mid') || ''

src/uilts/chromeExtension.js

@@ -1,4 +1,4 @@
-import { pageUrl } from "../http/configAPI.js"
+import { pageUrl } from "@/http/configAPI.js"
 
 export const LANDING_PAGE = {
     name: 'received_log',

src/view/components/custom-card-cover.vue

@@ -1,11 +1,11 @@
 <!-- 自定义卡片红包封面 -->
 <template>
     <div class="not-open">
-        <img class="cover" :src="require('../../assets/subject/001-card.png')"  />
-        <img class="open-gif" :src="require('../../assets/gif/001.gif')" />
+        <img class="cover" :src="require('@/assets/subject/001-card.png')"  />
+        <img class="open-gif" :src="require('@/assets/gif/001.gif')" />
 
         <img
-            :src="require('../../assets/svg/icon-open.svg')"
+            :src="require('@/assets/svg/icon-open.svg')"
             class="open"
             @click="open"
         />

src/view/components/follow-input.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="follow-input-wrapper">
         <div class="at-user-item" v-for="(item, index) in pageAtUserList" :key="index">
-            <img :src="require('../../assets/svg/icon-del-follows-user.svg')" 
+            <img :src="require('@/assets/svg/icon-del-follows-user.svg')" 
                 class="icon-del"
                 @click="delUser(item, index)">
             <pre :id='"pre" + index' class="at-user-input-placeholder">{{item.name}}</pre>
@@ -25,7 +25,7 @@
                         @mouseleave="onUserMouseLeave(item, index)"
                         @click="selectedUser(item, index)">
                         <div class="following" v-if="item.following">
-                            <img :src="require('../../assets/svg/icon-following-user.svg')">following 
+                            <img :src="require('@/assets/svg/icon-following-user.svg')">following 
                         </div>
                         <div class="content">
                             <img class="avatar" :src="item.avatarlUrl">
@@ -43,10 +43,10 @@
             @click="addInput"
             @mouseenter="handleMouseEn"
             @mouseleave="handleMouseLe">
-            <img :src="require('../../assets/svg/icon-add-user-default.svg')" 
+            <img :src="require('@/assets/svg/icon-add-user-default.svg')" 
                 class="icon-add"
                 v-if="!isActiveAddBtn">
-            <img :src="require('../../assets/svg/icon-add-user-active.svg')" 
+            <img :src="require('@/assets/svg/icon-add-user-active.svg')" 
                 class="icon-add"
                 v-else>
         </div>
@@ -57,9 +57,9 @@
 <script setup>
 /* eslint-disable */
 import { reactive, ref, onMounted, defineEmits, defineProps, watch } from "vue";
-import {searchTwitterUser} from "../../http/publishApi";
-import {getChromeStorage} from "../../uilts/chromeExtension"
-import {debounce} from "../../uilts/help";
+import {searchTwitterUser} from "@/http/publishApi";
+import {getChromeStorage} from "@/uilts/chromeExtension"
+import {debounce} from "@/uilts/help";
 
 const props = defineProps({
     atUserList: {

src/view/components/give-dialog.vue

@@ -772,6 +772,7 @@ onMounted(() => {
 .ql-container {
     height: 100px;
 }
+
 .overlay {
     position: fixed;
     top: 0;
@@ -1033,6 +1034,7 @@ onMounted(() => {
                                 align-items: center;
                                 font-size: 15px;
                                 font-weight: 500;
+
                                 .icon {
                                     margin-right: 10px;
                                 }
@@ -1065,13 +1067,16 @@ onMounted(() => {
                         align-items: center;
                         font-size: 15px;
                         font-weight: 500;
+
                         .icon-bot {
                             margin-right: 8px;
                         }
+
                         .icon-beta {
                             margin-left: 5px;
                             margin-right: 8px;
                         }
+
                         .icon-question {
                             cursor: pointer;
                         }
@@ -1086,6 +1091,7 @@ onMounted(() => {
                         font-size: 13px;
                         color: rgba(0, 0, 0, 0.3);
                     }
+
                     .row {
                         box-sizing: border-box;
                         padding-left: 4px;
@@ -1107,6 +1113,7 @@ onMounted(() => {
                     left: 0;
                     box-sizing: border-box;
                     padding-top: 16px;
+
                     .submit-btn {
                         width: calc(100% - 36px);
                         height: 46px;

src/view/components/option-login.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="login-wrapper">
         <div class="content">
-            <img :src="require('../../assets/svg/icon-login-denet-logo.svg')" class="logo">
+            <img :src="require('@/assets/svg/icon-login-denet-logo.svg')" class="logo">
             <div class="product-name">
                 DeNet
             </div>
         </div>
 
         <div class="login-btn" @click="login">
-            <img :src="require('../../assets/svg/icon-login-twitter-white.svg')" 
+            <img :src="require('@/assets/svg/icon-login-twitter-white.svg')" 
             class="login-btn-icon">
             Login with Twitter
         </div>

src/view/components/option-withdraw.vue

@@ -2,7 +2,7 @@
     <div class="withdraw-wrapper">
         <div class="nav-bar">
             <img
-                :src="require('../../assets/svg/icon-bar-arrow-left.svg')"
+                :src="require('@/assets/svg/icon-bar-arrow-left.svg')"
                 class="icon"
                 @click="back"
             />
@@ -15,7 +15,7 @@
                     <img
                         class="icon"
                         :src="
-                            require('../../assets/svg/icon-withdraw-paypal-logo.svg')
+                            require('@/assets/svg/icon-withdraw-paypal-logo.svg')
                         "
                     />
                 </div>
@@ -92,14 +92,14 @@
                 </div>
             </div>
             <div @click="withdraw" class="confirm-btn">
-                <img class="icon-loading" v-if="withdrawIng" :src="require('../../assets/svg/icon-btn-loading.svg')"  />
+                <img class="icon-loading" v-if="withdrawIng" :src="require('@/assets/svg/icon-btn-loading.svg')"  />
                 Confirm
             </div>
         </template>
         <template v-else>
             <div class="withdraw-status">
                 <img
-                    :src="require('../../assets/svg/icon-withdraw-status.svg')"
+                    :src="require('@/assets/svg/icon-withdraw-status.svg')"
                     alt=""
                 />
                 <div>
@@ -122,9 +122,9 @@
 import { defineProps, defineEmits, ref, onMounted, watch, computed } from "vue";
 import { ElMessage } from 'element-plus';
 import 'element-plus/es/components/message/style/css'
-import { withdrawRequest } from "../../http/account";
-import { withdrawCalcFee } from "../../http/pay";
-import {debounce} from "../../uilts/help"
+import { withdrawRequest } from "@/http/account";
+import { withdrawCalcFee } from "@/http/pay";
+import {debounce} from "@/uilts/help"
 
 const props = defineProps({
     amountValue: {

src/view/components/options-transactions.vue

@@ -2,7 +2,7 @@
     <div class="com-wrapper">
         <div class="com-nav-bar">
             <img
-                :src="require('../../assets/svg/icon-bar-arrow-left.svg')"
+                :src="require('@/assets/svg/icon-bar-arrow-left.svg')"
                 class="icon"
                 @click="back"
             />
@@ -12,7 +12,7 @@
             <template v-if="!dataList.length">
                 <img
                     class="icon-empty"
-                    :src="require('../../assets/svg/icon-empty-list.svg')"
+                    :src="require('@/assets/svg/icon-empty-list.svg')"
                 />
             </template>
             <div ref="listContent">
@@ -31,7 +31,7 @@
                             <img
                                 class="icon-give"
                                 :src="
-                                    require('../../assets/svg/icon-giveaways.svg')
+                                    require('@/assets/svg/icon-giveaways.svg')
                                 "
                             />
                         </template>
@@ -40,7 +40,7 @@
                             <img
                                 style="margin-left:-4px"
                                 :src="
-                                    require('../../assets/svg/icon-give-refund-list.svg')
+                                    require('@/assets/svg/icon-give-refund-list.svg')
                                 "
                             />
                         </template>
@@ -49,7 +49,7 @@
                             <img
                                 style="margin-left:-4px"
                                 :src="
-                                    require('../../assets/svg/icon-withdraw-paypal-list.svg')
+                                    require('@/assets/svg/icon-withdraw-paypal-list.svg')
                                 "
                             />
                         </template>
@@ -58,7 +58,7 @@
                             <img
                                 style="margin-left:-4px"
                                 :src="
-                                    require('../../assets/svg/icon-withdraw-paypal-list.svg')
+                                    require('@/assets/svg/icon-withdraw-paypal-list.svg')
                                 "
                             />
                         </template>
@@ -128,7 +128,7 @@
 /* eslint-disable */
 import { onMounted, ref, defineProps, defineEmits } from "vue";
 
-import { transactionsList } from "../../http/account";
+import { transactionsList } from "@/http/account";
 var moment = require('moment');
 
 let dataList = ref([]);

src/view/components/preview-card.vue

@@ -27,7 +27,7 @@
                         totalCount: baseFormData.totalCount,
                         amountValue: baseFormData.amountValue,
                         amountCurrencyCode: 'USD',
-                        currencyIconUrl: require('../../assets/subject/icon-USD.png'),
+                        currencyIconUrl: require('@/assets/subject/icon-USD.png'),
                         userInfo: {
                             nickName: userInfo.name,
                             avatarUrl: userInfo.avatarUrl
@@ -57,7 +57,7 @@
                     </div>
                 </div>
                 <div class="card-wrapper">
-                    <img :src="require('../../assets/subject/img-card-cover-blue.png')"
+                    <img :src="require('@/assets/subject/img-card-cover-blue.png')"
                         class="card-cover"/>
                     <div class="bottom-bar">
                         <div class="title">
@@ -76,7 +76,7 @@
                             USD GIVEAWAY
                         </div>
                         <div class="center">
-                            <img src="../../assets/subject/icon-USD.png" class="icon">
+                            <img src="@/assets/subject/icon-USD.png" class="icon">
                             {{baseFormData.amountValue}}
                         </div>
                         <div class="desc">
@@ -94,8 +94,8 @@ import { ref, defineProps, onMounted, nextTick } from "vue";
 
 import customCardCover from './custom-card-cover.vue'
 
-import {getChromeStorage} from "../../uilts/chromeExtension"
-import {getUser} from "../../http/publishApi"
+import {getChromeStorage} from "@/uilts/chromeExtension"
+import {getUser} from "@/http/publishApi"
 
 let userInfo = ref({});
 

src/view/home.vue

@@ -10,7 +10,7 @@
 <script setup>
 import { onMounted, ref } from "vue";
 
-import popup from './popup.vue'
+import popup from './popup/popup.vue'
 
 let contentStyle = ref({});
 

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

@@ -0,0 +1,63 @@
+<template>
+    <div class="state">
+        <div class="withdraw-status">
+            <img :src="require('@/assets/svg/icon-withdraw-status.svg')" alt="" />
+            <div>
+                <div class="title">Submitted successfully</div>
+                <div class="desc">
+                    Please wait for a while,<br />
+                    then check the balance with paypal
+                </div>
+            </div>
+        </div>
+        <div class="confirm-btn">
+            Done
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.state {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .withdraw-status {
+        text-align: center;
+
+        img {
+            margin-top: 40px;
+            margin-bottom: 34px;
+        }
+
+        .title {
+            font-weight: 500;
+            font-size: 20px;
+            margin-bottom: 10px;
+        }
+
+        .desc {
+            font-size: 15px;
+            color: rgba($color: #000000, $alpha: 0.5);
+        }
+    }
+
+    .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%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+}
+</style>

src/view/popup/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <router-view></router-view>
+</template>
+
+<script>
+export default {
+  name: 'popup-home',
+}
+</script>
+
+
+<style>
+#app{
+    width: 375px;
+    height: 600px;
+    box-sizing: border-box;
+    overflow-y: auto;
+}
+</style>

src/view/popup.vue → src/view/popup/popup.vue

@@ -3,31 +3,28 @@
         <template v-if="isLogin && homeVisibility">
             <div class="nav-bar">
                 <div class="item left">
-                    <img :src="require('../assets/svg/icon-denet-logo.svg')" />
+                    <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
                     DeNet
                 </div>
                 <div class="item right" @click="showTransactions">
-                    <img :src="require('../assets/svg/icon-option-list.svg')" />
+                    <img :src="require('@/assets/svg/icon-option-list.svg')" />
                     Transactions
                 </div>
             </div>
             <div class="content">
-                <img
-                    :src="require('../assets/svg/icon-money.svg')"
-                    class="icon-money"
-                />
+                <img :src="require('@/assets/svg/icon-money.svg')" class="icon-money" />
+                <div class="msg" v-show="walletWithdrawConfig.withdrawUSDPaypalFeeDesc">
+                    ({{ walletWithdrawConfig.withdrawUSDPaypalFeeDesc }})</div>
                 <div class="amount">${{ canWithdrawBalance / 100 }}</div>
-                <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
-                <div class="msg" v-show="walletWithdrawConfig.withdrawUSDPaypalFeeDesc">({{walletWithdrawConfig.withdrawUSDPaypalFeeDesc}})</div>
+                <div class="area-btn">
+                    <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
+                    <div class="top-up-btn" @click="clickTopUp">Top Up</div>
+                </div>
+                
             </div>
             <div class="tab-bar">
-                <div
-                    class="tab-item"
-                    :class="{ active: currentTabIndex == index }"
-                    v-for="(item, index) in tabList"
-                    :key="index"
-                    @click="clickTab(item, index)"
-                >
+                <div class="tab-item" :class="{ active: currentTabIndex == index }" v-for="(item, index) in tabList"
+                    :key="index" @click="clickTab(item, index)">
                     <img :src="item.icon" class="icon" />
                     {{ item.label }}
                 </div>
@@ -35,33 +32,21 @@
             <div class="list-wrapper" ref="pageGiveListDom">
                 <div class="give-list" v-if="currentTabIndex == 0">
                     <template v-if="giveList.length">
-                        <div
-                            class="cell"
-                            v-for="(item, index) in giveList"
-                            :key="index"
-                            @click="clickListItem(item, index)"
-                        >
+                        <div class="cell" v-for="(item, index) in giveList" :key="index"
+                            @click="clickListItem(item, index)">
                             <div class="img-wrapper">
                                 <!-- 收到红包 -->
                                 <template v-if="item.type == 1">
-                                    <img
-                                        class="icon-avatar"
-                                        :src="item.userInfo.avatarUrl"
-                                    />
-                                    <img
-                                        class="icon-give"
-                                        :src="
-                                            require('../assets/svg/icon-giveaways.svg')
-                                        "
-                                    />
+                                    <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
+                                    <img class="icon-give" :src="
+                                        require('@/assets/svg/icon-giveaways.svg')
+                                    " />
                                 </template>
                                 <!-- 发出去红包 -->
                                 <template v-else-if="2">
-                                    <img
-                                        :src="
-                                            require('../assets/svg/icon-list-big-give.svg')
-                                        "
-                                    />
+                                    <img :src="
+                                        require('@/assets/svg/icon-list-big-give.svg')
+                                    " />
                                 </template>
                             </div>
                             <div class="info-wrapper">
@@ -87,28 +72,20 @@
                                             <!-- 收到的 -->
                                             <template v-if="item.type == 1">
                                                 <!-- 进行中-->
-                                                <template
-                                                    v-if="item.status == 0"
-                                                >
+                                                <template v-if="item.status == 0">
                                                     in progress
                                                 </template>
                                                 <!-- 已完成 -->
-                                                <template
-                                                    v-else-if="item.status == 1"
-                                                >
+                                                <template v-else-if="item.status == 1">
                                                     ${{ item.amount / 100 }}
                                                 </template>
                                                 <!-- 已过期 -->
-                                                <template
-                                                    v-else-if="item.status == 2"
-                                                >
+                                                <template v-else-if="item.status == 2">
                                                     Timeout
                                                 </template>
                                             </template>
                                             <!-- 发出去的 -->
-                                            <template
-                                                v-else-if="item.type == 2"
-                                            >
+                                            <template v-else-if="item.type == 2">
                                                 -${{ item.amount / 100 }}
                                             </template>
                                         </div>
@@ -119,82 +96,61 @@
                                                 Unpublished
                                             </template>
                                             <!-- 进行中 -->
-                                            <template
-                                                v-else-if="item.status == 1"
-                                            >
+                                            <template v-else-if="item.status == 1">
                                                 {{
                                                     item.postTaskLuckdrop
                                                         .receivedCount
                                                 }}/{{
-                                                    item.postTaskLuckdrop
-                                                        .totalCount
-                                                }}
+    item.postTaskLuckdrop
+        .totalCount
+}}
                                             </template>
                                             <!-- 已结束 -->
-                                            <template
-                                                v-else-if="item.status == 2"
-                                            >
+                                            <template v-else-if="item.status == 2">
                                                 (Time expired)
                                                 {{
                                                     item.postTaskLuckdrop
                                                         .receivedCount
                                                 }}/{{
-                                                    item.postTaskLuckdrop
-                                                        .totalCount
-                                                }}
+    item.postTaskLuckdrop
+        .totalCount
+}}
                                             </template>
                                             <!-- 红包未发出显示 -->
-                                            <div
-                                                v-if="item.postTaskLuckdrop.reSendAvailable"
-                                                class="send-btn"
-                                                @click.stop="sendTwitter(item)"
-                                            >
+                                            <div v-if="item.postTaskLuckdrop.reSendAvailable" class="send-btn"
+                                                @click.stop="sendTwitter(item)">
                                                 Send
                                             </div>
                                         </div>
                                     </div>
                                     <!-- 发红包，红包未发出隐藏-->
-                                    <img
-                                        v-if="
-                                            !(
-                                                item.type == 2 &&
-                                                item.postTaskLuckdrop.reSendAvailable
-                                            )
-                                        "
-                                        class="icon"
-                                        :src="
-                                            require('../assets/svg/icon-cell-arrow-right.svg')
-                                        "
-                                    />
+                                    <img v-if="
+                                        !(
+                                            item.type == 2 &&
+                                            item.postTaskLuckdrop.reSendAvailable
+                                        )
+                                    " class="icon" :src="
+    require('@/assets/svg/icon-cell-arrow-right.svg')
+" />
                                 </div>
                             </div>
                         </div>
                     </template>
                     <template v-else>
-                        <img
-                            class="icon-empty"
-                            :src="require('../assets/svg/icon-empty-list.svg')"
-                        />
+                        <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
                     </template>
                 </div>
                 <div class="more-list" v-else>
-                    <div
-                        class="cell"
-                        v-for="(item, index) in moreTabList"
-                        :key="index"
-                    >
+                    <div class="cell" v-for="(item, index) in moreTabList" :key="index">
                         <img class="icon" :src="item.icon" />
                         <div class="info-wrapper">
                             <div class="left">
                                 {{ item.label }}
                             </div>
                             <div class="right">
-                                <img
-                                    class="icon"
-                                    :src="
-                                        require('../assets/svg/icon-cell-arrow-right.svg')
-                                    "
-                                />
+                                <img class="icon" :src="
+                                    require('@/assets/svg/icon-cell-arrow-right.svg')
+                                " />
                             </div>
                         </div>
                     </div>
@@ -205,31 +161,25 @@
         <option-login v-if="!isLogin" @loginAction="loginAction" />
         <template v-if="isLogin && !homeVisibility">
             <!-- 交易列表 -->
-            <option-transactions
-                v-if="transactionsVisibility"
-                @back="transactionsBack"
-            />
+            <option-transactions v-if="transactionsVisibility" @back="transactionsBack" />
             <!-- 提现页 -->
-            <option-withdraw
-                :amountValue="canWithdrawBalance"
-                :walletWithdrawConfig="walletWithdrawConfig"
-                v-if="withdrawVisibility"
-                @back="withdrawBack"
-            />
+            <option-withdraw :amountValue="canWithdrawBalance" :walletWithdrawConfig="walletWithdrawConfig"
+                v-if="withdrawVisibility" @back="withdrawBack" />
         </template>
     </div>
 </template>
 
 <script setup>
-/* eslint-disable */
-import { ref, reactive, onMounted, watch } from "vue";
-import optionTransactions from "./components/options-transactions";
-import optionLogin from "./components/option-login.vue";
-import optionWithdraw from "./components/option-withdraw.vue";
+import { ref, onMounted } from "vue";
+import optionTransactions from "@/view/components/options-transactions";
+import optionLogin from "@/view/components/option-login.vue";
+import optionWithdraw from "@/view/components/option-withdraw.vue";
 import {
     getChromeStorage,
-} from "../uilts/chromeExtension";
-import { getBalance, getMineLuckdropRecords, getWithdrawConfig } from "../http/account";
+} from "@/uilts/chromeExtension";
+import { getBalance, getMineLuckdropRecords, getWithdrawConfig } from "@/http/account";
+import router from "@/router/popup.js";
+
 var moment = require("moment");
 
 let pageWrapperDom = ref(null);
@@ -257,30 +207,30 @@ let giveReqParams = {
 
 
 let walletWithdrawConfig = ref({
-        withdrawUSDPaypalFee: 0,
-        withdrawUSDPreMinAmount: 100,
-        withdrawUSDSwitch: "",
-        withdrawUSDPaypalFeeDesc: ''
-    });
+    withdrawUSDPaypalFee: 0,
+    withdrawUSDPreMinAmount: 100,
+    withdrawUSDSwitch: "",
+    withdrawUSDPaypalFeeDesc: ''
+});
 
 let moreTabList = ref([
     {
-        icon: require("../assets/svg/icon-twitter.svg"),
+        icon: require("@/assets/svg/icon-twitter.svg"),
         label: "Twitter contact",
     },
     {
-        icon: require("../assets/svg/icon-about.svg"),
+        icon: require("@/assets/svg/icon-about.svg"),
         label: "About",
     },
 ]);
 
 let tabList = ref([
     {
-        icon: require("../assets/svg/icon-giveaways.svg"),
+        icon: require("@/assets/svg/icon-giveaways.svg"),
         label: "Giveaways",
     },
     {
-        icon: require("../assets/svg/icon-more.svg"),
+        icon: require("@/assets/svg/icon-more.svg"),
         label: "More",
     },
 ]);
@@ -396,8 +346,8 @@ const clickTab = (params, index) => {
 /**
  * 点击列表跳转到推文
  */
-const clickListItem = (params, index) => {
-    if(!params.srcContentId) {
+const clickListItem = (params) => {
+    if (!params.srcContentId) {
         return;
     }
     let url = "";
@@ -447,12 +397,12 @@ const showTransactions = () => {
     transactionsVisibility.value = true;
 };
 
-const clickWithdraw = () => {
-    if(isRequestWithdrawBalance.value) {
-        homeVisibility.value = false;
-        withdrawVisibility.value = true;
-    }
-};
+// const clickWithdraw = () => {
+//     if (isRequestWithdrawBalance.value) {
+//         homeVisibility.value = false;
+//         withdrawVisibility.value = true;
+//     }
+// };
 
 const loginAction = () => {
     login();
@@ -489,13 +439,23 @@ const sendTwitter = (params) => {
         }
     );
 };
+// 点击提现
+const clickWithdraw = ()=>{
+    router.push('/withdraw/info');
+}
+const clickTopUp = ()=>{
+    router.push('/top-up/info');
+}
+
 </script>
 
 <style lang="scss">
-html,body {
+html,
+body {
     padding: 0 !important;
     margin: 0 !important;
 }
+
 .page-wrapper {
     width: 375px;
     height: 600px;
@@ -514,6 +474,7 @@ html,body {
             align-items: center;
             font-size: 13px;
             cursor: pointer;
+
             img {
                 width: 16px;
                 height: 16px;
@@ -546,18 +507,38 @@ html,body {
             font-size: 42px;
         }
 
-        .withdraw-btn {
-            background: rgba(56, 154, 255, 0.01);
-            border: 1px solid #ffb443;
-            box-sizing: border-box;
-            width: 120px;
-            height: 38px;
-            text-align: center;
-            line-height: 38px;
-            border-radius: 100px;
-            color: #ffb443;
-            display: inline-block;
-            cursor: pointer;
+        .area-btn {
+            display: flex;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 15px;
+
+            .top-up-btn {
+                border: 1px solid #ffb443;
+                color: #fff;
+                background: #FFB443;
+                border-radius: 100px;
+                width: 110px;
+                height: 38px;
+                margin-left: 8px;
+                line-height: 38px;
+
+            }
+
+            .withdraw-btn {
+                background: rgba(56, 154, 255, 0.01);
+                border: 1px solid #ffb443;
+                box-sizing: border-box;
+                width: 110px;
+                font-size: 15px;
+                height: 38px;
+                text-align: center;
+                line-height: 38px;
+                border-radius: 100px;
+                color: #ffb443;
+                display: inline-block;
+                cursor: pointer;
+            }
         }
 
         .msg {
@@ -603,9 +584,11 @@ html,body {
 
     .list-wrapper {
         min-height: 202px;
+
         .give-list {
             min-height: 202px;
             position: relative;
+
             .cell {
                 display: flex;
                 justify-content: space-between;
@@ -619,17 +602,20 @@ html,body {
                     position: relative;
                     margin-right: 16px;
                     box-sizing: border-box;
+
                     .icon-avatar {
                         width: 34px;
                         height: 34px;
                         border-radius: 50%;
                     }
+
                     .icon-give {
                         position: absolute;
                         right: -4px;
                         bottom: 2px;
                     }
                 }
+
                 .info-wrapper {
                     flex: 1;
                     height: 100%;
@@ -639,27 +625,32 @@ html,body {
                     border-bottom: 1px solid #d1d1d1;
                     box-sizing: border-box;
                     padding-right: 16px;
+
                     .left {
                         .nickname {
                             font-weight: 500;
                             font-size: 14px;
                             margin-bottom: 5px;
                         }
+
                         .time {
                             font-size: 12px;
                             color: #b6b6b6;
                         }
                     }
+
                     .right {
                         display: flex;
                         align-items: center;
                         cursor: pointer;
+
                         .msg {
                             .bold {
                                 font-weight: 500;
                                 font-size: 14px;
                                 text-align: right;
                             }
+
                             .desc {
                                 font-size: 12px;
                                 color: #b6b6b6;
@@ -683,6 +674,7 @@ html,body {
                                 }
                             }
                         }
+
                         .icon {
                             width: 18px;
                             height: 24px;
@@ -691,6 +683,7 @@ html,body {
                     }
                 }
             }
+
             .icon-empty {
                 position: absolute;
                 left: 50%;
@@ -698,6 +691,7 @@ html,body {
                 transform: translate(-50%, -50%);
             }
         }
+
         .more-list {
             .cell {
                 display: flex;
@@ -706,11 +700,13 @@ html,body {
                 height: 66px;
                 box-sizing: border-box;
                 padding-left: 20px;
+
                 .icon {
                     width: 42px;
                     height: 42px;
                     border-radius: 50%;
                 }
+
                 .info-wrapper {
                     flex: 1;
                     height: 100%;
@@ -725,10 +721,12 @@ html,body {
                         font-weight: 500;
                         font-size: 16px;
                     }
+
                     .right {
                         display: flex;
                         align-items: center;
                         cursor: pointer;
+
                         .icon {
                             width: 18px;
                             height: 24px;

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

@@ -0,0 +1,208 @@
+<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>
+        <!-- 内容 -->
+        <div class="content">
+            <div class="area-input-1">
+                <div class="token">
+                    <div class="title">Token</div>
+                    <div class="box">
+                        <img src="" alt="">
+                        <span>USDT</span>
+                    </div>
+                </div>
+
+                <div class="net">
+                    <div class="title">NetWork</div>
+                    <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="">
+                <div class="txt">TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG</div>
+                <div class="btn">Copy</div>
+            </div>
+
+            <div class="tips">
+                <div class="tip-title">TIPS</div>
+                <div class="tip-content">asdasdasdasd</div>
+            </div>
+        </div>
+        <!-- 底部 -->
+        <div class="footer">
+            <div class="confirm-btn">
+                Done
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+</script>
+
+
+<style lang='scss' scoped>
+.info {
+    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;
+
+        .area-input-1 {
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+            .token,
+            .net {
+                width: 165px;
+
+                .title {
+                    font-weight: 500;
+                    font-size: 12px;
+                    margin-bottom: 6px;
+                    color: #8B8B8B;
+                }
+
+                .box {
+                    border: 1px solid #DBDBDB;
+                    border-radius: 8px;
+                    height: 44px;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 15px 0 10px;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    justify-content: space-between;
+
+                    img {
+                        width: 20px;
+                        height: 20px;
+                    }
+
+                    .up {
+                        width: 13px;
+                        height: 12px;
+                        cursor: pointer;
+                    }
+
+                    span {
+                        flex: 1;
+                        margin-left: 6px;
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+
+        .info {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            background: #F7F7F7;
+            border-radius: 18px;
+            padding-bottom: 20px;
+            margin-top: 20px;
+
+            img {
+                margin-top: 17px;
+                width: 150px;
+                height: 150px;
+            }
+
+            .txt {
+                margin-top: 5px;
+                font-weight: 400;
+                font-size: 15px;
+            }
+
+            .btn {
+                margin-top: 22px;
+                width: 160px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                border: 1px solid #389AFF;
+                border-radius: 100px;
+
+            }
+        }
+
+        .tips {
+            margin-top: 14px;
+            font-size: 13px;
+
+            .tip-title {
+                color: #000000;
+            }
+            .tip-content{
+                color: red;
+            }
+            .tip-content {
+                color: #000000;
+            }
+        }
+
+    }
+
+    .footer {
+        .confirm-btn {
+            width: 335px;
+            height: 46px;
+            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%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+    }
+}
+</style>

src/view/popup/withdraw/confirm.vue

@@ -0,0 +1,226 @@
+<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>
+        <!-- 内容 -->
+        <div class="content">
+            <div class="order">
+                <div class="txt">Confirm order</div>
+                <div class="money">6.667 USDT</div>
+                <div class="txt">≈$6.67</div>
+            </div>
+            <div class="info">
+                <div class="item">
+                    <div class="key">Address</div>
+                    <div class="val">TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG</div>
+                </div>
+                <div class="item">
+                    <div class="key">Network</div>
+                    <div class="val">BNB Smart chain (BEP20)</div>
+                </div>
+                <div class="info-warn">
+                    Ensure the network is correct
+                </div>
+                <div class="item">
+                    <div class="key">Amoun</div>
+                    <div class="val">6.66793014 USDT</div>
+                </div>
+                <div class="item">
+                    <div class="key">Network fee</div>
+                    <div class="val">0.8 USDT</div>
+                </div>
+            </div>
+
+            <div class="tips">
+                <div class="tip-title">TIPS</div>
+                <div class="tip-content">asdasdasdasd</div>
+            </div>
+        </div>
+        <!-- 底部 -->
+        <div class="footer">
+            <div class="left">
+                <img :src="require('@/assets/svg/icon-enter.svg')" alt="">
+                <span>同意用户协议</span>
+            </div>
+            <div class="right">
+                <div class="btn">Confirm</div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+</script>
+
+
+<style lang='scss' scoped>
+.confirm {
+    position: relative;
+    height: 100%;
+
+    .head {
+        height: 48px;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+        border-bottom: 1px solid #DBDBDB;
+
+        .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;
+
+        .order {
+            text-align: center;
+
+            .txt {
+                font-weight: 500;
+                font-size: 15px;
+                color: #000000;
+            }
+            .txt:first-child{
+                margin-bottom: 9px;
+            }
+            .txt:last-child{
+                margin-top: 5px;
+            }
+
+            .money {
+                font-weight: 600;
+                font-size: 24px;
+                color: #000000;
+            }
+        }
+
+        .info {
+            text-align: right;
+            background: #F7F7F7;
+            border-radius: 18px;
+            padding: 0 16px 20px 16px;
+            margin-top: 20px;
+
+            .item {
+                display: flex;
+                padding-top: 20px;
+
+                .key {
+                    text-align: left;
+                    width: 100px;
+                    color: #8B8B8B;
+                    font-weight: 500;
+                    font-size: 14px;
+                }
+
+                .val {
+                    word-break: break-all;
+
+                    flex: 1;
+                    font-weight: 500;
+                    font-size: 14px;
+                    text-align: right;
+                    letter-spacing: 0.5px;
+
+                }
+            }
+
+            .info-warn {
+                margin-top: 7px;
+                background: #F4EEE1;
+                border-radius: 5px;
+                height: 30px;
+                line-height: 30px;
+                text-align: center;
+                display: inline-block;
+                padding: 0 8px;
+                color: #AD8226;
+            }
+        }
+
+        .tips {
+            margin-top: 30px;
+            font-size: 13px;
+
+            .tip-title {
+                color: #000000;
+            }
+
+            .tip-content {
+                color: #000000;
+            }
+        }
+
+    }
+
+    .footer {
+        border-top: 1px solid #DBDBDB;
+        bottom: 0;
+        height: 80px;
+        display: flex;
+        position: absolute;
+        justify-content: space-between;
+        width: 100%;
+        bottom: 0;
+        align-items: center;
+
+        .left {
+            margin-left: 16px;
+
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 24px;
+                height: 24px;
+                margin-right: 10px;
+            }
+
+            span {
+                font-weight: 500;
+                font-size: 14px;
+
+            }
+        }
+
+        .right {
+            margin-right: 16px;
+
+            .btn {
+                cursor: pointer;
+                width: 140px;
+                height: 46px;
+                line-height: 46px;
+                text-align: center;
+                font-weight: 600;
+                font-size: 18px;
+                color: #FFFFFF;
+                background: #D2D2D2;
+                border-radius: 100px;
+
+            }
+        }
+    }
+}
+</style>

src/view/popup/withdraw/index.vue

@@ -0,0 +1,14 @@
+<template>
+   <div>index</div>
+</template>
+
+<script>
+export default {
+  name: 'withdraw',
+}
+</script>
+
+
+<style lang='scss' scoped>
+
+</style>

src/view/popup/withdraw/info.vue

@@ -0,0 +1,256 @@
+<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>
+    <!-- 内容 -->
+    <div class="content">
+      <div class="area-input-1">
+        <div class="token">
+          <div class="title">Token</div>
+          <div class="box">
+            <img src="" alt="">
+            <span>USDT</span>
+          </div>
+        </div>
+
+        <div class="net">
+          <div class="title">NetWork</div>
+          <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="area-input-2">
+        <div class="title">Wallet Address</div>
+        <div class="box">
+          <input type="text" placeholder="Click to enter">
+        </div>
+      </div>
+
+      <div class="area-input-3">
+        <div class="title">
+          <span>Withdrawal Amount</span>
+          <span>Balance: 122.51</span>
+        </div>
+        <div class="box">
+          <input type="text" placeholder="0">
+          <span>Withdrawal All</span>
+        </div>
+        <div class="error">最少XXXX，最多XXXX</div>
+      </div>
+
+      <div class="tips">
+        <div class="tip-title">TIPS</div>
+        <div class="tip-content">asdasdasdasd</div>
+      </div>
+    </div>
+    <!-- 底部 -->
+    <div class="footer">
+      <div class="left">
+        <div class="txt">Amount Account</div>
+        <div class="money">0</div>
+        <div class="txt">Network fee: 0.8 USDT</div>
+      </div>
+      <div class="right">
+        <div class="btn">Confirm</div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+</script>
+
+
+<style lang='scss' scoped>
+.info {
+  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;
+
+    .area-input-1 {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+
+      .token,
+      .net {
+        width: 165px;
+
+        .title {
+          font-weight: 500;
+          font-size: 12px;
+          margin-bottom: 6px;
+          color: #8B8B8B;
+        }
+
+        .box {
+          border: 1px solid #DBDBDB;
+          border-radius: 8px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          padding: 0 15px 0 10px;
+          display: flex;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+
+          img {
+            width: 20px;
+            height: 20px;
+          }
+          .up{
+            width: 13px;
+            height: 12px;
+            cursor: pointer;
+          }
+
+          span {
+            flex: 1;
+            margin-left: 6px;
+            font-size: 14px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .area-input-2,
+    .area-input-3 {
+      margin-top: 25px;
+
+      .title {
+        font-weight: 500;
+        font-size: 12px;
+        color: #8B8B8B;
+        margin-bottom: 6px;
+      }
+
+      .box {
+        border: 1px solid #DBDBDB;
+        border-radius: 8px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        padding: 5px 18px;
+
+        input {
+          outline: none;
+          border: 0;
+          flex: 1;
+          height: 100%;
+          font-weight: 500;
+          font-size: 15px;
+        }
+
+        span {
+          display: block;
+          color: #389AFF;
+          font-size: 13px;
+          cursor: pointer;
+        }
+      }
+
+      .error {
+        color: #FFA621;
+        font-weight: 400;
+        font-size: 12px;
+      }
+    }
+
+    .tips {
+      margin-top: 30px;
+      font-size: 13px;
+
+      .tip-title {
+        color: #000000;
+      }
+
+      .tip-content {
+        color: #000000;
+      }
+    }
+
+  }
+
+  .footer {
+    border-top: 1px solid #DBDBDB;
+    bottom: 0;
+    height: 80px;
+    display: flex;
+    position: absolute;
+    justify-content: space-between;
+    width: 100%;
+    bottom: 0;
+    align-items: center;
+
+    .left {
+      margin-left: 16px;
+      .txt {
+        color: #9D9D9D;
+        font-weight: 400;
+        font-size: 12px;
+      }
+
+      .money {
+        color: #000000;
+        font-weight: 500;
+        font-size: 15px;
+      }
+    }
+
+    .right {
+      margin-right: 16px;
+      .btn {
+        cursor: pointer;
+        width: 140px;
+        height: 46px;
+        line-height: 46px;
+        text-align: center;
+        font-weight: 600;
+        font-size: 18px;
+        color: #FFFFFF;
+        background: #D2D2D2;
+        border-radius: 100px;
+
+      }
+    }
+  }
+}
+</style>

src/view/publish.vue

@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from "vue";
-import giveDialog from "./components/give-dialog.vue";
+import giveDialog from "@/view/components/give-dialog.vue";
 
 let dialogVisible = ref(false);
 

src/view/red-packet.vue

@@ -3,7 +3,7 @@
   <div class="content">
     <!-- open -->
     <div v-if="data.status == 'opened'" class="opened">
-      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/subject/001-back-head-top.svg')})` }">
+      <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
         <div class="seat"></div>
         <div class="title">Awesome! You Will Get</div>
         <div class="money">
@@ -18,40 +18,40 @@
           <template v-if="item.type == 1 && item.relatedUsers && item.relatedUsers.length > 0">
             <div class="item-content">
               <div class="item-follow-title">
-                <img :src="require('../assets/svg/icon-follow.svg')" alt />
+                <img :src="require('@/assets/svg/icon-follow.svg')" alt />
                 <div class="item-title">Follow</div>
-                <img v-if="data.done.follow" :src="require('../assets/svg/icon-true.svg')" alt />
+                <img v-if="data.done.follow" :src="require('@/assets/svg/icon-true.svg')" alt />
                 <div v-else class="btn" @click="clickFollowAll(item.relatedUsers)">Follow All</div>
               </div>
               <div class="item-follow-area">
                 <template v-for="item2, i in item.relatedUsers" v-bind:key="i">
                   <div class="item-follow" v-if="item2.finished">
                     <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
-                    <img :src="require('../assets/svg/icon-true-ed.svg')" alt />
+                    <img :src="require('@/assets/svg/icon-true-ed.svg')" alt />
                   </div>
                   <div class="item-follow" v-else @click="clickFollowAll([{ name: item2.name }])">
                     <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
-                    <img :src="require('../assets/svg/icon-add.svg')" alt />
+                    <img :src="require('@/assets/svg/icon-add.svg')" alt />
                   </div>
                 </template>
               </div>
             </div>
           </template>
           <template v-if="item.type == 2">
-            <img :src="require('../assets/svg/icon-like.svg')" alt />
+            <img :src="require('@/assets/svg/icon-like.svg')" alt />
             <div class="item-content">
               <div class="item-title">Like</div>
             </div>
-            <img v-if="data.done.like" :src="require('../assets/svg/icon-true.svg')" alt />
+            <img v-if="data.done.like" :src="require('@/assets/svg/icon-true.svg')" alt />
 
             <div v-else class="btn" @click="clickLickBtn">Like</div>
           </template>
           <template v-if="item.type == 3">
-            <img :src="require('../assets/svg/icon-retweet.svg')" alt />
+            <img :src="require('@/assets/svg/icon-retweet.svg')" alt />
             <div class="item-content">
               <div class="item-title">Retweet</div>
             </div>
-            <img v-if="data.done.retweet" :src="require('../assets/svg/icon-true.svg')" alt />
+            <img v-if="data.done.retweet" :src="require('@/assets/svg/icon-true.svg')" alt />
             <div v-else class="btn" @click="clickRetweetBtn">Retweet</div>
           </template>
         </div>
@@ -66,9 +66,9 @@
           <template v-for="item, i in data.detail.allReceived.slice(0, 3)" v-bind:key="i">
             <img :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ right: `${i * 16 + 14}px` }"
               v-if="item.simpleUserInfoVO.avatarUrl" />
-            <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt :style="{ right: `${i * 16 + 14}px` }" />
+            <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt :style="{ right: `${i * 16 + 14}px` }" />
           </template>
-          <img :src="require('../assets/svg/icon-right.svg')" alt class="road" />
+          <img :src="require('@/assets/svg/icon-right.svg')" alt class="road" />
         </div>
       </div>
       <div class="footer">
@@ -83,7 +83,7 @@
 
     <!-- success -->
     <div v-else-if="data.status == 'success'" class="success">
-      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/subject/001-back-head-top.svg')})` }">
+      <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
         <div class="seat"></div>
         <div class="money">
           <img :src="data.detail.currencyIconUrl" alt />
@@ -91,9 +91,9 @@
           <span class="small">{{ data.detail.amountCurrencyCode }}</span>
         </div>
         <div class="done" @click="clickDone">
-          <img :src="require('../assets/subject/001-icon-done.svg')" alt class="icon-done" />
+          <img :src="require('@/assets/subject/001-icon-done.svg')" alt class="icon-done" />
           <span>Giveaways transferred to Wallet</span>
-          <img :src="require('../assets/svg/icon-right.svg')" alt class="icon-right" />
+          <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
         </div>
       </div>
       <div class="luck-list-title">
@@ -105,7 +105,7 @@
       <div class="luck-list" @scroll="handleScroll($event)">
         <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
           <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
-          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
+          <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
             <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
@@ -117,7 +117,7 @@
             <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
           </div>
           <div class="luck-king" v-if="item.maxAmount">
-            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
+            <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
             <span>Luckiest Draw</span>
           </div>
         </div>
@@ -127,10 +127,10 @@
 
     <!-- no-open -->
     <div v-else-if="data.status == 'not-open'" class="not-open">
-      <img :src="require('../assets/subject/001-card.png')" alt="">
-      <img class="open-gif" :src="require('../assets/gif/001.gif')" />
+      <img :src="require('@/assets/subject/001-card.png')" alt="">
+      <img class="open-gif" :src="require('@/assets/gif/001.gif')" />
 
-      <img :src="require('../assets/svg/icon-open.svg')" alt="" class="open" @click="clickOpenRedPacket">
+      <img :src="require('@/assets/svg/icon-open.svg')" alt="" class="open" @click="clickOpenRedPacket">
       <div class="title" v-if="data.detail.postUserInfo">
         <img :src="data.detail.postUserInfo.avatarUrl" alt />
         <span>{{ data.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
@@ -149,7 +149,7 @@
     <!-- 领取列表 -->
     <div v-else-if="data.status == 'luck-peopel-list'" class="luck-peopel-list">
       <div class="head">
-        <img :src="require('../assets/svg/icon-back.svg')" alt @click="clickBack" />
+        <img :src="require('@/assets/svg/icon-back.svg')" alt @click="clickBack" />
       </div>
       <div class="luck-list-title">
         <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
@@ -160,7 +160,7 @@
       <div class="luck-list" @scroll="handleScroll">
         <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
           <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
-          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
+          <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
             <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
@@ -172,7 +172,7 @@
           </div>
 
           <div class="luck-king" v-if="item.maxAmount">
-            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
+            <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
             <span>Luckiest Draw</span>
           </div>
         </div>
@@ -181,7 +181,7 @@
 
     <!-- 红包被领完了 -->
     <div v-else-if="data.status == 'close'" class="close">
-      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/subject/001-back-head-top.svg')})` }">
+      <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
         <div class="seat"></div>
         <div class="close-title">{{ data.close_title }}</div>
         <div class="close-title" v-if="data.close_text">{{ data.close_text }}</div>
@@ -195,7 +195,7 @@
       <div class="luck-list" @scroll="handleScroll">
         <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
           <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
-          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
+          <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
             <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
@@ -206,7 +206,7 @@
             <div class="luck-money-txt">{{ showLastTwoPlace(item.amountValue) || 0 }}</div>
           </div>
           <div class="luck-king" v-if="item.maxAmount">
-            <img :src="require('../assets/svg/icon-king-hat.svg')" alt />
+            <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
             <span>Luckiest Draw</span>
           </div>
         </div>
@@ -216,7 +216,7 @@
 
     <!-- error -->
     <div v-else-if="data.status == 'error'" class="error">
-      <img :src="require('../assets/svg/icon-error.svg')" alt />
+      <img :src="require('@/assets/svg/icon-error.svg')" alt />
       <div class="txt">
         {{ data.error_txt }}
       </div>
@@ -228,7 +228,7 @@
 
     <!-- loading -->
     <div v-show="data.loading_show" class="loading">
-      <img :src="require('../assets/svg/icon-loading.svg')" alt />
+      <img :src="require('@/assets/svg/icon-loading.svg')" alt />
     </div>
   </div>
 </template>
@@ -240,9 +240,9 @@ export default {
 </script>
 <script setup>
 import { onMounted, reactive } from "vue";
-import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '../http/redPacket.js'
-import { getQueryString } from '../uilts/help.js'
-import { getChromeStorage } from '../uilts/chromeExtension.js'
+import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '@/http/redPacket.js'
+import { getQueryString } from '@/uilts/help.js'
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
 var moment = require('moment');
 
 let data = reactive({

vue.config.js

@@ -54,6 +54,7 @@ iframeName.forEach((name) => {
   }
 })
 
+
 const isDevMode = process.env.NODE_ENV === 'development'
 
 module.exports = {
@@ -72,6 +73,11 @@ module.exports = {
     ])
   },
   configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.resolve('src')
+      }
+    },
     output: {
       filename: `js/[name].js`,
       chunkFilename: `[name].js`

yarn.lock

@@ -1587,6 +1587,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.0.0":
+  version "6.1.4"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
+  integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
+
 "@vue/reactivity-transform@3.2.31":
   version "3.2.31"
   resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz#0f5b25c24e70edab2b613d5305c465b50fc00911"
@@ -7033,6 +7038,13 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
+vue-router@^4.0.14:
+  version "4.0.14"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.14.tgz#ce2028c1c5c33e30c7287950c973f397fce1bd65"
+  integrity sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"