[edit][src and ui and router]

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/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,34 @@
+/* eslint-disable */
+import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
+
+import Home from '@/view/popup/popup.vue'
+import TopUp from '@/view/popup/top-up'
+
+// 2. 定义路由配置
+const routes = [
+    {
+        path: "/",
+        name:'home',
+        component: Home
+    },
+    {
+        path:'/top-up',
+        name:'top-up',
+        component:TopUp
+    }
+]
+
+
+// 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

@@ -1,36 +1,35 @@
 <template>
     <div class="overlay" v-if="visible">
-        <div class="content"
-            :style="{height: dialogHeight +'px', width: !showPreview ? '650px' : 'auto' }">
+        <div class="content" :style="{ height: dialogHeight + 'px', width: !showPreview ? '650px' : 'auto' }">
             <div class="head">
                 <div class="left">
                     <div class="close-btn" @click="close">
-                        <img class="icon-close" v-if="!showPreview" :src="require('../../assets/svg/icon-close.svg')" />
-                        <img class="icon-close" v-else :src="require('../../assets/svg/icon-back.svg')" />
+                        <img class="icon-close" v-if="!showPreview" :src="require('@/assets/svg/icon-close.svg')" />
+                        <img class="icon-close" v-else :src="require('@/assets/svg/icon-back.svg')" />
                     </div>
                     <div class="title">
                         Giveaways
                     </div>
                 </div>
-                <!-- <img class="icon-question" :src="require('../../assets/svg/icon-question.svg')"> -->
+                <!-- <img class="icon-question" :src="require('@/assets/svg/icon-question.svg')"> -->
             </div>
             <div class="body">
                 <div class="left">
                     <div class="gift-pack-wrapper">
-                        <img class="icon" :src="require('../../assets/svg/icon-gift-pack.svg')">
+                        <img class="icon" :src="require('@/assets/svg/icon-gift-pack.svg')">
                     </div>
                     <div class="bottom">
-                        <!-- <img class="icon" :src="require('../../assets/svg/icon-wallet.svg')">
-                        <img class="icon" :src="require('../../assets/svg/icon-setting.svg')"> -->
+                        <!-- <img class="icon" :src="require('@/assets/svg/icon-wallet.svg')">
+                        <img class="icon" :src="require('@/assets/svg/icon-setting.svg')"> -->
                     </div>
                 </div>
                 <div class="right">
                     <template v-if="!showPreview">
                         <div class="form-wrapper">
                             <div class="error-msg" v-if="iptErrMsgTxt">
-                                {{iptErrMsgTxt}}
+                                {{ iptErrMsgTxt }}
                             </div>
-                            <img class="img-mode" src="../../assets/img/img-mode.png">
+                            <img class="img-mode" src="@/assets/img/img-mode.png">
                             <div class="form-base-title">
                                 Reward
                                 <div class="msg">
@@ -40,63 +39,49 @@
                             <div class="form-base">
                                 <div class="item">
                                     <div class="label">
-                                        <img class="icon"
-                                            :src="require('../../assets/svg/icon-usd.svg')" />
+                                        <img class="icon" :src="require('@/assets/svg/icon-usd.svg')" />
                                         USD
                                     </div>
-                                    <el-input
-                                        v-model="baseFormData.amountValue"
-                                        placeholder="Amount entered"
-                                        autofocus
-                                        @input = "onUsdInput"
-                                        @blur = "onUsdBlur"
-                                        :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '110px', 'text-align': 'right', 'font-size' : '15px', 'color': '#000' }"/>
+                                    <el-input v-model="baseFormData.amountValue" placeholder="Amount entered" autofocus
+                                        @input="onUsdInput" @blur="onUsdBlur"
+                                        :input-style="{ 'box-shadow': 'none', 'padding': '1px', 'width': '110px', 'text-align': 'right', 'font-size': '15px', 'color': '#000' }" />
                                 </div>
                                 <div class="item">
                                     <div class="label">
-                                        <img class="icon"
-                                            :src="require('../../assets/svg/icon-quantity.svg')" />
+                                        <img class="icon" :src="require('@/assets/svg/icon-quantity.svg')" />
                                         Quantity
