<template>
|
<div class="diyContentArea">
|
<el-form ref="form" :inline="true" label-width="110px" :model="form" size="mini">
|
<basic-set v-if="componentId === 'basicSet'" :form="form"></basic-set>
|
<hot-area-position :form="form" :isDisabled="isDisabled" v-else>
|
<template slot="functionArea">
|
<el-form-item label="展示类型：" required>
|
<el-select v-model="form.type" placeholder="请选择展示类型" @change="changeType">
|
<el-option
|
v-for="item in activityTypeArr"
|
:key='item.value'
|
:label="item.label"
|
:value='item.value'
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<pro-details v-if="form.type==='proDetails'" :form="form" :isActive="true"></pro-details>
|
<noChoiceActivity v-else-if="form.type==='4' || form.type==='5'" :form="form"></noChoiceActivity>
|
<choiceActivity v-else :form="form"></choiceActivity>
|
</template>
|
</hot-area-position>
|
</el-form>
|
<div class="buttonPosition">
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
<el-button size="mini" @click="cancel">返回</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import basicSet from './basicSet.vue'
|
import { addDiy, editDiy } from '@/api/diy'
|
import { mapState, mapMutations } from 'vuex'
|
import { useSceneArray, useSceneMap } from '../commonData'
|
import { submitValidate } from '../submitValidate'
|
import hotAreaPosition from '../../../components/hotAreaPosition/index.vue'
|
import noChoiceActivity from './noChoiceActivity.vue'
|
import choiceActivity from './choiceActivity.vue'
|
import proDetails from '@/views/diy-form/set-up/components/proDetails.vue'
|
|
export default {
|
components: { basicSet, hotAreaPosition, noChoiceActivity, choiceActivity, proDetails },
|
props: {
|
componentId: {
|
type: String,
|
default: null
|
},
|
diyDes: {
|
type: String,
|
default: null
|
}
|
},
|
data () {
|
return {
|
form: { x: 1 },
|
useSceneMap,
|
activityTypeArr: useSceneArray,
|
isDisabled: false
|
}
|
},
|
computed: {
|
...mapState(['diyList', 'mousedown']),
|
actived () {
|
const arr = this.diyList.filter(v => {
|
return v.id === this.mousedown.activeId
|
})
|
return arr.length ? arr[0] : null
|
}
|
},
|
watch: {
|
actived: {
|
deep: true,
|
handler: function () {
|
this.form = this.actived
|
this.form.type = this.form.type === 'customPage' ? null : this.form.type
|
},
|
immediate: true
|
},
|
'form.isDisplayProd' () {
|
if (this.form.isDisplayProd === '1') {
|
this.isDisabled = true
|
} else {
|
this.isDisabled = false
|
}
|
}
|
},
|
methods: {
|
...mapMutations(['changeTypeDiyList']),
|
/**
|
*当活动类型改变时
|
*/
|
changeType (val) {
|
this.changeTypeDiyList(val)
|
this.form.isDisplayProd = '2'
|
if (this.form.type === '4') {
|
this.form.content = '把用户引导到限时秒杀界面'
|
} else if (this.form.type === '5') {
|
this.form.content = '把用户引导到优惠券领取界面'
|
}
|
},
|
/**
|
* 设置背景图片的高度
|
*/
|
getBasicsetBgHeight () {
|
this.diyList[0].bgImg.forEach(item => {
|
item.height = document.getElementById(item.id).height
|
})
|
},
|
/**
|
* 提交
|
*/
|
async submit () {
|
if (submitValidate(this.diyList, this.useSceneMap)) return // 表单验证
|
this.getBasicsetBgHeight()
|
console.log(this.diyList, '=====DIY配置信息2')
|
if (this.$route.query.id) {
|
const res = await editDiy({
|
id: this.$route.query.id,
|
styleInfo: JSON.stringify(this.diyList),
|
diyDes: this.diyList[0].activityName,
|
diyType: '2'
|
})
|
if (res.code === '0') {
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
})
|
// this.$router.push(`${this.$baseRouter}/activityCenter/list`)
|
}
|
} else {
|
this.addDiy()
|
}
|
},
|
/**
|
* 新增diy
|
*/
|
async addDiy () {
|
const res = await addDiy({
|
diyDes: this.diyList[0].activityName,
|
styleInfo: JSON.stringify(this.diyList),
|
diyType: '2'
|
})
|
if (res.code === '0') {
|
this.$message({
|
message: '添加成功',
|
type: 'success'
|
})
|
this.$router.push(`${this.$baseRouter}/activityCenter/list`)
|
}
|
},
|
/**
|
* 取消
|
*/
|
cancel () {
|
this.$router.push(`${this.$baseRouter}/activityCenter/list`)
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
.diyContentArea{
|
padding-top: 20px;
|
.el-form{
|
.el-form-item{
|
margin-right: 30px;
|
}
|
}
|
.basicTip{
|
color: #D70012;
|
padding-bottom: 20px;
|
font-size: 14px;
|
}
|
}
|
.buttonPosition{
|
text-align: center;
|
}
|
.itemTips {
|
font-size: 12px;
|
color: #909399;
|
}
|
.diyInput input{
|
width: 300px;
|
}
|
</style>
|
