|
|
<template>
|
|
|
<Modal v-model="model"
|
|
|
width="800"
|
|
|
:mask-closable="false"
|
|
|
class-name="vertical-center-modal">
|
|
|
|
|
|
<div style="text-align: center; padding: 0">
|
|
|
<div style="text-align: center; padding: 0;">
|
|
|
<template>
|
|
|
<Carousel v-model="carousel" v-if="showCarousel">
|
|
|
<Carousel-item v-for="list in items" ref="show" :key="list.id">
|
|
|
<div class="carousel-item">
|
|
|
<img :src="list.imagesPath"/>
|
|
|
</div>
|
|
|
<Carousel-item v-for="list in items" :key="list.id">
|
|
|
<img :src="list.imagesPath"/>
|
|
|
</Carousel-item>
|
|
|
</Carousel>
|
|
|
</template>
|
...
|
...
|
@@ -35,23 +32,18 @@ export default { |
|
|
data() {
|
|
|
return {
|
|
|
model: false,
|
|
|
modal_loading: false,
|
|
|
showCarousel: false,
|
|
|
self: this,
|
|
|
items: {
|
|
|
imgData: []
|
|
|
},
|
|
|
id: '',
|
|
|
shopId: '',
|
|
|
defectGoodsId: '',
|
|
|
imagesPath: '',
|
|
|
carousel: 0
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
show(row) {
|
|
|
this.reset();
|
|
|
this.imagesPath = row.imagesPath;
|
|
|
this.id = row.id;
|
|
|
this.shopId = row.shopId;
|
|
|
this.model = true;
|
...
|
...
|
@@ -63,12 +55,10 @@ export default { |
|
|
this.model = false;
|
|
|
},
|
|
|
reset() {
|
|
|
this.carousel = 0;
|
|
|
this.showCarousel = false;
|
|
|
this.imagesPath = null;
|
|
|
this.id = null;
|
|
|
this.shopId = null;
|
|
|
this.defectGoodsId = null;
|
|
|
this.modal_loading = false;
|
|
|
},
|
|
|
getData() {
|
|
|
this.sellService.imgDetail(this.shopId, this.id)
|
...
|
...
|
@@ -76,7 +66,7 @@ export default { |
|
|
if (result.code === 200) {
|
|
|
this.items = result.data;
|
|
|
_.forEach(this.items, it => {
|
|
|
it.imagesPath = it.imagesPath.replace(/{width}x{height}/g, '568x400');
|
|
|
it.imagesPath = it.imagesPath.replace(/{width}x{height}/g, '800x600');
|
|
|
});
|
|
|
this.$nextTick(() => {
|
|
|
this.showCarousel = true;
|
...
|
...
|
@@ -104,23 +94,4 @@ export default { |
|
|
.ivu-modal-close {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.carousel-item {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
min-height: 400px;
|
|
|
background-color: #000;
|
|
|
display: table;
|
|
|
|
|
|
img {
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
min-width: 740px;
|
|
|
min-height: 400px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</style> |
...
|
...
|
|