|
|
@@ -32,7 +32,7 @@
|
|
|
</div>
|
|
|
<ul>
|
|
|
<div class="title">组件选择</div>
|
|
|
- <li v-for="(val, index) in typeList" :key="index + 1" @click="clickType(val)">
|
|
|
+ <li v-for="(val, index) in typeList" :key="index + 1" @click="clickType(val)" v-if="!val.hideShow">
|
|
|
<img :src="require('./assets/images/' + val.icon)">
|
|
|
<!-- <img src="./assets/images/l-kefu.png"> -->
|
|
|
<!-- <span :class="val.icon"></span> -->
|
|
|
@@ -62,12 +62,22 @@
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="item.isHover" :data-index="index" :key="index" class="item nobackground" :class="item.position"
|
|
|
+ <div v-if="item.isHover&&item.key!='fixedNode'" :data-index="index" :key="index" class="item nobackground" :class="item.position"
|
|
|
:style="'width:' + (item.width ? item.width : 100) + 'px;height:' + (item.height ? item.height : 100) + 'px;'"
|
|
|
@click="selectType(item)">
|
|
|
<component :is="item.com" :data="item" :key="index + '_'"></component>
|
|
|
<i @click="deleteItem($event, index)" class="el-icon-error"></i>
|
|
|
</div>
|
|
|
+ <div v-if="item.isHover&&item.key=='fixedNode'" :data-index="index" :key="index" class="item" :class="item.position" style="z-index:2"
|
|
|
+ >
|
|
|
+ <component :is="item.com" :data="item" :key="index + '_'"></component>
|
|
|
+ <i @click="deleteItemFixed($event, index)" class="el-icon-error"></i>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.isHover&&item.key=='fixedNode'" :data-index="index" :key="index+'hide'" class="item nobackground" :class="item.position" style="position: relative !important;visibility: hidden;"
|
|
|
+ >
|
|
|
+ <component :is="item.com" :data="item" :key="index + '_'"></component>
|
|
|
+ <i @click="deleteItemFixed($event, index)" class="el-icon-error"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
@@ -108,6 +118,7 @@ import editorRecharge from '@/components/View/editorRecharge'
|
|
|
import settingRecharge from '@/components/setting/settingRecharge'
|
|
|
import editorCoupon from '@/components/View/editorCoupon'
|
|
|
import settingCoupon from '@/components/setting/settingCoupon'
|
|
|
+import editorFixedNode from '@/components/View/editorFixedNode'
|
|
|
export default {
|
|
|
components: {
|
|
|
editorImage,
|
|
|
@@ -126,6 +137,7 @@ export default {
|
|
|
settingRecharge,
|
|
|
editorCoupon,
|
|
|
settingCoupon,
|
|
|
+ editorFixedNode,
|
|
|
|
|
|
materialManage
|
|
|
},
|
|
|
@@ -168,6 +180,7 @@ export default {
|
|
|
com: 'editorApplicationForm',
|
|
|
setCom: 'settingApplicationForm',
|
|
|
value: {
|
|
|
+ isFixedNode:false,
|
|
|
title: { value: '报名表', isShow: true },
|
|
|
database: '',
|
|
|
formItemList: [{
|
|
|
@@ -211,6 +224,7 @@ export default {
|
|
|
com: 'editorRecharge',
|
|
|
setCom: 'settingRecharge',
|
|
|
value: {
|
|
|
+ isFixedNode:false,
|
|
|
rechargeTitle:'在线充值线下使用有优惠',
|
|
|
mainColor:'#fe0419',
|
|
|
showSymbol:true,
|
|
|
@@ -232,6 +246,19 @@ export default {
|
|
|
btnBackground:['#009AFF','#3FBDFB'],
|
|
|
buttonName:'立即领取',
|
|
|
}
|
|
|
+ }, {
|
|
|
+ name: '悬浮节点',
|
|
|
+ key: 'fixedNode',
|
|
|
+ icon: 'l-youhuiquan.png',
|
|
|
+ hideShow:true,
|
|
|
+ com: 'editorFixedNode',
|
|
|
+ setCom: '',
|
|
|
+ isHover: true,
|
|
|
+ position: 'bottom',//left-top
|
|
|
+ value: {
|
|
|
+ type:null,
|
|
|
+ contentObj:{}
|
|
|
+ }
|
|
|
}],
|
|
|
view: [],
|
|
|
type: '',
|
|
|
@@ -335,8 +362,11 @@ export default {
|
|
|
return this.view.filter((item) => { return item.isHover == true })
|
|
|
},
|
|
|
clickType(val) {
|
|
|
- this.view.push(JSON.parse(JSON.stringify(val)))
|
|
|
+ let pushObj = JSON.parse(JSON.stringify(val))
|
|
|
+ pushObj.id = pushObj.key+(new Date().getTime())
|
|
|
+ this.view.push(pushObj)
|
|
|
this.position()
|
|
|
+ console.log(this.view)
|
|
|
},
|
|
|
deleteItem(e, index) {
|
|
|
e.preventDefault()
|
|
|
@@ -344,7 +374,15 @@ export default {
|
|
|
this.view.splice(index, 1)
|
|
|
this.isRight = false
|
|
|
this.propsData = {}
|
|
|
+ this.updataFixedNodeContent()
|
|
|
+ this.position()
|
|
|
+ },
|
|
|
+ deleteItemFixed(e, index) {
|
|
|
+ e.preventDefault()
|
|
|
+ e.stopPropagation()
|
|
|
+ this.view.splice(index, 1)
|
|
|
this.position()
|
|
|
+ this.selectType(this.view.filter(item=>{return item.id == this.propsData.id})[0])
|
|
|
},
|
|
|
selectType(val) {
|
|
|
this.isRight = false
|
|
|
@@ -356,10 +394,49 @@ export default {
|
|
|
},
|
|
|
updataContent(val) {
|
|
|
this.$set(this.view, val.index, JSON.parse(JSON.stringify(val)))
|
|
|
+ this.updataFixedNodeContent()
|
|
|
+ console.log('updataContent',this.view)
|
|
|
// this.view.forEach(item => {
|
|
|
// if(item.key==val.key&&item.index==val.index) item = JSON.parse(JSON.stringify(val))
|
|
|
// });
|
|
|
},
|
|
|
+ // 实时更新悬浮节点内容
|
|
|
+ updataFixedNodeContent(){
|
|
|
+ console.log('updataFixedNodeContent')
|
|
|
+ let fixedNode = this.view.filter(item=>{ return item.key=='fixedNode' })
|
|
|
+ if(fixedNode.length>0){
|
|
|
+ fixedNode.map(item=>{
|
|
|
+ let isHave = false
|
|
|
+ this.view.map(it=>{
|
|
|
+ if(it.id==item.value.contentObj.id) {
|
|
|
+ isHave=true
|
|
|
+ item.value.contentObj = it
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(!isHave) {
|
|
|
+ this.view = this.view.filter(it=>{return it.key!='fixedNode'||(it.key=='fixedNode' && it.value.contentObj.id != item.value.contentObj.id) })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 设置悬浮节点内容
|
|
|
+ setFixedNodeContent(val,type,isDelete){
|
|
|
+ if(isDelete){
|
|
|
+ this.view = this.view.filter(it=>{return it.key!='fixedNode'||(it.key=='fixedNode' && val.id != it.value.contentObj.id) })
|
|
|
+ console.log(this.view)
|
|
|
+ }else{
|
|
|
+ let fixedNode = this.view.filter(item=> item.key=='fixedNode')
|
|
|
+ if(fixedNode.length>0){
|
|
|
+ console.log('已存在悬浮节点')
|
|
|
+ fixedNode[0].value.contentObj = JSON.parse(JSON.stringify(val))
|
|
|
+ fixedNode[0].value.type = type
|
|
|
+ console.log('设置悬浮节点内容',this.view)
|
|
|
+ }else{
|
|
|
+ console.log('未存在悬浮节点')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
lookJson() {
|
|
|
this.$alert(JSON.stringify(this.view), 'JSON', {
|
|
|
confirmButtonText: '确定'
|
|
|
@@ -964,4 +1041,11 @@ ul p {
|
|
|
right: 20px;
|
|
|
z-index: 200;
|
|
|
}
|
|
|
+
|
|
|
+.bottom{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
</style>
|
xhj