min price

src/components/currency-list.vue

@@ -12,7 +12,7 @@
                 v-if="keywords"
                 @click="clearIpt" >
         </div>
-        <div class="list-wrapper">
+        <div class="list-wrapper" :class="{min: showSearch}">
             <template v-if="!showSearch">
                 <div
                     class="list-item"
@@ -238,6 +238,9 @@ onBeforeMount(() => {
 .list-wrapper {
     overflow-y: auto;
     max-height: calc(420px - 60px);
+    &.min {
+        min-height: 200px;
+    }
     .list-item {
         .item-title {
             display: flex;

src/pages/nft/add.vue

@@ -64,7 +64,10 @@
                         <div class="font">Select a reward</div>
                         <img class="arrow" src="../../static/img/icon-add-arrow-white.svg" alt="" />
                     </div>
-                    <div class="input"><input type="number" v-model="projectPrice" @input="changePrice" placeholder="0" /></div>
+                    <div class="input">
+                        <div class="tips" v-if="showMinPrice">the price of each NFT must be above $0.1 USD</div>
+                        <input type="number" v-model="projectPrice" @input="changePrice" placeholder="0" />
+                    </div>
                     <!-- 货币列表 -->
                     <div class="currency-pop" v-if="currencyDialog">
                         <currency-list @selectCurrencyItem="selectCurrencyItem"></currency-list>
@@ -116,13 +119,15 @@ import Api from '../../static/http/api';
 import { postRequest } from '../../static/http';
 import { uploadFile } from '../../static/utils/upload'
 import { Report } from '../../static/report'
+import { debounce } from '../../static/utils'
 import { businessType, pageSource, objectType } from '../../static/report/enum'
 import currencyList from '../../components/currency-list.vue';
 
 const isNext = ref(false);
 const showLoading = ref(false);
 const showSuccess = ref(false);
-const maxSize = ref(1000);
+const maxSize = ref(100000);
+const minUsdAmount = ref(0)
 const configList = ref([]);
 const selectItem = ref(null);
 const uploadItem = ref({});
@@ -134,6 +139,7 @@ const projectSize = ref('');
 const projectNo = ref('');
 const projectPrice = ref('');
 const showNoStr = ref(false);
+const showMinPrice = ref(false);
 const buttonType = {
     feedback: 'feedback-button',
     create: 'create-button',
@@ -146,6 +152,7 @@ const getConfig = () => {
             configList.value = data.itemModels;
             maxSize.value = data.maxCollectionSize;
             selectItem.value = data.itemModels[0];
+            minUsdAmount.value = data.sellMinUsdAmount;
 
             // 预加载图片
             if (data.itemModels) {
@@ -264,9 +271,9 @@ const jumpList = () => {
     location.href = `/nft/list`
 }
 
-const changePrice = (e: any) => {
+const changePrice = debounce((e: any) => {
     projectPrice.value = String(Math.abs(e.target.value))
-}
+}, 500)
 
 const feedback = () => {
     // Report
@@ -287,13 +294,6 @@ let timer = ref(0);
 
 watchEffect(() => {
     let emojiReg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
-    let nameValue = projectName.value.trim();
-    projectName.value = nameValue.replace(emojiReg, '');
-    // setTimeout
-    clearTimeout(timer.value);
-    timer.value = setTimeout(() => {
-        projectDesc.value = projectDesc.value.trim()
-    }, 400)
 
     // 数量
     let num = projectSize.value;
@@ -323,6 +323,23 @@ watchEffect(() => {
     let ifCurrency = currencyItem.value && currencyItem.value.currencyCode;
     let ifPrice = projectPrice.value && projectPrice.value !== '' && Number(projectPrice.value) > 0;
 
+    // setTimeout
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+        let nameValue = projectName.value.trim();
+        projectName.value = nameValue.replace(emojiReg, '');
+        projectDesc.value = projectDesc.value.trim()
+        // 最低金额
+        if (ifCurrency && ifPrice) {
+            let usdPrice = currencyItem.value && currencyItem.value.usdPrice;
+            if (Number(usdPrice) * Number(projectPrice.value) < Number(minUsdAmount.value)) {
+                showMinPrice.value = true;
+            } else {
+                showMinPrice.value = false;
+            }
+        }
+    }, 400)
+
     isNext.value = ifUpload && ifName && ifDesc && ifSize && ifCurrency && ifPrice;
 })
 
@@ -548,6 +565,7 @@ onMounted(() => {
                 margin-bottom: 22px;
             }
             .input {
+                position: relative;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -569,12 +587,18 @@ onMounted(() => {
                         color: rgba(0, 0, 0, .3);
                     }
                 }
+                .tips {
+                    position: absolute;
+                    left: 0;
+                    top: -22px;
+                    color: #E29015;
+                }
             }
             .textarea {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                height: 88px;
+                height: 72px;
                 margin-bottom: 22px;
                 border-radius: 5px;
                 background: #FFFFFF;
@@ -582,7 +606,7 @@ onMounted(() => {
                 textarea {
                     resize: none;
                     border: 0;
-                    height: 70px;
+                    height: 52px;
                     outline: none;
                     color: #777;
                     font-size: 16px;