<template>
|
<div>
|
<p class="basicTip">小贴士：为防止失真热区图片尺寸需与区域大小严格一致</p>
|
<div>
|
<el-form-item label="展示图片：">
|
<custom-upload-img
|
@handle-success="handleSuccess"
|
@handle-remove="handleRemove"
|
:fileList="fileList"
|
:form="form"
|
>
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="活动详情：" required>
|
<el-input
|
class="diyInput"
|
disabled
|
v-model="form.content"
|
:title="form.content"
|
placeholder="请选择一个活动"
|
>
|
<el-button id="append" @click="selectedItem" slot="append"
|
>选择活动</el-button
|
>
|
</el-input>
|
</el-form-item>
|
</div>
|
<div v-show="form.type&&form.type !== '3'">
|
<el-form-item required label="展示商品：">
|
<el-radio-group @change="changeIsDisplayProd" v-model="form.isDisplayProd">
|
<el-radio label="2">否</el-radio>
|
<el-radio label="1">是（默认展示前六个商品）</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<pro-activity-selected
|
:show.sync="selectedDialog.show"
|
:title="selectedDialog.title"
|
:multipleSelected="false"
|
:type="form.type"
|
>
|
<el-table-column>
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceItem(scope.row)" size="mini"
|
>添加</el-button
|
>
|
</template>
|
</el-table-column>
|
</pro-activity-selected>
|
</div>
|
</template>
|
|
<script>
|
import proActivitySelected from '@/views/diy-form/set-up/components/selectLists/proActivitySelected.vue'
|
import { mapMutations } from 'vuex'
|
export default {
|
props: ['form'],
|
components: { proActivitySelected },
|
data() {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择活动'
|
}
|
}
|
},
|
computed: {
|
fileList() {
|
return this.form.fileUrl
|
? [{ url: this.form.fileUrl, id: this.form.fileId }]
|
: []
|
}
|
},
|
methods: {
|
...mapMutations(['updateCurrent']),
|
/**
|
*当是展示商品时
|
*/
|
changeIsDisplayProd(val) {
|
if (val === '1') {
|
this.updateCurrent({ x: 10, w: 355, h: this.form.h + 250 })
|
} else {
|
this.updateCurrent({ h: this.form.h - 250 })
|
}
|
},
|
// 打开选择活动弹出框
|
selectedItem() {
|
this.selectedDialog.show = true
|
},
|
// 选择活动
|
choiceItem(row) {
|
this.selectedDialog.show = false
|
this.updateCurrent({
|
content: row.promotionName,
|
promotionId: row.promotionId
|
})
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(data) {
|
this.updateCurrent({ fileUrl: data.url, fileId: data.id })
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(data) {
|
this.updateCurrent({ fileUrl: null, fileId: null })
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
