1101

src/main/pc-space/package.json

@@ -12,7 +12,9 @@
         "core-js": "^3.6.5",
         "element-ui": "^2.15.6",
         "qs": "^6.10.1",
+        "swiper": "5.x",
         "vue": "^2.6.11",
+        "vue-awesome-swiper": "^4.1.1",
         "vue-clipboard2": "^0.3.3",
         "vue-router": "^3.2.0",
         "vue-social-share": "^0.0.3",

src/main/pc-space/src/components/CollectionInfo.vue

@@ -1,7 +1,7 @@
 <template>
     <router-link
         :to="{
-            path: '/storeDetail',
+            path: '/collectionDetail',
             query: {
                 id: info.id
             }

src/main/pc-space/src/router/index.js

@@ -57,9 +57,9 @@ const routes = [
                 }
             },
             {
-                path: '/storeDetail',
-                name: 'storeDetail',
-                component: () => import('../views/StoreDetail.vue'),
+                path: '/collectionDetail',
+                name: 'collectionDetail',
+                component: () => import('../views/CollectionDetail.vue'),
                 meta: {
                     title: '数字盲盒详情'
                 }

src/main/pc-space/src/styles/list.less

@@ -34,7 +34,7 @@
     }
 
     .content {
-        // height: 416px;
+        width: 276px;
         .line(@radius:8px);
         display: inline-block;
         margin: 16px;

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

@@ -3,6 +3,13 @@
         <div class="top">
             <div>
                 <img class="imgBox" src="../assets/img/888.jpg" alt="" />
+                <swiper ref="mySwiper" :options="swiperOptions">
+                    <swiper-slide>Slide 1</swiper-slide>
+                    <swiper-slide>Slide 2</swiper-slide>
+                    <swiper-slide>Slide 3</swiper-slide>
+                    <swiper-slide>Slide 4</swiper-slide>
+                    <swiper-slide>Slide 5</swiper-slide>
+                </swiper>
                 <div class="works">
                     <img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
                     <div class="works2">该作品已在保存至区块链并进行权益保护</div>
@@ -152,17 +159,68 @@
 </template>
 <script>
 import GoodsInfo from '../components/GoodsInfo.vue';
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
+import 'swiper/css/swiper.css';
 export default {
-    components: { GoodsInfo },
+    components: { GoodsInfo, Swiper, SwiperSlide },
     data() {
         return {
             showMore: false,
             showMore1: false,
             showMore2: false,
-            tableData: []
+            tableData: [],
+            info: {},
+            blindBoxItems: [],
+            swiperOptions: {}
         };
     },
-    methods: {}
+    computed: {
+        banners() {
+            return this.info.pics || [];
+        },
+        properties() {
+            return this.info.properties || [];
+        },
+        isBuy() {
+            return this.info.stock && this.info.onShelf && this.info.salable;
+        },
+        boxs() {
+            let list = [...this.blindBoxItems];
+            return list.map(item => {
+                return this.getImg(this.changeImgs(item.pics));
+            });
+        }
+    },
+    mounted() {
+        this.getDetail();
+    },
+    methods: {
+        getDetail() {
+            this.$http
+                .get('/collection/get/' + this.$route.query.id)
+                .then(res => {
+                    this.info = res;
+                    if (res.type === 'BLIND_BOX') {
+                        return this.$http.post(
+                            '/blindBoxItem/all',
+                            {
+                                query: {
+                                    blindBoxId: res.id
+                                }
+                            },
+                            { body: 'json' }
+                        );
+                    } else {
+                        return Promise.resolve();
+                    }
+                })
+                .then(res => {
+                    if (res) {
+                        this.blindBoxItems = res.content;
+                    }
+                });
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
@@ -473,4 +531,9 @@ export default {
         }
     }
 }
+.mySwiper {
+    /deep/.swiper-slide {
+        width: 460px;
+    }
+}
 </style>

src/main/pc-space/yarn.lock

@@ -3245,6 +3245,13 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
+  integrity sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==
+  dependencies:
+    ssr-window "^2.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -7637,6 +7644,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssr-window@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
+  integrity sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==
+
 ssri@^6.0.1:
   version "6.0.2"
   resolved "https://registry.nlark.com/ssri/download/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
@@ -7878,6 +7890,14 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swiper@5.x:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f"
+  integrity sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==
+  dependencies:
+    dom7 "^2.1.5"
+    ssr-window "^2.0.0"
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.npmmirror.com/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1633019371192&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ftable%2Fdownload%2Ftable-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -8358,6 +8378,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-awesome-swiper@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz#8f7ab221ad003021d756b86aa618f429924900fe"
+  integrity sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==
+
 vue-cli-plugin-style-resources-loader@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz#3e95f4df41f5408e1255664690698c0533648109"