Merge branch 'dev_1.1.7_by_nft' into dev_1.1.7_test

components/MobileBuyNft.vue

@@ -58,9 +58,17 @@
                                     :class="{ disable: !((data.perUserBuyLimit - data.userBuyCount) >= 1 && (data.itemTotalCount - data.itemSoldCount) >= 1) }"
                                     @click="goBuy(((data.perUserBuyLimit - data.userBuyCount) >= 1 && (data.itemTotalCount - data.itemSoldCount) >= 1))">
                                     <div class="l">BUY {{item.itemCount}}</div>
-                                    <FontZoom width="220">
+                                    <FontZoom width="210">
                                         <template v-if="item.currencyCode !== 'USD'">
-                                            <img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price }} {{ item.currencyInfo.tokenSymbol }} (${{item.usdPrice}})
+                                            <template v-if="item.price.length + item.currencyInfo.tokenSymbol.length >= 30">
+                                                <div class="tr">
+                                                    <div><img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price }}</div>
+                                                    <div>{{ item.currencyInfo.tokenSymbol }} (${{item.usdPrice}})</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price }} {{ item.currencyInfo.tokenSymbol }} (${{item.usdPrice}})
+                                            </template>
                                         </template>
                                         <template v-else>
                                             ${{item.usdPrice}}
@@ -72,7 +80,7 @@
                                 <div
                                     class="btn disable">
                                     <div class="l">BUY {{item.itemCount}}</div>
-                                    <FontZoom width="220">
+                                    <FontZoom width="210">
                                         <template v-if="item.currencyCode !== 'USD'">
                                             <img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price }} {{ item.currencyInfo.tokenSymbol }} (${{item.usdPrice}})
                                         </template>
