购买流程

src/pages/nft/add.vue

@@ -7,9 +7,11 @@
                 <template v-if="configList.length">
                     <div class="show">
                         <div class="card" :class="selectItem.modelName">
-                            <div class="logo"></div>
-                            <div class="member">LegalDAO Members</div>
-                            <div class="number">0001</div>
+                            <div class="logo">
+                                <img v-if="uploadItem && uploadItem.imagePath" :src="uploadItem.imagePath" alt="">
+                            </div>
+                            <div class="member">{{ projectName === '' ? 'xxxx' : projectName }}</div>
+                            <div class="number">{{ projectNo === '' ? '0000' : projectNo }}</div>
                         </div>
                         <img class="bg" :src="selectItem.mainImagePath" />
                     </div>
@@ -32,9 +34,9 @@
                 <div class="name">Card face</div>
                 <div class="face">
                     <input type="file" class="file" @change="uploadImg" accept="image/png,image/jpg,image/jpeg"  />
-                    <div class="on" v-if="isUpload">
+                    <div class="on" v-if="uploadItem && uploadItem.imagePath">
                         <img src="../../static/img/icon-add-cover-on.svg" alt="" />
-                        <img class="img" src="" alt="" />
+                        <img class="img" :src="uploadItem.imagePath" alt="" />
                     </div>
                     <div class="off" v-else>
                         <img src="../../static/img/icon-add-cover-off.svg" alt="" />
@@ -42,26 +44,26 @@
                 </div>
                 <div class="desc">Recommended size 500*500 or more</div>
                 <div class="name">Project Name</div>
-                <div class="input"><input type="text" /></div>
+                <div class="input"><input type="text" maxlength="30" v-model="projectName" placeholder="Your NFT Project Name" /></div>
 
                 <div class="name">Project Description</div>
-                <div class="input"><input type="text" /></div>
+                <div class="input"><input type="text" maxlength="100" v-model="projectDesc" placeholder="Your NFT Project Description" /></div>
 
                 <div class="name">Collection Size</div>
-                <div class="input"><input type="text" /></div>
+                <div class="input"><input type="text" v-model="projectSize" placeholder="0" /></div>
 
                 <div class="name">NFTs Price</div>
                 <div class="price">
                     <div class="currency" @click="showCurrencyDialog" v-if="currencyItem">
                         <img class="head" :src="currencyItem.iconPath" alt="" />
-                        <div class="font">{{currencyItem.currencyName}}</div>
+                        <div class="font">{{currencyItem.tokenSymbol}}</div>
                         <img class="arrow" src="../../static/img/icon-add-arrow.svg" alt="" />
                     </div>
                     <div class="no-select" @click="showCurrencyDialog" v-else>
                         <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="text" /></div>
+                    <div class="input"><input type="number" v-model="projectPrice" @input="changePrice" placeholder="0" /></div>
                     <!-- 货币列表 -->
                     <div class="currency-pop" v-if="currencyDialog">
                         <currency-list @selectCurrencyItem="selectCurrencyItem"></currency-list>
@@ -100,29 +102,34 @@
     <div class="succ" v-if="showSuccess">
         <img class="icon" src="../../static/img/icon-notice-succ.svg" alt="" />
         <div class="notic">Your NFTs are Created</div>
-        <button class="btn">Done</button>
+        <button class="btn"  @click="hideSuccess">Done</button>
     </div>
-    <div class="succ-bg" v-if="showSuccess"></div>
+    <div class="succ-bg" v-if="showSuccess" @click="hideSuccess"></div>
 
     <div class="mask-bg" v-if="currencyDialog" @click="hideCurrencyDialog"></div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watchEffect } from 'vue';
 import Api from '../../static/http/api';
 import { postRequest } from '../../static/http';
 import { uploadFile } from '../../static/utils/upload'
 import currencyList from '../../components/currency-list.vue';
 
 const isNext = ref(false);
-const isUpload = ref(false);
 const showLoading = ref(false);
 const showSuccess = ref(false);
 const maxSize = ref(1000);
 const configList = ref([]);
 const selectItem = ref(null);
+const uploadItem = ref({});
 const currencyDialog = ref(false);
 const currencyItem = ref(null);
