|
|
|
@ -23,13 +23,15 @@ |
|
|
|
<div class="m-wx_index" v-show="step==2"> |
|
|
|
<el-button type="default" |
|
|
|
@click="toStep(1)">取消返回</el-button> |
|
|
|
<el-button type="info" |
|
|
|
@click="isInPreview = true">预览</el-button> |
|
|
|
<el-button type="success" |
|
|
|
@click="save">保存</el-button> |
|
|
|
<el-button type="danger" |
|
|
|
@click="publish">发布</el-button> |
|
|
|
|
|
|
|
<el-row class="wrap" :gutter="20"> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-col :span="5"> |
|
|
|
<h4>选择组件</h4> |
|
|
|
<div class="mw-cpt_type"> |
|
|
|
<div class="d-function" v-show="item.componentList.length > 0" :key="item.functionId" v-for="item in cptTypeList"> |
|
|
|
@ -46,9 +48,11 @@ |
|
|
|
</div> |
|
|
|
<div class="d-list" v-show="item.isUnfold"> |
|
|
|
<div class="d-item" :key="cptItem.componentId" v-for="cptItem in item.componentList"> |
|
|
|
<span class="d-item-region">({{ getCptRegionName(checkCptRegion(cptItem)) }})</span> |
|
|
|
<span class="d-item-name">{{ cptItem.componentName }}</span> |
|
|
|
<span class="d-item-btn" @click="beforeAddCpt(cptItem)"> |
|
|
|
<img class="d-item-ico" src="@/assets/img/modules/wx-mini/index-set/add.png"> |
|
|
|
<span class="d-item-btn z-disabled" v-if="checkCptRegion(cptItem)!=='cnt' && checkExistCpt(cptItem)">已添加</span> |
|
|
|
<span class="d-item-btn" v-else @click="beforeAddCpt(cptItem)"> |
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/add.png"> |
|
|
|
<span>添加</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
@ -56,36 +60,111 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="14"> |
|
|
|
<div class="mw-show"> |
|
|
|
<el-col :span="13"> |
|
|
|
<div class="mw-show" :class="{'z-preview': isInPreview}"> |
|
|
|
<div v-show="isInPreview" class="mw-show-close"> |
|
|
|
<el-button type="default" |
|
|
|
@click="isInPreview = false" icon="el-icon-close" circle></el-button> |
|
|
|
</div> |
|
|
|
<div class="mw-phone"> |
|
|
|
<div class="mw-phone-top z-none"> |
|
|
|
<div class="mw-phone-hint" :class="{'z-out-left': topCptList.length>0}">（标题区）</div> |
|
|
|
<div class="mw-phone-top" v-show="!isInPreview || topCptList.length>0" :class="{'z-none': !isInPreview}"> |
|
|
|
<div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-left': topCptList.length>0}">（{{ getCptRegionName('top') }}）</div> |
|
|
|
<div class="mw-cpt" |
|
|
|
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}" |
|
|
|
@click="focusCpt(item)" :key="item.componentId" |
|
|
|
v-for="item in topCptList"> |
|
|
|
<div class="mw-cpt-top_title" v-if="item.componentFrontId==='top_title'"> |
|
|
|
<span>{{ item.demoData.content }}</span> |
|
|
|
<div class="mw-cpt-top_title" v-if="item.componentFrontId==='gridNameTitle'"> |
|
|
|
<div class="d-cpt-wrap"> |
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/page/dang.png"> |
|
|
|
<span>{{ item.demoData.content }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="d-cpt-operate z-small" |
|
|
|
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" |
|
|
|
@click.stop> |
|
|
|
<div class="d-cpt-btn" @click="delCpt(item)"> |
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> |
|
|
|
<p>删除</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="mw-phone-ban z-none"> |
|
|
|
<div class="mw-phone-hint" :class="{'z-out-left': banCptList.length>0}">（置顶区）</div> |
|
|
|
<div class="mw-phone-ban" v-show="!isInPreview || banCptList.length>0" :class="{'z-none': !isInPreview}"> |
|
|
|
<div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-left': banCptList.length>0}">（{{ getCptRegionName('ban') }}）</div> |
|
|
|
<div class="mw-cpt" |
|
|
|
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}" |
|
|
|
@click="focusCpt(item)" :key="item.componentId" |
|
|
|
v-for="item in banCptList"> |
|
|
|
<div class="mw-cpt-swiper" v-if="item.componentFrontId==='hotNewsSwiper'"> |
|
|
|
<div class="d-cpt-wrap"> |
|
|
|
<div class="d-cpt-subwrap"> |
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png"> |
|
|
|
<div> |
|
|
|
<span>{{ item.demoData.content }}</span> |
|
|
|
<i></i> |
|
|
|
<i></i> |
|
|
|
<i></i> |
|
|
|
<i class="z-on"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="d-cpt-operate z-small" |
|
|
|
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" |
|
|
|
@click.stop> |
|
|
|
<div class="d-cpt-btn" @click="delCpt(item)"> |
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> |
|
|
|
<p>删除</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="mw-phone-fixed z-none"> |
|
|
|
<div class="mw-phone-hint" :class="{'z-out-down': fixedCptList.length>0}">（浮窗区）</div> |
|
|
|
<div class="mw-phone-fixed" v-show="!isInPreview || fixedCptList.length>0" :class="{'z-none': !isInPreview}"> |
|
|
|
<div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-down': fixedCptList.length>0}">（{{ getCptRegionName('fixed') }}）</div> |
|
|
|
<div class="mw-cpt" |
|
|
|
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}" |
|
|
|
@click="focusCpt(item)" :key="item.componentId" |
|
|
|
v-for="item in fixedCptList"> |
|
|
|
<div class="mw-cpt-new_msg" v-if="item.componentFrontId==='newMessageButton'"> |
|
|
|
<div class="d-cpt-wrap"> |
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/page/msg.png"> |
|
|
|
<span>有新消息！</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="d-cpt-operate z-small" |
|
|
|
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" |
|
|
|
@click.stop> |
|
|
|
<div class="d-cpt-btn" @click="delCpt(item)"> |
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> |
|
|
|
<p>删除</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="mw-phone-cnt z-none"> |
|
|
|
<div class="mw-phone-hint" :class="{'z-out-left': cntCptList.length>0}">（功能区）</div> |
|
|
|
<div class="mw-phone-cnt" v-show="!isInPreview || cntCptList.length>0" :class="{'z-none': !isInPreview}"> |
|
|
|
<div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-left': cntCptList.length>0}">（{{ getCptRegionName('cnt') }}）</div> |
|
|
|
<div class="mw-cpt" |
|
|
|
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}" |
|
|
|
@click="focusCpt(item)" |
|
|
|
:key="index" |
|
|
|
v-for="(item, index) in cntCptList"> |
|
|
|
<div class="mw-cpt-cnt_news" :style="{backgroundColor: item.configuration.bgc}" v-if="item.componentFrontId==='cnt_news'"> |
|
|
|
<div class="d-news-title">{{ item.demoData.title }}</div> |
|
|
|
<p class="d-news-cnt">{{ item.demoData.content }}</p> |
|
|
|
<div class="mw-cpt-cnt_news" |
|
|
|
:style="{backgroundColor: item.configuration.bgc}" |
|
|
|
v-if="item.componentFrontId==='hotSubjectList'"> |
|
|
|
<div class="d-cpt-wrap"> |
|
|
|
<div class="list"> |
|
|
|
<div class="item"> |
|
|
|
<div class="d-news-title">{{ item.demoData.title }}</div> |
|
|
|
<div class="d-news-info"> |
|
|
|
<span>{{ item.demoData.content }}</span> |
|
|
|
<span>2020-01-02</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="d-cpt-operate" |
|
|
|
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" |
|
|
|
@click.stop> |
|
|
|
@ -117,12 +196,9 @@ |
|
|
|
:class="{'z-unfold': focusedCpt.demoIsUnfold}" |
|
|
|
src="@/assets/img/modules/wx-mini/index-set/arrow-down.png"> |
|
|
|
</div> |
|
|
|
<el-form v-show="focusedCpt.demoIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.demoData" size="mini"> |
|
|
|
<el-form-item label="标题"> |
|
|
|
<el-input v-model="focusedCpt.demoData.title"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="内容"> |
|
|
|
<el-input type="textarea" v-model="focusedCpt.demoData.content"></el-input> |
|
|
|
<el-form v-show="focusedCpt.demoIsUnfold" ref="form"> |
|
|
|
<el-form-item> |
|
|
|
<el-input type="textarea" v-model="focusedCpt.demoData"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
@ -132,9 +208,9 @@ |
|
|
|
:class="{'z-unfold': focusedCpt.confIsUnfold}" |
|
|
|
src="@/assets/img/modules/wx-mini/index-set/arrow-down.png"> |
|
|
|
</div> |
|
|
|
<el-form v-show="focusedCpt.confIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.configuration" size="mini"> |
|
|
|
<el-form-item label="背景色"> |
|
|
|
<el-input v-model="focusedCpt.configuration.bgc"></el-input> |
|
|
|
<el-form v-show="focusedCpt.confIsUnfold" ref="form"> |
|
|
|
<el-form-item> |
|
|
|
<el-input type="textarea" v-model="focusedCpt.configuration"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
@ -190,6 +266,9 @@ export default { |
|
|
|
clientType: '' |
|
|
|
}, |
|
|
|
|
|
|
|
// 在预览中状态 |
|
|
|
isInPreview: false, |
|
|
|
|
|
|
|
// 可用列表 |
|
|
|
cptTypeList: [ |
|
|
|
// 通用组件 |
|
|
|
@ -202,7 +281,31 @@ export default { |
|
|
|
{ |
|
|
|
componentId: '1', |
|
|
|
componentName: '顶部标题', |
|
|
|
componentFrontId: 'top_title', |
|
|
|
componentFrontId: 'gridNameTitle', |
|
|
|
configuration: { |
|
|
|
content: '青岛市党委' |
|
|
|
}, |
|
|
|
demoData: { |
|
|
|
content: '青岛市市北区大港路第二网格' |
|
|
|
}, |
|
|
|
configurationDescription: '请配置具体内容' |
|
|
|
}, |
|
|
|
{ |
|
|
|
componentId: '2', |
|
|
|
componentName: '轮播图', |
|
|
|
componentFrontId: 'hotNewsSwiper', |
|
|
|
configuration: { |
|
|
|
content: '青岛市党委' |
|
|
|
}, |
|
|
|
demoData: { |
|
|
|
content: '我是标题' |
|
|
|
}, |
|
|
|
configurationDescription: '请配置具体内容' |
|
|
|
}, |
|
|
|
{ |
|
|
|
componentId: '3', |
|
|
|
componentName: '消息通知', |
|
|
|
componentFrontId: 'newMessageButton', |
|
|
|
configuration: { |
|
|
|
content: '青岛市党委' |
|
|
|
}, |
|
|
|
@ -222,8 +325,34 @@ export default { |
|
|
|
componentList: [ |
|
|
|
{ |
|
|
|
componentId: '5', |
|
|
|
componentName: '新闻类', |
|
|
|
componentFrontId: 'cnt_news', |
|
|
|
componentName: '功能菜单', |
|
|
|
componentFrontId: 'moreFunctionIcons', |
|
|
|
configuration: { |
|
|
|
bgc: '#eee' |
|
|
|
}, |
|
|
|
demoData: { |
|
|
|
title: '我是标题', |
|
|
|
content: '我是内容。我是内容。我是内容。' |
|
|
|
}, |
|
|
|
configurationDescription: '请配置具体内容' |
|
|
|
}, |
|
|
|
{ |
|
|
|
componentId: '6', |
|
|
|
componentName: '热门群', |
|
|
|
componentFrontId: 'recommendGroupSlider', |
|
|
|
configuration: { |
|
|
|
bgc: '#eee' |
|
|
|
}, |
|
|
|
demoData: { |
|
|
|
title: '我是标题', |
|
|
|
content: '我是内容。我是内容。我是内容。' |
|
|
|
}, |
|
|
|
configurationDescription: '请配置具体内容' |
|
|
|
}, |
|
|
|
{ |
|
|
|
componentId: '7', |
|
|
|
componentName: '新闻列表', |
|
|
|
componentFrontId: 'hotSubjectList', |
|
|
|
configuration: { |
|
|
|
bgc: '#eee' |
|
|
|
}, |
|
|
|
@ -317,18 +446,28 @@ export default { |
|
|
|
checkCptRegion (item) { |
|
|
|
const { componentFrontId } = item |
|
|
|
const fun = name => name === componentFrontId |
|
|
|
if (['top_title'].findIndex(fun) !== -1) { |
|
|
|
if (['gridNameTitle'].findIndex(fun) !== -1) { |
|
|
|
return 'top' |
|
|
|
} else if (['ban_banner'].findIndex(fun) !== -1) { |
|
|
|
} else if (['hotNewsSwiper'].findIndex(fun) !== -1) { |
|
|
|
return 'ban' |
|
|
|
} else if (['cnt_news'].findIndex(fun) !== -1) { |
|
|
|
} else if (['moreFunctionIcons', 'recommendGroupSlider', 'hotSubjectList'].findIndex(fun) !== -1) { |
|
|
|
return 'cnt' |
|
|
|
} else if (['fixed_msg'].findIndex(fun) !== -1) { |
|
|
|
} else if (['newMessageButton'].findIndex(fun) !== -1) { |
|
|
|
return 'fixed' |
|
|
|
} else { |
|
|
|
return 'none' |
|
|
|
} |
|
|
|
}, |
|
|
|
// 根据所属区域简称得到名字 |
|
|
|
getCptRegionName (id) { |
|
|
|
return { |
|
|
|
'top': '标题区', |
|
|
|
'ban': '置顶区', |
|
|
|
'fixed': '浮窗区', |
|
|
|
'cnt': '功能区', |
|
|
|
'none': '' |
|
|
|
}[id] |
|
|
|
}, |
|
|
|
// 添加组件到实例-前验证 |
|
|
|
beforeAddCpt (item) { |
|
|
|
console.log('添加组件到实例-前验证') |
|
|
|
@ -389,13 +528,18 @@ export default { |
|
|
|
delCpt (item) { |
|
|
|
this.cptList = this.cptList.filter(cptItem => item.tempOnlyId !== cptItem.tempOnlyId) |
|
|
|
}, |
|
|
|
// 检测实例中是否存在某种类型组件 |
|
|
|
checkExistCpt (item) { |
|
|
|
return this.cptList.some(cptItem => item.componentFrontId === cptItem.componentFrontId) |
|
|
|
}, |
|
|
|
// 聚焦实例组件 |
|
|
|
focusCpt (item) { |
|
|
|
console.log('聚焦实例组件') |
|
|
|
if (this.isInPreview) return |
|
|
|
if (this.focusedCpt.tempOnlyId === item.tempOnlyId) { |
|
|
|
this.focusedCpt = { tempOnlyId: '' } |
|
|
|
} else { |
|
|
|
this.focusedCpt = { ...cloneDeep(item), demoIsUnfold: true, confIsUnfold: false } |
|
|
|
this.focusedCpt = { ...cloneDeep(item), demoData: JSON.stringify(item.demoData), configuration: JSON.stringify(item.configuration), demoIsUnfold: true, confIsUnfold: false } |
|
|
|
} |
|
|
|
}, |
|
|
|
// 保存聚焦组件数据 |
|
|
|
@ -403,18 +547,25 @@ export default { |
|
|
|
const { focusedCpt } = this |
|
|
|
this.cptList.forEach(item => { |
|
|
|
if (item.tempOnlyId === focusedCpt.tempOnlyId) { |
|
|
|
item.demoData = cloneDeep(focusedCpt.demoData) |
|
|
|
item.configuration = cloneDeep(focusedCpt.configuration) |
|
|
|
try { |
|
|
|
item.demoData = JSON.parse(focusedCpt.demoData) |
|
|
|
item.configuration = JSON.parse(focusedCpt.configuration) |
|
|
|
} catch (err) { |
|
|
|
this.$alert('json数据格式有误', '无法保存', { |
|
|
|
confirmButtonText: '确定' |
|
|
|
}) |
|
|
|
console.log(err) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 重置聚焦组件数据 |
|
|
|
resetFocusedCptData () { |
|
|
|
const { focusedCpt } = this |
|
|
|
this.cptTypeListTiled.forEach(item => { |
|
|
|
if (item.componentId === focusedCpt.componentId) { |
|
|
|
focusedCpt.demoData = cloneDeep(item.demoData) |
|
|
|
focusedCpt.configuration = cloneDeep(item.configuration) |
|
|
|
this.cptList.forEach(item => { |
|
|
|
if (item.tempOnlyId === focusedCpt.tempOnlyId) { |
|
|
|
focusedCpt.demoData = JSON.stringify(item.demoData) |
|
|
|
focusedCpt.configuration = JSON.stringify(item.configuration) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
yangshaoping
6 years ago
