[edit][btn-ui]

src/view/components/preview-balance.vue

@@ -10,9 +10,9 @@
     </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive, defineProps } from "vue";
+import { ref, onMounted, reactive, defineProps, defineEmits } from "vue";
 import { syncChainTokenRechargeRecord } from "@/http/publishApi";
-
+const emits = defineEmits(["selectCurrency", "setCurrencyList"]);
 const props = defineProps({
     dialogVisible: {
         type: Object,
@@ -27,14 +27,24 @@ const props = defineProps({
 /**
  * 同步链上交易
  */
-const asyncTokenRechRecord = (cb) => {
+const asyncTokenRechRecord = () => {
     syncChainTokenRechargeRecord({
         params: {
             currencyCode: props.currencyCode
         }
     }).then(res => {
         if (res.code == 0) {
-            cb && cb(res.data)
+            let data = res.data || []
+            if (data.length > 0) {
+                let currencyInfo = data[0];
+                if (currencyInfo.currencyCode == props.currencyCode) {
+                    currentCurrencyInfo.balance = currencyInfo.balance;
+                    emits('updateData', currentCurrencyInfo)
+                }
+            } else {
+                currentCurrencyInfo.balance = 0
+                emits('updateData', currentCurrencyInfo)
+            }
         }
     })
 }
@@ -64,29 +74,21 @@ const updateCurrencyBanlce = () => {
             refreshRotate.value = false;
         }, 1000)
     }
-    asyncTokenRechRecord((res) => {
-        let currencyInfo = res[0];
-        if (currencyInfo.currencyCode == props.currencyCode) {
-            currentCurrencyInfo.balance = currencyInfo.balance;
-        }
-    })
+    asyncTokenRechRecord()
 }
 
 
 onMounted(() => {
     console.log(props.currencyCode)
-    if(!props.currencyCode){
+    if (!props.currencyCode) {
         return
     }
-    asyncTokenRechRecord((res) => {
-        let currencyInfo = res[0];
-        if (currencyInfo.currencyCode == props.currencyCode) {
-            currentCurrencyInfo.balance = currencyInfo.balance;
-        }
-    })
+    asyncTokenRechRecord()
+    setInterval(() => {
+        asyncTokenRechRecord()
+    }, 10000)
 })
 
-
 </script>
 
 <style lang="scss" scoped>

src/view/iframe/buy-nft/buy/home.vue

@@ -12,84 +12,81 @@
         </div>
 
         <!-- 底部 -->
-        <div class="footer">
+        <div class="footer" v-show="state.data.mysteryBoxImagePath">
             <!-- 首页 -->
             <div class="mark">
                 <div class="sold">SOLD: {{ state.data.itemSoldCount || 0 }}/{{ state.data.itemTotalCount || 0 }} </div>
                 <div class="limit">Buy Limit: {{ state.data.userBuyCount || 0 }}/{{ state.data.perUserBuyLimit || 0 }}
                 </div>
             </div>
-            <!-- <div class="buy1">
-                <btn-loading :color="'while'"></btn-loading>
-            </div> -->
-            <template v-for="item in state.data.salePlans.splice(0, 2)">
-                <div class="buy5"
-                    v-show="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5"
-                    @click="clickJump(item)">
-                    <div class="left">Buy {{ item.itemCount }}</div>
-                    <div class="right" v-if="(item.price.length + item.currencyCode) > 10">
-                        <div class="usdt">{{ item.price }} {{ item.currencyCode }}</div>
-                        <div class="off">{{ item.discount }} OFF</div>
+            <div class="btn-area">
+                <template v-for="item in state.data.salePlans.splice(0, 2).reverse()">
+                    <div class="buy1" @click="clickJump(item)"
+                        v-if="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1">
+                        <template v-if="(item.price.length + item.currencyCode.length) > 30">
+                            <div class="left">Buy 1</div>
+                            <div class="right">
+                                <p>{{ item.price }}</p>
+                                <p>{{ item.currencyCode }}</p>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="left">Buy 1</div>
+                            <div class="right">
+                                {{ item.price }}
+                                {{ item.currencyCode }}
+                            </div>
+                        </template>
                     </div>
-                    <div class="right" v-else>
-                        <div class="usdt">
-                            <p>{{ item.price }}</p>
-                            <p>{{ item.currencyCode }}</p>
-                        </div>
-                        <div class="off">
-                            <p>{{ item.discount }} OFF</p>
-                        </div>
+                    <div class="buy1 grey"
+                        v-if="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) <= 0">
+                        <template v-if="(item.price.length + item.currencyCode.length) > 30">
+                            <div class="left">Buy 1</div>
+                            <div class="right">
+                                <p>{{ item.price }}</p>
+                                <p>{{ item.currencyCode }}</p>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="left">Buy 1</div>
+                            <div class="right">
+                                {{ item.price }}
+                                {{ item.currencyCode }}
+                            </div>
+                        </template>
                     </div>
-
-                </div>
-
-                <!-- <btn-loading></btn-loading> -->
-                <div class="buy1" @click="clickJump(item)"
-                    v-show="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1">
-                    <template v-if="(item.price.length + item.currencyCode) > 30">
-                        <div class="left">Buy 1</div>
-                        <div class="right">
-                            <p>{{ item.price }}</p>
-                            <p>{{ item.currencyCode }}</p>
+                    
+                    <div class="buy5" 
+                        v-if="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5"
+                        @click="clickJump(item)">
+                        <div class="left">Buy {{ item.itemCount }}</div>
+
+                        <div class="right" v-if="(item.price.length + item.currencyCode.length) > 30">
+                            <div class="usdt">
+                                <p>{{ item.price }}</p>
+                                <p>{{ item.currencyCode }}</p>
+                            </div>
+                            <div class="off">
+                                <p>{{ item.discount }} OFF</p>
+                            </div>
                         </div>
-                    </template>
-                    <template v-else>
-                        <div class="left">Buy 1</div>
-                        <div class="right">
-                            {{ item.price }}
-                            {{ item.currencyCode }}
+                        <div class="right" v-else>
+                            <div class="usdt">{{ item.price }} {{ item.currencyCode }}</div>
+                            <div class="off">{{ item.discount }} OFF</div>
                         </div>
-                    </template>
-                </div>
-                <div class="buy1 grey"
-                    v-show="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) <= 0">
-                    <template v-if="(item.price.length + item.currencyCode) > 30">
-                        <div class="left">Buy 1</div>
-                        <div class="right">
-                            <p>{{ item.price }}</p>
-                            <p>{{ item.currencyCode }}</p>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="left">Buy 1</div>
-                        <div class="right">
-                            {{ item.price }}
-                            {{ item.currencyCode }}
-                        </div>
-                    </template>
-                </div>
-            </template>
+                    </div>
+                </template>
+            </div>
         </div>
     </div>
 </template>
 <script setup>
 import router from "@/router/buy-nft.js";
-import { onMounted, reactive, inject } from "vue";
+import { onMounted, reactive, inject,  } from "vue";
 import { getNftMysteryBoxSaleInfo } from "@/http/nft";
 import BtnLoading from '../components/btn-loading.vue'
 import { getQueryString } from "@/uilts/help";
 let pay_info = inject('pay_info');
-
 let state = reactive({
     data: {
         salePlans: [
@@ -182,8 +179,6 @@ onMounted(() => {
 
     .footer {
         border-top: 1px solid #D9D9D9;
-        min-height: 80px;
-        padding: 15px 0;
         width: 100%;
         display: flex;
         align-items: center;
@@ -197,9 +192,8 @@ onMounted(() => {
         .mark {
             position: absolute;
             left: 20px;
-            .sold {
-                
-            }
+
+            .sold {}
 
             .limit {
                 color: #AF934E;
@@ -207,87 +201,93 @@ onMounted(() => {
             }
         }
 
-        .buy5 {
-            border: 1px solid #1D9BF0;
-            background: rgba(29, 155, 240, 0.01);
-            border-radius: 100px;
-            color: #1D9BF0;
-            min-width: 217px;
-            height: 50px;
+        .btn-area {
+            height: 100%;
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 15px 0 20px;
-            font-weight: 700;
-            font-size: 14px;
-            cursor: pointer;
-            margin-right: 12px;
+            padding: 15px 0;
 
-            .left {
-                margin-right: 20px;
-            }
+            .buy5 {
+                border: 1px solid #1D9BF0;
+                background: rgba(29, 155, 240, 0.01);
+                border-radius: 100px;
+                color: #1D9BF0;
+                min-width: 217px;
+                min-height: 50px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 10px 15px 10px 20px;
+                font-weight: 700;
+                font-size: 14px;
+                cursor: pointer;
+                margin-right: 12px;
+
+                .left {
+                    margin-right: 20px;
+                }
 
-            .right {
-                text-align: right;
+                .right {
+                    text-align: right;
 
-                p {
-                    margin: 0;
-                    padding: 0;
-                    line-height: 17px;
+                    p {
+                        margin: 0;
+                        padding: 0;
+                        line-height: 17px;
+                    }
                 }
-            }
 
 
-            .off {
-                color: #AF934E;
-                font-weight: 700;
-                font-size: 14px;
+                .off {
+                    color: #AF934E;
+                    font-weight: 700;
+                    font-size: 14px;
 
-                letter-spacing: 0.3px;
+                    letter-spacing: 0.3px;
+                }
+
+                .usdt {
+                    color: #1D9BF0;
+                    font-size: 14px;
+                    font-weight: 700;
+
+                }
             }
 
-            .usdt {
-                color: #1D9BF0;
+            .buy1 {
+                cursor: pointer;
+                background: #1D9BF0;
+                color: #fff;
+                border-radius: 100px;
+                min-width: 217px;
+                min-height: 50px;
+                display: flex;
+                align-items: center;
                 font-size: 14px;
                 font-weight: 700;
+                justify-content: space-between;
+                padding: 0 15px 0 20px;
+                margin-right: 25px;
 
-            }
-        }
-
-        .buy1 {
-            cursor: pointer;
-            background: #1D9BF0;
-            color: #fff;
-            border-radius: 100px;
-            min-width: 217px;
-            height: 50px;
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            font-weight: 700;
-            justify-content: space-between;
-            padding: 0 15px 0 20px;
-            margin-right: 25px;
-
-            .left {
-                margin-right: 20px;
-            }
+                .left {
+                    margin-right: 20px;
+                }
 
-            .right {
-                text-align: right;
+                .right {
+                    text-align: right;
 
-                p {
-                    margin: 0;
-                    padding: 0;
-                    line-height: 17px;
+                    p {
+                        margin: 0;
+                        padding: 0;
+                        line-height: 17px;
+                    }
                 }
-            }
 
-        }
+            }
 
-        .grey {
-            background: #CDCDCD;
-            cursor: auto;
+            .grey {
+                background: #CDCDCD;
+                    cursor: not-allowed;
+            }
         }
     }
 }

src/view/iframe/buy-nft/buy/pay.vue

@@ -22,31 +22,67 @@
             </div>
             <div class="right">
                 <div class="card-content">
-                    <div class="card-title">
-                        <img class="img" :src="require('@/assets/subject/top-01.svg')" />
-                        <div class="font">Deposit to Send Giveaway</div>
-                    </div>
-                    <top-up2 v-if="tempCurrentCurrencyInfo.currencyCode" :asyncIng="asyncIng"
-                        :currentCurrencyInfo="tempCurrentCurrencyInfo" @topUpDone="topUpDone">
-                    </top-up2>
-
-                    <div class="card-title">
-                        <img class="img" :src="require('@/assets/subject/top-02.svg')" />
-                        <div class="font">Wait for the amount to arrive</div>
-                    </div>
-                    <preview-balance v-if="tempCurrentCurrencyInfo.currencyCode"
-                        :currencyCode="tempCurrentCurrencyInfo.currencyCode"></preview-balance>
+                    <template v-if="tempCurrentCurrencyInfo.currencyCode">
+                        <div class="card-title">
+                            <img class="img" :src="require('@/assets/subject/top-01.svg')" />
+                            <div class="font">Deposit to Send Giveaway</div>
+                        </div>
+                        <top-up2 v-if="tempCurrentCurrencyInfo.currencyCode" :asyncIng="asyncIng"
+                            :currentCurrencyInfo="tempCurrentCurrencyInfo" @topUpDone="topUpDone">
+                        </top-up2>
+
+                        <div class="card-title">
+                            <img class="img" :src="require('@/assets/subject/top-02.svg')" />
+                            <div class="font">Wait for the amount to arrive</div>
+                        </div>
+                        <preview-balance v-if="tempCurrentCurrencyInfo.currencyCode"
+                            :currencyCode="tempCurrentCurrencyInfo.currencyCode" @updateData="updateData">
+                        </preview-balance>
+                    </template>
                 </div>
             </div>
         </div>
 
         <!-- 底部 -->
         <div class="footer">
-            <div class="pay" v-show="state.loading.show">
+            <div class="buy1" v-show="state.loading.show && state.is_btn_grey == false">
                 <btn-loading :color="'while'"></btn-loading>
             </div>
-            <div class="pay" v-show="!state.loading.show" @click="clickPlay">Pay {{ pay_info.home.sale_plan.price }}
-                {{ pay_info.home.sale_plan.currencyCode }}</div>
+
+            <div class="buy1" @click="clickPlay" v-if="!state.loading.show && state.is_btn_grey == false">
+                <template
+                    v-if="(pay_info.home.sale_plan.price.length + pay_info.home.sale_plan.currencyCode.length) > 30">
+                    <div class="left">Pay</div>
+                    <div class="right">
+                        <p>{{ pay_info.home.sale_plan.price }}</p>
+                        <p>{{ pay_info.home.sale_plan.currencyCode }}</p>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="left">Pay</div>
+                    <div class="right">
+                        {{ pay_info.home.sale_plan.price }}
+                        {{ pay_info.home.sale_plan.currencyCode }}
+                    </div>
+                </template>
+            </div>
+            <div class="buy1 grey" v-else>
+                <template
+                    v-if="(pay_info.home.sale_plan.price.length + pay_info.home.sale_plan.currencyCode.length) > 30">
+                    <div class="left">Pay</div>
+                    <div class="right">
+                        <p>{{ pay_info.home.sale_plan.price }}</p>
+                        <p>{{ pay_info.home.sale_plan.currencyCode }}</p>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="left">Pay</div>
+                    <div class="right">
+                        {{ pay_info.home.sale_plan.price }}
+                        {{ pay_info.home.sale_plan.currencyCode }}
+                    </div>
+                </template>
+            </div>
         </div>
     </div>
 </template>
@@ -59,11 +95,13 @@ import PreviewBalance from "@/view/components/preview-balance.vue";
 import BtnLoading from '../components/btn-loading.vue'
 import { payNftMysteryBoxWithBalance } from "@/http/pay";
 import { getChromeStorage } from "@/uilts/chromeExtension"
+import { number } from "mathjs";
 let pay_info = inject('pay_info');
 let state = reactive({
     loading: {
         show: false
-    }
+    },
+    is_btn_grey: true
 })
 
 let currentCurrencyInfo = reactive({
@@ -72,6 +110,12 @@ let currentCurrencyInfo = reactive({
     balance: "",
 });
 
+const updateData = (obj_data) => {
+    if (Number(obj_data.balance) >= Number(pay_info.home.sale_plan.price)) {
+        state.is_btn_grey = false
+    }
+}
+
 const clickBack = () => {
     router.back()
 }
@@ -92,21 +136,18 @@ const clickPlay = () => {
         }
     }).catch(() => {
         state.loading.show = false
-
     })
 }
 // 余额是否同步中
 let asyncIng = ref(false);
 
-// 刷新按钮旋转
-let refreshRotate = ref(false);
 
 //临时货币信息
 let tempCurrentCurrencyInfo = ref({});
 
 
 const getLocalCurrencyInfoByCode = () => {
-    if (!currentCurrencyInfo.currencyCode) {
+    if (currentCurrencyInfo.currencyCode) {
         getCurrencyInfo();
     }
 }
@@ -123,15 +164,12 @@ const getCurrencyInfo = async () => {
                 tempCurrentCurrencyInfo.value = res.data;
             }
         });
-
     }
 }
 
-
 onMounted(() => {
     currentCurrencyInfo.currencyCode = pay_info.home.sale_plan.currencyCode
-    console.log(pay_info.home)
-    getCurrencyInfo()
+    getLocalCurrencyInfoByCode()
 })
 
 
@@ -172,7 +210,7 @@ onMounted(() => {
     .area-content {
         display: flex;
         overflow-y: auto;
-        flex:1;
+        flex: 1;
 
         .left {
             width: 400px;
@@ -184,9 +222,10 @@ onMounted(() => {
                 width: 100%;
                 height: auto;
             }
-            p{
+
+            p {
                 margin: 0;
-                padding:0;
+                padding: 0;
             }
 
             .tip {
@@ -207,19 +246,22 @@ onMounted(() => {
             .card-content {
                 float: right;
                 width: 430px;
+                padding-bottom: 22px;
 
                 .card-title {
-                    height: 32px;
+
+                    margin-bottom: 12px;
+                    display: flex;
+                    align-items: center;
 
                     .img {
-                        float: left;
                         width: 20px;
                         height: 20px;
                         margin-right: 8px;
                     }
 
                     .font {
-                        float: left;
+
                         font-size: 17px;
                         font-weight: 500;
 
@@ -262,10 +304,11 @@ onMounted(() => {
         text-align: center;
         line-height: 50px;
         cursor: pointer;
-        p{
-                margin: 0;
-                padding:0;
-            }
+
+        p {
+            margin: 0;
+            padding: 0;
+        }
     }
 
     .footer {
@@ -324,15 +367,35 @@ onMounted(() => {
             background: #1D9BF0;
             color: #fff;
             border-radius: 100px;
-            width: 217px;
-            height: 50px;
+            min-width: 217px;
+            min-height: 50px;
             display: flex;
             align-items: center;
-            font-size: 18px;
+            font-size: 14px;
             font-weight: 700;
             justify-content: space-between;
             padding: 0 15px 0 20px;
             margin-right: 25px;
+
+            .left {
+                margin-right: 20px;
+            }
+
+            .right {
+                text-align: right;
+
+                p {
+                    margin: 0;
+                    padding: 0;
+                    line-height: 17px;
+                }
+            }
+
+        }
+
+        .grey {
+            background: #CDCDCD;
+            cursor: not-allowed;
         }
     }
 }