-                                        </div>
-                                    <el-input
-                                        v-model="baseFormData.totalCount"
-                                        placeholder="Quantity entered"
-                                        @input = "onCountInput"
-                                        @blur = "onCountBlur"
-                                        :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '120px',
-                                        'text-align': 'right', 'font-size' : '15px', 'color': '#000'}"/>
+                                    </div>
+                                    <el-input v-model="baseFormData.totalCount" placeholder="Quantity entered"
+                                        @input="onCountInput" @blur="onCountBlur" :input-style="{
+                                            'box-shadow': 'none', 'padding': '1px', 'width': '120px',
+                                            'text-align': 'right', 'font-size': '15px', 'color': '#000'
+                                        }" />
                                 </div>
                             </div>
                             <div class="form-label">
                                 Tasks
                             </div>
                             <div class="form-require">
-                                <div
-                                    class="form-item"
-                                    v-for="(item, index) in formList"
-                                    :key="index">
+                                <div class="form-item" v-for="(item, index) in formList" :key="index">
                                     <div class="label">
-                                        <img class="icon"
-                                            :src="item.icon" />
+                                        <img class="icon" :src="item.icon" />
                                         {{ item.label }}
                                     </div>
-                                    <div class="control"  v-if="item.nodeType == 'textarea'">
-                                        <follow-input 
-                                        :isAddSelf="!isBack"
-                                        :atUserList="atUserList"
-                                        @addUser="addFollowUser" @setUser="setFollowUser"
-                                        @delUser="delFollowUser"></follow-input>
+                                    <div class="control" v-if="item.nodeType == 'textarea'">
+                                        <follow-input :isAddSelf="!isBack" :atUserList="atUserList"
+                                            @addUser="addFollowUser" @setUser="setFollowUser" @delUser="delFollowUser">
+                                        </follow-input>
                                     </div>
                                     <el-switch v-if="item.type == 2" v-model="item.checked" />
-                                    <img  v-if="item.type == 3"  :src="require('../../assets/svg/icon-option-checked.svg')" />
+                                    <img v-if="item.type == 3" :src="require('@/assets/svg/icon-option-checked.svg')" />
                                 </div>
                             </div>
                             <div class="anti-bot-wrapper">
                                 <div class="label">
-                                    <img :src="require('../../assets/svg/icon-anti-bot.svg')" class="icon-bot">
+                                    <img :src="require('@/assets/svg/icon-anti-bot.svg')" class="icon-bot">
                                     Anti Bot
-                                    <img :src="require('../../assets/svg/icon-beta.svg')" class="icon-beta">
-                                    <img :src="require('../../assets/svg/icon-question.svg')" class="icon-question">
+                                    <img :src="require('@/assets/svg/icon-beta.svg')" class="icon-beta">
+                                    <img :src="require('@/assets/svg/icon-question.svg')" class="icon-question">
                                 </div>
                                 <el-switch v-model="openAntiBot" />
                             </div>
@@ -105,13 +90,16 @@
                                     TIPS
                                 </div>
                                 <div class="row">
-                                    1. Only after the user completes the tasks you set, they can claim your red envelopes
+                                    1. Only after the user completes the tasks you set, they can claim your red
+                                    envelopes
                                 </div>
                                 <div class="row">
                                     2. Each user can only receive one red envelope
                                 </div>
                                 <div class="row">
-                                    3. The red envelope issued is valid for 7 days. Please promote your red envelope as much as possible within the validity period. After the red envelope expires, the red envelope will be returned to your DeNet wallet.
+                                    3. The red envelope issued is valid for 7 days. Please promote your red envelope as
+                                    much as possible within the validity period. After the red envelope expires, the red
+                                    envelope will be returned to your DeNet wallet.
                                 </div>
                                 <div class="more">
                                     More
@@ -120,7 +108,8 @@
 
                             <div class="submit-btn-wrapper">
                                 <div class="submit-btn" @click="confirm">
-                                    <img class="icon-loading" v-if="submitIng" :src="require('../../assets/svg/icon-btn-loading.svg')"  />
+                                    <img class="icon-loading" v-if="submitIng"
+                                        :src="require('@/assets/svg/icon-btn-loading.svg')" />
                                     NEXT
                                 </div>
                             </div>
@@ -130,31 +119,25 @@
                         <preview-card :postData="publishRes" :baseFormData="baseFormData"></preview-card>
                     </template>
                     <div v-show="showPreview">
-                        <paypal-button 
-                            :finalAmountData="finalAmountData" 
-                            :payConfig="{
-                                paypalClientId,
-                                paypalHtml
-                            }"
-                            @payPalFinsh="payPalFinsh"></paypal-button>
+                        <paypal-button :finalAmountData="finalAmountData" :payConfig="{
+                            paypalClientId,
+                            paypalHtml
+                        }" @payPalFinsh="payPalFinsh"></paypal-button>
                     </div>
                 </div>
             </div>
         </div>
