|
@@ -1,5 +1,12 @@
|
|
<template>
|
|
<template>
|
|
- <a-modal :title="title" :width="1300" :visible="visible" @cancel="handleCancel" cancelText="关闭">
|
|
|
|
|
|
+ <a-modal
|
|
|
|
+ :title="title"
|
|
|
|
+ :width="1300"
|
|
|
|
+ :visible="visible"
|
|
|
|
+ @cancel="handleCancel"
|
|
|
|
+ cancelText="关闭"
|
|
|
|
+ class="ad_cover_container"
|
|
|
|
+ >
|
|
<div>
|
|
<div>
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="8" class="addetail_left">
|
|
<a-col :span="8" class="addetail_left">
|
|
@@ -28,14 +35,14 @@
|
|
</div>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
<a-tab-pane tab="视频封面" key="2">
|
|
<a-tab-pane tab="视频封面" key="2">
|
|
- <a-carousel>
|
|
|
|
|
|
+ <a-carousel class="cover_carousel_con">
|
|
<div v-if="videoModel != null">
|
|
<div v-if="videoModel != null">
|
|
<img :src="videoModel.coverUrl" :width="360" />
|
|
<img :src="videoModel.coverUrl" :width="360" />
|
|
</div>
|
|
</div>
|
|
</a-carousel>
|
|
</a-carousel>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
- <a-tab-pane tab="广告封面" key="3">
|
|
|
|
- <a-carousel arrows>
|
|
|
|
|
|
+ <a-tab-pane tab="广告封面" key="3" class="cover_container">
|
|
|
|
+ <a-carousel arrows class="cover_carousel_con">
|
|
<div v-for="(item,index) in model" :key="index">
|
|
<div v-for="(item,index) in model" :key="index">
|
|
<img :src="item.coverUrl" :width="360" />
|
|
<img :src="item.coverUrl" :width="360" />
|
|
</div>
|
|
</div>
|
|
@@ -44,17 +51,13 @@
|
|
slot-scope
|
|
slot-scope
|
|
class="custom-slick-arrow slick_arrow_left"
|
|
class="custom-slick-arrow slick_arrow_left"
|
|
style="left: 10px;zIndex: 1"
|
|
style="left: 10px;zIndex: 1"
|
|
- >
|
|
|
|
- <a-icon type="left-circle" />
|
|
|
|
- </div>
|
|
|
|
|
|
+ ></div>
|
|
<div
|
|
<div
|
|
slot="nextArrow"
|
|
slot="nextArrow"
|
|
slot-scope
|
|
slot-scope
|
|
class="custom-slick-arrow slick_arrow_right"
|
|
class="custom-slick-arrow slick_arrow_right"
|
|
style="right: 10px;zIndex: 9"
|
|
style="right: 10px;zIndex: 9"
|
|
- >
|
|
|
|
- <a-icon type="right-circle" />
|
|
|
|
- </div>
|
|
|
|
|
|
+ ></div>
|
|
</a-carousel>
|
|
</a-carousel>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tabs>
|
|
@@ -91,7 +94,29 @@
|
|
<detail-list-item term="二级行业">{{userModel.secondIndustry}}</detail-list-item>
|
|
<detail-list-item term="二级行业">{{userModel.secondIndustry}}</detail-list-item>
|
|
</detail-list>
|
|
</detail-list>
|
|
</div>
|
|
</div>
|
|
- <a-table :columns="goodsColumns" :dataSource="model" :pagination="false"></a-table>
|
|
|
|
|
|
+ <a-table :columns="goodsColumns" :dataSource="model" :pagination="false">
|
|
|
|
+ <!-- 图片预览 -->
|
|
|
|
+ <div slot="ADcoverImagePreview" slot-scope="text, record">
|
|
|
|
+ <img
|
|
|
|
+ style="width:100px;"
|
|
|
|
+ :src="record.coverUrl"
|
|
|
|
+ @click="coverPreviewShowModal(record,'preview')"
|
|
|
|
+ />
|
|
|
|
+ <a-modal
|
|
|
|
+ title="图片预览"
|
|
|
|
+ v-model="coverPreviewVisible"
|
|
|
|
+ @ok="coverPreviewHandleOk"
|
|
|
|
+ @cancel="coverPreviewHandleCancel"
|
|
|
|
+ :footer="null"
|
|
|
|
+ :maskStyle="coverPreviewMaskStyle"
|
|
|
|
+ >
|
|
|
|
+ <div style="text-align:center;">
|
|
|
|
+ <img style="width:350px;" :src="coverPreviewUrl" />
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 图片预览 E -->
|
|
|
|
+ </a-table>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
@@ -125,6 +150,13 @@ export default {
|
|
key: 'coverId'
|
|
key: 'coverId'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
|
|
+ title: '封面预览',
|
|
|
|
+ // dataIndex: 'coverUrl',
|
|
|
|
+ // key: 'coverUrl',
|
|
|
|
+ dataIndex: 'ADcoverImagePreview',
|
|
|
|
+ scopedSlots: { customRender: 'ADcoverImagePreview' }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
title: '创意ID',
|
|
title: '创意ID',
|
|
dataIndex: 'creativeId',
|
|
dataIndex: 'creativeId',
|
|
key: 'creativeId'
|
|
key: 'creativeId'
|
|
@@ -205,7 +237,14 @@ export default {
|
|
return res.result
|
|
return res.result
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- defaultActiveKey:"1"
|
|
|
|
|
|
+ defaultActiveKey: '1',
|
|
|
|
+
|
|
|
|
+ // 封面预览弹窗
|
|
|
|
+ coverPreviewVisible: false,
|
|
|
|
+ coverPreviewMaskStyle: {
|
|
|
|
+ background: 'rgba(0,0,0,.08)'
|
|
|
|
+ },
|
|
|
|
+ coverPreviewUrl: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -281,7 +320,7 @@ export default {
|
|
this.userId = userId
|
|
this.userId = userId
|
|
this.loadDetail(photoId, userId)
|
|
this.loadDetail(photoId, userId)
|
|
this.visible = true
|
|
this.visible = true
|
|
- this.defaultActiveKey = "1"
|
|
|
|
|
|
+ this.defaultActiveKey = '1'
|
|
},
|
|
},
|
|
loadDetail(photoId, userId) {
|
|
loadDetail(photoId, userId) {
|
|
var params = {
|
|
var params = {
|
|
@@ -306,20 +345,42 @@ export default {
|
|
close() {
|
|
close() {
|
|
this.$emit('close')
|
|
this.$emit('close')
|
|
this.visible = false
|
|
this.visible = false
|
|
- this.defaultActiveKey = "1";
|
|
|
|
|
|
+ this.defaultActiveKey = '1'
|
|
},
|
|
},
|
|
handleCancel() {
|
|
handleCancel() {
|
|
this.close()
|
|
this.close()
|
|
- this.defaultActiveKey = "1";
|
|
|
|
|
|
+ this.defaultActiveKey = '1'
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 封面预览弹窗
|
|
|
|
+ coverPreviewShowModal(record) {
|
|
|
|
+ this.coverPreviewVisible = true
|
|
|
|
+ this.coverPreviewUrl = record.coverUrl
|
|
|
|
+ this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
|
|
|
|
+ },
|
|
|
|
+ coverPreviewHandleOk() {
|
|
|
|
+ this.coverPreviewVisible = false
|
|
|
|
+ this.coverPreviewMaskStyle.background = 0
|
|
|
|
+ },
|
|
|
|
+ coverPreviewHandleCancel() {
|
|
|
|
+ this.coverPreviewVisible = false
|
|
|
|
+ this.coverPreviewUrl = ''
|
|
|
|
+ this.coverPreviewMaskStyle.background = 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
-<style lang="scss" scoped>
|
|
|
|
|
|
+<style lang="scss">
|
|
|
|
+.ad_cover_container {
|
|
|
|
+ .ant-modal-body {
|
|
|
|
+ max-height: 650px;
|
|
|
|
+ overflow-y: scroll;
|
|
|
|
+ }
|
|
|
|
+}
|
|
.ant-carousel >>> .slick-slide {
|
|
.ant-carousel >>> .slick-slide {
|
|
text-align: center;
|
|
text-align: center;
|
|
- height: 160px;
|
|
|
|
- line-height: 160px;
|
|
|
|
|
|
+ // height: 160px;
|
|
|
|
+ // line-height: 160px;
|
|
background: #364d79;
|
|
background: #364d79;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|