[add] 货币选择逻辑、联调

src/http/publishApi.js

@@ -18,6 +18,14 @@ export function verifyPaypalResult(params) {
     })
 }
 
+export function payTaskLuckdropWithBalance(params) {
+  return service({
+    url: `/wallet/pay/payTaskLuckdropWithBalance`,
+    method: 'post',
+    data: params
+  })
+}
+
 export function srcPublishSuccess(params) {
     return service({
       url: `/post/srcPublishSuccess`,
@@ -40,4 +48,20 @@ export function getUser(params) {
     method: 'post',
     data: params
   })
+}
+
+export function getCurrencyInfo(params) {
+  return service({
+    url: `/currency/getCurrencyInfo`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function searchCurrencyInfo(params) {
+  return service({
+    url: `/currency/searchCurrencyInfo`,
+    method: 'post',
+    data: params
+  })
 }

src/view/components/currency-list.vue

@@ -3,97 +3,67 @@
     <div class="currency-list-wrapper">
         <div class="search-input-wrapper">
             <input class="input" v-model="keywords" @input="onInput" placeholder="Search name or paste address" />
-            <img :src="require('../../assets/svg/icon-form-refresh.svg')" class="icon">
+            <img :src="require('../../assets/svg/icon-form-refresh.svg')" class="icon"
+            @click="refresh">
             <img :src="require('../../assets/svg/icon-clear-search.svg')" class="icon-clear"
-            @click="clearIpt" v-if="keywords">
+            v-if="keywords"
+            @click="clearIpt" >
         </div>
         <div class="list-wrapper">
             <div class="page-list" v-if="!showSearch">
-                <div class="list-item">
+                <div class="list-item" v-for="(item, index) in currencyInfoList" :key="index">
                     <div class="item-title">
                         <img
                             class="icon"
-                            src="../../assets/subject/icon-USD.png"
+                            :src="item.type == 1 ? require('../../assets/svg/icon-currency-category-01.svg') : require('../../assets/svg/icon-currency-category-02.svg')"
                         />
-                        Legal Tender
+                        {{item.type == 1 ? 'Legal Tender' : 'Token'}}
                     </div>
-                    <div class="item-detail" @click="selectCurrency">
+                    <div class="item-detail" 
+                        v-for="(data, idx) in item.data"
+                        :key="idx"
+                        @click="selectCurrency(data)">
                         <div class="left">
                             <img
                                 class="icon-currency"
-                                src="../../assets/subject/icon-USD.png"
+                                :src="data.iconPath"
                             />
                             <div class="currency-info">
-                                <div class="name">USD</div>
-                                <div class="desc">PayPal</div>
+                                <div class="name">{{data.currencyCode == 'USD' ? 'USD' : data.tokenSymbol}}</div>
+                                <div class="desc">{{data.currencyCode == 'USD' ? 'Paypal' : data.currencyName}}</div>
                             </div>
                         </div>
                         <div class="right">
-                            <div class="num">1.02546572</div>
-                            <div class="amount">$21.26</div>
+                            <div class="num">{{data.balance}}</div>
+                            <div class="amount" v-if="data.currencyType == 2">${{data.usdEstimateBalance}}</div>
                         </div>
                     </div>
                 </div>
-                <div class="list-item">
-                    <div class="item-title">
+            </div>
+            <!-- 显示搜索结果列表 -->
+            <div class="search-list" v-else>
+                <div class="item-detail" 
+                    v-for="(data, idx) in searchList"
+                    :key="idx"
+                    @click="selectCurrency(data)">
+                    <div class="left">
                         <img
-                            class="icon"
-                            src="../../assets/subject/icon-USD.png"
+                            class="icon-currency"
+                            :src="data.iconPath"
                         />
-                        Token
-                    </div>
-                    <div class="item-detail" @click="selectCurrency">
-                        <div class="left">
-                            <img
-                                class="icon-currency"
-                                src="../../assets/subject/icon-USD.png"
-                            />
-                            <div class="currency-info">
-                                <div class="name">USD</div>
-                                <div class="desc">PayPal</div>
-                            </div>
-                        </div>
-                        <div class="right">
-                            <div class="num">1.02546572</div>
-                            <div class="amount">$21.26</div>
+                        <div class="currency-info">
+                            <div class="name">{{data.currencyName}}</div>
+                            <div class="desc">{{data.tokenSymbol}}</div>
                         </div>
                     </div>
-                    <div class="item-detail" @click="selectCurrency">
-                        <div class="left">
-                            <img
-                                class="icon-currency"
-                                src="../../assets/subject/icon-USD.png"
-                            />
-                            <div class="currency-info">
-                                <div class="name">USD</div>
-                                <div class="desc">PayPal</div>
-                            </div>
-                        </div>
-                        <div class="right">
-                            <div class="num">1.02546572</div>
-                            <div class="amount">$21.26</div>
-                        </div>
+                    <div class="right">
+                        <div class="num">{{data.balance}}</div>
+                        <div class="amount" v-if="data.currencyType == 2">${{data.usdEstimateBalance}}</div>
                     </div>
                 </div>
-            </div>
-            <!-- 显示搜索结果列表 -->
-            <div class="search-list" v-else>
-                    <div class="item-detail" @click="selectCurrency">
-                        <div class="left">
-                            <img
-                                class="icon-currency"
-                                src="../../assets/subject/icon-USD.png"
-                            />
-                            <div class="currency-info">
-                                <div class="name">USD</div>
-                                <div class="desc">PayPal</div>
-                            </div>
-                        </div>
-                        <div class="right">
-                            <div class="num">1.02546572</div>
-                            <div class="amount">$21.26</div>
-                        </div>
-                    </div>
+                <div class="no-data">
+                    not found
+                </div>
             </div>
         </div>
     </div>
@@ -101,30 +71,92 @@
 
 <script setup>
 /* eslint-disable */
-import { defineProps, defineEmits, ref } from "vue";
+import { defineEmits, ref, onMounted } from "vue";
+import {getCurrencyInfo, searchCurrencyInfo} from "@/http/publishApi";
+import {debounce} from "@/uilts/help";
 
 let keywords = ref('');
-let showSearch = ref(false)
+let showSearch = ref(false);
+let currencyInfoList = ref([]);
+let searchList = ref([]);
 
-const emits = defineEmits(["selectCurrency"]);
+const emits = defineEmits(["selectCurrency", "setCurrencyList"]);
 
-const selectCurrency = () => {
-    emits("selectCurrency", { amount: 0, id: 1, value: "USDT" });
+const selectCurrency = (params) => {
+    emits("selectCurrency", params);
 };
 
 const onInput = (val) => {
     console.log(keywords.value);
     if(keywords.value) {
         showSearch.value = true;
+        searchCurrency(keywords.value);
     } else {
         showSearch.value = false;
+        searchList.value = [];
     }
 }
 
 const clearIpt = () => {
     keywords.value = '';
     showSearch.value = false;   
+    searchList.value = [];
 }
+
+const refresh = () => {
+    getCurrencyInfoList();
+}
+
+/**
+ * 搜索结果列表
+ */
+const searchCurrency = debounce(function(searchWords) {
+    searchCurrencyInfo({
+        params: {
+            pageNum: 1,
+            pageSize: 100,
+            searchWords
+        }
+    }).then(res => {
+        if(res.code == 0) {
+            if(res.data.currencyCategories && res.data.currencyCategories.length) {
+                let list = res.data.currencyCategories[0];
+                if(list && list.data && list.data.length) {
+                    searchList.value = list.data;
+                } else {
+                    searchList.value = [];
+                }
+            } else {
+                searchList.value = [];
+            }
+        }
+    })
+}, 500)
+
+/**
+ * 获取货币列表
+ */
+const getCurrencyInfoList = () => {
+    let params = {
+        params : {
+            pageNum: 1,
+            pageSize: 100
+        }
+    };
+    getCurrencyInfo(params).then(res => {
+        if(res.code == 0) {
+            currencyInfoList.value = res.data.currencyCategories;
+            if(params.params.pageNum < 2) {
+                emits('setCurrencyList', {list: currencyInfoList.value})
+            }
+        }
+    })  
+}
+
+onMounted(() => {
+    getCurrencyInfoList();
+}) 
+
 </script>
 
 <style scoped lang="scss">
@@ -166,6 +198,7 @@ const clearIpt = () => {
     }
     .list-wrapper {
         height: calc(100% - 60px);
+        overflow-y: auto;
         .list-item {
             .item-title {
                 display: flex;
@@ -225,7 +258,18 @@ const clearIpt = () => {
                         color: #a2a2a2;
                     }
                 }
+        }
+        .search-list {
+            .no-data {
+                font-weight: 500;
+                font-size: 20px;
+                color: #BDBDBD;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
             }
+        }
     }
 }
 </style>

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

@@ -16,7 +16,7 @@
             }}</span>
         </div>
         <div class="money-area">
-            <div class="txt">{{ data.amountCurrencyCode }} GIVEAWAY</div>
+            <div class="txt">{{ data.tokenSymbol }} GIVEAWAY</div>
             <div class="coin">
                 <img :src="data.currencyIconUrl" />
                 <span>{{ data.amountValue }}</span>
@@ -38,7 +38,7 @@ defineProps({
             return {
                 totalCount: 0,
                 amountValue: 0,
-                amountCurrencyCode: "",
+                tokenSymbol: "",
                 userInfo: {
                     avatarUrl: "",
                     nickName: "",

src/view/components/give-dialog.vue

@@ -42,8 +42,10 @@
                 <!-- 表单填写容器 -->
                 <div class="body-content" v-show="showComType != 'topUp'">
                     <!-- 货币列表  -->
-                    <div class="currency-pop" v-if="showCurrencyPop">
-                        <currency-list @selectCurrency="selectCurrency"></currency-list>
+                    <div class="currency-pop" v-show="showCurrencyPop">
+                        <currency-list 
+                            @selectCurrency="selectCurrency"
+                            @setCurrencyList="setCurrentCurrencyInfo"></currency-list>
                     </div>
 
                     <div class="left" @click.self="showCurrencyPop = false">
@@ -60,206 +62,186 @@
                     </div>
 
                     <div class="right">
-                        <template v-if="showComType == 'default'">
-                            <div class="form-wrapper">
-                                <img
-                                    @click.stop="showCurrencyPop = false"
-                                    class="img-mode"
-                                    src="../../assets/img/img-mode.png"
-                                />
-                                <!-- 金额、数量 -->
-                                <div class="form-base">
-                                    <div class="item currency-select-wrapper">
-                                        <div
-                                            class="label currency-select"
-                                            @click="showCurrencyPop = true"
-                                        >
-                                            <img
-                                                class="icon"
-                                                :src="
-                                                    require('../../assets/svg/icon-usd.svg')
-                                                "
-                                            />
-                                            USD
-                                            <img
-                                                class="arrow"
-                                                :src="
-                                                    require('../../assets/svg/icon-form-arrow-down.svg')
-                                                "
-                                            />
-                                        </div>
-                                        <el-input
-                                            v-model="baseFormData.amountValue"
-                                            placeholder="0"
-                                            autofocus
-                                            @input="onUsdInput"
-                                            @blur="onUsdBlur"
-                                            :input-style="{
-                                                'box-shadow': 'none',
-                                                padding: '1px',
-                                                width: '110px',
-                                                'text-align': 'right',
-                                                'font-size': '15px',
-                                                color: '#000',
-                                                'margin-right': '14px',
-                                            }"
-                                        />
-                                    </div>
-                                    <div class="item"  @click.stop="showCurrencyPop = false">
-                                        <div class="label">
-                                            <img
-                                                class="icon"
-                                                :src="
-                                                    require('../../assets/svg/icon-winners.svg')
-                                                "
-                                            />
-                                            Winners
-                                        </div>
-                                        <el-input
-                                            v-model="baseFormData.totalCount"
-                                            placeholder="0"
-                                            @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-base-help"  @click.stop="showCurrencyPop = false">
-                                    <div class="currency-operation">
-                                        <div class="balance">
-                                            <img
-                                                :src="
-                                                    require('../../assets/svg/icon-balance.svg')
-                                                "
-                                            />
-                                            Balance
-                                        </div>
-                                        <div class="amount">
-                                            218
-                                            <img
-                                                :src="
-                                                    require('../../assets/svg/icon-form-refresh.svg')
-                                                "
-                                            />
-                                        </div>
-                                        <div class="top-up" @click="goTopUp">Top UP</div>
-                                    </div>
-                                    <div class="msg">
-                                        Recommend quantity 100～10000
-                                    </div>
-                                </div>
-                                <div class="form-label">Tasks</div>
-                                <!-- 转推、like、关注 -->
-                                <div class="form-require"  @click.stop="showCurrencyPop = false">
+                        <div class="form-wrapper"  v-if="showComType == 'default'">
+                            <img
+                                @click.stop="showCurrencyPop = false"
+                                class="img-mode"
+                                src="../../assets/img/img-mode.png"
+                            />
+                            <!-- 金额、数量 -->
+                            <div class="form-base">
+                                <div class="item currency-select-wrapper">
                                     <div
-                                        class="form-item"
-                                        v-for="(item, index) in formList"
-                                        :key="index"
+                                        class="label currency-select"
+                                        @click="showCurrencyPop = true"
                                     >
-                                        <div class="label">
-                                            <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>
-                                        <el-switch
-                                            v-if="item.type == 2"
-                                            v-model="item.checked"
+                                        <img
+                                            class="icon"
+                                            :src="currentCurrencyInfo.iconPath || require('../../assets/svg/icon-currency.svg')"
                                         />
+                                        {{currentCurrencyInfo.currencyCode == 'USD' ? 'USD' : currentCurrencyInfo.tokenSymbol || 'Currency'}}
                                         <img
-                                            v-if="item.type == 3"
+                                            class="arrow"
                                             :src="
-                                                require('../../assets/svg/icon-option-checked.svg')
+                                                require('../../assets/svg/icon-form-arrow-down.svg')
                                             "
                                         />
                                     </div>
+                                    <input
+                                        v-model="baseFormData.amountValue"
+                                        placeholder="0"
+                                        autofocus
+                                        @input="onAmountInput"
+                                        @blur="onAmountBlur"
+                                    />
                                 </div>
-                                <!-- 机器人 -->
-                                <div class="anti-bot-wrapper">
+                                <div class="item"  @click.stop="showCurrencyPop = false">
                                     <div class="label">
                                         <img
+                                            class="icon"
                                             :src="
-                                                require('../../assets/svg/icon-anti-bot.svg')
+                                                require('../../assets/svg/icon-winners.svg')
                                             "
-                                            class="icon-bot"
                                         />
-                                        Anti Bot
+                                        Winners
+                                    </div>
+                                    <input
+                                        v-model="baseFormData.totalCount"
+                                        placeholder="0"
+                                        @input="onCountInput"
+                                        @blur="onCountBlur"
+                                    />
+                                </div>
+                            </div>
+                            <!-- 刷新按钮、充值 -->
+                            <div class="form-base-help"  @click.stop="showCurrencyPop = false">
+                                <div class="currency-operation">
+                                    <div class="balance">
                                         <img
                                             :src="
-                                                require('../../assets/svg/icon-beta.svg')
+                                                require('../../assets/svg/icon-balance.svg')
                                             "
-                                            class="icon-beta"
                                         />
+                                        Balance
+                                    </div>
+                                    <div class="amount">
+                                        218
                                         <img
                                             :src="
-                                                require('../../assets/svg/icon-question.svg')
+                                                require('../../assets/svg/icon-form-refresh.svg')
                                             "
-                                            class="icon-question"
                                         />
                                     </div>
-                                    <el-switch v-model="openAntiBot" />
+                                    <div class="top-up" @click="goTopUp">Top UP</div>
                                 </div>
-                                <!-- 提示 -->
-                                <div class="tips-wrapper">
-                                    <div class="title">TIPS</div>
-                                    <div class="row">
-                                        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.
-                                    </div>
-                                    <div class="more">More</div>
+                                <div class="msg">
+                                    Recommend quantity 100～10000
                                 </div>
-
-                                <div class="submit-btn-wrapper">
-                                    <div class="submit-btn" @click="confirm">
+                            </div>
+                            <div class="form-label">Tasks</div>
+                            <!-- 转推、like、关注 -->
+                            <div class="form-require"  @click.stop="showCurrencyPop = false">
+                                <div
+                                    class="form-item"
+                                    v-for="(item, index) in formList"
+                                    :key="index"
+                                >
+                                    <div class="label">
                                         <img
-                                            class="icon-loading"
-                                            v-if="submitIng"
-                                            :src="
-                                                require('../../assets/svg/icon-btn-loading.svg')
-                                            "
+                                            class="icon"
+                                            :src="item.icon"
                                         />
-                                        NEXT
+                                        {{ 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>
+                                    <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')
+                                        "
+                                    />
                                 </div>
                             </div>
-                        </template>
+                            <!-- 机器人 -->
+                            <div class="anti-bot-wrapper">
+                                <div class="label">
+                                    <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"
+                                    />
+                                </div>
+                                <el-switch v-model="openAntiBot" />
+                            </div>
+                            <!-- 提示 -->
+                            <div class="tips-wrapper">
+                                <div class="title">TIPS</div>
+                                <div class="row">
+                                    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.
+                                </div>
+                                <div class="more">More</div>
+                            </div>
+
+                            <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')
+                                        "
+                                    />
+                                    NEXT
+                                </div>
+                            </div>
+                        </div>
                         <!-- 预览 -->
                         <template v-else-if="showComType == 'preview'">
                             <preview-card
+                                :currentCurrencyInfo="currentCurrencyInfo"
                                 :postData="publishRes"
                                 :baseFormData="baseFormData"
                             ></preview-card>
@@ -272,6 +254,8 @@
                                     paypalClientId,
                                     paypalHtml,
                                 }"
+                                :currentCurrencyInfo="currentCurrencyInfo"
+                                :postData="publishRes"
                                 @payPalFinsh="payPalFinsh"
                             ></paypal-button>
                         </div>
@@ -303,7 +287,7 @@ import paypalButton from "./paypal-button";
 import followInput from "./follow-input";
 import messageBox from "./message-box.vue";
 import currencyList from "./currency-list.vue";
-import topUp from "./top-up.vue";
+import topUp from "./top-up.vue"
 
 let paypalClientId = ref("");
 let paypalHtml = ref("");
@@ -326,11 +310,16 @@ let visible = ref(false);
 let showComType = ref("default"); // default(表单)  preview(预览)  topUp(充值)
 let openAntiBot = ref(false);
 let dialogHeight = ref(680);
+// 是否正在提交
 let submitIng = ref(false);
+// 艾特关注人列表
 let atUserList = ref([]);
 let iptErrMsgTxt = ref("");
+// 是否返回
 let isBack = ref(false);
+// 展示消息提示 
 let showMessageBox = ref(false);
+// 展示货币列表pop
 let showCurrencyPop = ref(false);
 
 let messageBoxData = ref({
@@ -338,19 +327,34 @@ let messageBoxData = ref({
     content: "",
 });
 
+// 真实支付金额数据
 let finalAmountData = ref({
-    currencyCode: "USD",
+    currencyCode: '',
     feeAmountValue: 0,
     finalAmountValue: 0,
     requestAmountValue: 0,
 });
 
+// 表单数据
 let baseFormData = reactive({
-    amountCurrencyCode: "USD",
+    amountCurrencyCode: '',
     amountValue: "",
     totalCount: "",
 });
 
+// 当前选择的货币信息
+let currentCurrencyInfo = ref({
+    currencyCode: "",
+    currencyName: "",
+    balance: "",
+    currencyType: "",
+    iconPath: "",
+    minAmount: "",
+    tokenChain: "",
+    tokenSymbol: "",
+    usdEstimateBalance: ""
+});
+
 let formList = reactive([
     {
         label: "Follow",
@@ -423,23 +427,21 @@ const setDialogHeight = () => {
 /**
  * 获取实际支付金额
  */
-const getPayAmount = (amountValue, cb) => {
-    payCalcFee({
+const getPayAmount = async (amountValue) => {
+    let res = await payCalcFee({
         params: {
             amountValue,
-            currencyCode: "USD",
-            payChannel: 1,
+            currencyCode: currentCurrencyInfo.value.currencyCode,
+            payNetwork: 'paypal',
         },
-    }).then((res) => {
-        if (res.code == 0) {
-            cb && cb(res.data);
-            let { finalAmountValue } = res.data;
-            if (finalAmountValue >= 100) {
-                res.data.finalAmountValue = finalAmountValue / 100;
-                finalAmountData.value = res.data;
-            }
-        }
     });
+    if (res.code == 0) {
+        let { finalAmountValue } = res.data;
+        if (finalAmountValue > 0) {
+            finalAmountData.value = res.data;
+        }
+    }
+    return res.data;
 };
 
 const confirm = () => {
@@ -457,13 +459,32 @@ const confirm = () => {
 };
 
 const selectCurrency = (params) => {
-    console.log(params);
-    messageBoxBlock({
-        title: "是否要充值 USDT",
-        content: "USDT 可用余额为0，是否要去充值？",
-    });
+
+    // if(params.currencyCode != "USD" && params.balance < params.minAmount) {
+    //     let tokenSymbol = params.currencyCode == 'USD' ? 'USD' : params.tokenSymbol;
+    //     messageBoxBlock({
+    //         title: `是否要充值 ${tokenSymbol}`,
+    //         content: `${tokenSymbol} 可用余额为${params.balance}，是否要去充值？`,
+    //     });
+    // } else {
+        showCurrencyPop.value = false;
+        currentCurrencyInfo.value = params;
+        finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
+    // }
 };
 
+/**
+ * 设置默认使用货币
+ */
+
+const setCurrentCurrencyInfo = (params) => {
+    let {list} = params;
+    if(list && list.length && list[0].data && list[0].data.length) {
+        currentCurrencyInfo.value = list[0].data[0];
+        finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
+    }
+}
+
 const messageBoxBlock = ({ title = "", content = "" }) => {
     showMessageBox.value = true;
     messageBoxData.value.title = title;
@@ -476,7 +497,6 @@ const messageBoxCancel = () => {
 
 const messageBoxConfirm = () => {
     showMessageBox.value = false;
-    // showCurrencyPop.value = false;
     showComType.value = "topUp";
 };
 
@@ -490,10 +510,11 @@ const goTopUp = () => {
 /**
  * 提交表单请求
  */
-const submitRequest = () => {
-    let { amountValue = 0, totalCount = 0, amountCurrencyCode } = baseFormData;
+const submitRequest = async () => {
+    let { amountValue = 0, totalCount = 0 } = baseFormData;
+    baseFormData.amountCurrencyCode = currentCurrencyInfo.value.currencyCode;
+    // 组装提交参数
     formList[0]["text"] = atUserList.value;
-    amountValue = amountValue * 100; // 元转分
 
     let finishConditions = [];
     for (let i = 0; i < formList.length; i++) {
@@ -509,38 +530,43 @@ const submitRequest = () => {
         }
     }
     let receiveConditions = openAntiBot.value ? "" : [];
+
+    // 提交参数
     let formData = {
-        amountCurrencyCode,
+        amountCurrencyCode: baseFormData.amountCurrencyCode,
         amountValue,
         totalCount,
         finishConditions,
         receiveConditions,
+        payAmountValue: amountValue
     };
     submitIng.value = true;
-    getPayAmount(amountValue, (res) => {
-        formData["payAmountValue"] = res.finalAmountValue;
-        let data = {
-            params: {
-                postBizData: JSON.stringify(formData),
-                postSrc: 1, //1 twitter
-                postType: 1, //1 红包
-            },
-        };
-        postPublish(data)
-            .then((res) => {
-                submitIng.value = false;
-                if (res.code == 0) {
-                    publishRes = res.data;
-                    // setPreviewDialogHeight();
-                    showComType.value = "preview";
-                    isBack.value = false;
-                } else {
-                    console.log(res);
-                }
-            })
-            .catch((err) => {
-                console.log(err);
-            });
+
+    // 法币支付需要计算费率
+    if(formData.amountCurrencyCode == "USD") { 
+        let payAmountRes = await getPayAmount(amountValue);
+        formData["payAmountValue"] = payAmountRes.finalAmountValue;
+    }
+    let data = {
+        params: {
+            postBizData: JSON.stringify(formData),
+            postSrc: 1, //1 twitter
+            postType: 1, //1 红包
+        },
+    };
+    postPublish(data).then((res) => {
+        submitIng.value = false;
+        if (res.code == 0) {
+            publishRes = res.data;
+            // setPreviewDialogHeight();
+            showComType.value = "preview";
+            isBack.value = false;
+        } else {
+            console.log(res);
+        }
+    })
+    .catch((err) => {
+        console.log(err);
     });
 };
 
@@ -580,57 +606,65 @@ const initParams = () => {
  * 支付完成回调
  */
 const payPalFinsh = (params) => {
-    let transaction = params.transaction;
-    console.log("transaction", transaction);
-    let loadingInstance = ElLoading.service({
-        background: "rgba(0,0,0,.3)",
-    });
-    verifyPaypalResult({
-        params: {
-            paypalTransactionId: transaction.id,
-            postId: publishRes.postId,
-            paypalClientId: paypalClientId.value,
-        },
-    })
-        .then((res) => {
+    let {payNetwork, payStatus} = params;
+    // token 支付
+    if(payNetwork == 'bsc') {
+        payStatusHandle(payStatus);
+    } else {
+        // 法币支付
+        let transaction = params.transaction;
+        let loadingInstance = ElLoading.service({
+            background: "rgba(0,0,0,.3)",
+        });
+        verifyPaypalResult({
+            params: {
+                paypalTransactionId: transaction.id,
+                postId: publishRes.postId,
+                paypalClientId: paypalClientId.value,
+            },
+        }).then((res) => {
             loadingInstance.close();
             if (res.code == 0) {
-                //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
                 if (res.data) {
-                    let payStatus = res.data.payStatus;
-                    switch (payStatus) {
-                        case 1:
-                            emits("payPalFinsh", { publishRes });
-                            showComType.value = "default";
-                            initParams();
-                            break;
-                        case 2:
-                            ElMessage({
-                                message: "Pay Fail",
-                                type: "warning",
-                            });
-                            break;
-                        case 3:
-                            ElMessage({
-                                message: "Pay Exceptions",
-                                type: "warning",
-                            });
-                            break;
-                        case 4:
-                            ElMessage({
-                                message: "Pay Exceptions",
-                                type: "warning",
-                            });
-                            break;
-                    }
+                    payStatusHandle(res.data.payStatus)
                 }
             }
         })
         .catch(() => {
             loadingInstance.close();
         });
+    }
 };
 
+const payStatusHandle = (payStatus) => {
+    //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
+    switch (payStatus) {
+        case 1:
+            emits("payPalFinsh", { publishRes });
+            showComType.value = "default";
+            initParams();
+            break;
+        case 2:
+            ElMessage({
+                message: "Pay Fail",
+                type: "warning",
+            });
+            break;
+        case 3:
+            ElMessage({
+                message: "Pay Exceptions",
+                type: "warning",
+            });
+            break;
+        case 4:
+            ElMessage({
+                message: "Pay Exceptions",
+                type: "warning",
+            });
+            break;
+    }
+}
+
 /**
  * follow组件触发新增关注人
  */
@@ -646,20 +680,23 @@ const delFollowUser = (params) => {
     atUserList.value.splice(params.index, 1);
 };
 
-const onUsdInput = (val) => {
-    val = val.replace(/[^\d]/g, "");
+const onAmountInput = () => {
+    let val = baseFormData.amountValue;
+    // val = val.replace(/[^\d^\.]+/g, "");
+    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
     baseFormData.amountValue = val;
-
     setIptAmountErrorMsg();
 
     return val;
 };
 
-const onCountInput = (val) => {
+const onCountInput = () => {
+    let val = baseFormData.totalCount;
     if (val == 0) {
         val = "";
     }
-    val = val.replace(/[^\d]/g, "");
+    // val = val.replace(/[^\d]/g, "");
+    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
     if (val > 9999) {
         val = 9999;
     }
@@ -671,7 +708,7 @@ const onCountInput = (val) => {
 /**
  * 金额输入失焦
  */
-const onUsdBlur = () => {
+const onAmountBlur = () => {
     if (!baseFormData.amountValue) {
         iptErrMsgTxt.value =
             "Please enter the giveaways amount in USD input box.";
@@ -978,6 +1015,15 @@ onMounted(() => {
                             padding: 16px 14px;
                             box-shadow: 0px 3px 27px 0px #0000001a;
 
+                            input {
+                                width: 102px;
+                                text-align: right;
+                                font-weight: 500;
+                                font-size: 18px;
+                                border: none;
+                                outline: none;
+                                box-sizing: border-box;
+                            }
                             .label {
                                 font-weight: 500;
                                 font-size: 15px;
@@ -994,6 +1040,9 @@ onMounted(() => {
 
                         .currency-select-wrapper {
                             padding: 0 !important;
+                            input {
+                                padding-right: 14px;
+                            }
                             .currency-select {
                                 box-shadow: 3px 0 10px 2px #ececec;
                                 padding: 16px 14px;

src/view/components/paypal-button.vue

@@ -1,14 +1,25 @@
 <template>
     <div class="pay-wrapper">
         <div class="pay-msg">
-            <div class="row">Pay ${{finalAmountData.finalAmountValue || 0}}<span>(Available ${{finalAmountData.requestAmountValue / 100}})</span></div>
-            <div class="msg">Paypal charges fee: 4.4% + $0.3</div>
+            <div class="row">Pay <template v-if="currentCurrencyInfo.currencyCode == 'USD'">$</template>{{finalAmountData.finalAmountValue || 0}}
+                <span v-if="currentCurrencyInfo.currencyCode == 'USD'">
+                    (Available ${{finalAmountData.requestAmountValue}})
+                </span>
+                <template v-else>{{currentCurrencyInfo.tokenSymbol}}</template>
+            </div>
+            <div class="msg" v-if="currentCurrencyInfo.currencyCode == 'USD'">Paypal charges fee: 4.4% + $0.3</div>
         </div>
         <div class="pay-btn">
             <iframe
+                v-show="currentCurrencyInfo.currencyCode == 'USD'"
                 class="iframe-pay"
                 ref="iframe"
                 :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&amount=${props.finalAmountData.finalAmountValue}`"></iframe>
+            <div class="token-pay" 
+                v-if="currentCurrencyInfo.currencyCode != 'USD'"
+                @click="tokenPay">
+                Pay Now
+            </div>
         </div>
     </div>
 </template>
@@ -16,14 +27,14 @@
 <script setup>
 import { onMounted, ref, defineProps, defineEmits, watch } from "vue";
 
-let iframe = ref(null);
+import {payTaskLuckdropWithBalance} from "@/http/publishApi"
 
 const props = defineProps({
     finalAmountData: {
         type: Object,
         default: () => {
             return {
-                currencyCode: "USD",
+                currencyCode: "",
                 feeAmountValue: 0,
                 finalAmountValue: 0,
                 requestAmountValue: 0
@@ -38,9 +49,24 @@ const props = defineProps({
                 paypalHtml: 'https://d1mcov78iir8kk.cloudfront.net/website/paypal_1.html'
             }
         }
+    },
+    currentCurrencyInfo: {
+        type: Object, 
+        default: () => {
+
+        }
+    },
+    postData: {
+        type: Object,
+        default: () => {
+
+        }
     }
 });
 
+let iframe = ref(null);
+let payIng = false;
+
 watch(
     () => props.finalAmountData.finalAmountValue,
     (newVal) => {
@@ -57,6 +83,26 @@ watch(
 
 const emits = defineEmits(["payPalFinsh"]);
 
+const tokenPay = () => {    
+    if(payIng) {
+        return;
+    }
+    payIng = true;
+    payTaskLuckdropWithBalance({
+        params: {
+            currencyCode: props.currentCurrencyInfo.currencyCode,
+            postId: props.postData.postId
+        }
+    }).then(res => {
+        if(res.code == 0) {
+            emits("payPalFinsh", {...res.data, payNetwork: 'bsc'});
+        }
+        payIng = false;
+    }).catch(() => {
+        payIng = false;
+    })
+}
+
 onMounted(() => {
     window.addEventListener("message", function (event) {
         if (event.data && event.data.actionType) {
@@ -67,7 +113,7 @@ onMounted(() => {
                         event.data.orderData,
                         event.data.transaction
                     );
-                    emits("payPalFinsh", event.data);
+                    emits("payPalFinsh", {...event.data, payNetwork: 'paypal'});
                     break;
             }
         }
@@ -116,6 +162,19 @@ onMounted(() => {
         width: 206px;
         height: 48px;
 
+        .token-pay {
+            width: 100%;
+            height: 100%;
+            background: #389AFF;
+            border-radius: 10000px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 18px;
+            color: #fff;
+        }
+
         iframe {
             border: medium none;
             width: 100%;

src/view/components/preview-card.vue

@@ -26,8 +26,8 @@
                     <custom-card-cover :data="{
                         totalCount: baseFormData.totalCount,
                         amountValue: baseFormData.amountValue,
-                        amountCurrencyCode: 'USD',
-                        currencyIconUrl: require('@/assets/subject/icon-USD.png'),
+                        tokenSymbol: currentCurrencyInfo.tokenSymbol,
+                        currencyIconUrl: currentCurrencyInfo.iconPath,
                         userInfo: {
                             nickName: userInfo.name,
                             avatarUrl: userInfo.avatarUrl
@@ -64,7 +64,7 @@
                             DeNet.me
                         </div>
                         <div class="desc">
-                            🎁 ${{baseFormData.amountValue}} GIVEAWAY
+                            🎁 <template v-if="currentCurrencyInfo.tokenSymbol=='USD'">$</template>{{baseFormData.amountValue}} GIVEAWAY
                         </div>
                     </div>
                     <div class="user-info">
@@ -73,10 +73,10 @@
                     </div>
                     <div class="content-text">
                         <div class="title">
-                            USD GIVEAWAY
+                            {{currentCurrencyInfo.tokenSymbol}} GIVEAWAY
                         </div>
                         <div class="center">
-                            <img src="@/assets/subject/icon-USD.png" class="icon">
+                            <img :src="currentCurrencyInfo.iconPath" class="icon">
                             {{baseFormData.amountValue}}
                         </div>
                         <div class="desc">
@@ -115,6 +115,14 @@ defineProps({
 
             }
         }
+    },
+    currentCurrencyInfo: {
+        type: Object,
+        default: () => {
+            return {
+
+            }
+        }
     }
 })
 

src/view/components/top-up.vue

@@ -126,6 +126,7 @@ import { defineProps, defineEmits } from "vue";
                 color: #389AFF;
                 text-align: center;
                 line-height: 40px;
+                cursor: pointer;
             }
         }
         .tips-box {
@@ -148,6 +149,7 @@ import { defineProps, defineEmits } from "vue";
         font-size: 16px;
         color: #fff;
         margin-top: 10px;
+        cursor: pointer;
     }
 }
 </style>