|
|
@@ -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>
|
panhui