其他nft

src/main/nine-space/src/components/asset/assetInfo.vue

@@ -9,7 +9,7 @@
         class="product"
         @click="click"
     >
-        <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(info.pic)" fit="cover" />
+        <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(changeImgs(info.pic))" fit="cover" />
 
         <div class="content">
             <div class="name van-ellipsis">
@@ -42,9 +42,10 @@
 
 <script>
 import asset from '../../mixins/asset';
+import product from '../../mixins/product';
 
 export default {
-    mixins: [asset],
+    mixins: [asset, product],
     props: {
         info: {
             type: Object,

src/main/nine-space/src/components/product/productInfo.vue

@@ -9,7 +9,7 @@
         class="product"
         @click="click"
     >
-        <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(info.pics || info.pic)" fit="cover" />
+        <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(changeImgs(info.pics))" fit="cover" />
 
         <div class="content">
             <div class="name van-ellipsis">
@@ -31,7 +31,9 @@
 </template>
 
 <script>
+import product from '../../mixins/product';
 export default {
+    mixins: [product],
     props: {
         info: {
             type: Object,

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

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

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

@@ -18,7 +18,27 @@ export default {
                     label: '拍卖系列',
                     value: 'AUCTION'
                 }
+            ],
+            picsTypes: [
+                {
+                    label: '视频',
+                    value: 'video/mp4'
+                }
             ]
         };
+    },
+    methods: {
+        changeImgs(list = []) {
+            return list.map(item => {
+                if (item.type === 'video/mp4') {
+                    return item.thumb;
+                } else {
+                    return item.url;
+                }
+            });
+        },
+        isVideo(info = {}) {
+            return info.type === 'video/mp4';
+        }
     }
 };

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

@@ -2,7 +2,23 @@
     <div class="detail">
         <swiper pagination class="mySwiper" v-if="banners.length > 0">
             <swiper-slide v-for="(item, index) in banners" :key="index">
-                <img :src="item" />
+                <video
+                    class="swiper-video"
+                    v-if="isVideo(item)"
+                    :src="item.url"
+                    :poster="getImg(changeImgs([item]))"
+                    controls="controls"
+                >
+                    您的浏览器不支持 video 标签。
+                </video>
+                <van-image
+                    v-else
+                    @click="preview(index, changeImgs(banners))"
+                    :src="item.url"
+                    width="100vw"
+                    height="100vw"
+                    fit="scale-down"
+                />
             </swiper-slide>
         </swiper>
 
@@ -125,7 +141,9 @@ import 'swiper/swiper-bundle.min.css';
 import SwiperCore, { Pagination } from 'swiper';
 import Post from '../../components/Post.vue';
 import asset from '../../mixins/asset';
+import product from '../../mixins/product';
 import { mapState } from 'vuex';
+import { ImagePreview } from 'vant';
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
@@ -137,7 +155,7 @@ export default {
         Post
     },
 
-    mixins: [asset],
+    mixins: [asset, product],
     data() {
         return {
             activeName: '1',
@@ -162,6 +180,12 @@ export default {
         this.getProduct();
     },
     methods: {
+        preview(index = 0, list = []) {
+            ImagePreview({
+                images: [...list],
+                startPosition: index
+            });
+        },
         getProduct() {
             this.$toast.loading({
                 message: '加载中...',

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

@@ -3,7 +3,24 @@
         <swiper pagination class="mySwiper" v-if="banners.length > 0">
             <swiper-slide v-for="(item, index) in banners" :key="index">
                 <!-- <img :src="item" /> -->
-                <van-image @click="preview(index, banners)" :src="item" width="100vw" height="100vw" fit="scale-down" />
+
+                <video
+                    class="swiper-video"
+                    v-if="isVideo(item)"
+                    :src="item.url"
+                    :poster="getImg(changeImgs([item]))"
+                    controls="controls"
+                >
+                    您的浏览器不支持 video 标签。
+                </video>
+                <van-image
+                    v-else
+                    @click="preview(index, changeImgs(banners))"
+                    :src="item.url"
+                    width="100vw"
+                    height="100vw"
+                    fit="scale-down"
+                />
             </swiper-slide>
         </swiper>
 
@@ -122,6 +139,7 @@ import { ImagePreview } from 'vant';
 
 // install Swiper modules
 SwiperCore.use([Pagination]);
+import product from '../../mixins/product';
 
 export default {
     components: {
@@ -129,7 +147,7 @@ export default {
         SwiperSlide,
         Post
     },
-
+    mixins: [product],
     data() {
         return {
             activeName: '1',
@@ -152,7 +170,7 @@ export default {
         boxs() {
             let list = [...this.blindBoxItems];
             return list.map(item => {
-                return this.getImg(item.pics);
+                return this.getImg(this.changeImgs(item.pics));
             });
         }
     },
@@ -458,4 +476,8 @@ export default {
         height: auto;
     }
 }
+.swiper-video {
+    width: 100vw;
+    height: 100vw;
+}
 </style>