添加

src/pages/nft/add.vue

@@ -4,21 +4,28 @@
         <div class="content">
             <div class="l">
                 <div class="name">Preview</div>
-                <div class="show">
-                    <div class="card">
-                        <div class="absolute">
+                <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>
-                        <img class="bg" src="" alt="" />
+                        <img class="bg" :src="selectItem.mainImagePath" />
                     </div>
-                </div>
-                <div class="list">
-                    <div class="item on"></div>
-                    <div class="item"></div>
-                    <div class="item"></div>
-                    <div class="item"></div>
+                    <div class="list">
+                        <div
+                            class="item"
+                            :class="{ on: item.modelName === selectItem.modelName }"
+                            @click="select(item)"
+                            v-for="(item, index) in configList"
+                            :key="index">
+                            <img :src="item.previewImagePath" alt="" />
+                        </div>
+                    </div>
+                </template>
+                <div class="wait" v-else>
+                    <img width="30" src="../../static/img/icon-loading-gray.png" alt="" />
                 </div>
             </div>
             <div class="r">
@@ -100,19 +107,35 @@ 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 getConfig = () => {
-    postRequest(Api.createConfig).then(res => {})
+    postRequest(Api.createConfig).then(res => {
+        let { code, data } = res;
+        if ( code === 0 ) {
+            configList.value = data.itemModels;
+            maxSize.value = data.maxCollectionSize;
+            selectItem.value = data.itemModels[0];
+        }
+    })
 }
 
 const next = () => {}
 