@@ -444,7 +452,7 @@ export default {
         justify-content: space-between;
         width: 100%;
         height: 50px;
-        padding: 0 20px;
+        padding: 0 14px;
         font-weight: 700;
         border-radius: 50px;
         background: #1D9BF0;
@@ -456,6 +464,10 @@ export default {
             width: 22px;
             margin-right: 5px;
         }
+
+        .l {
+            white-space: nowrap;
+        }
     }
     .sale {
         display: flex;
@@ -466,6 +478,10 @@ export default {
         padding: 10px 0;
         letter-spacing: 0.3px;
     }
+
+    .tr {
+        text-align: right;
+    }
 }
 
 .login {

pages/payment/index.vue

@@ -5,9 +5,17 @@
             <div class="moneyInfo">
                 <div class="tips">You Neet to Pay</div>
                 <div class="money" v-if="salePlans">
-                    <FontZoom width="320">
+                    <FontZoom width="300" :unColor="true" v-if="salePlans && salePlans.price">
                         <template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
-                            <img class="icon" :src="salePlans.currencyInfo.iconPath" /><span class="info"> {{ salePlans.price }} {{ salePlans.currencyInfo.tokenSymbol }} (${{salePlans.usdPrice}})</span>
+                            <template v-if="salePlans.price.length + salePlans.currencyInfo.tokenSymbol.length >= 30">
+                                <div style="text-align:center">
+                                    <div><img class="icon" :src="salePlans.currencyInfo.iconPath" /> {{ salePlans.price }}</div>
+                                    <div>{{ salePlans.currencyInfo.tokenSymbol }} (${{salePlans.usdPrice}})</div>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <img class="icon" :src="salePlans.currencyInfo.iconPath" /> {{ salePlans.price }} {{ salePlans.currencyInfo.tokenSymbol }} (${{salePlans.usdPrice}})
+                            </template>
                         </template>
                         <template v-else>
                             <span class="info usd">${{salePlans.usdPrice}}</span>
@@ -30,7 +38,7 @@
                         </div>
                     </div>
                     <div class="item" @click="maskPay">
-                        <a class="maskLink" :href="maskUrlLink" v-if="Number(currencyInfoData.balance) < Number(salePlans.price)"></a>
+                        <a class="maskLink" :href="maskUrlLink" v-if="Number(usdAmountData.rechargeAmountValue) > 0"></a>
                         <img src="../../static/payment/icon_meta_mask.png" />
                         <span>MetaMask</span>
                     </div>
@@ -71,8 +79,8 @@
                 <img class="balance" src="../../static/img/icon_balance.svg" />
                 <div class="text">Balance</div>
                 <div class="money">
-                    <FontZoom width="300">
-                        <img class="icon" :src="currencyInfoData.iconPath" /> <span class="font">{{currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}</span>
+                    <FontZoom width="300" :unColor="true">
+                        <img class="icon" :src="currencyInfoData.iconPath" /> {{currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}
                     </FontZoom>
                 </div>
                 <template v-if="waitRefresh">
@@ -88,7 +96,7 @@
                 <div class="l">
                     <div class="neet">You Neet to Pay</div>
                     <div class="money">
-                        <FontZoom width="190">
+                        <FontZoom width="190" :unColor="true">
                             <span class="text">{{salePlans.price}} {{ salePlans.currencyInfo.tokenSymbol }}</span>
                         </FontZoom>
                     </div>
@@ -96,7 +104,7 @@
                 <div>
                     <div
                         class="btn"
-                        :class="{ disabled: (Number(currencyInfoData.balance) < Number(salePlans.price)) || payDisabled }"
+                        :class="{ disabled: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
                         @click="pay">
                         Pay Now
                     </div>
@@ -116,16 +124,16 @@
                         <div class="item column">
                             <div class="l">Deposit</div>
                             <div class="r">
-                                <FontZoom width="260">
+                                <FontZoom width="260" :unColor="true">
                                     <img :src="currencyInfoData.iconPath" />
-                                    <span>{{ (salePlans.price - currencyInfoData.balance) > 0 ? (salePlans.price - currencyInfoData.balance) : 0 }} {{currencyInfoData.tokenSymbol}}</span>
+                                    <span>{{ usdAmountData.rechargeAmountValue || 0 }} {{currencyInfoData.tokenSymbol}}</span>
                                 </FontZoom>
                             </div>
                         </div>
                         <div class="item column">
                             <div class="l">Network</div>
                             <div class="r">
-                                <FontZoom width="260">
+                                <FontZoom width="260" :unColor="true">
                                     <img :src="currencyInfoData.chainInfo.iconPath" />
                                     <span>{{ currencyInfoData.chainInfo.chainName }}</span>
                                 </FontZoom>
@@ -146,7 +154,7 @@
                             <img src="../../static/img/icon_balance_blue.svg" />
                         </div>
                         <div class="text">
-                            <FontZoom width="260">
+                            <FontZoom width="260" :unColor="true">
                                 <span>Balance: {{ currencyInfoData.balance }} {{ currencyInfoData.tokenSymbol }}</span>
                             </FontZoom>
                         </div>
@@ -161,7 +169,7 @@
                     <div class="l">
                         <div class="neet">You Neet to Pay</div>
                         <div class="money">
-                            <FontZoom width="190">
+                            <FontZoom width="190" :unColor="true">
                                 <span class="text">{{salePlans.price}} {{ salePlans.currencyInfo.tokenSymbol }}</span>
                             </FontZoom>
                         </div>
@@ -169,7 +177,7 @@
                     <div>
                         <div
                             class="btn"
-                            :class="{ disabled: (Number(currencyInfoData.balance) < Number(salePlans.price)) || payDisabled }"
+                            :class="{ disabled: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
                             @click="payToken">
                             Pay Now
                         </div>
@@ -214,7 +222,7 @@
                     <div class="l">
                         <div class="neet">You Neet to Pay</div>
                         <div class="money">
-                            <FontZoom width="190">
+                            <FontZoom width="190" :unColor="true">
                                 <span class="text">{{ Number(usdAmountData.rechargeAmountValue) > 0 ? usdAmountData.rechargeAmountValue : usdAmountData.orderAmountValue }} {{ salePlans.currencyInfo.tokenSymbol }}</span>
                             </FontZoom>
                         </div>
@@ -361,21 +369,18 @@ export default {
                 }
             })
             // 计算金额
-            if (this.salePlans.currencyCode === 'USD') {
-                // this.salePlans.price
-                postRequest(Api.calcRechargePayAmount, {
-                    params: {
-                        currencyCode: this.salePlans.currencyCode,
-                        orderAmountValue: this.salePlans.price,
-                        payChannel: 'ach'
-                    }
-                }).then(res => {
-                    let { code, data } = res;
-                    if (code === 0) {
-                        this.usdAmountData = data;
-                    }
-                })
-            }
+            postRequest(Api.calcRechargePayAmount, {
+                params: {
+                    currencyCode: this.salePlans.currencyCode,
+                    orderAmountValue: this.salePlans.price,
+                    payChannel: 'ach'
+                }
+            }).then(res => {
+                let { code, data } = res;
+                if (code === 0) {
+                    this.usdAmountData = data;
+                }
+            })
         },
         getTokenRechargeRecord() {
             postRequest(Api.syncChainTokenRechargeRecord, {
@@ -526,7 +531,7 @@ export default {
         maskUrlToLink() {
             // MetaMask Link
             let url;
-            let price = Number(this.salePlans.price) > Number(this.currencyInfoData.balance) ? Number(this.salePlans.price) - Number(this.currencyInfoData.balance) : Number(this.salePlans.price)
+            let price = this.usdAmountData.rechargeAmountValue;
             if (this.salePlans.currencyInfo?.contractAddress) {
                 // 代币
                 url = maskUrl({
@@ -553,7 +558,7 @@ export default {
             })
         },
         pay(isReport = true) {
-            if (this.payDisabled || Number(this.currencyInfoData.balance) < Number(this.salePlans.price)) return;
+            if (this.payDisabled || Number(this.usdAmountData.rechargeAmountValue) > 0) return;
 
             this.payDisabled = true;
             postRequest(Api.payNftMysteryBoxWithBalance, {
@@ -630,16 +635,14 @@ export default {
         deNetPay() {
             if (!this.salePlans) return;
 
-            let where, pageSource;
+            let pageSource;
             if (this.salePlans.currencyCode === 'USD') {
-                where = Number(this.usdAmountData.rechargeAmountValue) > 0
                 pageSource = Report.pageSource.nftDepositCashPage
             } else {
-                where = Number(this.salePlans.price) > Number(this.currencyInfoData.balance)
                 pageSource = Report.pageSource.nftDepositTokenPage
             }
 
-            if (where) {
+            if (Number(this.usdAmountData.rechargeAmountValue) > 0) {
                 // 余额不够
                 this.step = 3;
                 this.currencyInfoTimer();
@@ -653,7 +656,7 @@ export default {
             this.reportPaymentBtnClick(Report.objectType.denetPayButton)
         },
         maskPay() {
-            if (Number(this.salePlans.price) > Number(this.currencyInfoData.balance)) {
+            if (Number(this.usdAmountData.rechargeAmountValue) > 0) {
                 this.step = 2;
                 this.waitRefresh = true;
                 this.currencyInfoTimer();
@@ -864,6 +867,9 @@ body,
         align-items: center;
         justify-content: center;
         margin-top: 10px;
+        color: #000;
+        font-size: 20px;
+        font-weight: 700;
         .icon {
             overflow: hidden;
             width: 26px;
@@ -874,9 +880,6 @@ body,
             background-color: #f5f5f5;
         }
         .info {
-            color: #000;
-            font-size: 20px;
-            font-weight: 700;
             &.usd {
                 margin-top: -5px;
             }
@@ -1241,7 +1244,6 @@ body,
         font-weight: 700;
         margin-top: 4px;
         .text {
-            color: #000;
             margin-right: auto;
         }
     }