+const projectName = ref('');
+const projectDesc = ref('');
+const projectSize = ref('');
+const projectNo = ref('');
+const projectPrice = ref('');
 
 const getConfig = () => {
     postRequest(Api.createConfig).then(res => {
@@ -135,7 +142,36 @@ const getConfig = () => {
     })
 }
 
-const next = () => {}
+const next = () => {
+    // show loading
+    showLoading.value = true;
+    // post 
+    postRequest(Api.userNftAdd, {
+        params: {
+            // 项目图标
+            cardFaceImagePath: uploadItem.value && uploadItem.value.objectKey || '',
+            // 发行数量
+            nftCollectionSize: projectSize.value || '',
+            // 选中的模版id
+            nftItemImageModel: selectItem.value && selectItem.value.modelName || '',
+            // 项目描述
+            nftProjectDescription: projectDesc.value || '',
+            // 项目名称
+            nftProjectName: projectName.value || '',
+            // 销售价格
+            saleCurrencyAmount: projectSize.value || '',
+            // 销售的货币code
+            saleCurrencyCode: currencyItem.value && currencyItem.value.currencyCode || '',
+        }
+    }).then(res => {
+        if (res.code === 0) {
+            showSuccess.value = true;
+            location.href = `/nft/list`
+        }
+    }).finally(() => {
+        showLoading.value = false;
+    })
+}
 
 const select = (item: any) => {
     selectItem.value = item;
@@ -160,10 +196,45 @@ const uploadImg = (e: any) => {
     e.target.value = '';
     // upload 
     uploadFile(file).then(res => {
-        console.log(333, res)
+        // @ts-ignore
+        uploadItem.value = res;
     })
 }
 
+const hideSuccess = () => {
+    showSuccess.value = false;
+}
+
+const changePrice = (e: any) => {
+    projectPrice.value = String(Math.abs(e.target.value))
+}
+
+watchEffect(() => {
+    // 数量
+    let num = projectSize.value;
+    num = num.replace(/\D/g, '');
+    if (Number(num) > maxSize.value) {
+        num = String(maxSize.value);
+    }
+    projectSize.value = num;
+    // 编号
+    if (projectSize.value !== '') {
+        projectNo.value = String(1).padStart(String(projectSize.value).length, '0')
+    } else {
+        projectNo.value = ''
+    }
+
+    // 是否可以创建
+    let ifUpload = uploadItem.value && uploadItem.value.objectKey || false;
+    let ifName = projectName.value !== '';
+    let ifDesc = projectDesc.value !== '';
+    let ifSize = projectSize.value !== '';
+    let ifCurrency = currencyItem.value && currencyItem.value.currencyCode;
+    let ifPrice = projectPrice.value && projectPrice.value !== ''
+
+    isNext.value = ifUpload && ifName && ifDesc && ifSize && ifCurrency && ifPrice;
+})
+
 onMounted(() => {
     // config
     getConfig()
@@ -227,6 +298,12 @@ onMounted(() => {
                         height: 100px;
                         border-radius: 50%;
                         background-color: #fff;
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 50%;
+                            object-fit: cover;
+                        }
                     }
                     .member {
                         position: absolute;
@@ -292,6 +369,7 @@ onMounted(() => {
                 margin-bottom: 10px;
                 .file {
                     position: absolute;
+                    z-index: 2;
                     width: 100%;
                     height: 100%;
                     opacity: 0;
@@ -348,10 +426,14 @@ onMounted(() => {
                     border: 0;
                     outline: none;
                     padding: 3px 0;
+                    color: #777;
                     font-size: 16px;
                     font-weight: 500;
                     letter-spacing: 0.3px;
                     width: calc(100% - 24px);
+                    &::placeholder {
+                        color: rgba(0, 0, 0, .3);
+                    }
                 }
             }
             .price {

src/static/http/index.ts

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { removeStorage, storageKey } from '../utils/storage'
 import { getEnvConfig, getMid, getUserInfo, appVersionCode, } from '../utils';
 // 测试数据(需手动开启关闭)
-import '../mockjs/index';
+// import '../mockjs/index';
 
 // axios config
 const { host } = getEnvConfig();