<template>
|
<div class="carousel">
|
<div style="margin: 15px;" v-show="!isSlide3d">
|
<el-button size="mini" @click="openHigLevelConfig" type="danger">高级设置</el-button>
|
</div>
|
<el-form-item :label="isSlide3d? '滑动图片：':'轮播图片：'" :required="true">
|
<div class="carouselItem" v-for='(item,index) in fileList' :key='index'>
|
<el-row>
|
<el-col class="avatar-uploader" :span="10">
|
<img :src="item.url"/>
|
<span 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-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 < (isSlide3d ? 3 :6)" 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>
|
</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 { mapMutations } from 'vuex'
|
|
export default {
|
components: { carouselHigLevel, productSelected, proActivitySelected },
|
props: ['form', 'isSlide3d'],
|
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'
|
}
|
],
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
selectedActDialog: {
|
show: false,
|
title: '选择活动'
|
}
|
}
|
},
|
computed: {
|
fileList () {
|
return this.form.banners
|
}
|
},
|
methods: {
|
...mapMutations(['updateCurrent']),
|
/**
|
* 当活动选择优惠券时
|
*/
|
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
|
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.promotionType = null
|
switch (item.type) {
|
case '1':
|
item.btnText = '添加链接'
|
break
|
case '2':
|
item.btnText = '选择商品信息'
|
break
|
case '3':
|
item.btnText = '选择活动详情'
|
break
|
default:
|
break
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (data) {
|
this.imgUrl = null
|
this.fileList.push({
|
id: data.id,
|
url: data.url,
|
type: '1',
|
btnText: '添加链接',
|
content: null
|
})
|
this.updateCurrent({ banners: this.fileList })
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (data) {
|
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,.5);
|
transition: opacity .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>
|
