bug fix

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>
@@ -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>
@@ -116,7 +124,7 @@
                         <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>
                                 </FontZoom>
@@ -125,7 +133,7 @@
                         <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>
@@ -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, {
@@ -1241,7 +1246,6 @@ body,
         font-weight: 700;
         margin-top: 4px;
         .text {
-            color: #000;
             margin-right: auto;
         }
     }