|
@@ -1,28 +1,21 @@
|
|
|
<template>
|
|
|
<div class="overlay" v-if="visible">
|
|
|
- <div
|
|
|
- class="content"
|
|
|
+ <div class="content"
|
|
|
:style="{
|
|
|
height: dialogHeight + 'px',
|
|
|
- width: showComType != 'preview' ? '600px' : 'auto',
|
|
|
- }"
|
|
|
- >
|
|
|
+ width: showComType != 'preview' ? '600px' : 'auto'}">
|
|
|
<div class="pop-mask"
|
|
|
v-show="showCurrencyPop"
|
|
|
@click.stop="showCurrencyPop = false"></div>
|
|
|
<div class="head">
|
|
|
<div class="left">
|
|
|
<div class="close-btn" @click="close">
|
|
|
- <img
|
|
|
- class="icon-close"
|
|
|
- v-if="showComType == 'default'"
|
|
|
+ <img class="icon-close"
|
|
|
:src="require('../../assets/svg/icon-close.svg')"
|
|
|
- />
|
|
|
- <img
|
|
|
- class="icon-close"
|
|
|
- v-else
|
|
|
+ v-if="showComType == 'default'"/>
|
|
|
+ <img class="icon-close"
|
|
|
:src="require('../../assets/svg/icon-back.svg')"
|
|
|
- />
|
|
|
+ v-else/>
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
{{ currentComData[showComType]["title"] }}
|
|
@@ -47,7 +40,7 @@
|
|
|
<div class="body">
|
|
|
<!-- 充值组件 -->
|
|
|
<top-up v-if="showComType == 'topUp'"
|
|
|
- :currentCurrencyInfo="currentCurrencyInfo"
|
|
|
+ :currentCurrencyInfo="tempCurrentCurrencyInfo"
|
|
|
@topUpDone="topUpDone"></top-up>
|
|
|
<!-- 表单填写容器 -->
|
|
|
<div class="body-content" v-if="showComType != 'topUp'">
|
|
@@ -61,12 +54,8 @@
|
|
|
|
|
|
<div class="left">
|
|
|
<div class="gift-pack-wrapper">
|
|
|
- <img
|
|
|
- class="icon"
|
|
|
- :src="
|
|
|
- require('../../assets/svg/icon-gift-pack.svg')
|
|
|
- "
|
|
|
- />
|
|
|
+ <img class="icon"
|
|
|
+ :src="require('../../assets/svg/icon-gift-pack.svg')"/>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
</div>
|
|
@@ -126,7 +115,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 刷新按钮、充值 -->
|
|
|
- <div class="form-base-help">
|
|
|
+ <div class="form-base-help" v-show="currentCurrencyInfo.currencyCode">
|
|
|
<div class="currency-operation">
|
|
|
<div class="balance">
|
|
|
<img
|
|
@@ -260,6 +249,7 @@
|
|
|
:currentCurrencyInfo="currentCurrencyInfo"
|
|
|
:postData="publishRes"
|
|
|
:baseFormData="baseFormData"
|
|
|
+ :amountFontSize="previewFontSize"
|
|
|
></preview-card>
|
|
|
</template>
|
|
|
<!-- paypal支付按钮 -->
|
|
@@ -293,11 +283,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
|
|
|
-import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord } from "../../http/publishApi";
|
|
|
-import { payCalcFee, getPayConfig } from "../../http/pay";
|
|
|
-import { getFrontConfig } from "../../http/account";
|
|
|
-import { scaleNumber } from "../../uilts/help"
|
|
|
+import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick } from "vue";
|
|
|
+import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord } from "@/http/publishApi";
|
|
|
+import { payCalcFee, getPayConfig } from "@/http/pay";
|
|
|
+import { getFrontConfig } from "@/http/account";
|
|
|
+import { throttle } from "@/uilts/help"
|
|
|
import { ElMessage, ElLoading } from "element-plus";
|
|
|
import "element-plus/es/components/message/style/css";
|
|
|
|
|
@@ -315,7 +305,7 @@ const config = {
|
|
|
}
|
|
|
const math = create(all, config);
|
|
|
|
|
|
-let tempCurrentCurrencyInfo = {};
|
|
|
+let tempCurrentCurrencyInfo = ref({});
|
|
|
|
|
|
let paypalClientId = ref("");
|
|
|
let payConfig = ref({})
|
|
@@ -344,7 +334,7 @@ let submitIng = ref(false);
|
|
|
// 艾特关注人列表
|
|
|
let atUserList = ref([]);
|
|
|
|
|
|
-let iptErrMsgTxt = ref("Please enter the ‘reward’ amount");
|
|
|
+let iptErrMsgTxt = ref("Please select a currency");
|
|
|
|
|
|
// 是否返回
|
|
|
let isBack = ref(false);
|
|
@@ -359,6 +349,8 @@ let currencyListDom = ref(null);
|
|
|
|
|
|
let refreshRotate = ref(false);
|
|
|
|
|
|
+let previewFontSize = ref(56);
|
|
|
+
|
|
|
let postId = ref('');
|
|
|
|
|
|
let messageBoxData = ref({
|
|
@@ -460,6 +452,8 @@ const setDialogHeight = () => {
|
|
|
|
|
|
if (dialogHeight.value > clientHeight - gapSafe) {
|
|
|
dialogHeight.value = clientHeight - gapSafe;
|
|
|
+ } else {
|
|
|
+ dialogHeight.value = 680;
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -496,7 +490,7 @@ const confirm = () => {
|
|
|
};
|
|
|
|
|
|
const selectCurrency = (params) => {
|
|
|
- tempCurrentCurrencyInfo = params;
|
|
|
+ tempCurrentCurrencyInfo.value = params;
|
|
|
if(params.currencyCode != "USD" && params.balance < params.minAmount) {
|
|
|
let tokenSymbol = params.currencyCode == 'USD' ? 'USD' : params.tokenSymbol;
|
|
|
messageBoxBlock({
|
|
@@ -507,9 +501,25 @@ const selectCurrency = (params) => {
|
|
|
currentCurrencyInfo.value = params;
|
|
|
showCurrencyPop.value = false;
|
|
|
finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
|
|
|
+ calcDomZoom();
|
|
|
+ resetFormIpt();
|
|
|
+ onIptSetErrorTxt();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const calcDomZoom = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ var textWidth = document.querySelector('.text').offsetWidth;
|
|
|
+ var scale = 68 / textWidth;
|
|
|
+ document.querySelector('.text').style.zoom = scale;
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const resetFormIpt = () => {
|
|
|
+ baseFormData.amountValue = "";
|
|
|
+ baseFormData.totalCount = "";
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 设置默认使用货币
|
|
|
*/
|
|
@@ -517,8 +527,8 @@ const selectCurrency = (params) => {
|
|
|
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;
|
|
|
+ // currentCurrencyInfo.value = list[0].data[0];
|
|
|
+ // finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -529,9 +539,12 @@ const messageBoxBlock = ({ title = "", content = "" }) => {
|
|
|
};
|
|
|
|
|
|
const messageBoxCancel = () => {
|
|
|
- currentCurrencyInfo.value = tempCurrentCurrencyInfo;
|
|
|
+ currentCurrencyInfo.value = tempCurrentCurrencyInfo.value;
|
|
|
showMessageBox.value = false;
|
|
|
showCurrencyPop.value = false;
|
|
|
+ calcDomZoom();
|
|
|
+ resetFormIpt();
|
|
|
+ onIptSetErrorTxt();
|
|
|
};
|
|
|
|
|
|
const messageBoxConfirm = () => {
|
|
@@ -548,15 +561,14 @@ const goTopUp = () => {
|
|
|
|
|
|
/**
|
|
|
* 充值done事件
|
|
|
- * 更新货币列表
|
|
|
*/
|
|
|
const topUpDone = () => {
|
|
|
- currentCurrencyInfo.value = tempCurrentCurrencyInfo;
|
|
|
- asyncTokenRechRecord((data) => {
|
|
|
+ currentCurrencyInfo.value = tempCurrentCurrencyInfo.value;
|
|
|
+ asyncTokenRechRecord((res) => {
|
|
|
showCurrencyPop.value = false;
|
|
|
showComType.value = 'default';
|
|
|
- if(data && data.length) {
|
|
|
- let currencyInfo = data[0];
|
|
|
+ if(res.code == 0 && res.data && res.data.length) {
|
|
|
+ let currencyInfo = res.data[0];
|
|
|
if(currencyInfo.currencyCode == currentCurrencyInfo.value.currencyCode) {
|
|
|
currentCurrencyInfo.value.balance = currencyInfo.balance;
|
|
|
}
|
|
@@ -571,9 +583,9 @@ const updateCurrencyBanlce = () => {
|
|
|
refreshRotate.value = false;
|
|
|
}, 1000)
|
|
|
}
|
|
|
- asyncTokenRechRecord((data) => {
|
|
|
- if(data && data.length) {
|
|
|
- let currencyInfo = data[0];
|
|
|
+ asyncTokenRechRecord((res) => {
|
|
|
+ if(res.code == 0 && res.data && res.data.length) {
|
|
|
+ let currencyInfo = res.data[0];
|
|
|
if(currencyInfo.currencyCode == currentCurrencyInfo.value.currencyCode) {
|
|
|
currentCurrencyInfo.value.balance = currencyInfo.balance;
|
|
|
}
|
|
@@ -590,9 +602,7 @@ const asyncTokenRechRecord = (cb) => {
|
|
|
currencyCode: currentCurrencyInfo.value.currencyCode
|
|
|
}
|
|
|
}).then(res => {
|
|
|
- if(res.code == 0) {
|
|
|
- cb && cb(res.data)
|
|
|
- }
|
|
|
+ cb && cb(res)
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -649,6 +659,7 @@ const submitRequest = async () => {
|
|
|
publishRes = res.data;
|
|
|
postId.value = res.data.postId;
|
|
|
showComType.value = "preview";
|
|
|
+ previewFontSize.value = calcFontSize(baseFormData.amountValue, 238, 56);
|
|
|
isBack.value = false;
|
|
|
} else {
|
|
|
console.log(res);
|
|
@@ -659,17 +670,24 @@ const submitRequest = async () => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const calcFontSize = (str, domWidth, maxSize) => {
|
|
|
+ let lenstr = str.length;
|
|
|
+ let num = parseInt(domWidth / lenstr);
|
|
|
+ let fontSize = num < maxSize ? num : maxSize
|
|
|
+ return fontSize;
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 初始化提交参数
|
|
|
*/
|
|
|
const initParams = () => {
|
|
|
- baseFormData.amountValue = "";
|
|
|
- baseFormData.totalCount = "";
|
|
|
+ resetFormIpt();
|
|
|
formList[0].text = [];
|
|
|
atUserList.value = [];
|
|
|
submitIng.value = false;
|
|
|
isBack.value = false;
|
|
|
showCurrencyPop.value = false;
|
|
|
+ openAntiBot.value = false;
|
|
|
};
|
|
|
|
|
|
/**
|
|
@@ -754,6 +772,10 @@ const onAmountInput = () => {
|
|
|
let val = baseFormData.amountValue;
|
|
|
// val = val.replace(/[^\d^\.]+/g, "");
|
|
|
val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
|
|
|
+
|
|
|
+ if(val == '00') {
|
|
|
+ val = '0'
|
|
|
+ }
|
|
|
baseFormData.amountValue = val;
|
|
|
setInputErrorMsg({from: 'amount', type:'input'});
|
|
|
|
|
@@ -832,8 +854,7 @@ const calcIptValue = (cb) => {
|
|
|
/**
|
|
|
* 设置输入提示语
|
|
|
*/
|
|
|
-const setInputErrorMsg = (params, cb) => {
|
|
|
- let {from, type} = params;
|
|
|
+const setInputErrorMsg = (params) => {
|
|
|
|
|
|
// let amountValue = baseFormData.amountValue;
|
|
|
// let num = amountValue, scale = 1;
|
|
@@ -844,11 +865,11 @@ const setInputErrorMsg = (params, cb) => {
|
|
|
// scale = obj.scale;
|
|
|
// }
|
|
|
|
|
|
- if(type == 'input') {
|
|
|
- onIptSetErrorTxt({...params});
|
|
|
- } else if(type == 'blur') {
|
|
|
- setIsEmptyTxt();
|
|
|
- }
|
|
|
+ // if(type == 'input') {
|
|
|
+ onIptSetErrorTxt(params);
|
|
|
+ // } else if(type == 'blur') {
|
|
|
+ // setIsEmptyTxt();
|
|
|
+ // }
|
|
|
};
|
|
|
|
|
|
/**
|
|
@@ -875,13 +896,18 @@ const setIsEmptyTxt = () => {
|
|
|
* 输入时 检测设置错误信息
|
|
|
*/
|
|
|
const onIptSetErrorTxt = (params) => {
|
|
|
- let {from, type,} = params;
|
|
|
- if(+baseFormData.amountValue < +currentCurrencyInfo.value.balance) {
|
|
|
+ if(!currentCurrencyInfo.value.currencyCode) {
|
|
|
+ iptErrMsgTxt.value = "Please select a currency"
|
|
|
+ } else if (!baseFormData.amountValue) {
|
|
|
+ iptErrMsgTxt.value = "Please enter the ‘reward’ amount";
|
|
|
+ } else if (!baseFormData.totalCount) {
|
|
|
+ iptErrMsgTxt.value = "Please enter the ‘winners’ amount";
|
|
|
+ } else if(+baseFormData.amountValue < +currentCurrencyInfo.value.balance) {
|
|
|
let res = calcIptValue();
|
|
|
if (!res.flag) {
|
|
|
- iptErrMsgTxt.value = `Please reduce the 'winners' amount to ${res.count}`;
|
|
|
+ iptErrMsgTxt.value = `Please reduce the ‘winners’ amount to ${res.count}`;
|
|
|
} else {
|
|
|
- setIsEmptyTxt();
|
|
|
+ iptErrMsgTxt.value = "";
|
|
|
}
|
|
|
} else if(currentCurrencyInfo.value.currencyCode != 'USD') {
|
|
|
iptErrMsgTxt.value = `Insufficient ${currentCurrencyInfo.value.currencyName} balance, please recharge`;
|
|
@@ -931,6 +957,9 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
+ window.onresize = throttle(function () {
|
|
|
+ setDialogHeight()
|
|
|
+ }, 300)
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -1228,20 +1257,19 @@ onMounted(() => {
|
|
|
}
|
|
|
.currency-select {
|
|
|
max-width: 124px;
|
|
|
- box-shadow: 5px 0 10px -5px #0000001A;
|
|
|
- padding: 16px 0 16px 14px;
|
|
|
- border-bottom-left-radius: 12px;
|
|
|
- border-top-left-radius: 12px;
|
|
|
cursor: pointer;
|
|
|
+ background: #F4F4F4;
|
|
|
+ margin-left: 6px;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 12px;
|
|
|
.text {
|
|
|
- max-width: 68px;
|
|
|
- overflow: hidden;
|
|
|
+ // max-width: 68px;
|
|
|
+ // overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
.arrow {
|
|
|
margin-left: 5px;
|
|
|
- margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|