<template>
|
<div class="carousel">
|
<el-form-item label="滑动图片：" :required="true">
|
<div class="carouselItem" v-for='(item,index) in fileList' :key='index'>
|
<el-row>
|
<el-col class="avatar-uploader" :span="10">
|
<img v-show="item.url" :src="item.url" />
|
<custom-upload-img v-show="!item.url" class="carouselUploadImg"
|
@handle-success="(data)=>handleSuccess(data,item)" :resource="imgUrl">
|
<template slot="file">
|
<img :src="imgUrl" style="width:148px;height:148px;" />
|
</template>
|
</custom-upload-img>
|
<span v-show="item.url" class="el-upload-list__item-actions">
|
<span class="el-upload-list__item-preview" @click="handlePreview(item)">
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span class="el-upload-list__item-delete" @click="handleRemove(item)">
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</el-col>
|
<el-col :span="14">
|
<el-select @change="changeType(item)" v-model="item.type">
|
<el-option v-show="(item.value !== '4' && index>1) || index<=1"
|
v-for="item in carouseltTypeArr" :key="item.value" :value="item.value"
|
:label="item.label"></el-option>
|
</el-select>
|
<el-button style="margin:15px 0;" v-show="item.btnText"
|
@click="addItemContent(item, index)" type="danger">{{item.btnText}}
|
</el-button>
|
<div class="itemContent"
|
:title="item.link ? item.link : item.content ? item.content : ''">
|
{{item.link}}{{item.content}}
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<custom-upload-img v-show="fileList.length < 3" class="carouselUploadImg"
|
@handle-success="handleSuccess" :resource="imgUrl">
|
<template slot="file">
|
<img :src="imgUrl" style="width:148px;height:148px;" />
|
</template>
|
</custom-upload-img>
|
</el-form-item>
|
<carousel-hig-level :form='form' :show.sync="show"></carousel-hig-level>
|
<el-dialog :visible.sync="dialogVisible">
|
<img :src="imgShow" width="100%" />
|
</el-dialog>
|
<el-dialog :visible.sync="jumpDialogVisible" :close-on-click-modal="false"
|
:modal-append-to-body="false" width="500px" title="请添加跳转链接">
|
<el-input v-model="link" placeholder="如：/pages/index，若需帮助请联系开发人员"></el-input>
|
<div slot="footer" class="dialog-footer buttonPosition">
|
<el-button size="mini" @click="submit" type="primary">确定</el-button>
|
<el-button size="mini" @click="jumpDialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
<product-selected :show.sync='selectedDialog.show' :title="selectedDialog.title"
|
:multipleSelected="false">
|
<el-table-column>
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceProItem(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</product-selected>
|
<pro-activity-selected :show.sync='selectedActDialog.show' :title="selectedActDialog.title"
|
@selected-coupon="selectedCoupon" :multipleSelected="false">
|
<el-table-column>
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceActItem(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</pro-activity-selected>
|
<article-category :show.sync='selectedArticleDialog.show' :title="selectedArticleDialog.title"
|
width="300px" @handle-tree-select="handleRreeSelectData"
|
:checkedTreeData="checkedData" :firstCategoryData="firstCategory">
|
</article-category>
|
</div>
|
</template>
|
|
<script>
|
import carouselHigLevel from '@/views/diy-form/set-up/components/carouselHigLevel.vue'
|
import productSelected from '@/views/diy-form/set-up/components/selectLists/productSelected.vue'
|
import proActivitySelected from '@/views/diy-form/set-up/components/selectLists/proActivitySelected.vue'
|
import articleCategory from '@/views/diy-form/set-up/components/selectLists/articleCategory.vue'
|
import catPublicityApi from '@/api/catPublicity'
|
import { mapMutations } from 'vuex'
|
|
export default {
|
components: { carouselHigLevel, productSelected, proActivitySelected, articleCategory },
|
props: ['form'],
|
data () {
|
return {
|
show: false,
|
imgUrl: null,
|
imgShow: null,
|
dialogVisible: false,
|
jumpDialogVisible: false,
|
link: null,
|
itemIndex: null,
|
carouseltTypeArr: [
|
{
|
label: '仅图片',
|
value: '1'
|
},
|
{
|
label: '商品详情',
|
value: '2'
|
},
|
{
|
label: '活动详情',
|
value: '3'
|
},
|
{
|
label: '文章列表',
|
value: '4'
|
}
|
],
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
selectedActDialog: {
|
show: false,
|
title: '选择活动'
|
},
|
selectedArticleDialog: {
|
show: false,
|
title: '选择文章'
|
},
|
checkedData: [], // 选中的树
|
firstCategory: [] // 选中的一级分类
|
}
|
},
|
computed: {
|
fileList () {
|
return this.form.banners
|
}
|
},
|
methods: {
|
...mapMutations(['updateCurrent']),
|
/**
|
* 获取选中的文章分类
|
*/
|
handleRreeSelectData (checkedData, firstCategory) {
|
this.fileList[this.itemIndex].firstCategory = firstCategory
|
this.fileList[this.itemIndex].checkedData = checkedData
|
checkedData.forEach(async (item, index) => {
|
try {
|
const res = await catPublicityApi.getAppList({ param: { publicityId: item.publicityId }, pageNum: 1, pageSize: 4 })
|
if (res.code === '0') {
|
this.fileList[this.itemIndex].checkedData[index].articleArray = res.data.list.map(item => {
|
return {
|
articleId: item.articleId,
|
articleName: item.articleName
|
}
|
})
|
}
|
} catch (error) {
|
}
|
})
|
this.fileList[this.itemIndex].content = checkedData.map(item => { return item.content }).join(',')
|
},
|
/**
|
* 当活动选择优惠券时
|
*/
|
selectedCoupon (val) {
|
let str = null
|
switch (val) {
|
case '5':
|
str = '把用户引导到优惠券领取界面'
|
break
|
case '4':
|
str = '把用户引导到限时秒杀界面'
|
break
|
case '7':
|
str = '把用户引导到活动中心'
|
break
|
default:
|
break
|
}
|
this.fileList[this.itemIndex].content = str
|
this.fileList[this.itemIndex].promotionId = 'coupon' + this.itemIndex
|
this.fileList[this.itemIndex].promotionType = val
|
this.updateCurrent({ banners: this.fileList })
|
},
|
/**
|
* 为每个类型添加对应内容
|
*/
|
addItemContent (item, index) {
|
switch (item.type) {
|
case '1':
|
this.jumpDialogVisible = true
|
this.link = null
|
break
|
case '2':
|
this.selectedDialog.show = true
|
break
|
case '3':
|
this.selectedActDialog.show = true
|
break
|
case '4':
|
this.selectedArticleDialog.show = true
|
this.checkedData = item.checkedData && JSON.parse(JSON.stringify(item.checkedData))
|
this.firstCategory = item.firstCategory && JSON.parse(JSON.stringify(item.firstCategory))
|
break
|
default:
|
break
|
}
|
this.itemIndex = index
|
},
|
// 选择商品
|
choiceProItem (row) {
|
this.selectedDialog.show = false
|
this.fileList[this.itemIndex].content = row.spuName
|
this.fileList[this.itemIndex].spuId = row.spuId
|
this.fileList[this.itemIndex].shopSpuId = row.shopSpuId
|
this.updateCurrent({ banners: this.fileList })
|
},
|
// 选择活动
|
choiceActItem (row) {
|
this.selectedActDialog.show = false
|
this.fileList[this.itemIndex].content = row.promotionName
|
this.fileList[this.itemIndex].promotionId = row.promotionId
|
this.fileList[this.itemIndex].promotionType = row.promotionType
|
this.updateCurrent({ banners: this.fileList })
|
},
|
/**
|
* 保存链接
|
*/
|
submit () {
|
this.fileList[this.itemIndex].link = this.link
|
this.updateCurrent({ banners: this.fileList })
|
this.jumpDialogVisible = false
|
},
|
/**
|
* 打开弹出框查看图片
|
*/
|
handlePreview (item) {
|
this.dialogVisible = true
|
this.imgShow = item.url
|
},
|
/**
|
* 打开高级配置页面
|
*/
|
openHigLevelConfig () {
|
this.show = true
|
},
|
/**
|
* 获取按钮显示文字
|
*/
|
changeType (item) {
|
item.content = null
|
item.link = null
|
item.spuId = null
|
item.shopSpuId = null
|
item.promotionId = null
|
item.firstCategory = []
|
item.checkedData = []
|
item.promotionType = null
|
switch (item.type) {
|
case '1':
|
item.btnText = '添加链接'
|
break
|
case '2':
|
item.btnText = '选择商品信息'
|
break
|
case '3':
|
item.btnText = '选择活动详情'
|
break
|
case '4':
|
item.btnText = '选择文章'
|
break
|
default:
|
break
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (data, item) {
|
if (item) {
|
item.id = data.id
|
item.url = data.url
|
} else {
|
this.imgUrl = null
|
this.fileList.push({
|
id: data.id,
|
url: data.url,
|
type: '1',
|
btnText: '添加链接',
|
content: null
|
})
|
}
|
|
this.updateCurrent({ banners: this.fileList })
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (data) {
|
data.url = null
|
data.id = null
|
// const index = this.fileList.findIndex(item => item.id === data.id)
|
// if (index !== -1) {
|
// this.fileList.splice(index, 1)
|
// }
|
this.updateCurrent({ banners: this.fileList })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.carouselItem {
|
width: 398px;
|
display: inline-block;
|
img {
|
width: 148px;
|
height: 148px;
|
border-radius: 6px;
|
}
|
.itemContent {
|
max-width: 230px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
.carouselUploadImg {
|
display: inline-block;
|
}
|
.carousel .avatar-uploader {
|
position: relative;
|
.el-upload-list__item-actions {
|
position: absolute;
|
width: 148px;
|
height: 148px;
|
left: 0;
|
top: 0;
|
cursor: default;
|
text-align: center;
|
color: #fff;
|
opacity: 0;
|
font-size: 20px;
|
background-color: rgba(0, 0, 0, 0.5);
|
transition: opacity 0.3s;
|
border-radius: 6px;
|
line-height: 148px;
|
span {
|
cursor: pointer;
|
}
|
.el-upload-list__item-delete {
|
position: static;
|
font-size: inherit;
|
color: inherit;
|
}
|
span + span {
|
margin-left: 15px;
|
}
|
}
|
.el-upload-list__item-actions:hover {
|
opacity: 1;
|
span {
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
