详情

src/main/nine-space/.env.development

@@ -1 +1 @@
-VUE_APP_BASE_URL=http://localhost:8080
+VUE_APP_BASE_URL=https://nft.9space.vip

src/main/nine-space/src/views/product/Detail.vue

@@ -16,7 +16,7 @@
                 <van-image
                     v-else
                     @click="preview(index, changeImgs(banners))"
-                    :src="item.url"
+                    :src="getImg(item.url)"
                     width="100vw"
                     height="100vw"
                     fit="scale-down"
@@ -180,7 +180,9 @@ export default {
     methods: {
         preview(index = 0, list = []) {
             ImagePreview({
-                images: [...list],
+                images: [...list].map(item => {
+                    return this.getImg(item);
+                }),
                 startPosition: index
             });
         },

src/main/pc-space/src/mixins/common.js

@@ -58,7 +58,7 @@ export default {
                 return Promise.resolve(res.data);
             });
         },
-        getImg(imgs = '', type = '') {
+        getImg(imgs = '', type = '', size = 300) {
             if (!imgs) {
                 imgs = '';
             }
@@ -71,7 +71,7 @@ export default {
             });
             if (imgs.length > 0) {
                 let img = type ? imgs[0][type] : imgs[0];
-                return img + (/\.gif$/i.test(img) ? '' : '?x-oss-process=image/resize,h_300,m_lfit');
+                return img + (/\.gif$/i.test(img) ? '' : `?x-oss-process=image/resize,h_${size},m_lfit`);
             } else {
                 return '';
             }

src/main/pc-space/src/mixins/product.js

@@ -37,6 +37,13 @@ export default {
             startTime: ''
         };
     },
+    computed: {
+        bannerList() {
+            return [...this.changeImgs(this.banners)].map(item => {
+                return this.getImg(item, '', 800);
+            });
+        }
+    },
     methods: {
         changeImgs(list = []) {
             return list.map(item => {

src/main/pc-space/src/plugins/http.js

@@ -4,9 +4,9 @@ import qs from 'qs';
 let baseUrl = 'http://localhost:8080';
 switch (process.env.NODE_ENV) {
     case 'development':
-        // baseUrl = 'https://nft.9space.vip';
+        baseUrl = 'https://nft.9space.vip';
         // baseUrl = 'http://192.168.50.190:8080';
-        baseUrl = 'http://localhost:8080';
+        // baseUrl = 'http://localhost:8080';
         // baseUrl = 'http://192.168.50.190:8080';
         break;
     case 'test':

src/main/pc-space/src/views/CollectionDetail.vue

@@ -8,15 +8,15 @@
                             class="swiper-video"
                             v-if="isVideo(item)"
                             :src="item.url"
-                            :poster="getImg(changeImgs([item]))"
+                            :poster="getImg(changeImgs([item]), '', 800)"
                             controls="controls"
                         >
                             您的浏览器不支持 video 标签。
                         </video>
                         <el-image
                             v-else
-                            :src="item.url"
-                            :preview-src-list="changeImgs(banners)"
+                            :src="getImg(item.url, '', 800)"
+                            :preview-src-list="bannerList"
                             style="width: 460px; height: 520px"
                             fit="scale-down"
                         />
@@ -40,21 +40,31 @@
                         </div>
                     </div>
                 </div>
-                <router-link :to="{ path: '/castingDetail', query: { id: info.minterId } }" class="name">
-                    <img class="name1" :src="info.minterAvatar" alt="" />
-                    <div>
-                        <div class="name2">{{ info.minter }}</div>
-                        <div class="name3">铸造者</div>
-                    </div>
-                    <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
-                </router-link>
-                <div class="time">
+                <div class="name-list">
+                    <router-link :to="{ path: '/castingDetail', query: { id: info.minterId } }" class="name">
+                        <img class="name1" :src="info.minterAvatar" alt="" />
+                        <div>
+                            <div class="name2">{{ info.minter }}</div>
+                            <div class="name3">铸造者</div>
+                        </div>
+                        <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
+                    </router-link>
+                    <router-link :to="{ path: '/castingDetail', query: { id: info.ownerId } }" class="name">
+                        <img class="name1" :src="info.ownerAvatar" alt="" />
+                        <div>
+                            <div class="name2">{{ info.owner }}</div>
+                            <div class="name3">持有者</div>
+                        </div>
+                        <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
+                    </router-link>
+                </div>
+                <div class="time" v-if="info.salable">
                     <div class="time1">卖家定价</div>
                     <div class="time2" v-if="info.startTime">
                         首发抢购倒计时<span>{{ startTime }}</span>
                     </div>
                 </div>
-                <div class="price">
+                <div class="price" v-if="info.salable">
                     <div class="price1">
                         <div class="price2">价格</div>
                         <img class="price3" src="../assets/img/icon_jiage@3x.png" alt="" />
@@ -317,7 +327,7 @@ export default {
             .text {
                 position: absolute;
                 right: 24px;
-                top: 0;
+                top: -10px;
                 display: flex;
                 .text1 {
                     text-align: center;
@@ -341,13 +351,17 @@ export default {
                 }
             }
         }
+        .name-list {
+            display: flex;
+            padding: 12px 0;
+        }
         .name {
             display: flex;
             align-items: center;
             height: 64px;
             line-height: 64px;
-            padding-bottom: 23px;
             cursor: pointer;
+            margin-right: 80px;
 
             .name1 {
                 width: 38px;