+const select = (item: any) => {
+    selectItem.value = item;
+}
+
 const uploadImg = (e: any) => {
     let file = e.target.files[0];
     // 清空file
     e.target.value = '';
-    
-    uploadFile(file);
+    // upload 
+    uploadFile(file).then(res => {
+        console.log(333, res)
+    })
 }
 
 onMounted(() => {
@@ -126,7 +149,7 @@ onMounted(() => {
 .center {
     overflow-y: auto;
     padding: 0 50px;
-    max-width: 1100px;
+    width: 1100px;
     margin: 10px auto 0;
     box-sizing: border-box;
     height: calc(100% - 10px);
@@ -149,56 +172,59 @@ onMounted(() => {
         }
         .l {
             width: 400px;
+            .wait {
+                padding: 200px 0;
+                text-align: center;
+                img {
+                    opacity: .6;
+                    animation: rotate 1s infinite linear;
+                }
+            }
             .show {
-                display: flex;
-                align-items: center;
-                justify-content: center;
+                position: relative;
+                overflow: hidden;
+                width: 400px;
                 height: 400px;
-                border-radius: 5px;
-                background: #F2F2F2;
-                border: 1px solid #F0F0F0;
+                border-radius: 10px;
                 .card {
-                    position: relative;
-                    overflow: hidden;
-                    width: 336px;
-                    height: 189px;
-                    border-radius: 12px;
-                    background: #353535;
-                    .absolute {
+                    position: absolute;
+                    left: 53px;
+                    top: 103px;
+                    width: 294px;
+                    height: 186px;
+                    .logo {
                         position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 100%;
-                        text-align: center;
-                        .logo {
-                            margin: auto;
-                            width: 80px;
-                            height: 80px;
-                            margin-top: 20px;
-                            margin-bottom: 12px;
-                            border-radius: 50%;
-                            background-color: #225dab;
-                        }
-                        .member {
-                            color: #fff;
-                            font-size: 28px;
-                            font-weight: 800;
-                            line-height: 33px;
-                        }
-                        .number {
-                            margin-top: 4px;
-                            font-size: 24px;
-                            font-weight: 800;
-                            letter-spacing: 0.12px;
-                            color: rgba(255, 255, 255, .4);
-                        }
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        width: 100px;
+                        height: 100px;
+                        border-radius: 50%;
+                        background-color: #fff;
                     }
-                    
-                    .bg {
-                        width: 100%;
-                        height: 100%;
+                    .member {
+                        position: absolute;
+                        top: 11px;
+                        left: 11px;
+                        color: #fff;
+                        font-size: 12px;
+                        font-weight: 800;
+                        line-height: 13px;
                     }
+                    .number {
+                        position: absolute;
+                        top: 11px;
+                        right: 10px;
+                        color: #fff;
+                        font-size: 12px;
+                        font-weight: 800;
+                        line-height: 13px;
+                        letter-spacing: 1px;
+                    }
+                }
+                .bg {
+                    width: 100%;
+                    height: 100%;
                 }
             }
             .list {
@@ -206,21 +232,28 @@ onMounted(() => {
                 display: flex;
                 .item {
                     width: calc(100% / 4);
-                    height: 90px;
                     cursor: pointer;
                     margin-right: 13px;
                     border-radius: 5px;
-                    background: #F2F2F2;
-                    border: 1px solid rgba(0, 0, 0, 0.1);
+                    img {
+                        width: 100%;
+                    }
                     &:last-child {
                         margin: 0;
                     }
                     &.on {
-                        border: 1px solid rgba(0, 0, 0, 0.1);
-                        background-color: #D2D2D2;
-                        background-repeat: no-repeat;
-                        background-position: right top;
-                        background-image: url('../../static/img/icon-add-select.svg');
+                        position: relative;
+                        &::before {
+                            position: absolute;
+                            display: block;
+                            top: 0;
+                            right: 0;
+                            content: '';
+                            width: 44px;
+                            height: 44px;
+                            background-size: 100%;
+                            background-image: url('../../static/img/icon-add-select.svg');
+                        }
                     }
                 }
             }

src/static/img/icon-add-select.svg

@@ -1,4 +1,4 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0H30V30L0 0Z" fill="#1D9BF0"/>
-<path d="M15.3984 9.79688L19.1143 13.7604L25.3074 5.83331" stroke="white" stroke-width="1.875"/>
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H39C41.7614 0 44 2.23858 44 5V44L0 0Z" fill="#1D9BF0"/>
+<path d="M26.3984 12.7969L30.8101 17.5027L38.163 8.09106" stroke="white" stroke-width="2.5"/>
 </svg>

src/static/utils/upload.ts

@@ -1,15 +1,20 @@
 import axios from 'axios';
 import Api from '../http/api';
 import { postRequest } from '../http'
+import { ElMessage } from 'element-plus'
 
 export const uploadFile = async (file: any) => {
     let imgInfo = await getImgInfo(file);
-    let uploadRes = await upload(imgInfo, file);
-    console.log(333, uploadRes)
+    let status = await upload(imgInfo, file);
+    if (status) {
+        return imgInfo
+    } else {
+        return false;
+    }
 }
 
 const getImgInfo = (file: any) => {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
         let type = file.type || 'image/jpg';
         postRequest(Api.mediaUpload, {
             params: {
@@ -24,14 +29,17 @@ const getImgInfo = (file: any) => {
                 resolve(data)
             }
         }).catch(error => {
-            reject(error)
+            ElMessage({
+                type: 'error',
+                message: 'network error!'
+            })
         })
     })
 }
  
 const upload = (params: any, file: any) => {
     let type = file.type || 'image/jpg';
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
         axios({
             method: 'PUT',
             url: params.url,
@@ -42,9 +50,20 @@ const upload = (params: any, file: any) => {
                 'Content-Type': type,
             }
         }).then(res => {
-            resolve(res)
+            let { status } = res
+            if (status == 200) {
+                resolve(true)
+            } else {
+                ElMessage({
+                    type: 'error',
+                    message: 'upload error!'
+                })
+            }
         }).catch(error => {
-            reject(error)
+            ElMessage({
+                type: 'error',
+                message: 'upload error!'
+            })
         })
     })
 }