-        <message-box :dialogVisible="showMessageBox"
-            :title="messageBoxData.title"
-            :content="messageBoxData.content"
-            @cancel="messageBoxCancel"
-            @confirm="messageBoxConfirm"></message-box>
+        <message-box :dialogVisible="showMessageBox" :title="messageBoxData.title" :content="messageBoxData.content"
+            @cancel="messageBoxCancel" @confirm="messageBoxConfirm"></message-box>
     </div>
 </template>
 
 <script setup>
 import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
-import {postPublish, verifyPaypalResult} from "../../http/publishApi"
-import {payCalcFee, getPayConfig} from "../../http/pay"
-import {getFrontConfig} from "../../http/account"
-import { ElMessage, ElLoading} from 'element-plus';
+import { postPublish, verifyPaypalResult } from "@/http/publishApi"
+import { payCalcFee, getPayConfig } from "@/http/pay"
+import { getFrontConfig } from "@/http/account"
+import { ElMessage, ElLoading } from 'element-plus';
 import 'element-plus/es/components/message/style/css'
 
 import previewCard from "./preview-card";
@@ -198,7 +181,7 @@ let baseFormData = reactive({
 let formList = reactive([
     {
         label: "Follow",
-        icon: require('../../assets/svg/icon-follow.svg'),
+        icon: require('@/assets/svg/icon-follow.svg'),
         nodeType: 'textarea',
         type: 1,
         text: [],
@@ -206,14 +189,14 @@ let formList = reactive([
     },
     {
         label: "Retweet",
-        icon: require('../../assets/svg/icon-retweet.svg'),
+        icon: require('@/assets/svg/icon-retweet.svg'),
         nodeType: 'div',
         type: 3,
         checked: true
     },
     {
         label: "Like tweet",
-        icon: require('../../assets/svg/icon-like.svg'),
+        icon: require('@/assets/svg/icon-like.svg'),
         nodeType: 'div',
         type: 2,
         checked: true
@@ -231,7 +214,7 @@ watch(
     () => props.dialogVisible,
     (newVal) => {
         console.log("watch", newVal);
-        if(newVal) {
+        if (newVal) {
             setTimeout(() => {
                 setDialogHeight();
             }, 300)
@@ -256,23 +239,23 @@ const setDialogHeight = () => {
     let clientHeight = window.innerHeight;
     let gapSafe = 40;
 
-    if(dialogHeight.value > clientHeight - gapSafe) {
+    if (dialogHeight.value > clientHeight - gapSafe) {
         dialogHeight.value = clientHeight - gapSafe;
     }
 };
 
 const getPayAmount = (amountValue, cb) => {
     payCalcFee({
-        params : {
+        params: {
             amountValue,
             currencyCode: "USD",
             payChannel: 1
         }
     }).then(res => {
-        if(res.code == 0) {
+        if (res.code == 0) {
             cb && cb(res.data);
-            let {finalAmountValue} = res.data;
-            if(finalAmountValue >= 100) {
+            let { finalAmountValue } = res.data;
+            if (finalAmountValue >= 100) {
                 res.data.finalAmountValue = finalAmountValue / 100;
                 finalAmountData.value = res.data
             }
@@ -281,14 +264,14 @@ const getPayAmount = (amountValue, cb) => {
 }
 
 const confirm = () => {
-    if(submitIng.value) {
+    if (submitIng.value) {
         return;
     }
-    let {totalCount = 0} = baseFormData;
-    if(!totalCount) {
+    let { totalCount = 0 } = baseFormData;
+    if (!totalCount) {
         return;
     }
-    if(!calcIptValue()) {
+    if (!calcIptValue()) {
         return;
     }
     submitRequest();
@@ -311,19 +294,19 @@ const messageBoxConfirm = () => {
 }
 
 const submitRequest = () => {
-    let {amountValue = 0, totalCount = 0, amountCurrencyCode} = baseFormData;
+    let { amountValue = 0, totalCount = 0, amountCurrencyCode } = baseFormData;
     formList[0]['text'] = atUserList.value;
     amountValue = amountValue * 100; // 元转分
-    
+
     let finishConditions = [];
-    for(let i = 0; i < formList.length; i++) {
+    for (let i = 0; i < formList.length; i++) {
         let item = {};
         item.type = formList[i]['type'];
-        if(item.type == 1 && formList[i]['text']) { // follow 参数
+        if (item.type == 1 && formList[i]['text']) { // follow 参数
             let relatedUsers = formList[i]['text'];
             item.relatedUsers = relatedUsers;
             finishConditions.push(item);
-        } else if(formList[i]['checked']){
+        } else if (formList[i]['checked']) {
             finishConditions.push(item);
         }
     }
@@ -347,7 +330,7 @@ const submitRequest = () => {
         }
         postPublish(data).then((res) => {
             submitIng.value = false;
-            if(res.code == 0) {
+            if (res.code == 0) {
                 publishRes = res.data;
                 // setPreviewDialogHeight();
                 showPreview.value = true;
@@ -366,12 +349,12 @@ const calcIptValue = (cb) => {
     let totalCount = baseFormData.totalCount;
     let flag = true;
 
-    if(!amountValue || !totalCount) {
+    if (!amountValue || !totalCount) {
         return flag;
     }
 
     //每人平均要分到大于 0.01美元（1美分)
-    if((amountValue * 100) / totalCount < 1) {
+    if ((amountValue * 100) / totalCount < 1) {
         flag = false;
     }
     cb && cb(flag);
@@ -391,8 +374,8 @@ const payPalFinsh = (params) => {
     let transaction = params.transaction;
     console.log('transaction', transaction)
     let loadingInstance = ElLoading.service({
-            background: 'rgba(0,0,0,.3)'
-        })
+        background: 'rgba(0,0,0,.3)'
+    })
     verifyPaypalResult({
         params: {
             paypalTransactionId: transaction.id,
@@ -401,13 +384,13 @@ const payPalFinsh = (params) => {
         }
     }).then((res) => {
         loadingInstance.close();
-        if(res.code == 0) {
+        if (res.code == 0) {
             //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
-            if(res.data) {
+            if (res.data) {
                 let payStatus = res.data.payStatus;
                 switch (payStatus) {
                     case 1:
-                        emits("payPalFinsh", {publishRes});
+                        emits("payPalFinsh", { publishRes });
                         showPreview.value = false;
                         initParams();
                         break;
@@ -450,7 +433,7 @@ const delFollowUser = (params) => {
 }
 
 const onUsdInput = (val) => {
-    val = val.replace(/[^\d]/g,'');
+    val = val.replace(/[^\d]/g, '');
     baseFormData.amountValue = val;
 
     setIptAmountErrorMsg();
@@ -459,11 +442,11 @@ const onUsdInput = (val) => {
 }
 
 const onCountInput = (val) => {
-    if(val == 0) {
+    if (val == 0) {
         val = ''
     }
-    val = val.replace(/[^\d]/g,'');
-    if(val > 9999) {
+    val = val.replace(/[^\d]/g, '');
+    if (val > 9999) {
         val = 9999;
     }
     baseFormData.totalCount = val;
@@ -472,11 +455,11 @@ const onCountInput = (val) => {
 }
 
 const onUsdBlur = () => {
-    if(!baseFormData.amountValue) {
+    if (!baseFormData.amountValue) {
         iptErrMsgTxt.value = 'Please enter the giveaways amount in USD input box.';
     } else {
         setIptAmountErrorMsg((res) => {
-            if(res) {
+            if (res) {
                 iptErrMsgTxt.value = '';
             }
         })
@@ -484,11 +467,11 @@ const onUsdBlur = () => {
 }
 
 const onCountBlur = () => {
-    if(!baseFormData.totalCount) {
+    if (!baseFormData.totalCount) {
         iptErrMsgTxt.value = 'Please enter the number of giveaways in Quantity input box.';
     } else {
         setIptAmountErrorMsg((res) => {
-            if(res) {
+            if (res) {
                 iptErrMsgTxt.value = '';
             }
         })
@@ -497,7 +480,7 @@ const onCountBlur = () => {
 
 const setIptAmountErrorMsg = (cb) => {
     let res = calcIptValue();
-    if(!res) {
+    if (!res) {
         iptErrMsgTxt.value = `If you wish to send ${baseFormData.totalCount} red packets, please send USD amount > $${baseFormData.totalCount * 0.01}`;
     } else {
         iptErrMsgTxt.value = '';
@@ -509,7 +492,7 @@ const setPayConfig = () => {
     getPayConfig({
         params: {}
     }).then(res => {
-        if(res.code ==0) {
+        if (res.code == 0) {
             paypalClientId.value = res.data.paypalClientId
         }
     })
@@ -517,9 +500,9 @@ const setPayConfig = () => {
 
 const setFrontConfig = () => {
     getFrontConfig({
-        params : {}
+        params: {}
     }).then(res => {
-        if(res.code == 0) {
+        if (res.code == 0) {
             paypalHtml.value = res.data.paypalHtml
         }
     })
@@ -528,11 +511,11 @@ const setFrontConfig = () => {
 onMounted(() => {
     setFrontConfig();
     setPayConfig();
-    document.onkeydown = function(e){    
-        var keyNum=window.event ? e.keyCode :e.which;
+    document.onkeydown = function (e) {
+        var keyNum = window.event ? e.keyCode : e.which;
         let escKey = 27;
-        if(keyNum == escKey) {
-            if(visible.value) {
+        if (keyNum == escKey) {
+            if (visible.value) {
                 close();
             }
         }
@@ -546,6 +529,7 @@ onMounted(() => {
 .ql-container {
     height: 100px;
 }
+
 .overlay {
     position: fixed;
     top: 0;
@@ -673,6 +657,7 @@ onMounted(() => {
                         display: flex;
                         align-items: center;
                         justify-content: space-between;
+
                         .msg {
                             font-weight: 500;
                             font-size: 12px;
@@ -738,6 +723,7 @@ onMounted(() => {
                                 align-items: center;
                                 font-size: 15px;
                                 font-weight: 500;
+
                                 .icon {
                                     margin-right: 10px;
                                 }
@@ -768,16 +754,19 @@ onMounted(() => {
 
                     .label {
                         display: flex;
-                        align-items: center ;
+                        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;
                         }
@@ -787,11 +776,14 @@ onMounted(() => {
 
                 .tips-wrapper {
                     margin-top: 23px;
-                    .title, .row {
+
+                    .title,
+                    .row {
                         font-weight: 400;
                         font-size: 13px;
                         color: rgba(0, 0, 0, 0.3);
                     }
+
                     .row {
                         box-sizing: border-box;
                         padding-left: 4px;
@@ -813,6 +805,7 @@ onMounted(() => {
                     left: 0;
                     box-sizing: border-box;
                     padding-top: 16px;
+
                     .submit-btn {
                         width: calc(100% - 36px);
                         height: 46px;
@@ -828,7 +821,7 @@ onMounted(() => {
                         font-size: 16px;
                         font-weight: 500;
                         cursor: pointer;
-                        
+
                         .icon-loading {
                             width: 20px;
                             height: 20px;

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 * 100,
                         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/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <router-view></router-view>
+</template>
+
+<script>
+export default {
+  name: 'popup-home',
+}
+</script>
+
+
+<style>
+</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 = "";
@@ -448,7 +398,7 @@ const showTransactions = () => {
 };
 
 const clickWithdraw = () => {
-    if(isRequestWithdrawBalance.value) {
+    if (isRequestWithdrawBalance.value) {
         homeVisibility.value = false;
         withdrawVisibility.value = true;
     }
@@ -489,13 +439,22 @@ const sendTwitter = (params) => {
         }
     );
 };
+// 点击提现
+const clickTopUp = ()=>{
+    // router
+    console.log(router)
+    router.push('top-up');
+}
+
 </script>
 
 <style lang="scss">
-html,body {
+html,
+body {
     padding: 0 !important;
     margin: 0 !important;
 }
+
 .page-wrapper {
     width: 375px;
     height: 600px;
@@ -514,6 +473,7 @@ html,body {
             align-items: center;
             font-size: 13px;
             cursor: pointer;
+
             img {
                 width: 16px;
                 height: 16px;
@@ -546,18 +506,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 +583,11 @@ html,body {
 
     .list-wrapper {
         min-height: 202px;
+
         .give-list {
             min-height: 202px;
             position: relative;
+
             .cell {
                 display: flex;
                 justify-content: space-between;
@@ -619,17 +601,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 +624,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 +673,7 @@ html,body {
                                 }
                             }
                         }
+
                         .icon {
                             width: 18px;
                             height: 24px;
@@ -691,6 +682,7 @@ html,body {
                     }
                 }
             }
+
             .icon-empty {
                 position: absolute;
                 left: 50%;
@@ -698,6 +690,7 @@ html,body {
                 transform: translate(-50%, -50%);
             }
         }
+
         .more-list {
             .cell {
                 display: flex;
@@ -706,11 +699,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 +720,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/index.vue

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

src/view/publish.vue

@@ -11,7 +11,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"